From c510336081fec00bda4c15ee8c21f3bdfea46139 Mon Sep 17 00:00:00 2001
From: lqdev <liquidev@tutanota.com>
Date: Thu, 22 Feb 2024 20:42:49 +0100
Subject: [PATCH] fix indent guides on mobile

---
 content/treehouse/changelog.tree |  3 +++
 static/css/tree.css              | 16 ++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/content/treehouse/changelog.tree b/content/treehouse/changelog.tree
index b0f0e40..96d766f 100644
--- a/content/treehouse/changelog.tree
+++ b/content/treehouse/changelog.tree
@@ -12,6 +12,9 @@
         % id = "01HQ94FDZK5TJDM3CMNKQKES6Z"
         - if that's too annoying for you, it's easy to disable - scroll down on the [news page][page:treehouse/new] and there's a (collapsed by default) settings section for the page
 
+    % id = "01HQ95D2GHKF807X294N3GBADP"
+    - another thing: there are now indent guides! my girlfriend said these make the website a lot more readable for her, so I guess they're good
+
 % id = "01HP5AKRNJRG1W71MDJ8QY4YFW"
 - **revision 4:** there's now a thing in the footer
 
diff --git a/static/css/tree.css b/static/css/tree.css
index e63924f..2ee7ab2 100644
--- a/static/css/tree.css
+++ b/static/css/tree.css
@@ -86,6 +86,13 @@
     --tree-indent-guide-highlighted: var(--border-1);
 }
 
+@media (hover: none) {
+    .tree {
+        --tree-indent-guide-dim: var(--border-1);
+        --tree-indent-guide-highlighted: var(--border-1);
+    }
+}
+
 /* Use an indent level appropriate for the viewport. */
 .tree ul {
     --tree-responsive-indent-width: clamp(8px, 2vw, var(--tree-indent-width));
@@ -102,6 +109,7 @@
     border-left-color: var(--tree-indent-guide-highlighted);
 }
 
+
 /* Top level should not have an indent or a border. */
 .tree>ul {
     padding-left: 0;
@@ -287,6 +295,14 @@ th-bb {
 @media (hover: none) {
     .tree th-bb {
         opacity: 100%;
+
+        /* Replace margin with button size to make it easier to click. */
+        margin: 0px;
+
+        & a.icon {
+            width: 32px;
+            height: 32px;
+        }
     }
 }