Mercurial > p > roundup > code
comparison website/www/_static/style.css @ 7290:7435320ea041
Restyle html documentation
Make doc look better. Try to reduce "wall of dense text" effect.
1) fluid type scale
apply to headers along with change to line height
2) increase base line height to 1.5
3) increase proximity of header to the section it leads by reducing
bottom margin.
4) add decoration for hovered link. Still have WCAG AA issue with
contrast between links and base text
5) remove most pure white and pure black from document to reduce eye
strain
6) in side nav reduce indent from 2em to 1em to better fit labels
7) use same styles for web site doc and release doc on local disk
8) a 'p' inside a 'table' now aligns with top of table cell by removing
top margin.
9) in web doc, highlight the current section
| author | John Rouillard <rouilj@ieee.org> |
|---|---|
| date | Tue, 25 Apr 2023 18:53:25 -0400 |
| parents | 7820cc786b5e |
| children | 1ce75966d274 |
comparison
equal
deleted
inserted
replaced
| 7289:74778ed75aad | 7290:7435320ea041 |
|---|---|
| 1 /* layout*/ | 1 /* layout*/ |
| 2 | |
| 3 /* Set up fluid type scale. Major third for smaller screens | |
| 4 and perfect fourth for larger screens. | |
| 5 Allow override using --font-level-X. | |
| 6 | |
| 7 https://set.studio/some-simple-ways-to-make-content-look-good/ | |
| 8 */ | |
| 9 | |
| 10 :root { | |
| 11 --_font-level-0: var(--font-level-0, | |
| 12 clamp(1rem, | |
| 13 0.96rem + 0.22vw, | |
| 14 1.13rem) | |
| 15 ); | |
| 16 --_font-level-1: var(--font-level-1, | |
| 17 clamp( | |
| 18 1.25 * var(--_font-level-0), | |
| 19 1.16rem + 0.43vw, | |
| 20 1.5rem) | |
| 21 ); | |
| 22 --_font-level-2: var(--font-level-2, | |
| 23 clamp( | |
| 24 1.25 * var(--_font-level-1), | |
| 25 1.41rem + 0.76vw, | |
| 26 2rem) | |
| 27 ); | |
| 28 --_font-level-3: var(--font-level-3, | |
| 29 clamp( | |
| 30 1.25 * var(--_font-level-2), | |
| 31 1.71rem + 1.24vw, | |
| 32 2.66rem) | |
| 33 ); | |
| 34 --_font-level-4: var(--font-level-4, | |
| 35 clamp( | |
| 36 1.25 * var(--_font-level-3), | |
| 37 2.05rem + 1.93vw, | |
| 38 3.55rem) | |
| 39 ); | |
| 40 } | |
| 41 | |
| 42 h1, h2, h3, h4, h5, h6 { | |
| 43 line-height: 1.25; | |
| 44 /* Larger spacing before header and smaller after to make | |
| 45 header part of following section */ | |
| 46 margin-block-end: 0.3em; | |
| 47 } | |
| 48 | |
| 49 h1 { | |
| 50 font-size: var(--_font-level-4); | |
| 51 } | |
| 52 | |
| 53 /* remove whitespace at top of main column */ | |
| 54 main h1 { margin-block-start: 0; } | |
| 55 | |
| 56 h2 { | |
| 57 font-size: var(--_font-level-3); | |
| 58 } | |
| 59 | |
| 60 h3 { | |
| 61 font-size: var(--_font-level-2); | |
| 62 } | |
| 63 | |
| 64 h4 { | |
| 65 font-size: var(--_font-level-1); | |
| 66 } | |
| 67 | |
| 68 /* snug header up to first paragraph of it's section. */ | |
| 69 :is(h1,h2,h3,h4,h5,h6) + p { | |
| 70 margin-block-start: 0; | |
| 71 } | |
| 72 | |
| 2 body | 73 body |
| 3 { | 74 { |
| 75 background-color: #f5f5f5; | |
| 76 color: #222; | |
| 4 font-family: sans-serif, Arial, Helvetica; | 77 font-family: sans-serif, Arial, Helvetica; |
| 5 background-color: white; | 78 font-size: var(--_font-level-0); |
| 6 color: #333; | |
| 7 margin:0; | 79 margin:0; |
| 8 padding: 0 3em 0 14em; | 80 padding: 0 3em 0 14em; |
| 9 } | 81 } |
| 82 | |
| 83 /* -14em is size of table of contents/nav */ | |
| 10 body > .header { margin: 0 0 0 -14em;} | 84 body > .header { margin: 0 0 0 -14em;} |
| 11 body > .header div.label { font-size: 2em; font-weight: bold; margin: 0.67em 0 0.67em 1em;} | 85 body > .header div.label { font-size: 2em; font-weight: bold; margin: 0.67em 0 0.67em 1em;} |
| 12 body > .footer { margin: 1em 0 1em -14em; clear:both;} | 86 body > .footer { margin: 1em 0 1em -14em; clear:both;} |
| 13 body > .navigation | 87 body > .navigation |
| 14 { | 88 { |
| 16 width: 14em; | 90 width: 14em; |
| 17 float: left; | 91 float: left; |
| 18 } | 92 } |
| 19 body > .content | 93 body > .content |
| 20 { | 94 { |
| 95 margin: 0; | |
| 21 width: 100%; | 96 width: 100%; |
| 22 margin: 0; | |
| 23 } | 97 } |
| 24 body > .header > #searchbox { position: absolute; right: 1em; top: 1em;} | 98 body > .header > #searchbox { position: absolute; right: 1em; top: 1em;} |
| 25 body > .content > #subnav { position: absolute; right: 1.5em; top: 5em;} | 99 body > .content > #subnav { position: absolute; right: 1.5em; top: 6em;} |
| 100 | |
| 101 /* limit width of main column to 65 characters. On wider screens can | |
| 102 be 100+ chars: too wide */ | |
| 103 main { | |
| 104 max-width: 65ch; | |
| 105 line-height: calc(1.5 * 1em); | |
| 106 } | |
| 26 | 107 |
| 27 /* style */ | 108 /* style */ |
| 28 | 109 |
| 29 :link { color: #bb0000; text-decoration: none;} | 110 :link { color: #bb0000; text-decoration: none;} |
| 111 :link:hover {text-decoration: underline;} | |
| 30 :visited { color: #770000; text-decoration: none;} | 112 :visited { color: #770000; text-decoration: none;} |
| 31 a.toc-backref { color: #000000; } | 113 a.toc-backref { color: #000000; } |
| 32 | 114 |
| 33 .header h1 { margin-left: 1em; } | 115 .header h1 { margin-left: 1em; } |
| 34 | |
| 35 body | |
| 36 { | |
| 37 font-family: sans-serif, Arial, Helvetica; | |
| 38 background-color: #f5f5f5; | |
| 39 color: #333; | |
| 40 } | |
| 41 | 116 |
| 42 .menu { padding: 0; margin-right: 1em;} | 117 .menu { padding: 0; margin-right: 1em;} |
| 43 .menu ul | 118 .menu ul |
| 44 { | 119 { |
| 45 padding: 0; | 120 padding: 0; |
| 71 border:none; | 146 border:none; |
| 72 background-color: inherit; | 147 background-color: inherit; |
| 73 } | 148 } |
| 74 .menu ul ul | 149 .menu ul ul |
| 75 { | 150 { |
| 76 margin-left: 2em; | 151 margin-left: 1em; |
| 77 font-size: smaller; | 152 font-size: smaller; |
| 78 } | 153 } |
| 79 | 154 |
| 80 /* sub-menu items draw a separator */ | 155 /* sub-menu items draw a separator */ |
| 81 .menu ul ul > li | 156 .menu ul ul > li |
| 89 .menu ul ul > li:first-child | 164 .menu ul ul > li:first-child |
| 90 { | 165 { |
| 91 border-top: none; | 166 border-top: none; |
| 92 } | 167 } |
| 93 | 168 |
| 169 .menu ul li.toctree-l2.current { | |
| 170 background-color: #dddddd; | |
| 171 pading-block: 0.25em; | |
| 172 } | |
| 173 | |
| 174 /* related */ | |
| 175 div.related | |
| 176 { | |
| 177 width: 100%; | |
| 178 font-size: 90%; | |
| 179 } | |
| 180 div.related-top { border-bottom: solid thin #dadada;} | |
| 181 div.related-bottom { border-top: solid thin #dadada;} | |
| 182 | |
| 183 div.related ul | |
| 184 { | |
| 185 margin: 0; | |
| 186 padding: 0 0 0 10px; | |
| 187 list-style: none; | |
| 188 } | |
| 189 | |
| 190 div.related li { display: inline;} | |
| 191 | |
| 192 div.related li.right | |
| 193 { | |
| 194 float: right; | |
| 195 margin-right: 5px; | |
| 196 } | |
| 197 | |
| 94 .footer | 198 .footer |
| 95 { | 199 { |
| 96 font-size: small; | 200 font-size: small; |
| 97 text-align: center; | 201 text-align: center; |
| 98 color: black; | 202 color: black; |
| 104 | 208 |
| 105 .content | 209 .content |
| 106 { | 210 { |
| 107 padding: 1em; | 211 padding: 1em; |
| 108 border: solid thin #dadada; | 212 border: solid thin #dadada; |
| 109 background-color: #ffffff; | 213 background-color: #f7f7f7; |
| 110 } | 214 } |
| 111 | 215 |
| 112 /* This is a little hack to inject a 'news' block into the title | 216 /* This is a little hack to inject a 'news' block into the title |
| 113 page without having to set up a custom directive. */ | 217 page without having to set up a custom directive. */ |
| 114 #roundup-issue-tracker .note | 218 #roundup-issue-tracker .note |
| 127 border-collapse: collapse; | 231 border-collapse: collapse; |
| 128 border-spacing: 1px; | 232 border-spacing: 1px; |
| 129 background-color: #fafafa; | 233 background-color: #fafafa; |
| 130 } | 234 } |
| 131 | 235 |
| 236 table:has(caption) { | |
| 237 margin-block: 1em; | |
| 238 } | |
| 239 | |
| 240 table caption { font-weight: bold; font-size: smaller; } | |
| 241 | |
| 242 table.footnote { | |
| 243 font-size: calc(1em - 1pt); | |
| 244 } | |
| 245 | |
| 246 td { | |
| 247 /* pull text away from borders */ | |
| 248 padding-inline: 0.5em; | |
| 249 } | |
| 250 | |
| 251 td > p { | |
| 252 /* remove top margin on a p inside table cell so that | |
| 253 columns with paragraphs align at top of cell rather | |
| 254 than leaving a blank margin */ | |
| 255 margin-block-start: 0px; | |
| 256 } | |
| 257 | |
| 132 input, textarea { border-width: 1px; } | 258 input, textarea { border-width: 1px; } |
| 133 | 259 |
| 134 | 260 a.headerlink { |
| 135 /* Contact page */ | 261 font-size: 0.8em; |
| 136 div#contact table td { | 262 margin-left: 0.3em; |
| 137 white-space: nowrap; | 263 color: #c99; |
| 138 padding: 1pt 1em; | 264 } |
| 139 } | 265 |
| 140 | 266 div.admonition { |
| 141 @media only screen and (max-width:960px) { | 267 padding-inline: 1em; |
| 142 /* setup for layout/page frame */ | 268 padding-block: 0.25em; |
| 143 body { padding-inline-start: unset; /* remove space for float menu */} | 269 border-inline-start: grey solid 4px; |
| 144 body > .header { margin-inline-start: unset; | 270 background-color: #dfdfdf; |
| 145 margin-block-start: 3em; /* move down from search */} | 271 } |
| 146 body > .navigation { margin-inline-start: unset; | 272 |
| 147 float: none;} | 273 div.admonition.caution { |
| 148 body > .navigation li > ul > li { padding-block: 1em; | 274 border-inline-start: red solid 4px; |
| 149 /* move links away from each other */ } | 275 } |
| 150 #roundup-issue-tracker .note { float: none; /* download box */} | 276 |
| 151 body > .footer { margin-inline-start: unset; } | 277 div.admonition.warning { |
| 152 | 278 border-inline-start: yellow solid 4px; |
| 153 /* changes for content */ | 279 } |
| 154 /* stop paths and things from overflowing the viewport. */ | 280 |
| 155 div.content { overflow-wrap: break-word; } | 281 p.admonition-title { |
| 156 /* add spaces around items in TOC to make hitting the links easier */ | 282 border-block-end: grey solid 2px; |
| 157 div.contents ul.simple li { padding-block: .5em; } | 283 font-weight: bold; |
| 158 ul.simple li a { min-height: 48px; | 284 font-size: larger; |
| 159 display: block;} | 285 margin-block: 0; |
| 160 /* make examples with long lines scrollable */ | 286 } |
| 161 div.highlight pre { overflow: auto;} | 287 |
| 162 } | 288 div.admonition.caution p.admonition-title { |
| 163 /* set background when using borland pygments style */ | 289 border-block-end: red solid 2px; |
| 164 div.highlight pre { background: lightyellow;} | 290 } |
| 291 | |
| 292 dt { font-weight: bold; margin-block-start: 1em;} | |
| 293 dd p.first { margin-block-start: 0; } | |
| 165 | 294 |
| 166 #skiplink { display: block; | 295 #skiplink { display: block; |
| 167 margin-block-start: 1em; | 296 margin-block-start: 1em; |
| 168 margin-inline-start: 1em;} | 297 margin-inline-start: 1em;} |
| 169 #skiplink a { | 298 #skiplink a { |
| 183 | 312 |
| 184 /* remove solid black border when focus is around the main section | 313 /* remove solid black border when focus is around the main section |
| 185 due to activation of skip-link. Page jumps there, that's enough. */ | 314 due to activation of skip-link. Page jumps there, that's enough. */ |
| 186 #main:focus-visible {outline: none;} | 315 #main:focus-visible {outline: none;} |
| 187 | 316 |
| 188 table.footnote { | 317 /* website only */ |
| 189 font-size: calc(1em - 1pt); | 318 /* assume desktop reader for local html files, also no contact |
| 190 } | 319 page for local doc files */ |
| 191 | 320 |
| 192 div.admonition { | 321 @media only screen and (max-width:960px) { |
| 193 padding-inline: 1em; | 322 /* setup for layout/page frame */ |
| 194 padding-block: 0.25em; | 323 body { padding-inline-start: unset; /* remove space for float menu */} |
| 195 border-inline-start: grey solid 4px; | 324 body > .header { margin-inline-start: unset; |
| 196 background-color: #dfdfdf; | 325 margin-block-start: 3em; /* move down from search */} |
| 197 } | 326 body > .navigation { margin-inline-start: unset; |
| 198 | 327 float: none;} |
| 199 div.admonition.caution { | 328 body > .navigation li > ul > li { padding-block: 1em; |
| 200 border-inline-start: red solid 4px; | 329 /* move links away from each other */ } |
| 201 } | 330 #roundup-issue-tracker .note { float: none; /* download box */} |
| 202 | 331 body > .footer { margin-inline-start: unset; } |
| 203 div.admonition.warning { | 332 |
| 204 border-inline-start: yellow solid 4px; | 333 /* changes for content */ |
| 205 } | 334 /* stop paths and things from overflowing the viewport. */ |
| 206 | 335 div.content { overflow-wrap: break-word; } |
| 207 p.admonition-title { | 336 /* add spaces around items in TOC to make hitting the links easier */ |
| 208 border-block-end: grey solid 2px; | 337 div.contents ul.simple li { padding-block: .5em; } |
| 209 font-weight: bold; | 338 ul.simple li a { min-height: 48px; |
| 210 font-size: larger; | 339 display: block;} |
| 211 margin-block: 0; | 340 /* make examples with long lines scrollable */ |
| 212 } | 341 div.highlight pre { overflow: auto;} |
| 213 | 342 } |
| 214 div.admonition.caution p.admonition-title { | 343 |
| 215 border-block-end: red solid 2px; | 344 /* Contact page */ |
| 216 } | 345 div#contact table td { |
| 217 | 346 white-space: nowrap; |
| 218 dt { font-weight: bold; margin-block-start: 1em;} | 347 padding: 1pt 1em; |
| 219 dd p.first { margin-block-start: 0; } | 348 } |
| 349 |