add base style and content

styles/main.css

@@ -0,0 +1,94 @@
+/* import fonts */
+
+:root {
+  --color-foreground: black;
+  --color-foreground-dimmed: color-mix(in srgb, var(--color-foreground), transparent 40%);
+  /* --color-accent: #0692aa; */
+  --max-width: 900px;
+  --font-base-size: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-foreground: white;
+  }
+
+  body {
+    background: #222;
+  }
+}
+
+body {
+  font-family: "JetBrains Mono";
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100svh;
+  max-width: var(--max-width);
+  width: 100%;
+  color: var(--color-foreground);
+  font-size: var(--font-base-size);
+  margin: 0 auto;
+  padding: 0 max(25px, 5vw);
+}
+
+header {
+  padding: 1em 0;
+  width: 100%;
+}
+
+header>nav {
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.nav-menu {
+  list-style-type: none;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+}
+
+.nav-menu-item {
+  text-decoration: none;
+  color: var(--color-foreground);
+}
+
+.nav-menu-item:hover {
+  text-decoration: underline;
+}
+
+#site-root {
+}
+
+#header-nav-current {
+  font-weight: bold;
+}
+
+main {
+  margin: 0 auto;
+  width: 100%;
+}
+
+h1, h2, h3 {
+  margin: 0.5em 0;
+}
+
+/*
+h1::before { content: "#"; }
+h2::before { content: "##"; }
+h3::before { content: "###"; }
+
+h1::before, h2::before, h3::before {
+  font-variant-ligatures: none;
+  margin-right: 0.3em;
+}
+*/
+
+footer {
+  width: 100%;
+  text-align: center;
+  padding: 1em;
+  font-size: smaller;
+  color: var(--color-foreground-dimmed);
+}