css: style figures, subtitle and add background for imgs

1 files changed, 28 insertions, 3 deletions

diff --git a/html/style.css b/html/style.css
index 419c901..f472ff6 100644
--- a/html/style.css
+++ b/html/style.css
@@ -97,7 +97,6 @@ dd {
   margin: 0;
 }
 
-/* Make default font-size 1rem and add smooth scrolling to anchors */
 html {
   font-size: 1.4rem;
   scroll-behavior: smooth;
@@ -116,6 +115,7 @@ body {
   counter-reset: theorem;
   counter-reset: definition;
   counter-reset: sidenote-counter;
+  counter-reset: figure;
 
   color: #eceff4;
   background-color: #2e3440;
@@ -151,6 +151,8 @@ a:focus {
 img {
   max-width: 100%;
   display: block;
+  /* useful for images with transparent backgrounds */
+  background-color: white;
 }
 
 /* Inherit fonts for inputs and buttons */
@@ -317,7 +319,7 @@ dd {
 }
 
 /* Center align author name, use small caps and add vertical spacing  */
-.author {
+.author, .subtitle {
   margin: 0.85rem 0;
   font-variant-caps: small-caps;
   text-align: center;
@@ -537,9 +539,11 @@ blockquote .sidenote, blockquote .marginnote {
   text-align: left;
 }
 
+/*
 .marginnote > code, .sidenote > code {
   font-size: 1rem;
 }
+*/
 
 input.margin-toggle {
   display: none;
@@ -553,7 +557,28 @@ label.margin-toggle:not(.sidenote-number) {
   display: none;
 }
 
-@media (max-width: 165ch) {
+figure {
+  counter-increment: figure;
+  text-align: center;
+  margin: 2em 0;
+}
+
+figure > img {
+  margin: auto;
+  padding: 1em;
+}
+
+figure figcaption {
+  font-size: 0.9em;
+  font-style: italic;
+}
+
+figure figcaption::before {
+  content: 'Figure ' counter(figure) ': ';
+  color: #abb9cf;
+}
+
+@media (max-width: 110rem) {
   body {
     padding: 2rem 1.25rem;
     max-width: 80ch;