From a93e625ad207720c68b9e45e04c368ca8dfc1c36 Mon Sep 17 00:00:00 2001
From: Wynn Wolf Arbor
Date: Sat, 30 May 2020 13:55:33 +0200
Subject: css: Add styling for figures

The figure (and figcaption) elements have not been used before. The
upcoming post will include them, and this commit adds a bit of styling
to make them look nice.

Use a more muted color and a smaller font for caption text itself and
provide a "round" class for any image element in a figure, which should
help with making darker images less jarring.
---
 scss/style.scss | 13 +++++++++++++
 1 file changed, 13 insertions(+)

(limited to 'scss')

diff --git a/scss/style.scss b/scss/style.scss
index 0e40008..8cbe892 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -10,6 +10,7 @@ $font-size-pre: 85%;
 $yellow: #ffd400;
 $canary: #ffffc3;
 $canary-text: #191900;
+$mute-text: #5a5a5a;
 
 body {
 	background-color: white;
@@ -149,3 +150,15 @@ article {
 		font-weight: bold;
 	}
 }
+
+figure {
+	figcaption {
+		color: $mute-text;
+		text-align: center;
+		font-size: smaller;
+
+		padding-top: .5em;
+	}
+
+	> img.round { border-radius: 5px; }
+}
-- 
cgit v1.2.3-2-gb3c3