Add basic styles to blog template

web-app/template-styles/blog-styles.css

@@ -1,3 +1,18 @@
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff2)
+      format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff)
+      format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+    U+FFFD;
+}
+
 :root {
   color-scheme: light dark;
 }
@@ -15,11 +30,6 @@ body {
   font-family: system-ui, sans-serif;
 }
 
-.container {
-  margin-inline: auto;
-  inline-size: min(100% - 2rem, 75ch);
-}
-
 img,
 picture,
 svg,
@@ -28,6 +38,22 @@ video {
   block-size: auto;
 }
 
+ul,
+ol {
+  list-style: inside;
+}
+
+.container {
+  margin-inline: auto;
+  inline-size: min(100% - 2rem, 75ch);
+}
+
+header > .container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 nav,
 header,
 main,
@@ -44,3 +70,35 @@ section {
   flex-direction: column;
   gap: 1rem;
 }
+
+.articles ul {
+  display: grid;
+  list-style: none;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30ch), 1fr));
+}
+
+.articles li {
+  border: 1px solid hsl(0 0% 50%);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+pre {
+  border: 1px solid hsl(0 0% 50%);
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+code {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.875rem;
+}
+
+:not(pre) > code {
+  background-color: hsl(0 0% 25%);
+  padding-inline: 0.25rem;
+  padding-block: 0.125rem;
+}