* site.css
*
* Rules for application of consistent styling, for all regular pages,
- * across the MinGW.org site.
+ * across the MinGW.OSDN site.
*
*
* $Id$
*
* Written by Keith Marshall <keith@users.osdn.me>
- * Copyright (C) 2020, MinGW.org Project
+ * Copyright (C) 2020-2022, MinGW.OSDN Project
*
*
* Redistribution and use in source and 'compiled' forms (SGML, HTML,
* and the following disclaimer in the documentation and/or other
* materials provided with the distribution.
*
- * THIS DOCUMENTATION IS PROVIDED BY THE MINGW.ORG 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.ORG PROJECT, OR
+ * 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,
* OF THIS DOCUMENTATION, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
* DAMAGE.
*
- */
-
-/* General Page Layout and Formatting
+ *
+ *
+ * General Page Layout and Formatting
* ==================================
*/
body
* default h3 styling, but pull the following paragraph a
* bit closer.
*/
- margin-bottom: -0.2em;
+ margin-bottom: -0.2em; font-size: 1.25em;
+}
+h4
+{ margin: 0.8em 0 -0.2em; font-size: 1.10em;
}
hr
{ /* Match the colour of horizontal page dividing rules to that
*/
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!
margin-top: 0.3em; margin-bottom: 0;
}
ul li, ol li
-{ margin-top: 0.12em;
+{ margin-top: 0.12em; margin-right: 1.2em;
+}
+ol.small-numbers li::marker
+{ font-size: 85%;
+}
+div.box-out ol.small-numbers li::marker
+{ font-size: 80%;
}
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-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
}
+/* 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
* ===============================
*/
* space for the fixed page header; (it may subsequently scroll,
* to be occluded behind the header).
*/
- position: absolute; top: 70px;
+ position: absolute; top: 70px; min-width: 94%;
text-align: justify; padding: 0 3% 1.5em;
}
.masthead
*/
margin: 0; padding-top: 1px; font-weight: normal;
}
-dl.masthead
-{ /* On page overlays, we use a definition list to specify the
- * page title, and subtitle, which are to be propagated to the
- * masthead section within the page content; the content of the
- * definition list, itself, should not be directly visible.
- */
- display: none;
-}
-dl.masthead+p
+.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
*/
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
* number, and prefix it to the heading text.
*/
counter-increment: h3-number;
- font-family: inherit; font-size: 0.87em; font-weight: bold;
+ font-family: inherit; font-size: 85%; 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: 102.5%;
+}
+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
+{ /* Use a lighter text colour, to highlight code samples in
+ * 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.top-aligned tr
+{ vertical-align: baseline;
+}
+table.definitions tr td:first-child
+{ font-weight: bolder;
+}
+table.definitions tr td ul
+{ margin: 0.1em 0 0.1em -0.3em;
+}
+
+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,
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;
+ font-size: 80%; background-color: #f3f3ff;
}
form.search button
{ /* ...with a search button occupying the rightmost 60px.
OSDN Git Service
