tim/xxx
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Hide the word Menu on phones.

Browse Source 
The icon alone shows the menu, and page titles move closer to it.
This commit is contained in:
tim
2026-09-26 15:27:51 +02:00
parent 45bca9e76a
commit cc47d0ee51
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+12 -8
View File
@@ -359,12 +359,12 @@ pre {
#maintext { #maintext {
margin-left: 0; margin-left: 0;
} }
/* The Menu bar covers the top left of the page. Its text ends about /* The menu icon covers the top left of the page. It ends about 27px
90px from the left of #maintext (10px padding, a 22px icon, a space, from the left of #maintext (the sidebar starts 5px further left, then
5px padding and "Menu" at 20px), so a long title wraps to the right 10px padding and the 22px icon), so a long title wraps to the right
of it instead of running under it */ of it instead of running under it */
#maintext > h1:not(.logo) { #maintext > h1:not(.logo) {
margin-left: 110px; margin-left: 50px;
} }
footer#bottom { footer#bottom {
border-radius: 8px; border-radius: 8px;
@@ -394,7 +394,7 @@ pre {
z-index: 50; z-index: 50;
top: 0; top: 0;
left: 0; left: 0;
width: calc(100% - 10px); width: 44px; /* the icon, with room for a finger */
height: 40px; /* text box size */ height: 40px; /* text box size */
} }
#sidebar nav.links { #sidebar nav.links {
@@ -454,10 +454,14 @@ pre {
#sidebar input.menu-toggle:checked ~ .menu-toggle .close { #sidebar input.menu-toggle:checked ~ .menu-toggle .close {
clip-path: polygon(0 0, 150px 0, 150px 100%, 0 100%); /* uncovered */ 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 { #sidebar .menu-toggle .text {
font-size: 20px; position: absolute;
padding-left: 5px; width: 1px;
padding-right: 10px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
} }
#sidebar .menu-toggle .icon { #sidebar .menu-toggle .icon {
display: inline-block; display: inline-block;