summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorWynn Wolf Arbor2020-05-30 13:55:33 +0200
committerWynn Wolf Arbor2020-05-31 20:54:16 +0200
commita93e625ad207720c68b9e45e04c368ca8dfc1c36 (patch)
treededdf030c26ae76158cc0d4c41d7dfd3261a4472
parentfde2230797ced366290c17dcbffd74615f2f6c5d (diff)
downloadsite-a93e625ad207720c68b9e45e04c368ca8dfc1c36.tar.gz
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.
-rw-r--r--scss/style.scss13
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; }
+}