Merge pull request #108 from rpearce/feat/rm-subscribe

feat: rm subscribe and attempt to simplify some sections as a result
rpearce · Feb 12, 2023 · 8499a4b · 8499a4b
2 parents 1277663 + adfe22b
commit 8499a4b
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 156 deletions.
diff --git 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
@@ -23,18 +23,15 @@ 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;
   --textColor: #334249;
   --textLinkBorderColor: #287cb4;
   --textLinkColor: #287cb4;
   --textLinkHoverColor: #206592;
-  --textSubscribeLinkColor: #2676ac;
 }
 body.dark {
   --separatorColor: #424857;
@@ -47,19 +44,16 @@ 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);
   --secretGraphicHoverColor: rgba(255, 167, 196, 0.75);
   --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
@@ -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
diff --git a/src/templates/nav.html b/src/templates/nav.html
@@ -1,8 +1,7 @@
 <nav class="nav">
   <div class="layout--constrained" data-nav-wrap>
     <a class="nav__link nav__skip" href="#content">Skip to content</a>
-    <a class="nav__link" href="/">Home</a>
-    <a class="nav__link" href="/atom.xml">atom</a>
-    <a class="nav__link" href="/rss.xml">rss</a>
+    <a class="nav__link" href="./">Home</a>
+    <a class="nav__link" href="./atom.xml">RSS</a>
   </div>
 </nav>
diff --git a/src/templates/post.html b/src/templates/post.html
@@ -15,6 +15,17 @@ <h1>$title$</h1>
   </article>
 </main>
 
-<footer>
-  $partial("templates/subscribe.html")$
+<footer class="section--padded">
+  <div class="layout--constrained">
+    <ul role="list">
+      <li role="listitem">
+        <span aria-hidden="true">♥</span>
+        <a href="https://github.com/sponsors/rpearce/">Sponsor my work</a>
+        <span aria-hidden="true">♥</span>
+      </li>
+      <li role="listitem">
+        <a href="./atom.xml">RSS</a>
+      </li>
+    </ul>
+  </div>
 </footer>
diff --git a/src/templates/subscribe.html b/src/templates/subscribe.html