Merge styles: 1.

Author: simi

_layout.html.erb

@@ -6,6 +6,7 @@
     <title><%= @title %> | Ruby Elders</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="/css/base.css" />
     <link rel="stylesheet" href="/css/writings.css" />
     <link href="/writings.atom" type="application/atom+xml" rel="alternate" title="Ruby Elders' writings" />
     <link rel="icon" type="image/png" href="/assets/img/favicon.png" />

css/base.css

@@ -0,0 +1,67 @@
+@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;1,300&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
+
+/* ─── Variables ──────────────────────────────────────────── */
+
+:root {
+  --font-base: "Cormorant Garamond", serif;
+  --font-alt:  "Jost", sans-serif;
+
+  --color-text:         hsl(0, 0%, 0%);
+  --color-bg:           hsl(0, 0%, 100%);
+  --color-accent:       hsl(0, 0%, 16%);
+  --color-accent-hover: hsl(146, 24%, 32%);
+  --color-border:       hsl(0, 0%, 0%);
+  --color-code-bg:      hsl(240, 20%, 95%);
+}
+
+/* ─── Reset ──────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+/* ─── Base typography ────────────────────────────────────── */
+
+body {
+  font-family: var(--font-base);
+  font-weight: 500;
+  color: var(--color-text);
+  background: var(--color-bg);
+  line-height: 1.5;
+  margin: 0;
+}
+
+h1, h2, h3 {
+  font-weight: 700;
+  color: var(--color-text);
+  margin-top: 0;
+}
+
+strong, b { font-weight: 700; }
+em, i     { font-style: italic; }
+
+a       { color: var(--color-accent); text-decoration: underline; }
+a:hover { color: var(--color-accent-hover); }
+
+/* ─── Hat animation ──────────────────────────────────────── */
+
+@keyframes wave-hat {
+  0%   { transform: rotate(0deg); }
+  30%  { transform: rotate(-15deg); }
+  60%  { transform: rotate(5deg); }
+  70%  { transform: rotate(5deg); }
+  100% { transform: rotate(0deg); }
+}
+
+#hat { transform-origin: center top; }
+
+/* ─── Dark mode ──────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text:         hsl(0, 0%, 88%);
+    --color-bg:           hsl(0, 0%, 10%);
+    --color-accent:       hsl(0, 0%, 75%);
+    --color-accent-hover: hsl(146, 24%, 55%);
+    --color-border:       hsl(0, 0%, 75%);
+    --color-code-bg:      hsl(240, 10%, 18%);
+  }
+}