Mercurial > p > roundup > code
comparison website/www/_static/style.css @ 7362:527cad3a860c
color and full width example pre; change way to do max width
Color pre blocks light yellow so they stand out from background. The
white background wasn't enough contrast to make them scannable.
Also try to make pre blocks full bleed to the right to use all
available screen space without overflowing the screen. This makes
viewing, cut/paste etc. the examples easier. When pre extends past
edge of screen, pre will overflow and scrolling will kick in.
I still have an issue with pre inside tables. They cause the table to
overflow. Hence the page needs to be x-scrolled. I can change the
restructured text to insert a div/container and set the conteiner to
scroll on overflow, but I don't have another good answer at the moment.
| author | John Rouillard <rouilj@ieee.org> |
|---|---|
| date | Tue, 16 May 2023 19:37:13 -0400 |
| parents | ff5a50069822 |
| children | 8811f1934a79 |
comparison
equal
deleted
inserted
replaced
| 7361:bc6bcffbed2a | 7362:527cad3a860c |
|---|---|
| 106 width: 100%; | 106 width: 100%; |
| 107 } | 107 } |
| 108 body > .header > #searchbox { position: absolute; right: 1em; top: 1em;} | 108 body > .header > #searchbox { position: absolute; right: 1em; top: 1em;} |
| 109 body > .content > #subnav { position: absolute; right: 1.5em; top: 6em;} | 109 body > .content > #subnav { position: absolute; right: 1.5em; top: 6em;} |
| 110 | 110 |
| 111 /* limit width of main column to 65 characters. On wider screens can | |
| 112 be 100+ chars: too wide */ | |
| 113 main { | 111 main { |
| 114 max-width: 65ch; | |
| 115 line-height: calc(1.5 * 1em); | 112 line-height: calc(1.5 * 1em); |
| 116 } | 113 } |
| 114 | |
| 115 /* limit width of items in main column to 65 characters. On | |
| 116 wider screens can be 100+ chars: too wide */ | |
| 117 main p, main:is(H1, H2, H3, H4, H5, H6), {max-width: 65ch;} | |
| 118 main table { width: 65ch; } | |
| 117 | 119 |
| 118 /* style */ | 120 /* style */ |
| 119 | 121 |
| 120 :link { color: rgb(220,0,0); text-decoration: none;} | 122 :link { color: rgb(220,0,0); text-decoration: none;} |
| 121 :link:hover {text-decoration: underline;} | 123 :link:hover {text-decoration: underline;} |
| 359 overflow-wrap: normal; | 361 overflow-wrap: normal; |
| 360 overflow-x: auto; | 362 overflow-x: auto; |
| 361 /* Shadows */ | 363 /* Shadows */ |
| 362 background-image: | 364 background-image: |
| 363 /* Shadow covers */ | 365 /* Shadow covers */ |
| 364 linear-gradient(to right, white, white), | 366 linear-gradient(to right, #f5f4d8, #f5f4d8), |
| 365 linear-gradient(to right, white, white), | 367 linear-gradient(to right, #f5f4d8, #f5f4d8), |
| 366 /* Shadow */ | 368 /* Shadow */ |
| 367 radial-gradient(farthest-side at 0px 50%, | 369 radial-gradient(farthest-side at 0px 50%, |
| 368 rgba(0, 0, 20, 0.5), rgba(255, 255, 255, 0)), | 370 rgba(0, 0, 20, 0.5), rgba(255, 255, 255, 0)), |
| 369 radial-gradient(farthest-side at 100% 50%, | 371 radial-gradient(farthest-side at 100% 50%, |
| 370 rgba(0, 0, 20, 0.5), rgba(255, 255, 255, 0)); | 372 rgba(0, 0, 20, 0.5), rgba(255, 255, 255, 0)); |
| 374 linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)); | 376 linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)); |
| 375 */ | 377 */ |
| 376 background-position: left center, right center, | 378 background-position: left center, right center, |
| 377 left center, right center; | 379 left center, right center; |
| 378 background-repeat: no-repeat; | 380 background-repeat: no-repeat; |
| 379 background-color: white; | 381 background-color: #f5f4d8; |
| 380 background-size: 20px 100%, 20px 100%, 16px 100%, 16px 100%; | 382 background-size: 20px 100%, 20px 100%, 16px 100%, 16px 100%; |
| 381 background-attachment: local, local, scroll, scroll; | 383 background-attachment: local, local, scroll, scroll; |
| 382 } | 384 } |
| 383 | 385 |
| 384 /* website only */ | 386 /* website only */ |