some responsiveness tweaks

content/index.tree

@@ -166,4 +166,5 @@
             - breaking
 
     % content.link = "secret"
+      id = "01H89KGMPBCNKH4D39ZNQJDPQ9"
     + this block includes another block's content

static/css/main.css

@@ -6,6 +6,16 @@ body {
     margin-right: auto;
 }
 
+main {
+    padding: 0 16px;
+}
+
+@media screen and (max-width: 480px) {
+    main {
+        padding: 0 8px;
+    }
+}
+
 /* Choose more pretty colors than vanilla HTML */
 
 body {
@@ -111,6 +121,12 @@ pre {
     border-radius: 8px;
 }
 
+/* And don't let code examples fly off and overflow the window */
+
+pre {
+    overflow-x: scroll;
+}
+
 /* Also don't let images get out of hand */
 
 img {

static/css/tree.css

@@ -1,7 +1,13 @@
 /* The tree indents shouldn't be too spaced out */
 
 .tree ul {
-    padding-left: 24px;
+    padding-left: clamp(12px, 2vw, 24px);
+}
+
+/* But the first block should not be indented. */
+
+.tree>ul {
+    padding-left: 0;
 }
 
 /* Make the tree have + and - instead of the default details/summary arrow */
@@ -43,6 +49,10 @@
     padding-right: 32px;
 }
 
+.tree li[is="th-linked-branch"]>details>summary:first-child {
+    padding-right: 56px;
+}
+
 .tree li>div:first-child:hover {
     border-bottom: 1px solid rgba(0, 0, 0, 15%);
     margin-bottom: -1px;
@@ -78,6 +88,19 @@
     background-image: url('../svg/collapse.svg');
 }
 
+@media (hover: none) {
+
+    .tree li>div:first-child,
+    .tree li>details>summary:first-child {
+        border-bottom: 1px solid rgba(0, 0, 0, 15%);
+    }
+
+    .tree details>summary {
+        border-radius: 0px;
+    }
+}
+
+
 .tree th-bb {
     height: 24px;
     margin: 4px;
@@ -92,11 +115,18 @@
     opacity: 0%;
 }
 
+
 .tree li>details>summary:hover>th-bb,
 .tree li>div:hover>th-bb {
     opacity: 100%;
 }
 
+@media (hover: none) {
+    .tree th-bb {
+        opacity: 100%;
+    }
+}
+
 .tree .icon {
     background-repeat: no-repeat;
     background-position: 50% 50%;
@@ -106,6 +136,7 @@
     height: 24px;
 }
 
+
 .tree .icon-permalink {
     background-image: url("../svg/permalink.svg");
 }

template/tree.hbs

@@ -7,6 +7,8 @@
 
     <title>{{ config.user.title }}</title>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
     <link rel="stylesheet" href="{{ site }}/static/css/main.css">
     <link rel="stylesheet" href="{{ site }}/static/css/tree.css">
     <link rel="stylesheet" href="{{ site }}/static/font/font.css">