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 hr
  66 { /* Match the colour of horizontal page dividing rules to that
  67    * of the text.
  68    */
  69   color: #000066;
  70 }
  71 a
  72 { /* Links are distiguisable by use of a contrasting text colour;
  73    * there is no need to underline them too!
  74    */
  75   text-decoration: none;
  76 }
  77 a:visited
  78 { /* Visited links are further distinguishable, by use of an
  79    * alternative contrasting text colour.
  80    */
  81   color: #aa00cc;
  82 }
  83 p
  84 { /* Use the browser's default paragraph styling, but tighten the
  85    * inter-paragraph spacing...
  86    */
  87   margin-top: 0.6em; margin-bottom: 0;
  88 }
  89 p:first-child
  90 { /* ...while maintaining a deeper space before the first in any
  91    * free-standing text division.
  92    */
  93   margin-top: 1.3em;
  94 }
  95 hr+p, p+hr
  96 { /* Also maintain a deeper space between paragraph text and any
  97    * intervening horizontal rule.
  98    */
  99   margin-top: 1.2em;
 100 }
 101 p+ul, p+ol, p+dl
 102 { /* Keep any unordered list, ordered list, or defining list
 103    * closer to any immediately preceding paragraph text than
 104    * normal inter-paragraph spacing, but separated slightly
 105    * more than single-line text spacing.
 106    */
 107   margin-top: 0.3em; margin-bottom: 0;
 108 }
 109 ul li, ol li
 110 { margin-top: 0.12em; margin-right: 1.2em;
 111 }
 112 ul li:first-child, ol li:first-child
 113 { margin-top: 0;
 114 }
 115 dl dt
 116 { /* Similarly, set explicit layout rules for definition lists.
 117    */
 118   margin-top: 0.8em; font-weight: bold;
 119 }
 120 dl dt:first-child, dl dd+dd
 121 { margin-top: 0.4em;
 122 }
 123 dl dt+dd
 124 { margin-top: 0.2em;
 125 }
 126 dl.no-indent dd
 127 { /* Suppress indentation of definition blocks, within any
 128    * definition list of the "no-indent" class.
 129    */
 130   margin-left: 0;
 131 }
 132
 133
 134 /* Fixed Position Page Header Block Formatting
 135  * ===========================================
 136  */
 137 #header
 138 { /* All pages share a common header block layout; it will be fixed
 139    * at the top of the viewport, across its full width, and variable
 140    * page content will scroll below it.
 141    */
 142   position: fixed; z-index: 50; top: 0; width: 100%; height: 70px;
 143   border-bottom: 5px solid #336699; background-color: #ccccff; opacity: 1;
 144 }
 145 #logo
 146 { /* Encapsulated within the header block, place a single copy of
 147    * the graphical site logo to the left of the region.
 148    */
 149   float: left; height: 100%; width: 15%;
 150   background: url("logo.png") no-repeat center;
 151 }
 152 #header .text
 153 { /* Allocate the region of the header block, to the right of the
 154    * logo, for display of centred mid-blue-grey text, in Google's
 155    * "Alegreya Sans" small-caps web-font, at nominal 14pt size.
 156    */
 157   float: both; width = 100%; text-align: center;
 158   font-family: "Alegreya Sans SC", verdana, sans-serif; font-size: 14pt;
 159   color: #336699; font-variant: small-caps; font-weight: bold;
 160   white-space: nowrap; overflow: none;
 161 }
 162 #header .text h1
 163 { /* The primary text, in the header block, is set as a level one
 164    * heading, (and thus at double the nominal font size); also set
 165    * it with expanded tracking.
 166    */
 167   margin: 0; padding: 0; letter-spacing: 0.2em; word-spacing: 0.4em;
 168 }
 169 #navbar
 170 { /* The navigation tab-bar is also encapsulated within the header
 171    * block; implemented as an unordered list, without bullet marks,
 172    * it is placed centrally, with its top set at two logical pixel
 173    * heights below the top level (h1) heading text.
 174    */
 175   list-style: none; margin-top: 2px;
 176 }
 177 #navbar li
 178 { /* Each navigation tab is represented by a list item, arranged
 179    * within an inline-block display, (hence laid out horizontally).
 180    * Each tab is styled to give the appearance of a row of filing
 181    * cabinet tabs, with the entire row occupying 99% of available
 182    * display width, (after deduction of the 15% reserved for the
 183    * logo); hence the width of each tab (currently there are 5)
 184    * becomes (99 - 15) / 5 = 16.8%.
 185    */
 186   display: inline-block;
 187   min-width: 16.8%; margin: 0 1px; border-bottom: 3px solid;
 188   border-top: 1px solid; border-left: 1px solid; border-right: 3px solid;
 189   border-top-left-radius: 7px; border-top-right-radius: 7px;
 190   border-bottom-style: none; border-color: #336699;
 191   color: #003366; background-color: #d9d9ff;
 192 }
 193 #navbar li:hover
 194 { /* Invert navigation tab colours, on mouse-over.
 195    */
 196   color: #ffffff; background-color: #6699cc;
 197 }
 198 #navbar li a
 199 { /* Make link anchors, on navigation tabs, fill the entire area
 200    * of their respective tabs, while preserving the text colour
 201    * theme of the page header block.
 202    */
 203   display: block; color: inherit;
 204 }
 205
 206
 207 /* Document Reference Tables of Content Formatting
 208  * ===============================================
 209  */
 210 dl.toc
 211 { margin: calc( -70px - 0.6em ) 0 0; padding-top: calc( 70px + 0.6em );
 212 }
 213 dl.toc h4
 214 { margin: 0.2em 0;
 215 }
 216 dl.toc dt
 217 { margin: 0; min-width: 100%;
 218 }
 219
 220
 221 /* General Page Content Formatting
 222  * ===============================
 223  */
 224 .page-view
 225 { /* Set the page content to begin immediately below the reserved
 226    * space for the fixed page header; (it may subsequently scroll,
 227    * to be occluded behind the header).
 228    */
 229   position: absolute; top: 70px;
 230   text-align: justify; padding: 0 3% 1.5em;
 231 }
 232 .masthead
 233 { /* Nominally placed at the top of the page content region, we
 234    * allow for a "masthead" region, offset from the main content
 235    * by one vertical em-space, in which the page title, and any
 236    * desired page subtitle, may be placed.
 237    */
 238   margin-bottom: 1em;
 239 }
 240 .masthead h1
 241 { /* Within the "masthead" region, the page title will be set as
 242    * a level one heading, with no space below.
 243    */
 244   margin-bottom: 0;
 245 }
 246 .masthead h2
 247 { /* Similarly, if present, the page subtitle will be set as a
 248    * level two heading, at default size for such headings, but
 249    * with no emboldening.
 250    */
 251   margin: 0; padding-top: 1px; font-weight: normal;
 252 }
 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 .masthead+p
 262 { /* The masthead section is separated from the remaining page
 263    * content, by a horizontal rule; to keep white space balanced,
 264    * above and below this rule, when it is immediately followed
 265    * by a paragraph, with no intervening heading, we need to
 266    * explicitly adjust the paragraph margin.
 267    */
 268   margin-top: 1.3em;
 269 }
 270
 271
 272 /* Subsection Reference Positioning Relative to Page Header
 273  * ========================================================
 274  */
 275 .overlapped
 276 { /* Any internal page reference will be positioned at the same
 277    * vertical offset, within the viewport, as the top of the page
 278    * header block.  Thus, any text which appears within the upper
 279    * 70px of the subsection division will be hidden behind the
 280    * header block; adjust the alignment of the target element,
 281    * such that its top margin overlaps the lower region of the
 282    * preceding element, by the depth of the header block, then
 283    * pad it, to push the content downward, into the viewport.
 284    */
 285   margin-top: -70px; padding-top: 70px;
 286 }
 287 hr+div.overlapped
 288 { /* When an overlapped division follows a horizontal rule, we
 289    * need to adjust its position upward, to allow for the blank
 290    * space in the bottom margin of the rule element.
 291    */
 292   margin-top: calc( -70px - 0.6em );
 293 }
 294
 295
 296 /* Supplementary Formatting for Sections with Numbered Headings
 297  * ============================================================
 298  */
 299 .h3-numbered
 300 { /* On starting any new numbered section division, reset the
 301    * heading serial number sequence, and establish a suitable
 302    * space at the top of the display region.
 303    */
 304   counter-reset: h3-number;
 305   margin-top: 0.8em;
 306 }
 307 .h3-numbered h3::before
 308 { /* For each section heading, in sequence, increment the serial
 309    * number, and prefix it to the heading text.
 310    */
 311   counter-increment: h3-number;
 312   font-family: inherit; font-size: 0.87em; font-weight: bold;
 313   content: counter(h3-number) ". ";
 314 }
 315
 316
 317 /* Styling for Frequently Asked Questions
 318  * ======================================
 319  * Display questions on buttons, which will initiate display
 320  * of respective answers immediately below, when clicked.
 321  */
 322 div.faq button
 323 { display: block; width: 100%; outline: none; cursor: pointer;
 324   border: none; padding: 1pt 5px 0 25px; background-color: inherit;
 325   text-align: justify; font: 14pt Roboto; color: #000066;
 326 }
 327 div.faq h3 + button
 328 { margin-top: 0.6em;
 329 }
 330 div.faq button::before
 331 { float: left; margin-left: -25px; width: 23px; content: "Q.";
 332   text-align: center; font: bolder 12pt Roboto; padding-top: 2pt;
 333 }
 334 div.faq button:hover
 335 { background-color: #dcdcfc;
 336 }
 337 div.faq button.open,
 338 div.faq button.open + div.answer
 339 { background-color: #d9d9fc;
 340 }
 341 div.faq div.answer
 342 { display: none; /* margin-left: -5px; */ min-height: 1em;
 343   padding: 1.5pt 5px 0 25px;
 344 }
 345 div.faq div.answer::before
 346 { float: left; margin-left: -25px; width: 23px; content: "A.";
 347   text-align: center; font: bolder 12pt Roboto; padding-top: 2pt;
 348 }
 349 div.faq div.answer p:first-child
 350 { margin-top: 0;
 351 }
 352 div.faq div.answer p
 353 { margin-top: 3pt;
 354 }
 355 div.faq button + button,
 356 div.faq div.answer + button
 357 { margin-top: 0.25em;
 358 }
 359
 360
 361 /* Styling for In-Line Web-Search Form Fields
 362  * ==========================================
 363  * Derived from Juri Wornowitski's DuckDuckGo search widget implementation,
 364  * version 3.0, as described at https://www.plainlight.com/ddg
 365  */
 366 form.search
 367 { /* Let the search box fill the entire width of its containing
 368    * element, with 0.3em spacing above and below; (thus, when two
 369    * search boxes are placed together, they will be separated by
 370    * 0.6em vertical space).
 371    */
 372   width: 100%; margin: 0.3em auto;
 373 }
 374 form.search input
 375 { /* Establish styling attributes for the keywords input field,
 376    * which fills the search box from its left-hand side, most of
 377    * the way across to the right...
 378    */
 379   display: block; outline: none; box-sizing: border-box;
 380   border: 1px solid #003366; border-right: none; border-radius: 7px 0 0 7px;
 381   height: 30px; width: calc( 100% - 60px ); padding: 0.6em;
 382   font-size: 0.8em; background-color: #f3f3ff;
 383 }
 384 form.search button
 385 { /* ...with a search button occupying the rightmost 60px.
 386    */
 387   float: right; height: 30px; width:  60px; font-size: 1em;
 388   border: 1px solid #003366; border-left: none; border-radius: 0 7px 7px 0;
 389   cursor: pointer; color: #336699; background-color: #ccccff;
 390 }
 391 form.search button:active, form.search button:hover
 392 { /* Invert search button colours, when the mouse is placed
 393    * over it, or while a search is in progress.
 394    */
 395   color: #ccccff; background-color: #6699cc;
 396 }
 397 form.search button:focus
 398 { /* Do not outline the button, even when it has the focus.
 399    */
 400   outline:none;
 401 }
 402
 403 /* $RCSfile$: end of file */