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.

1 files changed, 13 insertions, 0 deletions

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; }
+}