/* * site.css * * Rules for application of consistent styling, for all regular pages, * across the MinGW.OSDN site. * * * $Id$ * * Written by Keith Marshall * Copyright (C) 2020, 2021, MinGW.OSDN Project * * * Redistribution and use in source and 'compiled' forms (SGML, HTML, * PDF, PostScript, RTF, etc) with or without modification, are permitted * provided that the following conditions are met: * * 1. Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer as * the first lines of this file, unmodified. * * 2. Redistributions in compiled form (transformed to other DTDs, * converted to PDF, PostScript, RTF and other formats) must * reproduce the above copyright notice, this list of conditions * and the following disclaimer in the documentation and/or other * materials provided with the distribution. * * THIS DOCUMENTATION IS PROVIDED BY THE MINGW.OSDN PROJECT "AS IS" * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE MINGW.OSDN PROJECT, OR * ITS CONTRIBUTORS, BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE * OF THIS DOCUMENTATION, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH * DAMAGE. * */ /* General Page Layout and Formatting * ================================== */ body { /* Default style, applicable to all normal page content; favour * Google's "Roboto" sans-serif web-font, at 14pt, with blue-black * text colour, on a pale blue-grey background; centre text within * the viewport, with no padding. */ margin: 0 auto; padding 0; font-family: Roboto, verdana, sans-serif; font-size: 14pt; color: #000066; background-color: #e9e9ff; } h3 { /* We reserve h1 and h2 heading levels for page title, and * subtitle respectively; thus, h3 becomes the first level * available for section headings. Preserve the browser's * default h3 styling, but pull the following paragraph a * bit closer. */ margin-bottom: -0.2em; } h4 { margin: 0.8em 0 -0.2em; } hr { /* Match the colour of horizontal page dividing rules to that * of the text. */ color: #000066; } .nowrap { white-space: nowrap; } a { /* Links are distiguisable by use of a contrasting text colour; * there is no need to underline them too! */ text-decoration: none; } a:visited { /* Visited links are further distinguishable, by use of an * alternative contrasting text colour. */ color: #aa00cc; } a code { /* Whereas code samples, within running text, are displayed in a * reduced-intensity colour, when encapsulated within a reference * anchor, the anchor colour should prevail. */ color: inherit; } p { /* Use the browser's default paragraph styling, but tighten the * inter-paragraph spacing... */ margin-top: 0.6em; margin-bottom: 0; } p:first-child { /* ...while maintaining a deeper space before the first in any * free-standing text division. */ margin-top: 1.3em; } hr+p, p+hr { /* Also maintain a deeper space between paragraph text and any * intervening horizontal rule. */ margin-top: 1.2em; } p+ul, p+ol, p+dl { /* Keep any unordered list, ordered list, or defining list * closer to any immediately preceding paragraph text than * normal inter-paragraph spacing, but separated slightly * more than single-line text spacing. */ margin-top: 0.3em; margin-bottom: 0; } ul li, ol li { margin-top: 0.12em; margin-right: 1.2em; } ul li:first-child, ol li:first-child { margin-top: 0; } ul.overlapped { margin-left: -0.6em; margin-bottom: 0; padding-top: calc( 70px + 0.6em ); } ul.overlapped li > p:last-child { margin-bottom: 0; } li > p { /* For multi-paragraph list items, keep the paragraph * spacing tighter than for free-standing paragraphs. */ margin-top: 0.12em; margin-bottom: 0.3em; } dl dt { /* Similarly, set explicit layout rules for definition lists. */ margin-top: 0.8em; font-weight: bold; } dl dt:first-child, dl dd+dd { margin-top: 0.4em; } dl dt+dd { margin-top: 0.2em; } dl.no-indent dd { /* Suppress indentation of definition blocks, within any * definition list of the "no-indent" class. */ margin-left: 0; } dl.hanging-indent { /* An alternative definitions list style, placing the term * within a 7.5% width "hanging indent", vertically aligned * with the definition occupying the remaining 92.5% of the * page width. */ margin: 0.6em 0 0 0; } dl.hanging-indent dt { float: left; width: 7.5%; margin: 0; padding: 0; } dl.hanging-indent dd { width: 92.5%; margin: 0; padding: 0 0 0.5em 7.5%; } dl.hanging-indent dd:last-child { padding-bottom: 0; } /* Fixed Position Page Header Block Formatting * =========================================== */ #header { /* All pages share a common header block layout; it will be fixed * at the top of the viewport, across its full width, and variable * page content will scroll below it. */ position: fixed; z-index: 50; top: 0; width: 100%; height: 70px; border-bottom: 5px solid #336699; background-color: #ccccff; opacity: 1; } #logo { /* Encapsulated within the header block, place a single copy of * the graphical site logo to the left of the region. */ float: left; height: 100%; width: 15%; background: url("logo.png") no-repeat center; } #header .text { /* Allocate the region of the header block, to the right of the * logo, for display of centred mid-blue-grey text, in Google's * "Alegreya Sans" small-caps web-font, at nominal 14pt size. */ float: both; width = 100%; text-align: center; font-family: "Alegreya Sans SC", verdana, sans-serif; font-size: 14pt; color: #336699; font-variant: small-caps; font-weight: bold; white-space: nowrap; overflow: none; } #header .text h1 { /* The primary text, in the header block, is set as a level one * heading, (and thus at double the nominal font size); also set * it with expanded tracking. */ margin: 0; padding: 0; letter-spacing: 0.2em; word-spacing: 0.4em; } #navbar { /* The navigation tab-bar is also encapsulated within the header * block; implemented as an unordered list, without bullet marks, * it is placed centrally, with its top set at two logical pixel * heights below the top level (h1) heading text. */ list-style: none; margin-top: 2px; } #navbar li { /* Each navigation tab is represented by a list item, arranged * within an inline-block display, (hence laid out horizontally). * Each tab is styled to give the appearance of a row of filing * cabinet tabs, with the entire row occupying 99% of available * display width, (after deduction of the 15% reserved for the * logo); hence the width of each tab (currently there are 5) * becomes (99 - 15) / 5 = 16.8%. */ display: inline-block; min-width: 16.8%; margin: 0 1px; border-bottom: 3px solid; border-top: 1px solid; border-left: 1px solid; border-right: 3px solid; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-style: none; border-color: #336699; color: #003366; background-color: #d9d9ff; } #navbar li:hover { /* Invert navigation tab colours, on mouse-over. */ color: #ffffff; background-color: #6699cc; } #navbar li a { /* Make link anchors, on navigation tabs, fill the entire area * of their respective tabs, while preserving the text colour * theme of the page header block. */ display: block; color: inherit; } /* Document Reference Tables of Content Formatting * =============================================== */ dl.toc { margin: calc( -70px - 0.6em ) 0 0; padding-top: calc( 70px + 0.6em ); } dl.toc h4 { margin: 0.2em 0; } dl.toc dt { margin: 0; min-width: 100%; } /* General Page Content Formatting * =============================== */ .page-view { /* Set the page content to begin immediately below the reserved * space for the fixed page header; (it may subsequently scroll, * to be occluded behind the header). */ position: absolute; top: 70px; min-width: 94%; text-align: justify; padding: 0 3% 1.5em; } .masthead { /* Nominally placed at the top of the page content region, we * allow for a "masthead" region, offset from the main content * by one vertical em-space, in which the page title, and any * desired page subtitle, may be placed. */ margin-bottom: 1em; } .masthead h1 { /* Within the "masthead" region, the page title will be set as * a level one heading, with no space below. */ margin-bottom: 0; } .masthead h2 { /* Similarly, if present, the page subtitle will be set as a * level two heading, at default size for such headings, but * with no emboldening. */ margin: 0; padding-top: 1px; font-weight: normal; } .masthead+p { /* The masthead section is separated from the remaining page * content, by a horizontal rule; to keep white space balanced, * above and below this rule, when it is immediately followed * by a paragraph, with no intervening heading, we need to * explicitly adjust the paragraph margin. */ margin-top: 1.3em; } .masthead+div.overlapped { /* When an overlapped div element is placed immediately below * the masthead, we need to pull its content slightly closer to * the top of the viewport, than we do for overlapped content * which appears further down the page. */ margin-top: calc( -70px - 0.4em ); } /* Subsection Reference Positioning Relative to Page Header * ======================================================== */ .overlapped { /* Any internal page reference will be positioned at the same * vertical offset, within the viewport, as the top of the page * header block. Thus, any text which appears within the upper * 70px of the subsection division will be hidden behind the * header block; adjust the alignment of the target element, * such that its top margin overlaps the lower region of the * preceding element, by the depth of the header block, then * pad it, to push the content downward, into the viewport. */ margin-top: -70px; padding-top: 70px; } hr+div.overlapped { /* When an overlapped division follows a horizontal rule, we * need to adjust its position upward, to allow for the blank * space in the bottom margin of the rule element. */ margin-top: calc( -70px - 0.6em ); } /* Supplementary Formatting for Sections with Numbered Headings * ============================================================ */ .h3-numbered { /* On starting any new numbered section division, reset the * heading serial number sequence, and establish a suitable * space at the top of the display region. */ counter-reset: h3-number; margin-top: 0.8em; } .h3-numbered h3::before { /* For each section heading, in sequence, increment the serial * number, and prefix it to the heading text. */ counter-increment: h3-number; font-family: inherit; font-size: 0.87em; font-weight: bold; content: counter(h3-number) ". "; } /* Styling for Frequently Asked Questions * ====================================== * Display questions on buttons, which will initiate display * of respective answers immediately below, when clicked. */ div.faq button { display: block; width: 100%; outline: none; cursor: pointer; border: none; padding: 1pt 5px 0 25px; background-color: inherit; text-align: justify; font: 14pt Roboto; color: #000066; } div.faq h3 + button { margin-top: 0.6em; } div.faq button::before { float: left; margin-left: -25px; width: 23px; content: "Q."; text-align: center; font: bolder 12pt Roboto; padding-top: 2pt; } div.faq button:hover { background-color: #dcdcfc; } div.faq button.open, div.faq button.open + div.answer { background-color: #d9d9fc; } div.faq div.answer { display: none; /* margin-left: -5px; */ min-height: 1em; padding: 1.5pt 5px 0 25px; } div.faq div.answer::before { float: left; margin-left: -25px; width: 23px; content: "A."; text-align: center; font: bolder 12pt Roboto; padding-top: 2pt; } div.faq div.answer p:first-child { margin-top: 0; } div.faq div.answer p { margin-top: 3pt; } div.faq button + button, div.faq div.answer + button { margin-top: 0.25em; } /* Styling for "Box-Out" Content * ============================= * Suitable for display of any "aside" content, but applicable, * in particular, to pre-formatted code samples, and examples in * a "video-terminal" view style. */ .box-out { /* Identify the "box-out" region, by drawing a solid border, * and lightening the background colour. */ margin: 0.2em 0; border: 1px solid #003366; background-color: #f3f3ff; padding: 0.3em 0.6em; border-radius: 7px; } div.box-out { /* When a box-out is designated as a container for regular text, * rather than for preformatted content, adjust its text size to * appear slightly larger than adjacent running text... */ font-size: 1.025em; } div.box-out p:first-child { /* ...and avoid a excessive gap between the top of the bounding * box, and the initial internal paragraph. */ margin-top: 0; } pre.vt, code { /* Use a lighter text colour, to highlight code samples in * running text, and the machine-output in "video-terminal" * style displays... */ color: #666699; } pre.vt kbd { /* ...while emboldening, and darkening, the representation * of user input, in those same "video-terminal" displays. */ font-weight: bold; color: #003366; } p+pre.box-out, pre.box-out+p { /* Keep balanced vertical spacing around pre-formatted box-out * regions, when placed between two conventional paragraphs. */ margin-top: 0.5em; } div.box-out dl.hanging-indent dt { /* A variation on the "hanging indent" definitions list style, * for use within "box-out" content. */ width: 7%; font-style: italic; } div.box-out dl.hanging-indent dd:last-child { padding-bottom: 0; } div.box-out dl.hanging-indent dd { padding: 0 0 0.2em 7%; } /* Layout for Tables, Omitting Cell Boundary Lines * =============================================== */ table.borderless { border: none; border-spacing: 1em 0; } table.borderless th { border-bottom: 2px solid #000066; } table.borderless tr.leaded td { padding-top: 0.3em; } table.borderless code { color: inherit; } table.top-aligned tr td, table.top-aligned tr tr { vertical-align: top; } p + table.borderless { margin: 0.3em -0.2em; } /* Styling for In-Line Web-Search Form Fields * ========================================== * Derived from Juri Wornowitski's DuckDuckGo search widget implementation, * version 3.0, as described at https://www.plainlight.com/ddg */ form.search { /* Let the search box fill the entire width of its containing * element, with 0.3em spacing above and below; (thus, when two * search boxes are placed together, they will be separated by * 0.6em vertical space). */ width: 100%; margin: 0.3em auto; } form.search input { /* Establish styling attributes for the keywords input field, * which fills the search box from its left-hand side, most of * the way across to the right... */ display: block; outline: none; box-sizing: border-box; border: 1px solid #003366; border-right: none; border-radius: 7px 0 0 7px; height: 30px; width: calc( 100% - 60px ); padding: 0.6em; font-size: 0.8em; background-color: #f3f3ff; } form.search button { /* ...with a search button occupying the rightmost 60px. */ float: right; height: 30px; width: 60px; font-size: 1em; border: 1px solid #003366; border-left: none; border-radius: 0 7px 7px 0; cursor: pointer; color: #336699; background-color: #ccccff; } form.search button:active, form.search button:hover { /* Invert search button colours, when the mouse is placed * over it, or while a search is in progress. */ color: #ccccff; background-color: #6699cc; } form.search button:focus { /* Do not outline the button, even when it has the focus. */ outline:none; } /* $RCSfile$: end of file */