adding document mode

I've been thinking a lot about the treehouse and I feel like it's time to say goodbye to the tree format.

static/css/doc.css

@@ -0,0 +1,84 @@
+main.doc {
+    --doc-text-width: 80ch;
+
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+
+    & .vertical-center {
+        min-height: 100vh;
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+        justify-content: center;
+    }
+
+    & .doc-text {
+        padding: 1.6rem;
+        max-width: var(--doc-text-width);
+
+        line-height: 1.6;
+
+        /* I was thinking a bunch about whether documents should be justified, and it honestly
+           causes more awkwardness than it solves. Web pages aren't quite books, unfortunately.
+
+           A cool feature that would help is text-wrap: pretty; but only Safari implements a nice
+           text layout algorithm for it. (Chrome prevents short last lines, Firefox doesn't
+           implement it at all) */
+
+        /* text-align: justify;
+           hyphens: auto; */
+
+        & p {
+            padding-top: 0.5lh;
+            padding-bottom: 0.5lh;
+        }
+
+        & h2 {
+            margin: 0;
+            padding-top: 1lh;
+            padding-bottom: 0.5lh;
+        }
+
+        & ul,
+        & ol {
+            /* Is there a better way to add spacing to the marker, other than adding whitespace? */
+            list-style: "–   ";
+            margin-top: 0;
+            margin-bottom: 0;
+            padding-bottom: 0.5lh;
+        }
+    }
+
+    & section.feed {
+        max-width: 40ch;
+        padding: 0.8rem;
+        padding-top: 3.2rem;
+    }
+}
+
+@media (max-width: 1500px) {
+    main.doc {
+        flex-direction: column;
+        align-items: center;
+
+        & .vertical-center {
+            min-height: 0;
+        }
+
+        & footer {
+            padding: 0.8rem;
+        }
+
+        & section.feed {
+            max-width: var(--doc-text-width);
+
+            margin-top: 2.4em;
+            padding: 1.6rem;
+            border-top: 1px solid var(--border-1);
+        }
+    }
+}