CSS reset & base styles

app/assets/stylesheets/_reset.css

@@ -0,0 +1,84 @@
+/*
+ * Modern CSS Reset
+ * @link https://github.com/hankchizljaw/modern-css-reset
+*/
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+p,
+li,
+h1,
+h2,
+h3,
+h4 {
+  /* Help prevent overflow of long words/names/URLs */
+  word-break: break-word;
+
+  /* Optional, not supported for all languages */
+  /* hyphens: auto; */
+}
+
+html,
+body {
+  overflow-x: hidden;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100dvh;
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.5;
+  text-rendering: optimizeSpeed;
+}
+
+/* Make images easier to work with */
+img {
+  display: block;
+  max-inline-size: 100%;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  html {
+    scroll-behavior: initial;
+  }
+}

app/assets/stylesheets/application.css

@@ -1 +0,0 @@
-/* Application styles */

app/assets/stylesheets/base.css

@@ -0,0 +1,102 @@
+html, body {
+  --font-sans: system-ui;
+  --font-serif: ui-serif, serif;
+  --font-mono: ui-monospace, monospace;
+  --hover-color: var(--color-subtle-dark);
+  --hover-size: 0.15rem;
+  --hover-filter: brightness(1);
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: none;
+  background: var(--color-bg);
+  color: var(--color-ink);
+  font-family: var(--font-sans);
+  line-height: 1.4;
+  overflow: unset;
+  scroll-behavior: auto;
+  text-rendering: optimizeLegibility;
+  text-size-adjust: none;
+}
+
+a:not([class]) {
+  --hover-size: 0;
+
+  color: var(--color-link);
+  text-decoration: underline;
+  text-decoration-skip-ink: auto;
+}
+
+:is(a, button, input, textarea, .switch, .toc, .toc__title) {
+  --outline-size: max(2px, 0.08em);
+
+  caret-color: var(--color-link);
+  text-decoration: none;
+  touch-action: manipulation;
+  transition: box-shadow 150ms ease, outline-offset 150ms ease, background-color 150ms ease, opacity 150ms ease, filter 150ms ease;
+
+  /* Hover */
+  @media (any-hover: hover) {
+    &:where(:not(:active):hover) {
+      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
+    }
+  }
+
+  /* Keyboard navigation */
+  &:where(:not(:active)):focus-visible {
+    outline-width: var(--outline-size);
+    outline-color: var(--outline-color, currentColor);
+    outline-offset: var(--outline-offset, calc(var(--outline-size) * 2));
+  }
+
+  &:where(:focus-visible):active {
+    outline: 0;
+  }
+
+  /* Pressing */
+  &:focus:not(:focus-visible) {
+    --outline-offset: 0;
+  }
+
+  /* Disabled */
+  &:where([disabled]):not(:hover):not(:active) {
+    cursor: not-allowed;
+    filter: brightness(0.75);
+  }
+}
+
+::selection {
+  background-color: var(--color-selected);
+}
+
+:where(ul, ol):where([role="list"]) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Printing */
+@page {
+  margin: 1in;
+}
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+
+/* Turbo */
+turbo-frame {
+  display: contents;
+}
+
+/* Nicer scrollbars on Chrome 29+. This is intended for Windows machines, but */
+/* there's not a way to target Windows using CSS, so Chrome on Mac will have */
+/* slightly thinner scrollbars than normal. #C1C1C1 is the default color on Macs. */
+@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
+  * {
+    scrollbar-color: #C1C1C1 transparent;
+    scrollbar-width: thin;
+  }
+}

app/views/layouts/application.html.erb

@@ -6,11 +6,23 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= yield :head %>
+
+    <%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>
 
   <body>
-    <%= yield %>
+    <header id="header">
+      <%= yield :header %>
+    </header>
+
+    <main id="main">
+      <%= yield %>
+    </main>
+
+    <footer id="footer">
+      <%= yield :footer %>
+    </footer>
   </body>
 </html>