X-Git-Url: http://git.osdn.net/view?p=mingw%2Fwebsite.git;a=blobdiff_plain;f=site.css;h=e0a5baccbc1049172a041a619c8f918b84212972;hp=4ace8d6d191cf7893716f50a89c4681d4e21ba3c;hb=a221b1225f88a52cc34b8867131dea11c4ce2788;hpb=003cc5a29d0cfabf8588b700a826b516d639a087 diff --git a/site.css b/site.css index 4ace8d6..e0a5bac 100644 --- a/site.css +++ b/site.css @@ -2,13 +2,13 @@ * 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 - * Copyright (C) 2020, MinGW.org Project + * Copyright (C) 2020, 2021, MinGW.OSDN Project * * * Redistribution and use in source and 'compiled' forms (SGML, HTML, @@ -25,10 +25,10 @@ * 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, @@ -40,7 +40,7 @@ * */ -/* General page layout and formatting +/* General Page Layout and Formatting * ================================== */ body @@ -96,18 +96,42 @@ hr+p, p+hr { /* 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 @@ -160,8 +184,8 @@ p+ul * 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; @@ -180,7 +204,21 @@ p+ul } -/* 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 @@ -220,7 +258,7 @@ dl.masthead */ 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 @@ -230,7 +268,32 @@ dl.masthead+p 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 @@ -250,4 +313,91 @@ dl.masthead+p 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 */