Mercurial > p > roundup > code
comparison website/www/_static/style.css @ 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 | a3dbd44c3642 |
| children | ff5a50069822 |
comparison
equal
deleted
inserted
replaced
| 7345:3f4963cd2a1d | 7346:4295ac110551 |
|---|---|
| 88 padding: 0 3em 0 14em; | 88 padding: 0 3em 0 14em; |
| 89 } | 89 } |
| 90 | 90 |
| 91 /* -14em is size of table of contents/nav */ | 91 /* -14em is size of table of contents/nav */ |
| 92 body > .header { margin: 0 0 0 -14em;} | 92 body > .header { margin: 0 0 0 -14em;} |
| 93 body > header > div.mobile { display:none; } | |
| 93 body > .header div.label { font-size: 2em; font-weight: bold; margin: 0.67em 0 0.67em 1em;} | 94 body > .header div.label { font-size: 2em; font-weight: bold; margin: 0.67em 0 0.67em 1em;} |
| 94 body > .footer { margin: 1em 0 1em -14em; clear:both;} | 95 body > .footer { margin: 1em 0 1em -14em; clear:both;} |
| 95 body > .navigation | 96 body > .navigation |
| 96 { | 97 { |
| 97 margin-left: -14em; | 98 margin-left: -14em; |
| 309 } | 310 } |
| 310 | 311 |
| 311 dt { font-weight: bold; margin-block-start: 1em;} | 312 dt { font-weight: bold; margin-block-start: 1em;} |
| 312 dt + dd { margin-block-start: 0.25em; } | 313 dt + dd { margin-block-start: 0.25em; } |
| 313 dd p.first { margin-block-start: 0; } | 314 dd p.first { margin-block-start: 0; } |
| 315 dd > ul:first-child { | |
| 316 /* reduce indent with list inside dd. I want to reduce | |
| 317 margin-inline-start on dd but :has(> ul:first-child) | |
| 318 doesn't work in firefox yet, so use negative margin | |
| 319 on ul. */ | |
| 320 margin-inline-start: -32px; | |
| 321 } | |
| 314 | 322 |
| 315 #skiplink { display: block; | 323 #skiplink { display: block; |
| 316 margin-block-start: 1em; | 324 margin-block-start: 1em; |
| 317 margin-inline-start: 1em;} | 325 margin-inline-start: 1em;} |
| 318 #skiplink a { | 326 #skiplink a { |
| 386 width: unset; | 394 width: unset; |
| 387 float: none;} | 395 float: none;} |
| 388 body > .navigation li > ul > li { padding-block: 1em; | 396 body > .navigation li > ul > li { padding-block: 1em; |
| 389 /* move links away from each other */ } | 397 /* move links away from each other */ } |
| 390 #roundup-issue-tracker .note { float: none; /* download box */} | 398 #roundup-issue-tracker .note { float: none; /* download box */} |
| 391 body > .footer { margin-inline-start: unset; } | 399 body > header > div.label.mobile { /* constrain nav label div */ |
| 400 display: block; | |
| 401 margin-inline-start: 0.5em; | |
| 402 max-width: 48%; | |
| 403 } | |
| 404 | |
| 405 /* activate jump link and hide default label at top of stacked sidebar */ | |
| 406 body > header > div.mobile span.jumplabel { | |
| 407 display: block; | |
| 408 font-size: small; | |
| 409 } | |
| 410 body > header > div.non_mobile { display: none; } | |
| 411 | |
| 412 body > .footer { margin-inline-start: 1em; } | |
| 392 | 413 |
| 393 /* changes for content */ | 414 /* changes for content */ |
| 394 /* stop paths and things from overflowing the viewport. */ | 415 /* stop paths and things from overflowing the viewport. */ |
| 395 div.content { overflow-wrap: break-word; } | 416 div.content { overflow-wrap: break-word; } |
| 396 /* add spaces around items in TOC to make hitting the links easier */ | 417 |
| 418 /* add space between items in TOC to make hitting the links easier */ | |
| 419 li[class^=toctree] { margin-block: 1em; } | |
| 420 li[class^=toctree] > ul { margin-top: 1em; } | |
| 421 | |
| 397 div.contents ul.simple li { padding-block: .5em; } | 422 div.contents ul.simple li { padding-block: .5em; } |
| 398 ul.simple li a { min-height: 48px; | 423 |
| 399 display: block;} | 424 h1 + div.contents > ul:first-child { |
| 400 } | 425 /* reduce wasted whitespace to left in TOC */ |
| 401 | 426 padding-inline-start: 1em; |
| 427 } | |
| 428 #subnav { | |
| 429 margin-block-end: 1em; | |
| 430 min-height: 48px; | |
| 431 } | |
| 432 | |
| 433 /* use for table of links to increase space between | |
| 434 links on small devices */ | |
| 435 table.linkspacing tr {height: 48px;} | |
| 436 } | |
| 437 | |
| 438 @media only screen and (max-width:512px) { | |
| 439 /* prevent searchbox bleed into jumplink@top left. */ | |
| 440 #searchbox { max-width: 48%; } | |
| 441 #searchbox > form { | |
| 442 align-items: flex-end; | |
| 443 display: inline-flex; | |
| 444 flex-direction: column; | |
| 445 } | |
| 446 #searchbox > form > input[type=submit] { margin-block: 0.75em; } | |
| 447 } | |
| 402 /* Contact page */ | 448 /* Contact page */ |
| 403 div#contact table td { | 449 div#contact table td { |
| 404 white-space: nowrap; | 450 white-space: nowrap; |
| 405 padding: 1pt 1em; | 451 padding: 1pt 1em; |
| 406 } | 452 } |