From: Keith Marshall Date: Fri, 19 Nov 2021 22:58:22 +0000 (+0000) Subject: Specify some additional site style properties. X-Git-Url: http://git.osdn.net/view?p=mingw%2Fwebsite.git;a=commitdiff_plain;h=bed8fd450e68f095168147285998a34743ba819a Specify some additional site style properties. * site.css (h4): Set margins globally. (page-view): Set minimum relative display width. (dl.masthead): No longer required; delete specification. (div.overlapped) [following "masthead"]: Adjust top margin. (nowrap, box-out, table.borderless): New styling classes. (pre.vt) [box-out]: Specialization of style, for use in illustration of screen display output; lighten text colour. (kbd) [pre.vt]: Darken text colour, for keyboard input. (code) [within tag scope]: Inherit text colour. (code) [within body text]: Lighten text colour. --- diff --git a/site.css b/site.css index e0a5bac..be70ec3 100644 --- a/site.css +++ b/site.css @@ -62,12 +62,18 @@ h3 */ 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! @@ -80,6 +86,13 @@ a:visited */ 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... @@ -112,6 +125,18 @@ ul li, ol li 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. */ @@ -129,6 +154,23 @@ dl.no-indent dd */ 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 @@ -226,7 +268,7 @@ dl.toc dt * 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 @@ -250,14 +292,6 @@ dl.toc dt */ 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; -} .masthead+p { /* The masthead section is separated from the remaining page * content, by a horizontal rule; to keep white space balanced, @@ -267,6 +301,14 @@ dl.masthead */ 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 @@ -358,6 +400,87 @@ div.faq div.answer + button } +/* 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,