Some initial sass refactoring (breaking change!)

Well, it's not a breaking change if you don't restyle duckquill heavily :)

sass/_typography.scss

@@ -0,0 +1,93 @@
+// HEADINGS
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 3rem 0 1rem;
+    font-weight: lighter;
+    line-height: normal;
+    font-family: var(--font-antique);
+    letter-spacing: -0.05em;
+}
+
+h1 {
+    font-size: 2.5rem;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+h3 {
+    font-size: 1.5rem;
+}
+
+small {
+    color: var(--fg-muted-5);
+    font-size: 0.8rem;
+}
+
+abbr[title] {
+    -webkit-text-decoration: underline dotted;
+    cursor: help;
+    text-decoration: underline dotted;
+}
+
+figcaption {
+    color: var(--fg-muted-4);
+    font-size: 0.8rem;
+    text-align: center;
+}
+
+blockquote {
+    margin: 0;
+    border-left: 0.25rem solid var(--primary-color);
+    padding: 0 0.75rem;
+    color: var(--fg-muted-5);
+}
+
+mark {
+    box-shadow: var(--edge-highlight);
+    border-radius: var(--rounded-corner-small);
+    background-color: var(--primary-color-alpha);
+    padding: 0.125rem 0.375rem;
+    color: var(--primary-color);
+}
+
+a {
+    color: var(--primary-color);
+    font-weight: bold;
+
+    &:hover {
+        -webkit-text-decoration: underline wavy;
+        text-decoration: underline wavy;
+    }
+}
+
+hr {
+    margin: 2rem auto;
+    border: none;
+    border-top: 3px double var(--fg-muted-2);
+    overflow: visible;
+    color: var(--fg-muted-4);
+    font-size: 1.5rem;
+    text-align: center;
+
+    &::after {
+        position: relative;
+        top: -1.5rem;
+        background: var(--bg-color);
+        padding: 0 0.25rem;
+        content: "☙❧";
+    }
+}
+
+dt {
+    font-weight: bold;
+}
+
+dd {
+    margin-bottom: 1rem;
+}