Convert a couple of Sass stylesheets to vanilla CSS

src/_scss/components/nav.css

@@ -0,0 +1,55 @@
+/*
+ * Styles for the "nav" component.
+ *
+ * This is the global header shown at the top of every page, with my name
+ * and a list of links to the main site sections.
+ */
+
+nav {
+  padding-top: calc(1px + env(safe-area-inset-top));
+  padding-bottom: 1px;
+
+  /* The nav gets the primary accent colour as background, with white text.
+   *
+   * It looks the same in light/dark mode.
+   *
+   * TODO: Should I have light/dark mode for the nav?
+   */
+  background: var(--nav-background-url) var(--primary-color-light);
+  background-size: auto 100%;
+}
+
+nav h1 {
+  margin-bottom: -5px;
+  font-size: 1.7em;
+}
+
+nav h1 a {
+  text-decoration: none;
+}
+
+nav ul {
+  margin-bottom: 14px;
+}
+
+nav, nav a, nav a:visited {
+  color: white;
+}
+
+/* Add an extra thick underline so you know which part of the site
+ * you're in. */
+nav a[selected] {
+  text-decoration-thickness: 4px;
+  text-decoration-skip-ink: none;
+}
+
+@media print {
+  nav {
+    background: none;
+    border-bottom: var(--border-width) solid var(--primary-color-light);
+  }
+
+  nav, nav a, nav a:visited {
+    color: var(--primary-color-light);
+  }
+}

src/_scss/components/til.css

@@ -0,0 +1,9 @@
+/*
+ * Styles for "Today I Learned (TIL)" pages.
+ *
+ * These are pretty similar to article pages so there isn't much different.
+ */
+
+article.til {
+  p.summary { font-weight: bold; }
+}

src/static/style.scss

@@ -21,13 +21,13 @@
 @import "components/code";
 @import "components/footer";
 @import "components/latex";
-@import "components/nav.scss";
+@import "components/nav";
 @import "components/pretty_hr.scss";
 @import "components/skip_to_main";
 @import "components/slides";
 @import "components/syntax_highlighting.scss";
 @import "components/tags";
-@import "components/til.scss";
+@import "components/til";
 
 $primary-color-light: #d01c11;
 $primary-color-dark:  #ff4242;