Restyle figures & captions, fix scroll issue

Closes #32 (closed) and #31 (closed). Restyles figures with a subtle background to tie captions to them visually.

Signed-off-by: Georgia Stuart georgia.stuart@gmail.com

assets/css/main.css

@@ -45,6 +45,10 @@
     @apply text-zinc-900 dark:text-zinc-50;
 }
 
+.text-default-color-dim {
+    @apply text-zinc-600 dark:text-zinc-300;
+}
+
 .text-main-color {
     @apply text-main dark:text-main-dark;
 }
@@ -349,3 +353,24 @@ mark {
 .content-width {
     @apply lg:max-w-5xl;
 }
+
+figure {
+    @apply p-4 mx-4 w-full flex justify-center;
+}
+
+figure > .figure-inner {
+    @apply max-w-full;
+    @apply p-4 pb-2 rounded-lg bg-zinc-100 dark:bg-zinc-700 border border-color;
+}
+
+.figure-inner > figcaption {
+    @apply mt-2 italic text-sm text-default-color-dim mb-0 pb-0;
+}
+
+.caption-text p {
+    @apply pb-0 mb-0;
+}
+
+.caption-text h4 {
+    @apply not-italic font-display text-accent-color py-0;
+}