From 1bbecf5d56f103784aa32c550c87048090da0ec1 Mon Sep 17 00:00:00 2001 From: Kevin Hoerr Date: Fri, 18 Nov 2022 19:56:28 -0500 Subject: Site updates (#1) * Add current page as reference * Upgrade dependencies: Gatsby 5.0.1 * Refactor components and styles to be consistent * Switch tense of BlockBody prop * Remove header on stylesheet * move timestamp to package version * Commit public dir for use with static site builders * Remove 1.0.7 file ref --- 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 +++ src/styles/main.css | 113 ++++++++++------------------------------------ 7 files changed, 113 insertions(+), 88 deletions(-) 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..8fb655e --- /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.link ? "0" : "4px 8px")}; + + & > ${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 }; diff --git a/src/styles/main.css b/src/styles/main.css index 4553a42..f1b50d3 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,104 +1,41 @@ -/** https://submelon.tech/res/css/main.css - * Main stylesheet for submelon.tech website. - * Author: Kevin J Hoerr - */ body { - background-color: #e1e1e1; /* #e1e1e1, #d5d5d5 */ + background-color: #e1e1e1; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAGXpUWHRUaXRsZQAACNdLSkzOTi/KL81LAQAWSwQhPQTyzQAAABt6VFh0QXV0aG9yAAAI1/NOLcvMU/DITy0qAgAYDwQeUS3vvwAAAZNJREFUeNrt3bFtQ0EMREH5x+q/M3Wi3IJaMGR7yHtbwCWDBY4J+fV4PL5vH879fr9tz/P5/JV3rzAcjI+DhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhDHglxXG/+RdjisMB2N1QyZirAWZirESZDLGOpDpGKtANmCsAdmCsQJkE8Z4kG0Yo0E2YowF2YoxEmQzxjiQ7RijQE7AGANyCsYIkJMweJDTMGiQEzFYkFMxSJCTMTiQ0zEokDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAGTuph/E3e5bjCcDBGNOS03fRXGA4GDXLq1YYrDAeDBDn9nskVhoNBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYTxs7wA+yQwVSKvoHMAAAAASUVORK5CYII=); background-repeat: repeat; - font-family: Verdana; - font-size: 16px; + font-display: serif; + font-family: Merriweather, serif; + font-size: 16px } + ::selection { background-color: #999; - color: #fff; -} -div#content { - width: 350px; - margin: 0px auto; - margin-bottom: 120px; - padding-top: 136px; -} -div#header { - margin: 0px 5px; - text-align: center; - pointer-events: none; - user-select: none; -} -div#tagline { - background-color: #000; - width: 100%; - text-align: center; - color: #fff; - font-size: 36px; - font-weight: bold; -} -div#info { - padding: 4px 8px; -} -div#info a, -div#info a:visited, -div#info a:hover { - text-decoration: none; - color: #000; - padding: 1px 3px; -} -div#info a, -div#info a:visited { - background-color: #e1e1e1; -} -div#info a:hover { - background-color: #d5d5d5; + color: #fff } -div#info, -div.link { - background-color: #fff; - border: 1px #000 solid; - border-left: 3px #000 solid; - border-right: 3px #000 solid; -} -div.link, -div#tagline { - margin-top: 3px; -} -div.link > a, -div.link > a:visited, -div.link > a:active { - padding: 8px; - width: 328px; - display: block; - text-align: center; - text-decoration: none; - color: #666; -} -div.link:hover { - background-color: #ddd; - color: #222; -} -div.link:last-child, -div.link:last-child > a { - border-bottom-left-radius: 18px; - border-bottom-right-radius: 18px; -} -q, + +em, p, -em { +q { display: block; - text-indent: 28px; + text-indent: 28px } p { - margin: 0px 0px 16px; + margin: 0 0 16px } -div#meta { - width: 100%; - position: fixed; - left: 0px; - bottom: 0px; - text-align: center; - font-size: 12px; +p>a, +p>a:hover, +p>a:visited { + color: #000; + padding: 1px 3px; + text-decoration: none } -div#meta > span { - background-color: #e1e1e1; + +p>a, +p>a:visited { + background-color: #e1e1e1 } + +p>a:hover { + background-color: #d5d5d5 +} \ No newline at end of file -- cgit