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, 2021, 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;
  64 }
  65 h4
  66 { margin: 0.8em 0 -0.2em;
  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 ul li:first-child, ol li:first-child
 126 { margin-top: 0;
 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 }
 140 dl dt
 141 { /* Similarly, set explicit layout rules for definition lists.
 142    */
 143   margin-top: 0.8em; font-weight: bold;
 144 }
 145 dl dt:first-child, dl dd+dd
 146 { margin-top: 0.4em;
 147 }
 148 dl dt+dd
 149 { margin-top: 0.2em;
 150 }
 151 dl.no-indent dd
 152 { /* Suppress indentation of definition blocks, within any
 153    * definition list of the "no-indent" class.
 154    */
 155   margin-left: 0;
 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 }
 174
 175
 176 /* Fixed Position Page Header Block Formatting
 177  * ===========================================
 178  */
 179 #header
 180 { /* All pages share a common header block layout; it will be fixed
 181    * at the top of the viewport, across its full width, and variable
 182    * page content will scroll below it.
 183    */
 184   position: fixed; z-index: 50; top: 0; width: 100%; height: 70px;
 185   border-bottom: 5px solid #336699; background-color: #ccccff; opacity: 1;
 186 }
 187 #logo
 188 { /* Encapsulated within the header block, place a single copy of
 189    * the graphical site logo to the left of the region.
 190    */
 191   float: left; height: 100%; width: 15%;
 192   background: url("logo.png") no-repeat center;
 193 }
 194 #header .text
 195 { /* Allocate the region of the header block, to the right of the
 196    * logo, for display of centred mid-blue-grey text, in Google's
 197    * "Alegreya Sans" small-caps web-font, at nominal 14pt size.
 198    */
 199   float: both; width = 100%; text-align: center;
 200   font-family: "Alegreya Sans SC", verdana, sans-serif; font-size: 14pt;
 201   color: #336699; font-variant: small-caps; font-weight: bold;
 202   white-space: nowrap; overflow: none;
 203 }
 204 #header .text h1
 205 { /* The primary text, in the header block, is set as a level one
 206    * heading, (and thus at double the nominal font size); also set
 207    * it with expanded tracking.
 208    */
 209   margin: 0; padding: 0; letter-spacing: 0.2em; word-spacing: 0.4em;
 210 }
 211 #navbar
 212 { /* The navigation tab-bar is also encapsulated within the header
 213    * block; implemented as an unordered list, without bullet marks,
 214    * it is placed centrally, with its top set at two logical pixel
 215    * heights below the top level (h1) heading text.
 216    */
 217   list-style: none; margin-top: 2px;
 218 }
 219 #navbar li
 220 { /* Each navigation tab is represented by a list item, arranged
 221    * within an inline-block display, (hence laid out horizontally).
 222    * Each tab is styled to give the appearance of a row of filing
 223    * cabinet tabs, with the entire row occupying 99% of available
 224    * display width, (after deduction of the 15% reserved for the
 225    * logo); hence the width of each tab (currently there are 5)
 226    * becomes (99 - 15) / 5 = 16.8%.
 227    */
 228   display: inline-block;
 229   min-width: 16.8%; margin: 0 1px; border-bottom: 3px solid;
 230   border-top: 1px solid; border-left: 1px solid; border-right: 3px solid;
 231   border-top-left-radius: 7px; border-top-right-radius: 7px;
 232   border-bottom-style: none; border-color: #336699;
 233   color: #003366; background-color: #d9d9ff;
 234 }
 235 #navbar li:hover
 236 { /* Invert navigation tab colours, on mouse-over.
 237    */
 238   color: #ffffff; background-color: #6699cc;
 239 }
 240 #navbar li a
 241 { /* Make link anchors, on navigation tabs, fill the entire area
 242    * of their respective tabs, while preserving the text colour
 243    * theme of the page header block.
 244    */
 245   display: block; color: inherit;
 246 }
 247
 248
 249 /* Document Reference Tables of Content Formatting
 250  * ===============================================
 251  */
 252 dl.toc
 253 { margin: calc( -70px - 0.6em ) 0 0; padding-top: calc( 70px + 0.6em );
 254 }
 255 dl.toc h4
 256 { margin: 0.2em 0;
 257 }
 258 dl.toc dt
 259 { margin: 0; min-width: 100%;
 260 }
 261
 262
 263 /* General Page Content Formatting
 264  * ===============================
 265  */
 266 .page-view
 267 { /* Set the page content to begin immediately below the reserved
 268    * space for the fixed page header; (it may subsequently scroll,
 269    * to be occluded behind the header).
 270    */
 271   position: absolute; top: 70px; min-width: 94%;
 272   text-align: justify; padding: 0 3% 1.5em;
 273 }
 274 .masthead
 275 { /* Nominally placed at the top of the page content region, we
 276    * allow for a "masthead" region, offset from the main content
 277    * by one vertical em-space, in which the page title, and any
 278    * desired page subtitle, may be placed.
 279    */
 280   margin-bottom: 1em;
 281 }
 282 .masthead h1
 283 { /* Within the "masthead" region, the page title will be set as
 284    * a level one heading, with no space below.
 285    */
 286   margin-bottom: 0;
 287 }
 288 .masthead h2
 289 { /* Similarly, if present, the page subtitle will be set as a
 290    * level two heading, at default size for such headings, but
 291    * with no emboldening.
 292    */
 293   margin: 0; padding-top: 1px; font-weight: normal;
 294 }
 295 .masthead+p
 296 { /* The masthead section is separated from the remaining page
 297    * content, by a horizontal rule; to keep white space balanced,
 298    * above and below this rule, when it is immediately followed
 299    * by a paragraph, with no intervening heading, we need to
 300    * explicitly adjust the paragraph margin.
 301    */
 302   margin-top: 1.3em;
 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 }
 312
 313
 314 /* Subsection Reference Positioning Relative to Page Header
 315  * ========================================================
 316  */
 317 .overlapped
 318 { /* Any internal page reference will be positioned at the same
 319    * vertical offset, within the viewport, as the top of the page
 320    * header block.  Thus, any text which appears within the upper
 321    * 70px of the subsection division will be hidden behind the
 322    * header block; adjust the alignment of the target element,
 323    * such that its top margin overlaps the lower region of the
 324    * preceding element, by the depth of the header block, then
 325    * pad it, to push the content downward, into the viewport.
 326    */
 327   margin-top: -70px; padding-top: 70px;
 328 }
 329 hr+div.overlapped
 330 { /* When an overlapped division follows a horizontal rule, we
 331    * need to adjust its position upward, to allow for the blank
 332    * space in the bottom margin of the rule element.
 333    */
 334   margin-top: calc( -70px - 0.6em );
 335 }
 336
 337
 338 /* Supplementary Formatting for Sections with Numbered Headings
 339  * ============================================================
 340  */
 341 .h3-numbered
 342 { /* On starting any new numbered section division, reset the
 343    * heading serial number sequence, and establish a suitable
 344    * space at the top of the display region.
 345    */
 346   counter-reset: h3-number;
 347   margin-top: 0.8em;
 348 }
 349 .h3-numbered h3::before
 350 { /* For each section heading, in sequence, increment the serial
 351    * number, and prefix it to the heading text.
 352    */
 353   counter-increment: h3-number;
 354   font-family: inherit; font-size: 0.87em; font-weight: bold;
 355   content: counter(h3-number) ". ";
 356 }
 357
 358
 359 /* Styling for Frequently Asked Questions
 360  * ======================================
 361  * Display questions on buttons, which will initiate display
 362  * of respective answers immediately below, when clicked.
 363  */
 364 div.faq button
 365 { display: block; width: 100%; outline: none; cursor: pointer;
 366   border: none; padding: 1pt 5px 0 25px; background-color: inherit;
 367   text-align: justify; font: 14pt Roboto; color: #000066;
 368 }
 369 div.faq h3 + button
 370 { margin-top: 0.6em;
 371 }
 372 div.faq button::before
 373 { float: left; margin-left: -25px; width: 23px; content: "Q.";
 374   text-align: center; font: bolder 12pt Roboto; padding-top: 2pt;
 375 }
 376 div.faq button:hover
 377 { background-color: #dcdcfc;
 378 }
 379 div.faq button.open,
 380 div.faq button.open + div.answer
 381 { background-color: #d9d9fc;
 382 }
 383 div.faq div.answer
 384 { display: none; /* margin-left: -5px; */ min-height: 1em;
 385   padding: 1.5pt 5px 0 25px;
 386 }
 387 div.faq div.answer::before
 388 { float: left; margin-left: -25px; width: 23px; content: "A.";
 389   text-align: center; font: bolder 12pt Roboto; padding-top: 2pt;
 390 }
 391 div.faq div.answer p:first-child
 392 { margin-top: 0;
 393 }
 394 div.faq div.answer p
 395 { margin-top: 3pt;
 396 }
 397 div.faq button + button,
 398 div.faq div.answer + button
 399 { margin-top: 0.25em;
 400 }
 401
 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
 484 /* Styling for In-Line Web-Search Form Fields
 485  * ==========================================
 486  * Derived from Juri Wornowitski's DuckDuckGo search widget implementation,
 487  * version 3.0, as described at https://www.plainlight.com/ddg
 488  */
 489 form.search
 490 { /* Let the search box fill the entire width of its containing
 491    * element, with 0.3em spacing above and below; (thus, when two
 492    * search boxes are placed together, they will be separated by
 493    * 0.6em vertical space).
 494    */
 495   width: 100%; margin: 0.3em auto;
 496 }
 497 form.search input
 498 { /* Establish styling attributes for the keywords input field,
 499    * which fills the search box from its left-hand side, most of
 500    * the way across to the right...
 501    */
 502   display: block; outline: none; box-sizing: border-box;
 503   border: 1px solid #003366; border-right: none; border-radius: 7px 0 0 7px;
 504   height: 30px; width: calc( 100% - 60px ); padding: 0.6em;
 505   font-size: 0.8em; background-color: #f3f3ff;
 506 }
 507 form.search button
 508 { /* ...with a search button occupying the rightmost 60px.
 509    */
 510   float: right; height: 30px; width:  60px; font-size: 1em;
 511   border: 1px solid #003366; border-left: none; border-radius: 0 7px 7px 0;
 512   cursor: pointer; color: #336699; background-color: #ccccff;
 513 }
 514 form.search button:active, form.search button:hover
 515 { /* Invert search button colours, when the mouse is placed
 516    * over it, or while a search is in progress.
 517    */
 518   color: #ccccff; background-color: #6699cc;
 519 }
 520 form.search button:focus
 521 { /* Do not outline the button, even when it has the focus.
 522    */
 523   outline:none;
 524 }
 525
 526 /* $RCSfile$: end of file */