* 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, 2021, 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,
*
*/
-/* General page layout and formatting
+/* General Page Layout and Formatting
* ==================================
*/
body
{ /* Also maintain a deeper space between paragraph text and any
* intervening horizontal rule.
*/
- margin-top: 1.3em;
+ margin-top: 1.2em;
}
-p+ul
-{ /* Keep any unordered list closer to preceding paragraph text
- * than normal inter-paragraph spacing, but separated slightly
+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;
+}
+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;
+}
-/* Fixed position page header block formatting
+/* Fixed Position Page Header Block Formatting
* ===========================================
*/
#header
* becomes (99 - 15) / 5 = 16.8%.
*/
display: inline-block;
- min-width: 16.8%; margin-left: 1px; margin-right: 1px;
- border-top: 1px solid; border-left: 1px solid; border-right: 2px solid;
+ 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;
}
-/* General page content 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
* ===============================
*/
.page-view
*/
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;
}
-/* Supplementary formatting for sections with numbered headings
+
+/* 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
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 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 */
OSDN Git Service
