CSS: footnote and h3

Author: Bromeon

website/src/css/main.css

@@ -65,6 +65,9 @@
 
     h3 {
         @apply text-2xl;
+        font-weight: bold;
+        @apply markdown-h;
+        @apply pb-2;
     }
 
     /*a {*/
@@ -208,6 +211,11 @@ html {
     @apply mb-0;
 }
 
+.markdown-content h3 {
+    @apply mt-6;
+    @apply mb-0;
+}
+
 .markdown-h {
     color: var(--brown-caption);
 }
@@ -269,6 +277,41 @@ html {
     /*@apply leading-7;*/
 }
 
+/* note: no preceding `.markdown-content`. */
+.footnote-definition {
+    @apply text-sm;
+
+    display: flex;
+    flex-direction: column; /* stack child elements vertically */
+    /*align-items: baseline;*/
+}
+
+.footnote-definition-label {
+    /* Adjust spacing between the label and the paragraph. */
+    /*margin-right: 5px;*/
+    @apply mr-1.5;
+
+    /* align label to start of the line. */
+    align-self: flex-start;
+    /* place the label before other elements. */
+    /*order: -1;*/
+
+    /* offset label vertically, since it's too high otherwise */
+    position: relative;
+    top: 9px;
+}
+
+.footnote-definition code {
+    @apply text-sm;
+}
+
+/** Indent paragraph (incl. lists) compared to label. */
+.footnote-definition p,
+.footnote-definition ul,
+.footnote-definition ol {
+    @apply ml-4;
+    @apply mb-1;
+}
 
 /*.all-links {*/
 /*    color: #59a2cc;*/

website/static/css/main.css

@@ -515,6 +515,16 @@ h2 {
 h3 {
   font-size: 1.5rem;
   line-height: 2rem;
+  font-weight: bold;
+  color: var(--brown-caption);
+}
+
+:is(.dark h3) {
+  color: var(--brown-caption-dark);
+}
+
+h3 {
+  padding-bottom: 0.5rem;
 }
 
 /*a {*/
@@ -1639,6 +1649,11 @@ html {
   margin-bottom: 0px;
 }
 
+.markdown-content h3 {
+  margin-top: 1.5rem;
+  margin-bottom: 0px;
+}
+
 .markdown-h {
   color: var(--brown-caption);
 }
@@ -1707,6 +1722,44 @@ html {
   /*@apply leading-7;*/
 }
 
+/* note: no preceding `.markdown-content`. */
+
+.footnote-definition {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  /* stack child elements vertically */
+  /*align-items: baseline;*/
+}
+
+.footnote-definition-label {
+  /* Adjust spacing between the label and the paragraph. */
+  /*margin-right: 5px;*/
+  margin-right: 0.375rem;
+  /* align label to start of the line. */
+  align-self: flex-start;
+  /* place the label before other elements. */
+  /*order: -1;*/
+  /* offset label vertically, since it's too high otherwise */
+  position: relative;
+  top: 9px;
+}
+
+.footnote-definition code {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+/** Indent paragraph (incl. lists) compared to label. */
+
+.footnote-definition p,
+.footnote-definition ul,
+.footnote-definition ol {
+  margin-left: 1rem;
+  margin-bottom: 0.25rem;
+}
+
 /*.all-links {*/
 
 /*    color: #59a2cc;*/