add climate #5 and add TOC #6

docs/css/chrome.css

@@ -2,12 +2,6 @@
 
 @import 'variables.css';
 
-::-webkit-scrollbar {
-    background: var(--bg);
-}
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar);
-}
 html {
     scrollbar-color: var(--scrollbar) var(--bg);
 }
@@ -18,6 +12,19 @@ a > .hljs {
     color: var(--links);
 }
 
+/*
+    body-container is necessary because mobile browsers don't seem to like
+    overflow-x on the body tag when there is a <meta name="viewport"> tag.
+*/
+#body-container {
+    /*
+        This is used when the sidebar pushes the body content off the side of
+        the screen on small screens. Without it, dragging on mobile Safari
+        will want to reposition the viewport in a weird way.
+    */
+    overflow-x: clip;
+}
+
 /* Menu Bar */
 
 #menu-bar,
@@ -507,6 +514,8 @@ ul#searchresults span.teaser em {
     padding: 0;
     list-style: none;
     display: none;
+    /* Don't let the children's background extend past the rounded corners. */
+    overflow: hidden;
 }
 .theme-popup .default {
     color: var(--icons);
@@ -515,7 +524,7 @@ ul#searchresults span.teaser em {
     width: 100%;
     border: 0;
     margin: 0;
-    padding: 2px 10px;
+    padding: 2px 20px;
     line-height: 25px;
     white-space: nowrap;
     text-align: left;
@@ -527,8 +536,10 @@ ul#searchresults span.teaser em {
 .theme-popup .theme:hover {
     background-color: var(--theme-hover);
 }
-.theme-popup .theme:hover:first-child,
-.theme-popup .theme:hover:last-child {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
+
+.theme-selected::before {
+    display: inline-block;
+    content: "✓";
+    margin-left: -14px;
+    width: 14px;
 }