oijoij

sass/_typography.scss

@@ -0,0 +1,87 @@
+.typography {
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--color-on-background);
+
+    h1, h2, h3, h4, h5, h6 {
+        font-family: "PT Serif Caption", serif;
+    }
+
+    & > h1, & > h2, & > h3, & > h4, & > h5, & > h6, & > p, & > ul, & > ol, & > table {
+        margin: 24px 0px;
+    }
+
+    h1 {
+        font-size: 32px;
+        margin-top: 64px;
+    }
+
+    h2 {
+        font-size: 24px;
+        margin-top: 48px;
+        color: var(--color-on-surface-variant);
+    }
+
+    h3 {
+        font-size: 16px;
+        margin-top: 32px;
+        color: var(--color-secondary);
+    }
+
+    p {
+        text-align: justify;
+    }
+
+
+    a {
+        color: var(--color-primary);
+        text-decoration: underline;
+
+        &:hover {
+            opacity: 80%;
+        }
+    }
+
+    pre, code {
+        font-family: "Roboto Mono", monospace;
+    }
+
+    :not(pre) code {
+        background-color: var(--color-surface-variant);
+        color: var(--color-on-surface-variant);
+        padding: 0px 5px;
+        border-radius: 3px;
+    }
+
+    pre {
+        font-size: 14px;
+        line-height: 20px;
+        padding: 16px;
+        overflow-x: auto;
+        border-radius: 8px;
+    }
+
+    ul {
+        list-style: square;
+    }
+
+    ol {
+        list-style: decimal;
+    }
+
+    ul, ol {
+        list-style-position: outside;
+        margin-left: 32px;
+    }
+
+    li {
+        margin-top: 12px;
+    }
+
+    img {
+        max-width: 100%;
+        height: auto;
+        background-color: white;
+        text-align: center;
+    }
+}