oijoij

sass/_colors.scss

@@ -0,0 +1,67 @@
+:root {
+    --color-primary: #356a22;
+    --color-on-primary: #ffffff;
+    --color-primary-container: #b5f399;
+    --color-on-primary-container: #052100;
+    --color-secondary: #55624c;
+    --color-on-secondary: #ffffff;
+    --color-secondary-container: #d8e7cb;
+    --color-on-secondary-container: #131f0d;
+    --color-tertiary: #386667;
+    --color-on-tertiary: #ffffff;
+    --color-tertiary-container: #bbebed;
+    --color-on-tertiary-container: #002021;
+    --color-error: #ba1a1a;
+    --color-error-container: #ffdad6;
+    --color-on-error: #ffffff;
+    --color-on-error-container: #410002;
+    --color-background: #fdfdf6;
+    --color-on-background: #1a1c18;
+    --color-surface: #fdfdf6;
+    --color-on-surface: #1a1c18;
+    --color-surface-variant: #dfe4d7;
+    --color-on-surface-variant: #43483f;
+    --color-outline: #73796e;
+    --color-inverse-on-surface: #f1f1ea;
+    --color-inverse-surface: #2f312d;
+    --color-inverse-primary: #9ad680;
+    --color-shadow: #000000;
+    --color-surface-tint: #356a22;
+    --color-outline-variant: #c3c8bb;
+    --color-scrim: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+:root {
+    --color-primary: #9ad680;
+    --color-on-primary: #0c3900;
+    --color-primary-container: #1d5209;
+    --color-on-primary-container: #b5f399;
+    --color-secondary: #bccbb0;
+    --color-on-secondary: #273421;
+    --color-secondary-container: #3d4b36;
+    --color-on-secondary-container: #d8e7cb;
+    --color-tertiary: #a0cfd0;
+    --color-on-tertiary: #003738;
+    --color-tertiary-container: #1e4e4f;
+    --color-on-tertiary-container: #bbebed;
+    --color-error: #ffb4ab;
+    --color-error-container: #93000a;
+    --color-on-error: #690005;
+    --color-on-error-container: #ffdad6;
+    --color-background: #1a1c18;
+    --color-on-background: #e3e3dc;
+    --color-surface: #1a1c18;
+    --color-on-surface: #e3e3dc;
+    --color-surface-variant: #43483f;
+    --color-on-surface-variant: #c3c8bb;
+    --color-outline: #8d9387;
+    --color-inverse-on-surface: #1a1c18;
+    --color-inverse-surface: #e3e3dc;
+    --color-inverse-primary: #356a22;
+    --color-shadow: #000000;
+    --color-surface-tint: #9ad680;
+    --color-outline-variant: #43483f;
+    --color-scrim: #000000;
+}}
+

sass/_reset.scss

@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

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;
+    }
+}

sass/theme.scss

@@ -0,0 +1,63 @@
+@import "_colors.scss";
+@import "_reset.scss";
+@import "_typography.scss";
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "PT Serif", serif;
+    background-color: var(--color-background);
+
+    width: 800px;
+    margin: auto;
+}
+
+hr {
+    border: none;
+    border-top: 1px solid var(--color-outline-variant);
+}
+
+.article-header {
+    margin-top: 16px;
+    margin-bottom: 32px;
+
+    h1 {
+        color: var(--color-on-background);
+        font-size: 32px;
+        font-family: "PT Serif Caption", serif;
+    }
+
+    .info {
+        margin-top: 12px;
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        align-items: center;
+
+        .date {
+            color: var(--color-secondary);
+        }
+
+        .tags {
+            display: flex;
+            flex-direction: row;
+            gap: 8px;
+
+            a {
+                display: block;
+                background-color: var(--color-primary-container);
+                color: var(--color-on-primary-container);
+                padding: 4px 12px;
+                border-radius: 999px;
+                text-decoration: none;
+
+                &:hover {
+                    opacity: 80%;
+                }
+            }
+        }
+    }
+}
+