Mercurial > p > roundup > code
comparison doc/_static/style.css @ 7317:7e25424e2169
Fix spacing in TOC; Change pre blocks to scroll w/ scroll shadows
The lists in a TOC have too much spacing after adding the lobotomized
owl. Shrink it for desktop.
The pre example code was getting wrapped and it was confusing. Some
single lines looked like two etc. So change pre's to overflow with a
scroll bar. To make the scroll section obvious (since scrollbars won't
always be shown on mobile), add scroll shadows in direction of
scrollability. I made arc shaped shadows rather than straight shadows
as they look better.
| author | John Rouillard <rouilj@ieee.org> |
|---|---|
| date | Thu, 11 May 2023 02:36:14 -0400 |
| parents | 4917bb4b5eac |
| children | a5dd4893d089 |
comparison
equal
deleted
inserted
replaced
| 7316:a5f948e0eef5 | 7317:7e25424e2169 |
|---|---|
| 38 3.55rem) | 38 3.55rem) |
| 39 ); | 39 ); |
| 40 } | 40 } |
| 41 | 41 |
| 42 * + * { margin-block-start: 1.2em;} | 42 * + * { margin-block-start: 1.2em;} |
| 43 | |
| 44 /* shrink spacing between list elements in tables of contents */ | |
| 45 div.contents * + * { margin-block-start: 0.25em;} | |
| 43 | 46 |
| 44 h1, h2, h3, h4, h5, h6 { | 47 h1, h2, h3, h4, h5, h6 { |
| 45 line-height: 1.25; | 48 line-height: 1.25; |
| 46 /* Larger spacing before header and smaller after to make | 49 /* Larger spacing before header and smaller after to make |
| 47 header part of following section */ | 50 header part of following section */ |
| 327 /* remove solid black border when focus is around the main section | 330 /* remove solid black border when focus is around the main section |
| 328 due to activation of skip-link. Page jumps there, that's enough. */ | 331 due to activation of skip-link. Page jumps there, that's enough. */ |
| 329 #main:focus-visible {outline: none;} | 332 #main:focus-visible {outline: none;} |
| 330 | 333 |
| 331 /* Prevent examples from extending outside the viewport */ | 334 /* Prevent examples from extending outside the viewport */ |
| 332 div.highlight > pre { | 335 /*div.highlight > pre { |
| 333 overflow-wrap: anywhere; | 336 overflow-wrap: anywhere; |
| 334 white-space: break-spaces; | 337 white-space: break-spaces; |
| 335 } | 338 }*/ |
| 339 | |
| 340 /* Forcing wrap in a pre leads to some confusing line breaks. | |
| 341 Use a horizontal scroll. Indicate the scroll by using | |
| 342 rounded scroll shadows. | |
| 343 | |
| 344 https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/ | |
| 345 https://blogit.create.pt/pedrolopes/2022/03/24/css-scroll-shadows/ | |
| 346 */ | |
| 347 div.highlight > pre { | |
| 348 overflow-wrap: none; | |
| 349 overflow-x: auto; | |
| 350 /* Shadows */ | |
| 351 background-image: | |
| 352 /* Shadow covers */ | |
| 353 linear-gradient(to right, white, white), | |
| 354 linear-gradient(to right, white, white), | |
| 355 /* Shadow */ | |
| 356 radial-gradient(farthest-side at 0px 50%, | |
| 357 rgba(0, 0, 20, 0.5), rgba(255, 255, 255, 0)), | |
| 358 radial-gradient(farthest-side at 100% 50%, | |
| 359 rgba(0, 0, 20, 0.5), rgba(255, 255, 255, 0)); | |
| 360 /* square shadows */ | |
| 361 /* | |
| 362 linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), | |
| 363 linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)); | |
| 364 */ | |
| 365 background-position: left center, right center, | |
| 366 left center, right center; | |
| 367 background-repeat: no-repeat; | |
| 368 background-color: white; | |
| 369 background-size: 20px 100%, 20px 100%, 16px 100%, 16px 100%; | |
| 370 background-attachment: local, local, scroll, scroll; | |
| 371 } |