From cc47d0ee51406e8f8938d11fce5f2b4530a4b4ae Mon Sep 17 00:00:00 2001
From: Timothy Allen <tim@treehouse.org.za>
Date: Sat, 26 Sep 2026 11:19:49 +0200
Subject: [PATCH] Hide the word Menu on phones.

The icon alone shows the menu, and page titles move closer to it.
---
 style.css | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/style.css b/style.css
index 963f8ab..6617d7c 100644
--- a/style.css
+++ b/style.css
@@ -359,12 +359,12 @@ pre {
   #maintext {
     margin-left: 0;
   }
-  /* The Menu bar covers the top left of the page. Its text ends about
-     90px from the left of #maintext (10px padding, a 22px icon, a space,
-     5px padding and "Menu" at 20px), so a long title wraps to the right
+  /* The menu icon covers the top left of the page. It ends about 27px
+     from the left of #maintext (the sidebar starts 5px further left, then
+     10px padding and the 22px icon), so a long title wraps to the right
      of it instead of running under it */
   #maintext > h1:not(.logo) {
-    margin-left: 110px;
+    margin-left: 50px;
   }
   footer#bottom {
     border-radius: 8px;
@@ -394,7 +394,7 @@ pre {
     z-index: 50;
     top: 0;
     left: 0;
-    width: calc(100% - 10px);
+    width: 44px; /* the icon, with room for a finger */
     height: 40px; /* text box size */
   }
   #sidebar nav.links {
@@ -454,10 +454,14 @@ pre {
   #sidebar input.menu-toggle:checked ~ .menu-toggle .close {
     clip-path: polygon(0 0, 150px 0, 150px 100%, 0 100%); /* uncovered */
   }
+  /* The icon alone shows the menu; the word "Menu" stays for screen readers */
   #sidebar .menu-toggle .text {
-    font-size: 20px;
-    padding-left: 5px;
-    padding-right: 10px;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
   }
   #sidebar .menu-toggle .icon {
     display: inline-block;