Restyle headings

This patch tries to add a second font to the mix which is used for
headings. It gives a bit more visual distinction between the body and
the headings.

In addition, there's now a style for h3 elements.

In the process, the style got revamped a bit, as the selectors were a
bit messy.

2 files changed, 505 insertions, 20 deletions

diff --git a/static/sass/main.scss b/static/sass/main.scss
index ff3f04a..6981424 100644
--- a/static/sass/main.scss
+++ b/static/sass/main.scss
@@ -17,6 +17,7 @@
 
 $font-prefix: '../fonts' !default;
 @import "plex/ibm-plex.scss";
+@import "source-serif.scss";
 
 $link-color: #35317A;
 $link-hover-color: #0C00E0;
@@ -64,9 +65,6 @@ pre, code, tt {
 .topmost {
   margin-top: 0px;
 }
-h1.topmost {
-  text-align: center;
-}
 
 /* Styling for the article list */
 .article-list {
@@ -77,8 +75,7 @@ h1.topmost {
     font-size: 13pt;
   }
 
-  h1 {
-    font-size: 25pt;
+  h2 {
     /* There is enough margin around the paragraphs */
     margin: 0;
     a {
@@ -104,6 +101,29 @@ h1.topmost {
   }
 }
 
+/* Heading style, applies for articles as well as pages */
+h1 {
+  font-family: "Source Serif 4 Caption";
+  font-weight: 700;
+  font-size: 33pt;
+  text-align: center;
+  margin-bottom: 10px;
+}
+h2 {
+  font-family: "Source Serif 4 Subhead";
+  font-weight: 700;
+  font-size: 25pt;
+  margin-bottom: 25px;
+  margin-top: 50px;
+}
+h3 {
+  font-family: "Source Serif 4";
+  font-weight: 700;
+  font-size: 19pt;
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+
 /* Styling for a single article */
 .article {
   .article-meta {
@@ -114,16 +134,6 @@ h1.topmost {
     font-size: 13pt;
   }
 
-  h1 {
-    text-align: center;
-    font-size: 30pt;
-    margin-bottom: 10px;
-  }
-
-  h2 {
-    margin-top: 1.6em;
-  }
-
   .content p, .content li {
     line-height: $line-height;
     hyphens: auto;
@@ -154,11 +164,6 @@ div.section:has(p.asterism) + div h2 {
   margin-top: 0px;
 }
 
-/* Styling for a page (reuses a lot of the article style) */
-.page h1 {
-  margin-top: 0;
-}
-
 /* Styling for article tags */
 ul.tags {
   list-style-type: none;
diff --git a/static/sass/source-serif.scss b/static/sass/source-serif.scss
new file mode 100644
index 0000000..2d57e57
--- /dev/null
+++ b/static/sass/source-serif.scss
@@ -0,0 +1,480 @@
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-LightIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-Black.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-Light.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-It.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-ExtraLightIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-ExtraLightIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-BoldIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-ExtraLight.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-BoldIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-BlackIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-BoldIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-LightIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-Black.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-Light.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-Bold.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-Semibold.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-Semibold.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-Bold.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-Light.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-Bold.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-ExtraLightIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-BlackIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-SemiboldIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-Black.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-Semibold.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-BlackIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-SemiboldIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-SemiboldIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-Regular.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-Regular.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-Regular.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-ExtraLight.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-It.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-Light.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-SemiboldIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-BlackIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-LightIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-Semibold.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-ExtraLight.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-Bold.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-Bold.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-SemiboldIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-Light.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-ExtraLight.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-Regular.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-Semibold.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-It.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-LightIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-Black.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-BlackIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-LightIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-It.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Display-It.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Display";
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-Regular.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-ExtraLight.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Caption-Black.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Caption";
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4Subhead-ExtraLightIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Subhead";
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-BoldIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4-BoldIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4";
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}
+@font-face{
+    src: url("../fonts/SourceSerif/SourceSerif4SmText-ExtraLightIt.otf.woff2") format("woff2");
+    font-family: "Source Serif 4 Sm";
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+    font-stretch: normal;
+}