feat: create templates and basic content pages

1 files changed, 166 insertions, 0 deletions

diff --git a/sass/style.scss b/sass/style.scss
new file mode 100644
index 0000000..833d2c7
--- /dev/null
+++ b/sass/style.scss
@@ -0,0 +1,166 @@
+// gruvbox colors
+@media (prefers-color-scheme: dark) {
+  :root {
+    // --bg: #1d2021; // hard
+    // --bg: #32302f; // soft
+    --bg: #282828;
+    --bg1: #3c3836;
+    --bg2: #504945;
+    --bg3: #665c54;
+    --bg4: #7c6f64;
+
+    --fg: #fbf1c7;
+    --fg1: #ebdbb2;
+    --fg2: #d5c4a1;
+    --fg3: #bdae93;
+    --fg4: #a89984;
+
+    --red: #fb4934;
+    --green: #b8bb26;
+    --yellow: #fabd2f;
+    --blue: #83a598;
+    --purple: #d3869b;
+    --aqua: #8ec07c;
+    --gray: #928374;
+    --orange: #fe8019;
+
+    --red-dim: #cc2412;
+    --green-dim: #98971a;
+    --yellow-dim: #d79921;
+    --blue-dim: #458588;
+    --purple-dim: #b16286;
+    --aqua-dim: #689d6a;
+    --gray-dim: #a89984;
+    --orange-dim: #d65d0e;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    // --bg: #f9f5d7; // hard
+    // --bg: #f2e5bc; // soft
+    --bg: #fbf1c7;
+    --bg1: #ebdbb2;
+    --bg2: #d5c4a1;
+    --bg3: #bdae93;
+    --bg4: #a89984;
+
+    --fg: #282828;
+    --fg1: #3c3836;
+    --fg2: #504945;
+    --fg3: #665c54;
+    --fg4: #7c6f64;
+
+    --red: #9d0006;
+    --green: #79740e;
+    --yellow: #b57614;
+    --blue: #076678;
+    --purple: #8f3f71;
+    --aqua: #427b58;
+    --orange: #af3a03;
+    --gray: #928374;
+
+    --red-dim: #cc2412;
+    --green-dim: #98971a;
+    --yellow-dim: #d79921;
+    --blue-dim: #458598;
+    --purple-dim: #b16286;
+    --aqua-dim: #689d6a;
+    --orange-dim: #d65d0e;
+    --gray-dim: #7c6f64;
+  }
+}
+
+html {
+  background: var(--bg);
+  color: var(--fg);
+  font-size: 14pt;
+  font-family: monospace;
+}
+
+::selection {
+  color: var(--bg);
+  background-color: var(--fg);
+}
+
+body {
+  line-height: 1.4;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+a {
+  color: var(--blue);
+}
+
+a:visited {
+  color: var(--blue-dim);
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+a:active {
+  background: var(--fg1);
+}
+
+header > h2:has(+ p) {
+  margin-bottom: 0;
+}
+
+header > h2 + p {
+  margin-top: 0;
+}
+
+nav a {
+  color: var(--aqua);
+  font-weight: bold;
+  text-decoration: none;
+}
+
+nav a.active {
+  color: var(--orange-dim);
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
+
+nav a:active {
+  background: var(--fg);
+}
+
+nav.toc {
+  text-align: left;
+  font-size: 0.9rem;
+  margin-bottom: 2rem;
+}
+
+header.banner > nav {
+  display: flex;
+  justify-content: space-between;
+}
+
+header.banner > nav h1 {
+  display: flex;
+}
+
+header.banner > nav ul {
+  display: flex;
+  list-style: none;
+}
+
+header.banner > nav li + li {
+  margin-inline-start: 1em;
+}
+
+header.banner > nav a {
+  font-size: 1.2rem;
+}
+
+footer {
+  margin-top: 2rem;
+  text-align: center;
+  font-size: 0.8rem;
+}