6 files changed, 88 insertions, 0 deletions
diff --git a/src/styles/BlockAnchor.ts b/src/styles/BlockAnchor.ts
new file mode 100644
index 0000000..05eb2a2
--- /dev/null
+++ b/src/styles/BlockAnchor.ts
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+export default styled.a`
+  padding: 8px;
+  width: 328px;
+  display: block;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #666;
+  &:visited,
+  &:active {
+    padding: 8px;
+    width: 328px;
+    display: block;
+    text-align: center;
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    color: #666;
+  }
+`;
diff --git a/src/styles/BlockBody.ts b/src/styles/BlockBody.ts
new file mode 100644
index 0000000..7791873
--- /dev/null
+++ b/src/styles/BlockBody.ts
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import BlockAnchor from "./BlockAnchor";
+
+export default styled.div`
+  & + & {
+    margin-top: 3px;
+  }
+
+  background-color: #fff;
+  border: 1px #000 solid;
+  border-left: 3px #000 solid;
+  border-right: 3px #000 solid;
+
+  padding: ${(props) => props.theme.padding ?? "0"};
+
+  & > ${BlockAnchor} {
+    &:hover {
+      background-color: #ddd;
+      color: #222;
+    }
+  }
+  &:last-child,
+  &:last-child > ${BlockAnchor} {
+    border-bottom-left-radius: 18px;
+    border-bottom-right-radius: 18px;
+  }
+`;
diff --git a/src/styles/BlockHeader.ts b/src/styles/BlockHeader.ts
new file mode 100644
index 0000000..eb6fe93
--- /dev/null
+++ b/src/styles/BlockHeader.ts
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export default styled.div`
+  background-color: #000;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 36px;
+  font-weight: bold;
+  margin-top: 3px;
+  padding-top: 4px;
+`;
diff --git a/src/styles/Content.ts b/src/styles/Content.ts
new file mode 100644
index 0000000..388e12f
--- /dev/null
+++ b/src/styles/Content.ts
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export default styled.div`
+  width: 350px;
+  margin: 0px auto;
+  margin-bottom: 120px;
+  padding-top: 136px;
+`;
diff --git a/src/styles/Footer.ts b/src/styles/Footer.ts
new file mode 100644
index 0000000..a121b68
--- /dev/null
+++ b/src/styles/Footer.ts
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export default styled.div`
+  width: 100%;
+  position: fixed;
+  left: 0px;
+  bottom: 0px;
+  text-align: center;
+  font-size: 12px;
+  span {
+    background-color: #e1e1e1;
+  }
+`;
diff --git a/src/styles/index.ts b/src/styles/index.ts
new file mode 100644
index 0000000..8eee62a
--- /dev/null
+++ b/src/styles/index.ts
@@ -0,0 +1,7 @@
+import BlockAnchor from "./BlockAnchor";
+import BlockBody from "./BlockBody";
+import BlockHeader from "./BlockHeader";
+import Content from "./Content";
+import Footer from "./Footer";
+
+export { BlockAnchor, BlockBody, BlockHeader, Content, Footer };