∆

assets/styles.css

@@ -6,50 +6,41 @@
   /* Fluid Spacing */
   --pad: clamp(1rem, 2vw, 2.4rem);
   --half-pad: calc(var(--pad) * 0.5);
+  --double-pad: calc(var(--pad) * 2);
 
-  /* Colors */
-  --off-white: hsl(160, 30%, 97%);
-  --light-grey: hsl(160, 10%, 85%);
+  /* Common Colors */
   --green: hsl(160, 100%, 40%);
   --mid-green: hsl(160, 100%, 30%);
-  --dark-green: hsl(160, 30%, 10%);
   --dark-grey: hsl(160, 40%, 16%);
-  --off-black: hsl(160, 50%, 4%);
+  --deep-green: hsl(160, 100%, 10%);
 
   /* Light theme */
-  --page-bg: var(--off-white);
+  --page-bg: hsl(160, 30%, 97%);
   --main-bg: white;
   --main-shadow: #00000008;
   --text-color: var(--dark-grey);
   --link-color: var(--mid-green);
-  --nav-link-hover-bg: var(--off-white);
+  --nav-link-hover-bg: hsl(160, 50%, 90%);
+  --nav-link-border: hsl(160, 40%, 80%);
 }
 
 /* Dark theme */
 @media (prefers-color-scheme: dark) {
   :root {
-    --page-bg: var(--off-black);
-    --main-bg: var(--dark-green);
+    --page-bg: hsl(160, 50%, 4%);
+    --main-bg: hsl(160, 40%, 9%);
     --main-shadow: #000;
-    --text-color: var(--light-grey);
+    --text-color: hsl(160, 30%, 90%);
     --link-color: var(--green);
-    --nav-link-hover-bg: var(--off-black);
+    --nav-link-hover-bg: var(--dark-grey);
+    --nav-link-border: #0003;
   }
 }
 
 /* Wide layout */
 @media(min-width: 801px) {
   :root {
     --logo-width: 12em;
-    --nav-a-pad: .6em;
-  }
-}
-
-/* Narrow layout */
-@media(max-width: 800px) {
-  :root {
-    --logo-width: 8em;
-    --nav-a-pad: .15em;
   }
 }
 
@@ -67,7 +58,6 @@ body {
 
 main {
   display: inline-grid;
-  gap: var(--pad);
   padding: var(--pad);
   text-align: left;
   background: var(--main-bg);
@@ -81,8 +71,9 @@ main {
       "aside article";
     grid-template-rows: auto 1fr; /* Pull the aside up towards the top */
     grid-template-columns: var(--logo-width) auto; /* Set the header/aside width */
+    gap: var(--pad);
     margin: var(--pad);
-    border-radius: 3px;
+    border-radius: 2px;
   }
 }
 
@@ -92,18 +83,20 @@ main {
       "header"
       "article"
       "aside";
+    gap: var(--double-pad);
+    padding-bottom: var(--double-pad);
   }
 }
 
 header {
   grid-area: header;
   display: flex;
+  gap: var(--half-pad);
 }
 
 @media(min-width: 801px) { /* Wide layout */
   header {
     flex-flow: column;
-    gap: var(--half-pad);
   }
 }
 
@@ -112,78 +105,67 @@ header {
     text-align: right;
     flex-flow: row;
     justify-content: space-between;
+    align-items: flex-start;
   }
 }
 
-#logo {
-  width: var(--logo-width);
+@media(max-width: 800px) {
+  #logo {
+    width: 10em;
+  }
 }
 
 #logo img {
   width: 100%;
   height: auto;
   border-radius: 1px; /* For consistency with <a> style */
+  border-bottom: 5px solid var(--mid-green);
+  background: var(--green);
 }
 
 nav {
+  flex: 0 0 auto;
   display: inline-flex;
   flex-flow: column;
 }
 
 nav a {
+  border-bottom: 5px solid transparent;
   font-weight: 700;
-  text-underline-offset: 1px;
-  text-decoration-thickness: 2px;
 }
 
 @media(min-width: 801px) { /* Wide layout */
   nav a {
-    padding: var(--nav-a-pad) var(--half-pad);
+    padding: .7em 1em .5em;
   }
 }
 
 @media(max-width: 800px) { /* Narrow layout */
   nav a {
     align-self: end; /* Shrink the tappable area to just around the text */
-    padding: var(--nav-a-pad) var(--half-pad);
+    padding: .4em .6em .3em;
+    border-bottom-width: 4px;
   }
 }
 
 nav a:hover,
 nav a:active,
 nav a:focus {
+  text-decoration: none;
   background: var(--nav-link-hover-bg);
+  border-bottom-color: var(--nav-link-border);
 }
 
 #edit {
   display: flex;
   justify-content: space-between;
   gap: .5em;
-  margin: var(--nav-a-pad) 0 0;
-  border-bottom: 5px solid var(--mid-green);
-  color: white;
-  text-decoration: none;
+  margin-bottom: var(--half-pad);
+  border-bottom-color: var(--mid-green);
+  color: var(--deep-green);
   background: var(--green);
 }
 
-@media(min-width: 801px) {
-  #edit {
-    padding: .7em var(--half-pad) .5em;
-  }
-}
-
-@media(max-width: 800px) {
-  #edit {
-    padding: .4em var(--half-pad) .3em;
-    border-bottom-width: 4px;
-  }
-}
-
-#edit img {
-  display: inline-block;
-  vertical-align: text-bottom;
-}
-
 @media(max-width: 800px) {
   #edit img {
     order: -1;
@@ -216,15 +198,12 @@ aside section h1 {
 
 aside section ul {
   margin: 0;
-  padding: 0;
   padding-left: 1em;
 }
 
 article {
   grid-area: article;
-  flex: 0 1 auto;
-  max-width: 56em;
-  padding-left: 0;
+  max-width: 48em;
 }
 
 footer {
@@ -234,16 +213,15 @@ footer {
 }
 
 footer .cc0 img {
-  height: auto;
-  margin-left: .15em;
+  margin-right: .2em;
   vertical-align: -.3em;
 }
 
 footer .initials {
   display: inline-block;
   width: 40px;
   height: 40px;
-  border-radius: 40px;
+  border-radius: 20px;
   overflow: hidden;
 }
 
@@ -253,7 +231,8 @@ footer .initials {
 /* This angers the validator, but 🤷 seems fine, come at me! */
 title {
   display: block;
-  padding-bottom: .2em;
+  margin-bottom: .5em;
+  padding-bottom: .4em;
   border-bottom: 3px solid currentcolor;
   font-size: clamp(2em, 6vw, 3em);
   font-weight: 300;
@@ -262,7 +241,7 @@ title {
 }
 
 h1, h2 {
-  border-bottom: 2px solid currentcolor;
+  border-bottom: 1.5px solid currentcolor;
 }
 
 h1, h2, h3 {
@@ -295,12 +274,10 @@ ul {
 
 li {
   line-height: 1.3;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
 }
 
 li + li {
-  margin-top: .3em;
+  margin-top: .4em;
 }
 
 li a {