site.css

   1 /*
   2  * site.css
   3  *
   4  * Rules for application of consistent styling, for all regular pages,
   5  * across the MinGW.OSDN site.
   6  *
   7  *
   8  * $Id$
   9  *
  10  * Written by Keith Marshall <keith@users.osdn.me>
  11  * Copyright (C) 2020-2022, MinGW.OSDN Project
  12  *
  13  *
  14  * Redistribution and use in source and 'compiled' forms (SGML, HTML,
  15  * PDF, PostScript, RTF, etc) with or without modification, are permitted
  16  * provided that the following conditions are met:
  17  *
  18  * 1. Redistributions of source code must retain the above copyright
  19  *    notice, this list of conditions and the following disclaimer as
  20  *    the first lines of this file, unmodified.
  21  *
  22  * 2. Redistributions in compiled form (transformed to other DTDs,
  23  *    converted to PDF, PostScript, RTF and other formats) must
  24  *    reproduce the above copyright notice, this list of conditions
  25  *    and the following disclaimer in the documentation and/or other
  26  *    materials provided with the distribution.
  27  *
  28  * THIS DOCUMENTATION IS PROVIDED BY THE MINGW.OSDN PROJECT "AS IS"
  29  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  30  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  31  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL THE MINGW.OSDN PROJECT, OR
  32  * ITS CONTRIBUTORS, BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  33  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  34  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  35  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  36  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  37  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  38  * OF THIS DOCUMENTATION, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
  39  * DAMAGE.
  40  *
  41  *
  42  *
  43  * General Page Layout and Formatting
  44  * ==================================
  45  */
  46 body
  47 { /* Default style, applicable to all normal page content; favour
  48    * Google's "Roboto" sans-serif web-font, at 14pt, with blue-black
  49    * text colour, on a pale blue-grey background; centre text within
  50    * the viewport, with no padding.
  51    */
  52   margin: 0 auto; padding 0;
  53   font-family: Roboto, verdana, sans-serif; font-size: 14pt;
  54   color: #000066; background-color: #e9e9ff;
  55 }
  56 h3
  57 { /* We reserve h1 and h2 heading levels for page title, and
  58    * subtitle respectively; thus, h3 becomes the first level
  59    * available for section headings.  Preserve the browser's
  60    * default h3 styling, but pull the following paragraph a
  61    * bit closer.
  62    */
  63   margin-bottom: -0.2em; font-size: 1.25em;
  64 }
  65 h4
  66 { margin: 0.8em 0 -0.2em; font-size: 1.10em;
  67 }
  68 hr
  69 { /* Match the colour of horizontal page dividing rules to that
  70    * of the text.
  71    */
  72   color: #000066;
  73 }
  74 .nowrap
  75 { white-space: nowrap;
  76 }
  77 a
  78 { /* Links are distiguisable by use of a contrasting text colour;
  79    * there is no need to underline them too!
  80    */
  81   text-decoration: none;
  82 }
  83 a:visited
  84 { /* Visited links are further distinguishable, by use of an
  85    * alternative contrasting text colour.
  86    */
  87   color: #aa00cc;
  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 }
  96 p
  97 { /* Use the browser's default paragraph styling, but tighten the
  98    * inter-paragraph spacing...
  99    */
 100   margin-top: 0.6em; margin-bottom: 0;
 101 }
 102 p:first-child
 103 { /* ...while maintaining a deeper space before the first in any
 104    * free-standing text division.
 105    */
 106   margin-top: 1.3em;
 107 }
 108 hr+p, p+hr
 109 { /* Also maintain a deeper space between paragraph text and any
 110    * intervening horizontal rule.
 111    */
 112   margin-top: 1.2em;
 113 }
 114 p+ul, p+ol, p+dl
 115 { /* Keep any unordered list, ordered list, or defining list
 116    * closer to any immediately preceding paragraph text than
 117    * normal inter-paragraph spacing, but separated slightly
 118    * more than single-line text spacing.
 119    */
 120   margin-top: 0.3em; margin-bottom: 0;
 121 }
 122 ul li, ol li
 123 { margin-top: 0.12em; margin-right: 1.2em;
 124 }
 125 ol.small-numbers li::marker
 126 { font-size: 85%;
 127 }
 128 div.box-out ol.small-numbers li::marker
 129 { font-size: 80%;
 130 }
 131 ul li:first-child, ol li:first-child
 132 { margin-top: 0;
 133 }
 134 ul.overlapped
 135 { margin-left: -0.6em; margin-bottom: 0; padding-top: calc( 70px + 0.6em );
 136 }
 137 ul.overlapped li > p:last-child
 138 { margin-bottom: 0;
 139 }
 140 li > p
 141 { /* For multi-paragraph list items, keep the paragraph
 142    * spacing tighter than for free-standing paragraphs.
 143    */
 144   margin-top: 0.12em; margin-bottom: 0.3em;
 145 }
 146 dl dt
 147 { /* Similarly, set explicit layout rules for definition lists.
 148    */
 149   margin-top: 0.8em; font-weight: bold;
 150 }
 151 dl dt:first-child, dl dd+dd
 152 { margin-top: 0.4em;
 153 }
 154 dl dt+dd
 155 { margin-top: 0.2em;
 156 }
 157 dl.no-indent dd
 158 { /* Suppress indentation of definition blocks, within any
 159    * definition list of the "no-indent" class.
 160    */
 161   margin-left: 0;
 162 }
 163 dl.hanging-indent
 164 { /* An alternative definitions list style, placing the term
 165    * within a 7.5% width "hanging indent", vertically aligned
 166    * with the definition occupying the remaining 92.5% of the
 167    * page width.
 168    */
 169   margin: 0.6em 0 0 0;
 170 }
 171 dl.hanging-indent dt
 172 { float: left; width: 7.5%; margin: 0; padding: 0;
 173 }
 174 dl.hanging-indent dd
 175 { width: 92.5%; margin: 0; padding: 0 0 0.5em 7.5%;
 176 }
 177 dl.hanging-indent dd:last-child
 178 { padding-bottom: 0;
 179 }
 180
 181
 182 /* Fixed Position Page Header Block Formatting
 183  * ===========================================
 184  */
 185 #header
 186 { /* All pages share a common header block layout; it will be fixed
 187    * at the top of the viewport, across its full width, and variable
 188    * page content will scroll below it.
 189    */
 190   position: fixed; z-index: 50; top: 0; width: 100%; height: 70px;
 191   border-bottom: 5px solid #336699; background-color: #ccccff; opacity: 1;
 192 }
 193 #logo
 194 { /* Encapsulated within the header block, place a single copy of
 195    * the graphical site logo to the left of the region.
 196    */
 197   float: left; height: 100%; width: 15%;
 198   background: url("logo.png") no-repeat center;
 199 }
 200 #header .text
 201 { /* Allocate the region of the header block, to the right of the
 202    * logo, for display of centred mid-blue-grey text, in Google's
 203    * "Alegreya Sans" small-caps web-font, at nominal 14pt size.
 204    */
 205   float: both; width = 100%; text-align: center;
 206   font-family: "Alegreya Sans SC", verdana, sans-serif; font-size: 14pt;
 207   color: #336699; font-variant: small-caps; font-weight: bold;
 208   white-space: nowrap; overflow: none;
 209 }
 210 #header .text h1
 211 { /* The primary text, in the header block, is set as a level one
 212    * heading, (and thus at double the nominal font size); also set
 213    * it with expanded tracking.
 214    */
 215   margin: 0; padding: 0; letter-spacing: 0.2em; word-spacing: 0.4em;
 216 }
 217 #navbar
 218 { /* The navigation tab-bar is also encapsulated within the header
 219    * block; implemented as an unordered list, without bullet marks,
 220    * it is placed centrally, with its top set at two logical pixel
 221    * heights below the top level (h1) heading text.
 222    */
 223   list-style: none; margin-top: 2px;
 224 }
 225 #navbar li
 226 { /* Each navigation tab is represented by a list item, arranged
 227    * within an inline-block display, (hence laid out horizontally).
 228    * Each tab is styled to give the appearance of a row of filing
 229    * cabinet tabs, with the entire row occupying 99% of available
 230    * display width, (after deduction of the 15% reserved for the
 231    * logo); hence the width of each tab (currently there are 5)
 232    * becomes (99 - 15) / 5 = 16.8%.
 233    */
 234   display: inline-block;
 235   min-width: 16.8%; margin: 0 1px; border-bottom: 3px solid;
 236   border-top: 1px solid; border-left: 1px solid; border-right: 3px solid;
 237   border-top-left-radius: 7px; border-top-right-radius: 7px;
 238   border-bottom-style: none; border-color: #336699;
 239   color: #003366; background-color: #d9d9ff;
 240 }
 241 #navbar li:hover
 242 { /* Invert navigation tab colours, on mouse-over.
 243    */
 244   color: #ffffff; background-color: #6699cc;
 245 }
 246 #navbar li a
 247 { /* Make link anchors, on navigation tabs, fill the entire area
 248    * of their respective tabs, while preserving the text colour
 249    * theme of the page header block.
 250    */
 251   display: block; color: inherit;
 252 }
 253
 254
 255 /* Document Reference Tables of Content Formatting
 256  * ===============================================
 257  */
 258 dl.toc
 259 { margin: calc( -70px - 0.6em ) 0 0; padding-top: calc( 70px + 0.6em );
 260 }
 261 dl.toc h4
 262 { margin: 0.2em 0;
 263 }
 264 dl.toc dt
 265 { margin: 0; min-width: 100%;
 266 }
 267
 268
 269 /* General Page Content Formatting
 270  * ===============================
 271  */
 272 .page-view
 273 { /* Set the page content to begin immediately below the reserved
 274    * space for the fixed page header; (it may subsequently scroll,
 275    * to be occluded behind the header).
 276    */
 277   position: absolute; top: 70px; min-width: 94%;
 278   text-align: justify; padding: 0 3% 1.5em;
 279 }
 280 .masthead
 281 { /* Nominally placed at the top of the page content region, we
 282    * allow for a "masthead" region, offset from the main content
 283    * by one vertical em-space, in which the page title, and any
 284    * desired page subtitle, may be placed.
 285    */
 286   margin-bottom: 1em;
 287 }
 288 .masthead h1
 289 { /* Within the "masthead" region, the page title will be set as
 290    * a level one heading, with no space below.
 291    */
 292   margin-bottom: 0;
 293 }
 294 .masthead h2
 295 { /* Similarly, if present, the page subtitle will be set as a
 296    * level two heading, at default size for such headings, but
 297    * with no emboldening.
 298    */
 299   margin: 0; padding-top: 1px; font-weight: normal;
 300 }
 301 .masthead+p
 302 { /* The masthead section is separated from the remaining page
 303    * content, by a horizontal rule; to keep white space balanced,
 304    * above and below this rule, when it is immediately followed
 305    * by a paragraph, with no intervening heading, we need to
 306    * explicitly adjust the paragraph margin.
 307    */
 308   margin-top: 1.3em;
 309 }
 310 .masthead+div.overlapped
 311 { /* When an overlapped div element is placed immediately below
 312    * the masthead, we need to pull its content slightly closer to
 313    * the top of the viewport, than we do for overlapped content
 314    * which appears further down the page.
 315    */
 316   margin-top: calc( -70px - 0.4em );
 317 }
 318
 319
 320 /* Subsection Reference Positioning Relative to Page Header
 321  * ========================================================
 322  */
 323 .overlapped
 324 { /* Any internal page reference will be positioned at the same
 325    * vertical offset, within the viewport, as the top of the page
 326    * header block.  Thus, any text which appears within the upper
 327    * 70px of the subsection division will be hidden behind the
 328    * header block; adjust the alignment of the target element,
 329    * such that its top margin overlaps the lower region of the
 330    * preceding element, by the depth of the header block, then
 331    * pad it, to push the content downward, into the viewport.
 332    */
 333   margin-top: -70px; padding-top: 70px;
 334 }
 335 hr+div.overlapped
 336 { /* When an overlapped division follows a horizontal rule, we
 337    * need to adjust its position upward, to allow for the blank
 338    * space in the bottom margin of the rule element.
 339    */
 340   margin-top: calc( -70px - 0.6em );
 341 }
 342
 343
 344 /* Supplementary Formatting for Sections with Numbered Headings
 345  * ============================================================
 346  */
 347 .h3-numbered
 348 { /* On starting any new numbered section division, reset the
 349    * heading serial number sequence, and establish a suitable
 350    * space at the top of the display region.
 351    */
 352   counter-reset: h3-number;
 353   margin-top: 0.8em;
 354 }
 355 .h3-numbered h3::before
 356 { /* For each section heading, in sequence, increment the serial
 357    * number, and prefix it to the heading text.
 358    */
 359   counter-increment: h3-number;
 360   font-family: inherit; font-size: 85%; font-weight: bold;
 361   content: counter(h3-number) ". ";
 362 }
 363
 364
 365 /* Styling for Frequently Asked Questions
 366  * ======================================
 367  * Display questions on buttons, which will initiate display
 368  * of respective answers immediately below, when clicked.
 369  */
 370 div.faq button
 371 { display: block; width: 100%; outline: none; cursor: pointer;
 372   border: none; padding: 1pt 5px 0 25px; background-color: inherit;
 373   text-align: justify; font: 14pt Roboto; color: #000066;
 374 }
 375 div.faq h3 + button
 376 { margin-top: 0.6em;
 377 }
 378 div.faq button::before
 379 { float: left; margin-left: -25px; width: 23px; content: "Q.";
 380   text-align: center; font: bolder 12pt Roboto; padding-top: 2pt;
 381 }
 382 div.faq button:hover
 383 { background-color: #dcdcfc;
 384 }
 385 div.faq button.open,
 386 div.faq button.open + div.answer
 387 { background-color: #d9d9fc;
 388 }
 389 div.faq div.answer
 390 { display: none; /* margin-left: -5px; */ min-height: 1em;
 391   padding: 1.5pt 5px 0 25px;
 392 }
 393 div.faq div.answer::before
 394 { float: left; margin-left: -25px; width: 23px; content: "A.";
 395   text-align: center; font: bolder 12pt Roboto; padding-top: 2pt;
 396 }
 397 div.faq div.answer p:first-child
 398 { margin-top: 0;
 399 }
 400 div.faq div.answer p
 401 { margin-top: 3pt;
 402 }
 403 div.faq button + button,
 404 div.faq div.answer + button
 405 { margin-top: 0.25em;
 406 }
 407
 408
 409 /* Styling for "Box-Out" Content
 410  * =============================
 411  * Suitable for display of any "aside" content, but applicable,
 412  * in particular, to pre-formatted code samples, and examples in
 413  * a "video-terminal" view style.
 414  */
 415 .box-out
 416 { /* Identify the "box-out" region, by drawing a solid border,
 417    * and lightening the background colour.
 418    */
 419   margin: 0.2em 0; border: 1px solid #003366; background-color: #f3f3ff;
 420   padding: 0.3em 0.6em; border-radius: 7px;
 421 }
 422 div.box-out
 423 { /* When a box-out is designated as a container for regular text,
 424    * rather than for preformatted content, adjust its text size to
 425    * appear slightly larger than adjacent running text...
 426    */
 427   font-size: 102.5%;
 428 }
 429 div.box-out p:first-child
 430 { /* ...and avoid a excessive gap between the top of the bounding
 431    * box, and the initial internal paragraph.
 432    */
 433   margin-top: 0;
 434 }
 435 pre.vt, code
 436 { /* Use a lighter text colour, to highlight code samples in
 437    * running text, and the machine-output in "video-terminal"
 438    * style displays...
 439    */
 440   color: #666699;
 441 }
 442 pre.vt kbd
 443 { /* ...while emboldening, and darkening, the representation
 444    * of user input, in those same "video-terminal" displays.
 445    */
 446   font-weight: bold; color: #003366;
 447 }
 448 p+pre.box-out, pre.box-out+p
 449 { /* Keep balanced vertical spacing around pre-formatted box-out
 450    * regions, when placed between two conventional paragraphs.
 451    */
 452   margin-top: 0.5em;
 453 }
 454 div.box-out dl.hanging-indent dt
 455 { /* A variation on the "hanging indent" definitions list style,
 456    * for use within "box-out" content.
 457    */
 458   width: 7%; font-style: italic;
 459 }
 460 div.box-out dl.hanging-indent dd:last-child
 461 { padding-bottom: 0;
 462 }
 463 div.box-out dl.hanging-indent dd
 464 { padding: 0 0 0.2em 7%;
 465 }
 466
 467
 468 /* Layout for Tables, Omitting Cell Boundary Lines
 469  * ===============================================
 470  */
 471 table.borderless
 472 { border: none; border-spacing: 1em 0;
 473 }
 474 table.borderless th
 475 { border-bottom: 2px solid #000066;
 476 }
 477 table.borderless tr.leaded td
 478 { padding-top: 0.3em;
 479 }
 480 table.borderless code
 481 { color: inherit;
 482 }
 483 table.top-aligned tr
 484 { vertical-align: baseline;
 485 }
 486 table.definitions tr td:first-child
 487 { font-weight: bolder;
 488 }
 489 table.definitions tr td ul
 490 { margin: 0.1em 0 0.1em -0.3em;
 491 }
 492
 493 p + table.borderless { margin: 0.3em -0.2em; }
 494
 495
 496 /* Styling for In-Line Web-Search Form Fields
 497  * ==========================================
 498  * Derived from Juri Wornowitski's DuckDuckGo search widget implementation,
 499  * version 3.0, as described at https://www.plainlight.com/ddg
 500  */
 501 form.search
 502 { /* Let the search box fill the entire width of its containing
 503    * element, with 0.3em spacing above and below; (thus, when two
 504    * search boxes are placed together, they will be separated by
 505    * 0.6em vertical space).
 506    */
 507   width: 100%; margin: 0.3em auto;
 508 }
 509 form.search input
 510 { /* Establish styling attributes for the keywords input field,
 511    * which fills the search box from its left-hand side, most of
 512    * the way across to the right...
 513    */
 514   display: block; outline: none; box-sizing: border-box;
 515   border: 1px solid #003366; border-right: none; border-radius: 7px 0 0 7px;
 516   height: 30px; width: calc( 100% - 60px ); padding: 0.6em;
 517   font-size: 80%; background-color: #f3f3ff;
 518 }
 519 form.search button
 520 { /* ...with a search button occupying the rightmost 60px.
 521    */
 522   float: right; height: 30px; width:  60px; font-size: 1em;
 523   border: 1px solid #003366; border-left: none; border-radius: 0 7px 7px 0;
 524   cursor: pointer; color: #336699; background-color: #ccccff;
 525 }
 526 form.search button:active, form.search button:hover
 527 { /* Invert search button colours, when the mouse is placed
 528    * over it, or while a search is in progress.
 529    */
 530   color: #ccccff; background-color: #6699cc;
 531 }
 532 form.search button:focus
 533 { /* Do not outline the button, even when it has the focus.
 534    */
 535   outline:none;
 536 }
 537
 538 /* $RCSfile$: end of file */