Mercurial > p > roundup > code
diff 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 |
line wrap: on
line diff
--- a/doc/_static/style.css Thu May 11 00:48:42 2023 -0400 +++ b/doc/_static/style.css Thu May 11 02:36:14 2023 -0400 @@ -41,6 +41,9 @@ * + * { margin-block-start: 1.2em;} +/* shrink spacing between list elements in tables of contents */ +div.contents * + * { margin-block-start: 0.25em;} + h1, h2, h3, h4, h5, h6 { line-height: 1.25; /* Larger spacing before header and smaller after to make @@ -329,7 +332,40 @@ #main:focus-visible {outline: none;} /* Prevent examples from extending outside the viewport */ -div.highlight > pre { +/*div.highlight > pre { overflow-wrap: anywhere; white-space: break-spaces; +}*/ + +/* Forcing wrap in a pre leads to some confusing line breaks. + Use a horizontal scroll. Indicate the scroll by using + rounded scroll shadows. + + https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/ + https://blogit.create.pt/pedrolopes/2022/03/24/css-scroll-shadows/ + */ +div.highlight > pre { + overflow-wrap: none; + overflow-x: auto; + /* Shadows */ + background-image: + /* Shadow covers */ + linear-gradient(to right, white, white), + linear-gradient(to right, white, white), + /* Shadow */ + radial-gradient(farthest-side at 0px 50%, + rgba(0, 0, 20, 0.5), rgba(255, 255, 255, 0)), + radial-gradient(farthest-side at 100% 50%, + rgba(0, 0, 20, 0.5), rgba(255, 255, 255, 0)); + /* square shadows */ + /* + linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), + linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)); + */ + background-position: left center, right center, + left center, right center; + background-repeat: no-repeat; + background-color: white; + background-size: 20px 100%, 20px 100%, 16px 100%, 16px 100%; + background-attachment: local, local, scroll, scroll; }