revamp the way page:treehouse/new works

- treehouse/new is now a regular page, not a special template
- most of the code related to the `new` badge in page:index has been removed
- you're meant to discern between pages you've read vs ones you haven't by looking at the colors of the links (blue vs purple)

static/css/new.css

@@ -1,134 +1,33 @@
-/* Give the intro and outro some breathing room. */
-section {
-    padding: 1em 2em;
-}
-
-/* Style all links in the last paragraph as big buttons. */
-.tree th-bc>p:last-child {
-    --transition-duration: 0.2s;
-
-    margin-top: var(--8px);
-    margin-bottom: var(--4px);
-
-    &>a {
-        display: inline-block;
-
-        padding: 0.5em 1.5em;
-
-        color: var(--text-color);
-        background-color: transparent;
-        border: var(--1px) solid var(--border-1);
-        border-radius: 2em;
-        text-decoration: none;
-
-        transition:
-            color var(--transition-duration),
-            background-color var(--transition-duration),
-            border-color var(--transition-duration);
-
-        &:hover,
-        &:focus {
-            color: white;
-            background-color: #058ef0;
-            border-color: white;
-        }
-    }
-}
-
-.tree li>div:first-child,
-.tree li>details>summary:first-child {
-    --margin: 2.5em;
-
-    border: none;
-    margin-left: var(--tree-indent-width);
-    width: calc(100% - var(--tree-indent-width));
-    margin-top: var(--margin);
-    margin-bottom: var(--margin);
-}
-
-.tree th-bp {
-    display: none;
-}
-
-.tree th-bb {
-    opacity: 100%;
-
-    & .branch-date {
-        display: block !important;
-    }
-}
-
-@media (max-width: 600px) {
-    .tree .branch-container {
-        flex-direction: column-reverse;
-    }
-}
-
-section.settings {
-    & h3 {
-        display: inline;
-    }
-
-    & details>summary {
-        --recursive-wght: 700;
-
-        list-style: none;
-        cursor: pointer;
-
-        opacity: 50%;
-        transition: opacity var(--transition-duration);
-
-        &::-webkit-details-marker {
-            display: none;
-        }
-
-        &::before {
-            --recursive-casl: 0.0;
-            --recursive-mono: 1.0;
-            --recursive-slnt: 0.0;
-
-            content: '+';
-            margin-right: 0.3em;
-
-            opacity: 50%;
-        }
-
-        &:hover {
-            opacity: 100%;
-        }
-    }
-
-    & details[open]>summary {
+.tree .branch-container {
+    &:has(th-bc > h3) > th-bb {
         opacity: 100%;
 
-        &::before {
-            content: '-';
-        }
-    }
-
-    & p {
-        margin-bottom: var(--8px);
-    }
-
-    & button {
-        border: var(--1px) solid var(--border-1);
-        border-radius: 999px;
-        padding: var(--4px) var(--12px);
-        background: none;
-        color: var(--text-color);
-        font-size: 1rem;
-
-        cursor: pointer;
-
-        transition:
-            color var(--transition-duration),
-            background-color var(--transition-duration),
-            border-color var(--transition-duration);
-
-        &:hover {
-            color: white;
-            background-color: #058ef0;
-            border-color: white;
+        & .branch-date {
+            display: block !important;
+        }
+    }
+}
+
+@media (max-width: 720px) {
+    .tree .branch-container {
+        &:has(th-bc > h3) {
+            flex-direction: column;
+            padding-left: 1rem;
+            padding-top: 0.25rem;
+            padding-bottom: 0.25rem;
+
+            & > th-bp {
+                display: none;
+            }
+
+            & > th-bc > h3 {
+                margin-top: 0;
+                margin-bottom: 0;
+            }
+
+            & > th-bb {
+                margin: 0;
+            }
         }
     }
 }