From 5b1f9e7d082f3c9eeda31f80f0bcffe475082aaa Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 25 Sep 2022 08:34:54 -0700
Subject: [PATCH] Move the figure styles to root.css

---
 static/styles/main.css | 36 ------------------------------------
 static/styles/root.css | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/static/styles/main.css b/static/styles/main.css
index 2385c9e..c02dc1b 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -51,42 +51,6 @@ blockquote {
     margin-inline-start: 2rem;
 }
 
-figcaption h4 {
-    margin-bottom: 0;
-}
-
-figure {
-    border-radius: 0.5rem;
-    display: inline-block;
-    margin: 0;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
-}
-
-figure a,
-figure a:hover {
-    border: 0;
-}
-
-figure img {
-    border-radius: 0.5rem;
-    height: auto;
-    max-width: 100%;
-    margin-bottom: -3px;
-}
-
-figure + p {
-    margin-top: 1rem;
-}
-
-figure .youtube {
-    line-height: 1;
-    overflow: hidden;
-    width: var(--body-width);
-}
-
 figure.bordered {
     padding: 0.5rem;
     border: 2px solid #eee;
diff --git a/static/styles/root.css b/static/styles/root.css
index b26b910..ce47a66 100644
--- a/static/styles/root.css
+++ b/static/styles/root.css
@@ -57,6 +57,43 @@ body {
     line-height: 1.2;
 }
 
+figcaption {
+    font-size: 75%;
+    margin-block-start: 0.2em;
+    text-align: center;
+}
+
+figure {
+    border-radius: 6px;
+    display: inline-block;
+    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
+    overflow: hidden;
+    max-width: var(--content-width);
+    width: 100%;
+}
+
+figure a,
+figure a:hover {
+    border: 0;
+}
+
+figure img {
+    border-radius: 6px;
+    height: auto;
+    max-width: var(--content-width);
+    width: 100%;
+}
+
+figure .youtube {
+    border-radius: 6px;
+    line-height: 1;
+    overflow: hidden;
+    max-width: var(--content-width);
+    width: 100%;
+}
+
 h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-family-heading);
     margin: 0;