Refactor site to new theme

assets/auto-theme.css

@@ -0,0 +1,156 @@
+:root {
+  --size: 0.96rem;
+  --spacing: calc(var(--size) * 2);
+}
+
+body {
+  font-family: "Nunito", "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue",
+    Helvetica, Arial, sans-serif;
+  font-size: calc(var(--size) * 1.6);
+  line-height: 1.45;
+  padding: 0 2.8rem 2.8rem;
+}
+
+header,
+main,
+footer {
+  max-width: 66ch;
+}
+
+header,
+footer {
+  position: relative;
+}
+
+.mesh-wrap {
+  position: relative;
+  left: 50%;
+  width: 100vw;
+  transform: translateX(-50%);
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.mesh-image {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: none;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mesh-wrap-top {
+  height: 100px;
+  margin-bottom: 0.6rem;
+}
+
+.mesh-image-top {
+  top: 0;
+}
+
+.footer-copy {
+  padding-top: 0.5rem;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 600;
+}
+
+h1 {
+  font-size: calc(var(--size) * 3.4);
+}
+
+h2 {
+  font-size: calc(var(--size) * 2.8);
+}
+
+.title h1 {
+  font-size: calc(var(--size) * 2.9);
+}
+
+nav a,
+a.blog-tags {
+  margin-right: calc(var(--spacing) / 2.8);
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover,
+a:focus-visible {
+  text-decoration: underline;
+}
+
+ul.blog-posts li {
+  margin-bottom: 0.2rem;
+}
+
+li {
+  margin-block-start: calc(var(--spacing) / 2.8);
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: #ffffff;
+    color: #1f2328;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong,
+  b {
+    color: #111827;
+  }
+
+  a {
+    color: #0969da;
+  }
+
+  a:visited,
+  ul.blog-posts li a:visited {
+    color: #8250df;
+  }
+
+  textarea,
+  input {
+    background-color: #f6f8fa;
+    color: #1f2328;
+    border: 1px solid #d0d7de;
+  }
+
+  table,
+  th,
+  td {
+    border-color: #d0d7de;
+  }
+
+  code {
+    color: #24292f;
+    background-color: #f6f8fa;
+  }
+
+  pre code {
+    background-color: #f6f8fa;
+  }
+
+  blockquote {
+    border-left-color: #8c959f;
+    color: #57606a;
+  }
+
+  figcaption > p,
+  .helptext {
+    color: #57606a;
+  }
+
+}