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