feat: define css variables

src/scss/base.scss

@@ -0,0 +1,156 @@
+/* theme colors */
+:root {
+  --theme-c-desert-sand: #e7c7b1;
+  --theme-c-woody-brown: #493428;
+  --theme-c-walnut-brown: #422322;
+  --theme-c-deep-oak: #341c1c;
+  --theme-c-crystal-blue: #6bb9db;
+  --theme-c-antique-white: #f8ebdd;
+  --theme-c-jagged-ice: #a7eef1;
+  --theme-c-glacier-blue: #6dabd1;
+  --theme-c-dark-grey-blue: #2d4c5a;
+
+  --theme-c-white: #ffffff;
+  --theme-c-black: #000000;
+
+  --theme-c-desert-sand-translucent: #e7c7b1bf;
+  --theme-c-woody-brown-translucent: #493428bf;
+  --theme-c-walnut-brown-translucent: #422322bf;
+  --theme-c-deep-oak-translucent: #341c1cbf;
+  --theme-c-crystal-blue-translucent: #6bb9dbbf;
+  --theme-c-antique-white-translucent: #f8ebddbf;
+  --theme-c-jagged-ice-translucent: #a7eef1bf;
+  --theme-c-glacier-blue-translucent: #6dabd1bf;
+  --theme-c-dark-grey-blue-translucent: #2d4c5abf;
+  --theme-c-white-translucent: #ffffffbf;
+  --theme-c-black-translucent: #000000bf;
+
+  --theme-c-text-light: var(--theme-c-woody-brown);
+  --theme-c-text-dark: var(--theme-c-antique-white);
+}
+
+/* general purpose variables */
+:root {
+  --font-family-copy: sans-serif;
+  --font-family-headings: serif;
+
+  --font-size: 18px;
+  --text-line-height: 1.5em;
+
+  --margin-paragraph: 1rem;
+
+  --container-width-text: 40rem;
+  --container-width-images: 40rem;
+  --container-width-tables: 40rem;
+  --container-width-timeline: calc(var(--timeline-circle-size) * 15);
+
+  --container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
+  --container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
+  --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
+  --container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
+
+  --content-spacing: 0 var(--container-spacing-right-safe) 0
+    var(--container-spacing-left-safe);
+
+  --navigation-item-font-size: 1.75rem;
+  --navigation-item-line-height: 3.25rem;
+  --navigation-width: 100vw;
+
+  --timeline-circle-size: 4rem;
+  --timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2);
+  --timeline-circle-background-color: rgba(107, 185, 219, 0.5);
+  --timeline-circle-padding: calc(var(--timeline-circle-font-size) * 0.5);
+
+  --timeline-position-top: var(--timeline-circle-size);
+
+  --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
+  --timeline-stroke-color: var(--theme-c-crystal-blue);
+  --timeline-stroke-border: var(--timeline-stroke-thickness) solid
+    var(--timeline-stroke-color);
+  --timeline-stroke-length: calc(100% - var(--timeline-circle-size) + 1.5rem);
+  --timeline-stroke-position: calc(
+    var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2
+  );
+
+  --timeline-item-margin: 1.5rem 0;
+  --timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2);
+  --timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0;
+
+  --color-table-border-radius: 1rem;
+  --color-table-color-cell-width: 10vw;
+  --color-table-spacing: 0 var(--container-spacing-right-safe) 0
+    var(--container-spacing-left-safe);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--theme-c-antique-white);
+
+  --color-border: var(--theme-c-crystal-blue);
+
+  --color-heading: var(--theme-c-text-light);
+  --color-text: var(--theme-c-text-light);
+  --color-link-text: var(--theme-c-text-light);
+  --color-link-text-hover: var(--theme-c-text-dark);
+  --color-link-text-underline: var(--theme-c-text-light);
+
+  --color-header-bar: var(--theme-c-deep-oak-translucent);
+  --color-header-bar-title: var(--theme-c-white);
+
+  --color-navigation-toggle: var(--theme-c-antique-white);
+  --color-navigation-background: var(--theme-c-walnut-brown);
+  --color-router-link: var(--theme-c-antique-white);
+  --color-router-link-hover: var(--theme-c-walnut-brown);
+  --color-router-link-active: var(--theme-c-crystal-blue);
+
+  --color-table-row-hover: var(--theme-c-walnut-brown);
+  --color-table-heading-background: var(--theme-c-dark-grey-blue);
+  --color-table-heading-text-color: var(--theme-c-text-dark);
+  --color-table-cell-background: var(--theme-c-desert-sand);
+  --color-table-cell-text-color: var(--theme-c-text-light);
+  --color-table-cell-text-color-hover: var(--theme-c-text-dark);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--theme-c-dark-grey-blue);
+
+    --color-border: var(--theme-c-desert-sand);
+
+    --color-heading: var(--theme-c-text-dark);
+    --color-text: var(--theme-c-text-dark);
+    --color-link-text: var(--theme-c-text-dark);
+    --color-link-text-hover: var(--theme-c-text-light);
+    --color-link-text-underline: var(--theme-c-text-dark);
+
+    --color-table-row-hover: var(--theme-c-walnut-brown);
+    --color-table-heading-background: var(--theme-c-deep-oak);
+    --color-table-heading-text-color: var(--theme-c-text-dark);
+    --color-table-cell-background: var(--theme-c-woody-brown);
+    --color-table-cell-text-color: var(--theme-c-text-dark);
+    --color-table-cell-text-color-hover: var(--theme-c-text-dark);
+  }
+}
+
+@media (min-width: 45em) {
+  :root {
+    --font-size: 20px;
+    --navigation-width: 20rem;
+    --color-table-color-cell-width: 10rem;
+    --content-spacing: auto;
+    --color-table-spacing: 0;
+  }
+}
+
+@media (min-width: 64em) {
+  :root {
+    --font-size: 24px;
+    --timeline-stroke-length: calc(100% - var(--timeline-circle-size));
+  }
+}
+
+@media (min-width: 125em) {
+  :root {
+    --font-size: 24px;
+  }
+}