Mercurial > p > roundup > code
diff website/www/_templates/layout.html @ 7346:4295ac110551
Ad skiplink to main on moblie; fix overlapping links
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.
| author | John Rouillard <rouilj@ieee.org> |
|---|---|
| date | Sun, 14 May 2023 15:39:13 -0400 |
| parents | dc1715ebbc6d |
| children | 67438e439da8 |
line wrap: on
line diff
--- a/website/www/_templates/layout.html Sun May 14 15:24:58 2023 -0400 +++ b/website/www/_templates/layout.html Sun May 14 15:39:13 2023 -0400 @@ -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">