Refine article and figure spacing

This simplifies article header spacing so the title area and table of contents
align more predictably.

It also normalizes figure margins, improves figure behaviour after paragraphs,
and lets floated figures keep the same vertical rhythm as other figures.

1 files changed, 10 insertions, 8 deletions

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index 60e5887..7022b74 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -448,16 +448,16 @@ article {
     flex-direction: row;
     align-items: start;
     justify-content: space-between;
-
-    &:not(:has(nav)) {
-      margin-bottom: 2rem;
-    }
+    margin-bottom: 2rem;
 
     & > div {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
-      max-width: calc(2 / 3 * 100%);
+
+      :has(& > nav) {
+        max-width: calc(2 / 3 * 100%);
+      }
 
       /* --- Article metadata --- */
       & > dl {
@@ -516,7 +516,6 @@ article {
       line-height: 1.4;
       padding: 0.75rem;
       max-width: calc(1 / 3 * 100%);
-      margin-bottom: 1.5rem;
 
       & > p {
         color: var(--blue);
@@ -730,14 +729,14 @@ figure:not(.trail) {
   max-width: 100%;
   border: 1px solid var(--foreground);
   border-radius: var(--default-border-radius);
-  margin: 0.75rem 0 0 0;
+  margin: 1rem 0;
   padding: 0.75rem;
 
   &:has(+ h3) {
     margin-top: 2rem;
   }
 
-  &:has(+ p + *) {
+  &:not(p + figure):has(+ p + *) {
     margin-top: 0;
   }
 
@@ -801,6 +800,7 @@ figure:not(.trail) {
     dl {
       font-size: inherit;
       line-height: inherit;
+      font-style: italic;
       margin-bottom: 0;
       margin-top: 0.5rem;
     }
@@ -829,11 +829,13 @@ img.round {
   &.left {
     float: left;
     margin-right: 0.75rem;
+    margin-top: 0;
   }
 
   &.right {
     float: right;
     margin-left: 0.75rem;
+    margin-top: 0;
   }
 
   &.w25 {