bunch o' tresh

static/css/main.css

@@ -1,6 +1,13 @@
 /* Color scheme. */
 
 :root {
+    /* naturally */
+    --liquidex-brand-blue: #058ef0;
+
+    --text-color-light: #55423e;
+    --link-color-light: #004ec8;
+    --link-color-visited-light: #6c2380;
+
     --background-color: rgb(255, 253, 246);
     --text-color: #55423e;
     --link-color: #004ec8;
@@ -51,6 +58,15 @@ main {
 body {
     background-color: var(--background-color);
     color: var(--text-color);
+
+    scrollbar-color: var(--background-color);
+    scrollbar-width: auto;
+    scrollbar-gutter: stable;
+}
+
+body::selection {
+    /* Even though this color doesn't yield the most readable text, browsers  */
+    background-color: var(--liquidex-brand-blue);
 }
 
 /* Set up typography */
@@ -127,13 +143,13 @@ em {
 
 p,
 pre {
-    margin: 6px 0;
+    margin: 0 0;
 }
 
 h1,
 h2,
 h3 {
-    margin: 12px 0;
+    margin: 4px 0;
 }
 
 /* Lay out elements a little less compactly (actually just have some blank space past the end) */
@@ -207,6 +223,7 @@ th {
 .noscript {
     padding: 16px;
     background-color: #fde748;
+    color: var(--text-color-light);
     border: 1px solid #6c581c;
     border-radius: 8px;
     width: fit-content;
@@ -223,6 +240,19 @@ th {
     margin-bottom: 0;
 }
 
+.noscript a {
+    color: var(--link-color-light);
+}
+
+.noscript a:visited {
+    color: var(--link-color-visited-light);
+}
+
+/* also, webkit. */
+#webkit-makes-me-go-insane {
+    display: none;
+}
+
 /* Give the logo on the top some nicer looks */
 
 nav {

static/css/tree.css

@@ -11,7 +11,7 @@
     --tree-icon-space: 28px;
 
     /* I have no clue why this works, deal with it */
-    --tree-hover-expansion: 0.01px;
+    --tree-hover-expansion: 6px;
 
     position: relative;
 }
@@ -21,6 +21,11 @@
     cursor: pointer;
 }
 
+/* Can webkit not be a dick for once? */
+.tree details>summary::-webkit-details-marker {
+    display: none;
+}
+
 .tree li {
     list-style: none;
 
@@ -80,6 +85,8 @@
     background-position: var(--tree-icon-position);
     padding-left: var(--tree-icon-space);
     margin-left: calc(- var(--tree-icon-space));
+    padding-top: var(--tree-hover-expansion);
+    padding-bottom: var(--tree-hover-expansion);
 }
 
 .tree details[open]>summary {

static/js/thanks-webkit.js

@@ -0,0 +1,21 @@
+// Detect if we can have crucial functionality (ie. custom elements call constructors).
+// This doesn't seem to happen in Epiphany, and possibly also other Webkit-based browsers.
+let works = false;
+class WebkitMoment extends HTMLLIElement {
+    constructor() {
+        super();
+        works = true;
+    }
+}
+
+customElements.define("th-webkit-moment", WebkitMoment, { extends: "li" });
+
+let willItWorkOrWillItNot = document.createElement("div");
+willItWorkOrWillItNot.innerHTML = `<li is="th-webkit-moment"></li>`;
+
+// If my takeoff fails
+// tell my mother I'm sorry
+let box = document.getElementById("webkit-makes-me-go-insane");
+if (!works) {
+    box.style = "display: block";
+}