4 * Rules for application of consistent styling, for all regular pages,
5 * across the MinGW.org site.
10 * Written by Keith Marshall <keith@users.osdn.me>
11 * Copyright (C) 2020, MinGW.org Project
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:
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.
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.
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
43 /* General page layout and formatting
44 * ==================================
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.
52 margin: 0 auto; padding 0;
53 font-family: Roboto, verdana, sans-serif; font-size: 14pt;
54 color: #000066; background-color: #e9e9ff;
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
63 margin-bottom: -0.2em;
66 { /* Match the colour of horizontal page dividing rules to that
72 { /* Links are distiguisable by use of a contrasting text colour;
73 * there is no need to underline them too!
75 text-decoration: none;
78 { /* Visited links are further distinguishable, by use of an
79 * alternative contrasting text colour.
84 { /* Use the browser's default paragraph styling, but tighten the
85 * inter-paragraph spacing...
87 margin-top: 0.6em; margin-bottom: 0;
90 { /* ...while maintaining a deeper space before the first in any
91 * free-standing text division.
96 { /* Also maintain a deeper space between paragraph text and any
97 * intervening horizontal rule.
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.
106 margin-top: 0.3em; margin-bottom: 0;
110 /* Fixed position page header block formatting
111 * ===========================================
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.
118 position: fixed; z-index: 50; top: 0; width: 100%; height: 70px;
119 border-bottom: 5px solid #336699; background-color: #ccccff; opacity: 1;
122 { /* Encapsulated within the header block, place a single copy of
123 * the graphical site logo to the left of the region.
125 float: left; height: 100%; width: 15%;
126 background: url("logo.png") no-repeat center;
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.
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;
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.
143 margin: 0; padding: 0; letter-spacing: 0.2em; word-spacing: 0.4em;
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.
151 list-style: none; margin-top: 2px;
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%.
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;
170 { /* Invert navigation tab colours, on mouse-over.
172 color: #ffffff; background-color: #6699cc;
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.
179 display: block; color: inherit;
183 /* General page content formatting
184 * ===============================
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).
191 position: absolute; top: 70px;
192 text-align: justify; padding: 0 3% 1.5em;
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.
203 { /* Within the "masthead" region, the page title will be set as
204 * a level one heading, with no space below.
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.
213 margin: 0; padding-top: 1px; font-weight: normal;
216 /* Supplementary formatting for sections with numbered headings
217 * ============================================================
220 { /* On starting any new numbered section division, reset the
221 * heading serial number sequence, and establish a suitable
222 * space at the top of the display region.
224 counter-reset: h3-number;
227 .h3-numbered h3::before
228 { /* For each section heading, in sequence, increment the serial
229 * number, and prefix it to the heading text.
231 counter-increment: h3-number;
232 font-family: inherit; font-size: 0.87em; font-weight: bold;
233 content: counter(h3-number) ". ";
236 /* $RCSfile$: end of file */