Ad skiplink to main on moblie; fix overlapping links

rouilj · rouilj · commit 66ff76daf705 · 2023-05-14T15:39:13.000-04:00
On mobile, the Roundup label at the top of the stacked table of
contents becomes a link to jump to the top of the main body of the
page. Without this there is no indication that a link on the main menu
has been clicked and there is a lot of scrolling to get to the real
content of the page. Ideally the left sidebar would become a menu link
an be shown only when activated but ....

Ran the top level pages through lighthouse to see how they do on
mobile.  Style changes added to fix links that overlap; fix links that
were incorrectly displayed as blocks rather than in running text.

Fixes some spacing issues with nested lists inside definition lists
definition (dd) tags. Removed some indent when TOC follows n H1
header. Wrap search box on smaller screens so the search box doesn't
overlap the jump link. Add back left margin to footer.

Tried to prevent overlap with the prev/next/index submenu. It's better
but still not good.
diff --git a/website/www/_static/style.css b/website/www/_static/style.css
@@ -90,6 +90,7 @@ body
 
 /* -14em is size of table of contents/nav */
 body > .header { margin: 0 0 0 -14em;}
+body > header > div.mobile { display:none; }
 body > .header div.label { font-size: 2em; font-weight: bold; margin: 0.67em 0 0.67em 1em;}
 body > .footer { margin: 1em 0 1em -14em; clear:both;}
 body > .navigation 
@@ -311,6 +312,13 @@ div.admonition.caution p.admonition-title {
 dt { font-weight: bold; margin-block-start: 1em;}
 dt + dd { margin-block-start: 0.25em; }
 dd p.first { margin-block-start: 0; }
+dd > ul:first-child {
+    /* reduce indent with list inside dd. I want to reduce
+       margin-inline-start on dd but :has(> ul:first-child)
+       doesn't work in firefox yet, so use negative margin
+       on ul. */
+    margin-inline-start: -32px;
+}
 
 #skiplink { display: block;
                    margin-block-start: 1em;
@@ -388,17 +396,55 @@ div.highlight > pre {
     body > .navigation li > ul > li { padding-block: 1em;
     /* move links away from each other */ }
     #roundup-issue-tracker .note { float: none; /* download box */}
-    body > .footer { margin-inline-start: unset; }
+    body > header > div.label.mobile { /* constrain nav label div */
+	display: block;
+	margin-inline-start: 0.5em;
+	max-width: 48%;
+    }
+
+    /* activate jump link and hide default label at top of stacked sidebar */
+    body > header > div.mobile span.jumplabel {
+	display: block;
+	font-size: small;
+    }
+    body > header > div.non_mobile { display: none; }
+
+    body > .footer { margin-inline-start: 1em; }
 
     /* changes for content */
     /* stop paths and things from overflowing the viewport. */
     div.content { overflow-wrap: break-word; }
-    /* add spaces around items in TOC to make hitting the links easier */
+
+    /* add space between items in TOC to make hitting the links easier */
+    li[class^=toctree] { margin-block: 1em; }
+    li[class^=toctree] > ul { margin-top: 1em; }
+
     div.contents ul.simple li { padding-block: .5em; }
-    ul.simple li a { min-height: 48px;
-		     display: block;}
-}
 
+    h1 + div.contents > ul:first-child {
+	/* reduce wasted whitespace to left in TOC */
+	padding-inline-start: 1em;
+    }
+    #subnav {
+	margin-block-end: 1em;
+	min-height: 48px;
+    }
+
+    /* use for table of links to increase space between
+    links on small devices */
+    table.linkspacing tr {height: 48px;}
+}
+
+@media only screen and (max-width:512px) {
+    /* prevent searchbox bleed into jumplink@top left. */
+    #searchbox { max-width: 48%; }
+    #searchbox > form {
+	align-items: flex-end;
+	display: inline-flex;
+	flex-direction: column;
+    }
+    #searchbox > form > input[type=submit] { margin-block: 0.75em; }
+}
 /* Contact page */
 div#contact table td {
   white-space: nowrap;
diff --git a/website/www/_templates/layout.html b/website/www/_templates/layout.html
@@ -72,7 +72,10 @@
   </head>
   <body>
     <div id="skiplink"><a href="#main">Skip to main content</a></div>
-    <header class="header"><div class="label">Roundup</div>
+    <header class="header">
+      <div class="label non_mobile">Roundup</div>
+      <div class="label mobile"><a href="#main">Roundup
+	  <span class="jumplabel">jump to {{ title|e }}</span></a></div>
       {%- if pagename != "search" %}
         <div id="searchbox" style="display: none">
           <form class="search" action="{{ pathto('search') }}" method="get">
