refacto: reorganize scss for modularity

sass/styles.scss

@@ -1,2 +1,114 @@
-@use 'base';
-@use 'shortcodes/callout'
+@use 'theme';
+@use 'shortcodes/callout';
+@use 'parts/anchor';
+@use 'parts/code';
+@use 'parts/footnote';
+@use 'parts/misc';
+@use 'parts/page_title';
+@use 'parts/table';
+
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    font-family: var(--text-font);
+    scroll-behavior: smooth;
+}
+
+body {
+    color: var(--text);
+    background-color: var(--base);
+    font-size: 1rem;
+    line-height: 1.75;
+}
+
+article {
+    max-width: min(700px, 95%);
+    margin-left: auto;
+    margin-right: auto;
+}
+
+h1 {
+    font-size: 2rem;
+    font-weight: medium;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    font-weight: medium;
+}
+
+h3 {
+    font-size: 1.2rem;
+    margin-bottom: .6rem;
+    font-weight: medium;
+}
+
+h4 {
+    font-size: 1.1rem;
+    font-weight: medium;
+}
+
+h5 {
+    font-size: 1rem;
+    font-weight: medium;
+}
+
+h6 {
+    font-size: .9rem;
+    font-weight: medium;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+}
+
+p {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+a {
+    color: var(--blue);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in srgb, var(--blue), transparent 40%);
+    text-decoration-thickness: 0.01rem;
+    text-underline-offset: 0.3rem;
+
+    &:hover {
+        color: var(--sky);
+    }
+
+    &:visited {
+        color: var(--lavender);
+    }
+}
+
+li {
+    &::marker {
+        color: var(--overlay1);
+    }
+}
+
+img,
+video {
+    max-width: 100%;
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    border-radius: var(--standard-border-radius);
+}