site.css

   1 /*
   2  * site.css
   3  *
   4  * Rules for application of consistent styling, for all regular pages,
   5  * across the MinGW.org site.
   6  *
   7  *
   8  * $Id$
   9  *
  10  * Written by Keith Marshall <keith@users.osdn.me>
  11  * Copyright (C) 2020, MinGW.org 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.ORG PROJECT "AS IS" AND
  29  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  30  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  31  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL THE MINGW.ORG 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.3em;
 100 }
 101 p+ul
 102 { /* Keep any unordered list closer to preceding paragraph text
 103    * than normal inter-paragraph spacing, but separated slightly
 104    * more than single-line text spacing.
 105    */
 106   margin-top: 0.3em; margin-bottom: 0;
 107 }
 108
 109
 110 /* Fixed position page header block formatting
 111  * ===========================================
 112  */
 113 #header
 114 { /* All pages share a common header block layout; it will be fixed
 115    * at the top of the viewport, across its full width, and variable
 116    * page content will scroll below it.
 117    */
 118   position: fixed; z-index: 50; top: 0; width: 100%; height: 70px;
 119   border-bottom: 5px solid #336699; background-color: #ccccff; opacity: 1;
 120 }
 121 #logo
 122 { /* Encapsulated within the header block, place a single copy of
 123    * the graphical site logo to the left of the region.
 124    */
 125   float: left; height: 100%; width: 15%;
 126   background: url("logo.png") no-repeat center;
 127 }
 128 #header .text
 129 { /* Allocate the region of the header block, to the right of the
 130    * logo, for display of centred mid-blue-grey text, in Google's
 131    * "Alegreya Sans" small-caps web-font, at nominal 14pt size.
 132    */
 133   float: both; width = 100%; text-align: center;
 134   font-family: "Alegreya Sans SC", verdana, sans-serif; font-size: 14pt;
 135   color: #336699; font-variant: small-caps; font-weight: bold;
 136   white-space: nowrap; overflow: none;
 137 }
 138 #header .text h1
 139 { /* The primary text, in the header block, is set as a level one
 140    * heading, (and thus at double the nominal font size); also set
 141    * it with expanded tracking.
 142    */
 143   margin: 0; padding: 0; letter-spacing: 0.2em; word-spacing: 0.4em;
 144 }
 145 #navbar
 146 { /* The navigation tab-bar is also encapsulated within the header
 147    * block; implemented as an unordered list, without bullet marks,
 148    * it is placed centrally, with its top set at two logical pixel
 149    * heights below the top level (h1) heading text.
 150    */
 151   list-style: none; margin-top: 2px;
 152 }
 153 #navbar li
 154 { /* Each navigation tab is represented by a list item, arranged
 155    * within an inline-block display, (hence laid out horizontally).
 156    * Each tab is styled to give the appearance of a row of filing
 157    * cabinet tabs, with the entire row occupying 99% of available
 158    * display width, (after deduction of the 15% reserved for the
 159    * logo); hence the width of each tab (currently there are 5)
 160    * becomes (99 - 15) / 5 = 16.8%.
 161    */
 162   display: inline-block;
 163   min-width: 16.8%; margin-left: 1px; margin-right: 1px;
 164   border-top: 1px solid; border-left: 1px solid; border-right: 2px solid;
 165   border-top-left-radius: 7px; border-top-right-radius: 7px;
 166   border-bottom-style: none; border-color: #336699;
 167   color: #003366; background-color: #d9d9ff;
 168 }
 169 #navbar li:hover
 170 { /* Invert navigation tab colours, on mouse-over.
 171    */
 172   color: #ffffff; background-color: #6699cc;
 173 }
 174 #navbar li a
 175 { /* Make link anchors, on navigation tabs, fill the entire area
 176    * of their respective tabs, while preserving the text colour
 177    * theme of the page header block.
 178    */
 179   display: block; color: inherit;
 180 }
 181
 182
 183 /* General page content formatting
 184  * ===============================
 185  */
 186 .page-view
 187 { /* Set the page content to begin immediately below the reserved
 188    * space for the fixed page header; (it may subsequently scroll,
 189    * to be occluded behind the header).
 190    */
 191   position: absolute; top: 70px;
 192   text-align: justify; padding: 0 3% 1.5em;
 193 }
 194 .masthead
 195 { /* Nominally placed at the top of the page content region, we
 196    * allow for a "masthead" region, offset from the main content
 197    * by one vertical em-space, in which the page title, and any
 198    * desired page subtitle, may be placed.
 199    */
 200   margin-bottom: 1em;
 201 }
 202 .masthead h1
 203 { /* Within the "masthead" region, the page title will be set as
 204    * a level one heading, with no space below.
 205    */
 206   margin-bottom: 0;
 207 }
 208 .masthead h2
 209 { /* Similarly, if present, the page subtitle will be set as a
 210    * level two heading, at default size for such headings, but
 211    * with no emboldening.
 212    */
 213   margin: 0; padding-top: 1px; font-weight: normal;
 214 }
 215
 216 /* $RCSfile$: end of file */