Refine article spacing and shared border styling

This introduces a shared border-radius variable and uses it for repeated rounded
UI elements, making future visual adjustments easier.

It also tightens paragraph spacing, improves blockquote padding, gives article
headings a stronger accent colour, and adds a little more space below the table
of contents so article layouts breathe better.

1 files changed, 16 insertions, 8 deletions

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index 517b9ce..ddc2cac 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -53,6 +53,8 @@ CUSTOM PROPERTIES
   --column-min-width: calc(1/3 * 100vw);
   --column-max-width: 100%;
 
+  --default-border-radius: 0.5rem;
+
   --breakout-xxs: 2rem;
   --breakout-xs: 4rem;
   --breakout-sm: 8rem;
@@ -219,7 +221,7 @@ blockquote {
   font-style: italic;
   border-left: 2px solid var(--blue);
   margin: 1em 0 1em 0.5em;
-  padding-left: 0.5em;
+  padding-left: 1rem;
 }
 
 /* --- Lists --- */
@@ -450,7 +452,7 @@ article {
         div {
           align-items: center;
           border: 1px solid var(--foreground);
-          border-radius: 0.5rem;
+          border-radius: var(--default-border-radius);
           display: flex;
           flex-direction: row;
         }
@@ -489,11 +491,12 @@ article {
     /* --- TOC --- */
     & > nav {
       border: 1px solid var(--foreground);
-      border-radius: 0.5rem;
+      border-radius: var(--default-border-radius);
       font-size: 1rem;
       line-height: 1.4;
       padding: 0.75rem;
       max-width: calc(1 / 3 * 100%);
+      margin-bottom: 1.5rem;
 
       & > p {
         color: var(--blue);
@@ -538,15 +541,20 @@ article {
     max-inline-size: var(--measure);
 
     & + p {
-      margin-top: 2rem;
+      margin-top: 1.25rem;
     }
   }
 
-  & > h3:not(:first-of-type) {
+  & h3:not(:first-of-type) {
     margin-top: 2rem;
   }
 
+  & h3 {
+    color: var(--green);
+  }
+
   & > footer {
+    margin-top: 1.5rem;
     color: var(--dim-foreground);
     font-style: italic;
     margin-top: 1.5rem;
@@ -626,7 +634,7 @@ nav:is(
   ol {
     align-items: center;
     border: 1px solid var(--foreground);
-    border-radius: 0.5rem;
+    border-radius: var(--default-border-radius);
     display: flex;
     flex-direction: row;
     gap: 0.25rem;
@@ -646,7 +654,7 @@ nav:is(
   }
 
   & a {
-    border-radius: 0.5rem;
+    border-radius: var(--default-border-radius);
 
     &:hover,
     &[aria-current="page"]:hover {
@@ -738,8 +746,8 @@ img {
   }
 
   &.breakout-full {
-    width: 100vw;
     margin-left: calc(50% - 50vw);
+    width: 100vw;
   }
 
   &.breakout-xxs,