From 299159ab2b4b1488cfc99e38c921e35d61a1264a Mon Sep 17 00:00:00 2001
From: Kevin J Hoerr <kjhoerr@protonmail.com>
Date: Fri, 18 Nov 2022 17:57:24 -0500
Subject: Refactor components and styles to be consistent

---
 src/styles/BlockAnchor.ts | 21 +++++++++++++++++++++
 src/styles/BlockBody.ts   | 27 +++++++++++++++++++++++++++
 src/styles/BlockHeader.ts | 12 ++++++++++++
 src/styles/Content.ts     |  8 ++++++++
 src/styles/Footer.ts      | 13 +++++++++++++
 src/styles/index.ts       |  7 +++++++
 6 files changed, 88 insertions(+)
 create mode 100644 src/styles/BlockAnchor.ts
 create mode 100644 src/styles/BlockBody.ts
 create mode 100644 src/styles/BlockHeader.ts
 create mode 100644 src/styles/Content.ts
 create mode 100644 src/styles/Footer.ts
 create mode 100644 src/styles/index.ts

(limited to 'src/styles')

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 };
-- 
cgit