From adfe22b3b6f8f54dfe1ccf068c6da3af13b8f579 Mon Sep 17 00:00:00 2001 From: "Robert W. Pearce" Date: Sun, 12 Feb 2023 22:38:28 +1300 Subject: [PATCH] feat: rm subscribe and attempt to simplify some sections as a result --- src/css/article.css | 20 +++++++ src/css/default.css | 108 ++++++----------------------------- src/css/home.css | 5 +- src/index.html | 72 +++++++++++------------ src/templates/nav.html | 5 +- src/templates/post.html | 15 ++++- src/templates/subscribe.html | 19 ------ 7 files changed, 88 insertions(+), 156 deletions(-) delete mode 100644 src/templates/subscribe.html diff --git a/src/css/article.css b/src/css/article.css index bc72be8d..2b2b0b0c 100644 --- a/src/css/article.css +++ b/src/css/article.css @@ -1,10 +1,14 @@ body.light { --deepBgColor: #011627; + --footerBgColor: #f5f5f5; + --footerLinkColor: #2676ac; --h1Color: currentColor; --headerBgColor: #C4DFFF; } body.dark { --deepBgColor: #011627; + --footerBgColor: #373c49; + --footerLinkColor: #ffa7c4; --h1Color: var(--textColor); --headerBgColor: var(--deepBgColor); } @@ -113,6 +117,22 @@ article > header small { } } +/* FOOTER */ + +footer { + background-color: var(--footerBgColor); +} +footer ul { + display: flex; + justify-content: center; + list-style-type: none; +} +footer li { + margin: 0 0.75em; +} +footer a[href] { + color: var(--footerLinkColor); +} /* IFRAME*/ diff --git a/src/css/default.css b/src/css/default.css index 06727c3d..91e8b8f4 100644 --- a/src/css/default.css +++ b/src/css/default.css @@ -23,10 +23,8 @@ body.light { --inlineCodeBgColor: rgba(255, 229, 100, 0.2); --inlineCodeColor: #1a1a1a; --inputBgColor: #fff; - --inputBorderColor: #ccc; --inputBorderColorFocus: #82aaff; --inputColor: #334249; - --offsetSectionBgColor: #f5f5f5; --secretGraphicColor: #1a1a1a; --secretGraphicHoverColor: #206592; --separatorColor: #f2f2f2; @@ -34,7 +32,6 @@ body.light { --textLinkBorderColor: #287cb4; --textLinkColor: #287cb4; --textLinkHoverColor: #206592; - --textSubscribeLinkColor: #2676ac; } body.dark { --separatorColor: #424857; @@ -47,10 +44,8 @@ body.dark { --inlineCodeBgColor: rgba(115, 124, 153, 0.2); --inlineCodeColor: #e2e4e9; --inputBgColor: #282c35; - --inputBorderColor: #282c35; --inputBorderColorFocus: #82aaff; --inputColor: #fff; - --offsetSectionBgColor: #373c49; --secretGraphicBorderLeftColor: #ffa7c4; --secretGraphicBorderLeftColor: #ffa7c4; --secretGraphicColor: hsla(0, 0%, 100%, 0.88); @@ -58,8 +53,7 @@ body.dark { --textColor: hsla(0, 0%, 100%, 0.88); --textLinkBorderColor: #ffa7c4; --textLinkColor: rgb(255, 167, 196); - --textLinkHoverColor: rgba(255, 167, 196, 0.75); - --textSubscribeLinkColor: #ffa7c4; + --textLinkHoverColor: rgba(255, 167, 196, 0.8); } body { font-family: Verdana, Helvetica, Arial, sans-serif; @@ -112,78 +106,22 @@ img { figcaption { font-size: 0.813rem; } -.section--padded { - padding: 2em 0; -} -.layout--constrained { - position: relative; - width: 600px; - margin-left: auto; - margin-right: auto; -} -/* SUBSCRIBE */ +/* Utils */ -.subscribe { - background-color: var(--offsetSectionBgColor); -} -.subscribe__header { - margin-bottom: 0.5em; - font-size: 1.643rem; - font-weight: 400; - line-height: 1.2; -} -.subscribe__form { - margin: 1em 0; -} -.subscribe__section { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-justify-content: space-between; - -moz-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - -ms-flex-pack: space-between; -} -.subscribe__input { - -webkit-box-flex: 1; - -moz-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - margin-right: 1em; - padding: 0.75em; - border-radius: 3px; - border: 3px solid var(--inputBorderColor); - background-color: var(--inputBgColor); - color: var(--inputColor); - font-size: 1rem; - outline: 0; -} -.subscribe__input:focus { - border-color: var(--inputBorderColorFocus); -} -a[href].subscribe__link { - color: var(--textSubscribeLinkColor); +.section--padded { + padding: 2em 0; } -.subscribe__submit { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: var(--btnBgColor); - border: none; - color: var(--btnTextColor); - padding: 1em; - font-weight: bold; - border-radius: 3px; +.layout--constrained { + position: relative; + width: 600px; + margin-left: auto; + margin-right: auto; } .visually-hidden:not(:focus):not(:active) { position: absolute !important; - width: 0.01em !important; - height: 0.01em !important; + width: 1px !important; + height: 1px !important; margin: 0 !important; padding: 0 !important; border: none !important; @@ -193,12 +131,11 @@ a[href].subscribe__link { clip-path: inset(50%) !important; white-space: nowrap !important; } + +/* Theme toggle */ + .toggle { position: absolute; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; display: flex; top: 1em; right: 1em; @@ -216,7 +153,6 @@ a[href].subscribe__link { } .nav .toggle { top: 50%; - -webkit-transform: translateY(-50%); transform: translateY(-50%); } .toggle__day, @@ -231,6 +167,8 @@ a[href].subscribe__link { .toggle.toggle--off .toggle__night { opacity: 0.4; } + +/* Responsive */ @media (max-width: 667px) { body { font-family: Helvetica, Arial, sans-serif; @@ -240,18 +178,4 @@ a[href].subscribe__link { margin-left: 1.3125rem; margin-right: 1.3125rem; } - - /* SUBSCRIBE */ - - .subscribe__section { - display: block; - } - .subscribe__input { - width: 100%; - margin-right: 0; - } - .subscribe__submit { - width: 100%; - margin: 1em 0; - } } diff --git a/src/css/home.css b/src/css/home.css index f886ec18..faeb5a4f 100644 --- a/src/css/home.css +++ b/src/css/home.css @@ -49,12 +49,13 @@ } .reviews__header, .posts__header { - margin-bottom: 0.5em; + margin-bottom: 0.75em; font-size: 1.643rem; font-weight: 400; line-height: 1.2; } -.reviews__header:before { +.reviews__header::before, +.posts__header::before { content: ""; display: block; height: 0; diff --git a/src/index.html b/src/index.html index b92d26a3..a73f1ca4 100644 --- a/src/index.html +++ b/src/index.html @@ -21,9 +21,8 @@

Senior Software Developer

GitHub LinkedIn - dribbble - atom - rss + RSS + Sponsor my work
@@ -92,8 +91,6 @@

Recommendations

- $partial("templates/subscribe.html")$ -

Blog Posts

@@ -108,39 +105,38 @@

Blog Posts

-
- - + New Zealand + Outline of the country of New Zealand + + + + + + + + + +
+ $endif$ diff --git a/src/templates/nav.html b/src/templates/nav.html index f06edade..a59cc997 100644 --- a/src/templates/nav.html +++ b/src/templates/nav.html @@ -1,8 +1,7 @@ diff --git a/src/templates/post.html b/src/templates/post.html index bce6174e..c0dae344 100644 --- a/src/templates/post.html +++ b/src/templates/post.html @@ -15,6 +15,17 @@

$title$

-