feat: improve consistency of styling

Mostly done through writing macro for templating articles

1 files changed, 94 insertions, 64 deletions

diff --git a/sass/style.scss b/sass/style.scss
index 1645ee2..c6004b8 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -16,6 +16,34 @@ html {
   background-color: var(--fg);
 }
 
+ul.simple {
+  list-style: none;
+}
+
+a {
+  color: var(--aqua);
+
+  &:visited {
+    color: var(--aqua-dim);
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:active {
+    background: var(--orange-dim);
+  }
+}
+
+nav a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 body {
   height: 100%;
   width: 100%;
@@ -25,86 +53,88 @@ body {
   margin: 0 auto 1;
   line-height: 1.4;
   align-self: center;
-}
-
-body > header > nav {
-  display: flex;
-
-  h1 {
-    display: flex;
-  }
 
-  ul {
+  & > header > nav {
     display: flex;
-    margin-left: auto;
-    column-gap: 1rem;
 
-    list-style: none;
-
-    li {
+    & > * {
       display: flex;
       align-items: center;
     }
-  }
-
-  a,
-  a:visited {
-    font-size: 1.2rem;
-    color: var(--gray);
-    font-weight: bold;
-    text-decoration: none;
-  }
-
-  a.active {
-    color: var(--orange-dim);
-  }
 
-  a:hover {
-    text-decoration: underline;
-  }
-}
+    & > ul {
+      margin-left: auto;
+      column-gap: 1rem;
+      list-style: none;
 
-article,
-aside,
-main,
-nav,
-section {
-  header {
-    h1 {
-      color: var(--orange);
-      margin-bottom: 0;
-      + * {
-        color: var(--gray-dim);
-        margin-top: 0;
+      & > li {
+        display: flex;
+        align-items: center;
       }
     }
 
-    nav {
-      text-align: left;
-      font-size: 0.9rem;
-      margin-bottom: 2rem;
+    a,
+    a:visited {
+      font-size: 1.2rem;
+      color: var(--gray);
+      font-weight: bold;
+
+      &.active {
+        color: var(--orange-dim);
+      }
     }
   }
-}
 
-footer {
-  text-align: center;
-  font-size: 0.8rem;
-  margin-top: auto;
-}
+  article,
+  aside,
+  main,
+  nav,
+  section {
+    & > header {
+      & > hgroup > {
+        :first-child {
+          color: var(--orange);
+          margin-bottom: 0;
+        }
+
+        :not(:first-child) {
+          color: var(--gray-dim);
+          margin-top: 0;
+          margin-bottom: 0;
+        }
+      }
 
-a {
-  color: var(--aqua);
-}
+      & > footer {
+        color: var(--gray);
+        font-size: 0.8rem;
 
-a:visited {
-  color: var(--aqua-dim);
-}
+        & > * {
+          display: inline;
+        }
 
-a:hover {
-  text-decoration: none;
-}
+        & > time {
+          text-decoration: underline;
+        }
+      }
+
+      & > nav {
+        text-align: left;
+        font-size: 0.9rem;
+      }
+    }
+
+    & > ul > li > article a {
+      color: var(--blue);
 
-a:active {
-  background: var(--orange-dim);
+      a:visited {
+        color: var(--blue-dim);
+      }
+    }
+  }
+
+  & > footer {
+    text-align: center;
+    font-size: 0.8rem;
+    margin-top: auto;
+  }
 }