HTML source code, style-sheets, scripts, and images for deployment on mingw.osdn.io
| 修訂 | bed8fd450e68f095168147285998a34743ba819a (tree) |
|---|---|
| 時間 | 2021-11-20 07:58:22 |
| 作者 |  Keith Marshall <keith@user...> |
| Commiter | Keith Marshall |
Specify some additional site style properties.
* site.css (h4): Set margins globally.
(page-view): Set minimum relative display width.
(dl.masthead): No longer required; delete specification.
(div.overlapped) [following "masthead"]: Adjust top margin.
(nowrap, box-out, table.borderless): New styling classes.
(pre.vt) [box-out]: Specialization of <code> style, for use in
illustration of screen display output; lighten text colour.
(kbd) [pre.vt]: Darken text colour, for keyboard input.
(code) [within <a> tag scope]: Inherit text colour.
(code) [within body text]: Lighten text colour.
| @@ -62,12 +62,18 @@ h3 | ||
| 62 | 62 | */ |
| 63 | 63 | margin-bottom: -0.2em; |
| 64 | 64 | } |
| 65 | +h4 | |
| 66 | +{ margin: 0.8em 0 -0.2em; | |
| 67 | +} | |
| 65 | 68 | hr |
| 66 | 69 | { /* Match the colour of horizontal page dividing rules to that |
| 67 | 70 | * of the text. |
| 68 | 71 | */ |
| 69 | 72 | color: #000066; |
| 70 | 73 | } |
| 74 | +.nowrap | |
| 75 | +{ white-space: nowrap; | |
| 76 | +} | |
| 71 | 77 | a |
| 72 | 78 | { /* Links are distiguisable by use of a contrasting text colour; |
| 73 | 79 | * there is no need to underline them too! |
| @@ -80,6 +86,13 @@ a:visited | ||
| 80 | 86 | */ |
| 81 | 87 | color: #aa00cc; |
| 82 | 88 | } |
| 89 | +a code | |
| 90 | +{ /* Whereas code samples, within running text, are displayed in a | |
| 91 | + * reduced-intensity colour, when encapsulated within a reference | |
| 92 | + * anchor, the anchor colour should prevail. | |
| 93 | + */ | |
| 94 | + color: inherit; | |
| 95 | +} | |
| 83 | 96 | p |
| 84 | 97 | { /* Use the browser's default paragraph styling, but tighten the |
| 85 | 98 | * inter-paragraph spacing... |
| @@ -112,6 +125,18 @@ ul li, ol li | ||
| 112 | 125 | ul li:first-child, ol li:first-child |
| 113 | 126 | { margin-top: 0; |
| 114 | 127 | } |
| 128 | +ul.overlapped | |
| 129 | +{ margin-left: -0.6em; margin-bottom: 0; padding-top: calc( 70px + 0.6em ); | |
| 130 | +} | |
| 131 | +ul.overlapped li > p:last-child | |
| 132 | +{ margin-bottom: 0; | |
| 133 | +} | |
| 134 | +li > p | |
| 135 | +{ /* For multi-paragraph list items, keep the paragraph | |
| 136 | + * spacing tighter than for free-standing paragraphs. | |
| 137 | + */ | |
| 138 | + margin-top: 0.12em; margin-bottom: 0.3em; | |
| 139 | +} | |
| 115 | 140 | dl dt |
| 116 | 141 | { /* Similarly, set explicit layout rules for definition lists. |
| 117 | 142 | */ |
| @@ -129,6 +154,23 @@ dl.no-indent dd | ||
| 129 | 154 | */ |
| 130 | 155 | margin-left: 0; |
| 131 | 156 | } |
| 157 | +dl.hanging-indent | |
| 158 | +{ /* An alternative definitions list style, placing the term | |
| 159 | + * within a 7.5% width "hanging indent", vertically aligned | |
| 160 | + * with the definition occupying the remaining 92.5% of the | |
| 161 | + * page width. | |
| 162 | + */ | |
| 163 | + margin: 0.6em 0 0 0; | |
| 164 | +} | |
| 165 | +dl.hanging-indent dt | |
| 166 | +{ float: left; width: 7.5%; margin: 0; padding: 0; | |
| 167 | +} | |
| 168 | +dl.hanging-indent dd | |
| 169 | +{ width: 92.5%; margin: 0; padding: 0 0 0.5em 7.5%; | |
| 170 | +} | |
| 171 | +dl.hanging-indent dd:last-child | |
| 172 | +{ padding-bottom: 0; | |
| 173 | +} | |
| 132 | 174 | |
| 133 | 175 | |
| 134 | 176 | /* Fixed Position Page Header Block Formatting |
| @@ -226,7 +268,7 @@ dl.toc dt | ||
| 226 | 268 | * space for the fixed page header; (it may subsequently scroll, |
| 227 | 269 | * to be occluded behind the header). |
| 228 | 270 | */ |
| 229 | - position: absolute; top: 70px; | |
| 271 | + position: absolute; top: 70px; min-width: 94%; | |
| 230 | 272 | text-align: justify; padding: 0 3% 1.5em; |
| 231 | 273 | } |
| 232 | 274 | .masthead |
| @@ -250,14 +292,6 @@ dl.toc dt | ||
| 250 | 292 | */ |
| 251 | 293 | margin: 0; padding-top: 1px; font-weight: normal; |
| 252 | 294 | } |
| 253 | -dl.masthead | |
| 254 | -{ /* On page overlays, we use a definition list to specify the | |
| 255 | - * page title, and subtitle, which are to be propagated to the | |
| 256 | - * masthead section within the page content; the content of the | |
| 257 | - * definition list, itself, should not be directly visible. | |
| 258 | - */ | |
| 259 | - display: none; | |
| 260 | -} | |
| 261 | 295 | .masthead+p |
| 262 | 296 | { /* The masthead section is separated from the remaining page |
| 263 | 297 | * content, by a horizontal rule; to keep white space balanced, |
| @@ -267,6 +301,14 @@ dl.masthead | ||
| 267 | 301 | */ |
| 268 | 302 | margin-top: 1.3em; |
| 269 | 303 | } |
| 304 | +.masthead+div.overlapped | |
| 305 | +{ /* When an overlapped div element is placed immediately below | |
| 306 | + * the masthead, we need to pull its content slightly closer to | |
| 307 | + * the top of the viewport, than we do for overlapped content | |
| 308 | + * which appears further down the page. | |
| 309 | + */ | |
| 310 | + margin-top: calc( -70px - 0.4em ); | |
| 311 | +} | |
| 270 | 312 | |
| 271 | 313 | |
| 272 | 314 | /* Subsection Reference Positioning Relative to Page Header |
| @@ -358,6 +400,87 @@ div.faq div.answer + button | ||
| 358 | 400 | } |
| 359 | 401 | |
| 360 | 402 | |
| 403 | +/* Styling for "Box-Out" Content | |
| 404 | + * ============================= | |
| 405 | + * Suitable for display of any "aside" content, but applicable, | |
| 406 | + * in particular, to pre-formatted code samples, and examples in | |
| 407 | + * a "video-terminal" view style. | |
| 408 | + */ | |
| 409 | +.box-out | |
| 410 | +{ /* Identify the "box-out" region, by drawing a solid border, | |
| 411 | + * and lightening the background colour. | |
| 412 | + */ | |
| 413 | + margin: 0.2em 0; border: 1px solid #003366; background-color: #f3f3ff; | |
| 414 | + padding: 0.3em 0.6em; border-radius: 7px; | |
| 415 | +} | |
| 416 | +div.box-out | |
| 417 | +{ /* When a box-out is designated as a container for regular text, | |
| 418 | + * rather than for preformatted content, adjust its text size to | |
| 419 | + * appear slightly larger than adjacent running text... | |
| 420 | + */ | |
| 421 | + font-size: 1.025em; | |
| 422 | +} | |
| 423 | +div.box-out p:first-child | |
| 424 | +{ /* ...and avoid a excessive gap between the top of the bounding | |
| 425 | + * box, and the initial internal paragraph. | |
| 426 | + */ | |
| 427 | + margin-top: 0; | |
| 428 | +} | |
| 429 | +pre.vt, code | |
| 430 | +{ /* Use a lighter text colour, to highlight code samples in | |
| 431 | + * running text, and the machine-output in "video-terminal" | |
| 432 | + * style displays... | |
| 433 | + */ | |
| 434 | + color: #666699; | |
| 435 | +} | |
| 436 | +pre.vt kbd | |
| 437 | +{ /* ...while emboldening, and darkening, the representation | |
| 438 | + * of user input, in those same "video-terminal" displays. | |
| 439 | + */ | |
| 440 | + font-weight: bold; color: #003366; | |
| 441 | +} | |
| 442 | +p+pre.box-out, pre.box-out+p | |
| 443 | +{ /* Keep balanced vertical spacing around pre-formatted box-out | |
| 444 | + * regions, when placed between two conventional paragraphs. | |
| 445 | + */ | |
| 446 | + margin-top: 0.5em; | |
| 447 | +} | |
| 448 | +div.box-out dl.hanging-indent dt | |
| 449 | +{ /* A variation on the "hanging indent" definitions list style, | |
| 450 | + * for use within "box-out" content. | |
| 451 | + */ | |
| 452 | + width: 7%; font-style: italic; | |
| 453 | +} | |
| 454 | +div.box-out dl.hanging-indent dd:last-child | |
| 455 | +{ padding-bottom: 0; | |
| 456 | +} | |
| 457 | +div.box-out dl.hanging-indent dd | |
| 458 | +{ padding: 0 0 0.2em 7%; | |
| 459 | +} | |
| 460 | + | |
| 461 | + | |
| 462 | +/* Layout for Tables, Omitting Cell Boundary Lines | |
| 463 | + * =============================================== | |
| 464 | + */ | |
| 465 | +table.borderless | |
| 466 | +{ border: none; border-spacing: 1em 0; | |
| 467 | +} | |
| 468 | +table.borderless th | |
| 469 | +{ border-bottom: 2px solid #000066; | |
| 470 | +} | |
| 471 | +table.borderless tr.leaded td | |
| 472 | +{ padding-top: 0.3em; | |
| 473 | +} | |
| 474 | +table.borderless code | |
| 475 | +{ color: inherit; | |
| 476 | +} | |
| 477 | +table.top-aligned tr td, table.top-aligned tr tr | |
| 478 | +{ vertical-align: top; | |
| 479 | +} | |
| 480 | + | |
| 481 | +p + table.borderless { margin: 0.3em -0.2em; } | |
| 482 | + | |
| 483 | + | |
| 361 | 484 | /* Styling for In-Line Web-Search Form Fields |
| 362 | 485 | * ========================================== |
| 363 | 486 | * Derived from Juri Wornowitski's DuckDuckGo search widget implementation, |
Fork
site.css