✨feature: Set up basic layout and styles

styles/base.css

@@ -1,12 +1,5 @@
 @import 'tailwindcss';
+@import './colors.css';
+@import './typography.css';
+
 @plugin "@tailwindcss/typography";
-
-body {
-  @apply container mx-auto px-4 py-8 text-base text-gray-200 bg-slate-900;
-
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-}
-
-a {
-  color: #00B7FF;
-}

styles/colors.css

@@ -0,0 +1,41 @@
+/* Theme color definitions */
+
+@theme {
+  --color-black:      oklch(0% 0 0);
+  --color-white:      oklch(100% 0 0);
+
+  --color-background: oklch(89.75% 0 0);
+  --color-text:       var(--color-black);
+
+  --color-primary:     oklch(0.57 0.203362 257.1706);
+  --color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white);
+  --color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white);
+  --color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);
+  --color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white);
+  --color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white);
+  --color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white);
+  --color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white);
+  --color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
+  --color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
+
+  --color-secondary:     oklch(0.56 0.0176 257.23);
+  --color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
+  --color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
+  --color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
+  --color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white);
+  --color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white);
+  --color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white);
+  --color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white);
+  --color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white);
+  --color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
+
+  --color-bodylinks: oklch(0.48 0.0789 211.58);
+  --color-footlinks: oklch(0.65 0.1104 212.2);
+
+  --color-success:   oklch(64.01% 0.1751 146.7);
+  --color-info:      oklch(0.55 0.0922 211.57);
+  --color-warning:   oklch(84.42% 0.1722 84.93);
+  --color-danger:    oklch(0.5126 0.1865 22.61);
+  --color-light:     oklch(98.16% 0.0017 247.8);
+  --color-dark:      oklch(34.51% 0.0133 248.2);
+}

styles/typography.css

@@ -0,0 +1,150 @@
+/* Basic typographical styles */
+
+/**
+ * All font sizes are based on 16px base font size and 1920px wide screen
+ * Default size is expressed as percentage of screen width.
+ * text-14px: 12px-27px, default: 14px
+ * text-16px: 14px-28px, default: 16px
+ * text-18px: 14px-30px, default: 18px
+ * text-20px: 16px-32px, default: 20px
+ * text-22px: 17px-33px, default: 22px
+ * text-25px: 18px-35px, default: 25px
+ * text-30px: 19px-37px, default: 30px
+ * text-35px: 20px-40px, default: 35px
+ * text-38px: 22px-48px, default: 38px
+ * text-40px: 24px-56px, default: 40px
+ * text-45px: 25px-64px, default: 45px
+ * text-50px: 27px-72px, default: 50px
+ * text-55px: 28px-76px, default: 55px
+ * text-60px: 30px-80px, default: 60px
+ * text-70px: 30px-76px, default: 70px
+ * text-75px: 32px-80px, default: 75px
+*/
+
+@theme {
+  --font-sans:   "Raleway", sans-serif;
+  --line-height: 1.6;
+
+  --text-base: 1rem;
+  --text-14px: clamp(0.75rem,  0.7292vw, 1.7rem);
+  --text-16px: clamp(0.875rem, 0.8333vw, 1.8rem);
+  --text-18px: clamp(0.875rem, 0.9375vw, 1.9rem);
+  --text-20px: clamp(1rem,     1.0417vw, 2rem);
+  --text-22px: clamp(1.1rem,   1.15vw,   2.1rem);
+  --text-25px: clamp(1.125rem, 1.3021vw, 2.2rem);
+  --text-30px: clamp(1.185rem, 1.5625vw, 2.35rem);
+  --text-35px: clamp(1.25rem,  1.8229vw, 2.5rem);
+  --text-38px: clamp(1.4rem,   1.9791vw, 3rem);
+  --text-40px: clamp(1.5rem,   2.0834vw, 3.5rem);
+  --text-45px: clamp(1.6rem,   2.3438vw, 4rem);
+  --text-50px: clamp(1.7rem,   2.6042vw, 4.5rem);
+  --text-70px: clamp(1.9rem,   3.6458vw, 4.8rem);
+  --text-75px: clamp(2rem,     3.9063vw, 5rem);
+
+  --h1: calc(var(--text-base) * 2.25);
+  --h2: calc(var(--text-base) * 1.75);
+  --h3: calc(var(--text-base) * 1.5);
+  --h4: calc(var(--text-base) * 1.25);
+  --h5: calc(var(--text-base) * 1.125);
+  --h6: calc(var(--text-base) * 1.05);
+}
+
+body {
+  @apply font-sans text-base text-gray-200 bg-slate-900;
+}
+
+::selection { background: var(--color-warning); }
+
+@layer components {
+  h1, h2, h3,
+  h4, h5, h6 {
+    font-weight: 700;
+    margin: 0 0 1rem;
+  }
+
+  h1, .h1 {
+    font-size: var(--h1);
+    line-height: 1.2;
+  }
+
+  h2, .h2 {
+    font-size: var(--h2);
+    line-height: 1.3;
+  }
+
+  h3, .h3 {
+    font-size: var(--h3);
+    line-height: 1.4;
+  }
+
+  h4, .h4 {
+    font-size: var(--h4);
+    line-height: 1.5;
+  }
+
+  h5, .h5 { font-size: var(--h5); }
+
+  h6, .h6 { font-size: var(--h6); }
+}
+
+a, .link {
+  color: var(--color-bodylinks);
+  text-decoration: none;
+  transition: color 200ms;
+  cursor: pointer;
+
+  &:hover { color: var(--color-primary); }
+}
+
+h1 a, .h1 a,
+h2 a, .h2 a,
+h3 a, .h3 a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+li ul, li ol { margin: 0 1rem; }
+
+ul { list-style-type: disc; }
+
+ol { list-style-type: decimal; }
+
+ol ol { list-style: lower-alpha; }
+
+ol ol ol { list-style: lower-roman; }
+
+ol ol ol ol { list-style: lower-alpha; }
+
+pre, code,
+samp, style { font-family: monospace; }
+
+pre {
+  font-size: 0.875rem;
+  overflow: auto;
+  padding: 1.5rem;
+}
+
+pre code {
+  background-color: inherit;
+  border-radius: 0;
+  color: inherit;
+  padding: 0;
+}
+
+code {
+  @apply bg-black/30 px-[3px] py-[2px] font-mono text-black text-xs rounded-sm;
+}
+
+hr {
+  background-color: black;
+  border: none;
+  display: block;
+  height: 1px;
+  margin: 1rem 0;
+  width: 100%;
+}