OSDN Git Service

Publish note on DLL version management.
[mingw/website.git] / site.css
1 /*
2  * site.css
3  *
4  * Rules for application of consistent styling, for all regular pages,
5  * across the MinGW.OSDN site.
6  *
7  *
8  * $Id$
9  *
10  * Written by Keith Marshall <keith@users.osdn.me>
11  * Copyright (C) 2020, 2021, MinGW.OSDN Project
12  *
13  *
14  * Redistribution and use in source and 'compiled' forms (SGML, HTML,
15  * PDF, PostScript, RTF, etc) with or without modification, are permitted
16  * provided that the following conditions are met:
17  *
18  * 1. Redistributions of source code must retain the above copyright
19  *    notice, this list of conditions and the following disclaimer as
20  *    the first lines of this file, unmodified.
21  *
22  * 2. Redistributions in compiled form (transformed to other DTDs,
23  *    converted to PDF, PostScript, RTF and other formats) must
24  *    reproduce the above copyright notice, this list of conditions
25  *    and the following disclaimer in the documentation and/or other
26  *    materials provided with the distribution.
27  *
28  * THIS DOCUMENTATION IS PROVIDED BY THE MINGW.OSDN PROJECT "AS IS"
29  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
30  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
31  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL THE MINGW.OSDN PROJECT, OR
32  * ITS CONTRIBUTORS, BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
33  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
34  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
35  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
36  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
37  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
38  * OF THIS DOCUMENTATION, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
39  * DAMAGE.
40  *
41  */
42
43 /* General Page Layout and Formatting
44  * ==================================
45  */
46 body
47 { /* Default style, applicable to all normal page content; favour
48    * Google's "Roboto" sans-serif web-font, at 14pt, with blue-black
49    * text colour, on a pale blue-grey background; centre text within
50    * the viewport, with no padding.
51    */
52   margin: 0 auto; padding 0;
53   font-family: Roboto, verdana, sans-serif; font-size: 14pt;
54   color: #000066; background-color: #e9e9ff;
55 }
56 h3
57 { /* We reserve h1 and h2 heading levels for page title, and
58    * subtitle respectively; thus, h3 becomes the first level
59    * available for section headings.  Preserve the browser's
60    * default h3 styling, but pull the following paragraph a
61    * bit closer.
62    */
63   margin-bottom: -0.2em;
64 }
65 h4
66 { margin: 0.8em 0 -0.2em;
67 }
68 hr
69 { /* Match the colour of horizontal page dividing rules to that
70    * of the text.
71    */
72   color: #000066;
73 }
74 .nowrap
75 { white-space: nowrap;
76 }
77 a
78 { /* Links are distiguisable by use of a contrasting text colour;
79    * there is no need to underline them too!
80    */
81   text-decoration: none;
82 }
83 a:visited
84 { /* Visited links are further distinguishable, by use of an
85    * alternative contrasting text colour.
86    */
87   color: #aa00cc;
88 }
89 a code
90 { /* Whereas code samples, within running text, are displayed in a
91    * reduced-intensity colour, when encapsulated within a reference
92    * anchor, the anchor colour should prevail.
93    */
94   color: inherit;
95 }
96 p
97 { /* Use the browser's default paragraph styling, but tighten the
98    * inter-paragraph spacing...
99    */
100   margin-top: 0.6em; margin-bottom: 0;
101 }
102 p:first-child
103 { /* ...while maintaining a deeper space before the first in any
104    * free-standing text division.
105    */
106   margin-top: 1.3em;
107 }
108 hr+p, p+hr
109 { /* Also maintain a deeper space between paragraph text and any
110    * intervening horizontal rule.
111    */
112   margin-top: 1.2em;
113 }
114 p+ul, p+ol, p+dl
115 { /* Keep any unordered list, ordered list, or defining list
116    * closer to any immediately preceding paragraph text than
117    * normal inter-paragraph spacing, but separated slightly
118    * more than single-line text spacing.
119    */
120   margin-top: 0.3em; margin-bottom: 0;
121 }
122 ul li, ol li
123 { margin-top: 0.12em; margin-right: 1.2em;
124 }
125 ul li:first-child, ol li:first-child
126 { margin-top: 0;
127 }
128 ul.overlapped
129 { margin-left: -0.6em; margin-bottom: 0; padding-top: calc( 70px + 0.6em );
130 }
131 ul.overlapped li > p:last-child
132 { margin-bottom: 0;
133 }
134 li > p
135 { /* For multi-paragraph list items, keep the paragraph
136    * spacing tighter than for free-standing paragraphs.
137    */
138   margin-top: 0.12em; margin-bottom: 0.3em;
139 }
140 dl dt
141 { /* Similarly, set explicit layout rules for definition lists.
142    */
143   margin-top: 0.8em; font-weight: bold;
144 }
145 dl dt:first-child, dl dd+dd
146 { margin-top: 0.4em;
147 }
148 dl dt+dd
149 { margin-top: 0.2em;
150 }
151 dl.no-indent dd
152 { /* Suppress indentation of definition blocks, within any
153    * definition list of the "no-indent" class.
154    */
155   margin-left: 0;
156 }
157 dl.hanging-indent
158 { /* An alternative definitions list style, placing the term
159    * within a 7.5% width "hanging indent", vertically aligned
160    * with the definition occupying the remaining 92.5% of the
161    * page width.
162    */
163   margin: 0.6em 0 0 0;
164 }
165 dl.hanging-indent dt
166 { float: left; width: 7.5%; margin: 0; padding: 0;
167 }
168 dl.hanging-indent dd
169 { width: 92.5%; margin: 0; padding: 0 0 0.5em 7.5%;
170 }
171 dl.hanging-indent dd:last-child
172 { padding-bottom: 0;
173 }
174
175
176 /* Fixed Position Page Header Block Formatting
177  * ===========================================
178  */
179 #header
180 { /* All pages share a common header block layout; it will be fixed
181    * at the top of the viewport, across its full width, and variable
182    * page content will scroll below it.
183    */
184   position: fixed; z-index: 50; top: 0; width: 100%; height: 70px;
185   border-bottom: 5px solid #336699; background-color: #ccccff; opacity: 1;
186 }
187 #logo
188 { /* Encapsulated within the header block, place a single copy of
189    * the graphical site logo to the left of the region.
190    */
191   float: left; height: 100%; width: 15%;
192   background: url("logo.png") no-repeat center;
193 }
194 #header .text
195 { /* Allocate the region of the header block, to the right of the
196    * logo, for display of centred mid-blue-grey text, in Google's
197    * "Alegreya Sans" small-caps web-font, at nominal 14pt size.
198    */
199   float: both; width = 100%; text-align: center;
200   font-family: "Alegreya Sans SC", verdana, sans-serif; font-size: 14pt;
201   color: #336699; font-variant: small-caps; font-weight: bold;
202   white-space: nowrap; overflow: none;
203 }
204 #header .text h1
205 { /* The primary text, in the header block, is set as a level one
206    * heading, (and thus at double the nominal font size); also set
207    * it with expanded tracking.
208    */
209   margin: 0; padding: 0; letter-spacing: 0.2em; word-spacing: 0.4em;
210 }
211 #navbar
212 { /* The navigation tab-bar is also encapsulated within the header
213    * block; implemented as an unordered list, without bullet marks,
214    * it is placed centrally, with its top set at two logical pixel
215    * heights below the top level (h1) heading text.
216    */
217   list-style: none; margin-top: 2px;
218 }
219 #navbar li
220 { /* Each navigation tab is represented by a list item, arranged
221    * within an inline-block display, (hence laid out horizontally).
222    * Each tab is styled to give the appearance of a row of filing
223    * cabinet tabs, with the entire row occupying 99% of available
224    * display width, (after deduction of the 15% reserved for the
225    * logo); hence the width of each tab (currently there are 5)
226    * becomes (99 - 15) / 5 = 16.8%.
227    */
228   display: inline-block;
229   min-width: 16.8%; margin: 0 1px; border-bottom: 3px solid;
230   border-top: 1px solid; border-left: 1px solid; border-right: 3px solid;
231   border-top-left-radius: 7px; border-top-right-radius: 7px;
232   border-bottom-style: none; border-color: #336699;
233   color: #003366; background-color: #d9d9ff;
234 }
235 #navbar li:hover
236 { /* Invert navigation tab colours, on mouse-over.
237    */
238   color: #ffffff; background-color: #6699cc;
239 }
240 #navbar li a
241 { /* Make link anchors, on navigation tabs, fill the entire area
242    * of their respective tabs, while preserving the text colour
243    * theme of the page header block.
244    */
245   display: block; color: inherit;
246 }
247
248
249 /* Document Reference Tables of Content Formatting
250  * ===============================================
251  */
252 dl.toc
253 { margin: calc( -70px - 0.6em ) 0 0; padding-top: calc( 70px + 0.6em );
254 }
255 dl.toc h4
256 { margin: 0.2em 0;
257 }
258 dl.toc dt
259 { margin: 0; min-width: 100%;
260 }
261
262
263 /* General Page Content Formatting
264  * ===============================
265  */
266 .page-view
267 { /* Set the page content to begin immediately below the reserved
268    * space for the fixed page header; (it may subsequently scroll,
269    * to be occluded behind the header).
270    */
271   position: absolute; top: 70px; min-width: 94%;
272   text-align: justify; padding: 0 3% 1.5em;
273 }
274 .masthead
275 { /* Nominally placed at the top of the page content region, we
276    * allow for a "masthead" region, offset from the main content
277    * by one vertical em-space, in which the page title, and any
278    * desired page subtitle, may be placed.
279    */
280   margin-bottom: 1em;
281 }
282 .masthead h1
283 { /* Within the "masthead" region, the page title will be set as
284    * a level one heading, with no space below.
285    */
286   margin-bottom: 0;
287 }
288 .masthead h2
289 { /* Similarly, if present, the page subtitle will be set as a
290    * level two heading, at default size for such headings, but
291    * with no emboldening.
292    */
293   margin: 0; padding-top: 1px; font-weight: normal;
294 }
295 .masthead+p
296 { /* The masthead section is separated from the remaining page
297    * content, by a horizontal rule; to keep white space balanced,
298    * above and below this rule, when it is immediately followed
299    * by a paragraph, with no intervening heading, we need to
300    * explicitly adjust the paragraph margin.
301    */
302   margin-top: 1.3em;
303 }
304 .masthead+div.overlapped
305 { /* When an overlapped div element is placed immediately below
306    * the masthead, we need to pull its content slightly closer to
307    * the top of the viewport, than we do for overlapped content
308    * which appears further down the page.
309    */
310   margin-top: calc( -70px - 0.4em );
311 }
312
313
314 /* Subsection Reference Positioning Relative to Page Header
315  * ========================================================
316  */
317 .overlapped
318 { /* Any internal page reference will be positioned at the same
319    * vertical offset, within the viewport, as the top of the page
320    * header block.  Thus, any text which appears within the upper
321    * 70px of the subsection division will be hidden behind the
322    * header block; adjust the alignment of the target element,
323    * such that its top margin overlaps the lower region of the
324    * preceding element, by the depth of the header block, then
325    * pad it, to push the content downward, into the viewport.
326    */
327   margin-top: -70px; padding-top: 70px;
328 }
329 hr+div.overlapped
330 { /* When an overlapped division follows a horizontal rule, we
331    * need to adjust its position upward, to allow for the blank
332    * space in the bottom margin of the rule element.
333    */
334   margin-top: calc( -70px - 0.6em );
335 }
336
337
338 /* Supplementary Formatting for Sections with Numbered Headings
339  * ============================================================
340  */
341 .h3-numbered
342 { /* On starting any new numbered section division, reset the
343    * heading serial number sequence, and establish a suitable
344    * space at the top of the display region.
345    */
346   counter-reset: h3-number;
347   margin-top: 0.8em;
348 }
349 .h3-numbered h3::before
350 { /* For each section heading, in sequence, increment the serial
351    * number, and prefix it to the heading text.
352    */
353   counter-increment: h3-number;
354   font-family: inherit; font-size: 0.87em; font-weight: bold;
355   content: counter(h3-number) ". ";
356 }
357
358
359 /* Styling for Frequently Asked Questions
360  * ======================================
361  * Display questions on buttons, which will initiate display
362  * of respective answers immediately below, when clicked.
363  */
364 div.faq button
365 { display: block; width: 100%; outline: none; cursor: pointer;
366   border: none; padding: 1pt 5px 0 25px; background-color: inherit;
367   text-align: justify; font: 14pt Roboto; color: #000066;
368 }
369 div.faq h3 + button
370 { margin-top: 0.6em;
371 }
372 div.faq button::before
373 { float: left; margin-left: -25px; width: 23px; content: "Q.";
374   text-align: center; font: bolder 12pt Roboto; padding-top: 2pt;
375 }
376 div.faq button:hover
377 { background-color: #dcdcfc;
378 }
379 div.faq button.open,
380 div.faq button.open + div.answer
381 { background-color: #d9d9fc;
382 }
383 div.faq div.answer
384 { display: none; /* margin-left: -5px; */ min-height: 1em;
385   padding: 1.5pt 5px 0 25px;
386 }
387 div.faq div.answer::before
388 { float: left; margin-left: -25px; width: 23px; content: "A.";
389   text-align: center; font: bolder 12pt Roboto; padding-top: 2pt;
390 }
391 div.faq div.answer p:first-child
392 { margin-top: 0;
393 }
394 div.faq div.answer p
395 { margin-top: 3pt;
396 }
397 div.faq button + button,
398 div.faq div.answer + button
399 { margin-top: 0.25em;
400 }
401
402
403 /* Styling for "Box-Out" Content
404  * =============================
405  * Suitable for display of any "aside" content, but applicable,
406  * in particular, to pre-formatted code samples, and examples in
407  * a "video-terminal" view style.
408  */
409 .box-out
410 { /* Identify the "box-out" region, by drawing a solid border,
411    * and lightening the background colour.
412    */
413   margin: 0.2em 0; border: 1px solid #003366; background-color: #f3f3ff;
414   padding: 0.3em 0.6em; border-radius: 7px;
415 }
416 div.box-out
417 { /* When a box-out is designated as a container for regular text,
418    * rather than for preformatted content, adjust its text size to
419    * appear slightly larger than adjacent running text...
420    */
421   font-size: 1.025em;
422 }
423 div.box-out p:first-child
424 { /* ...and avoid a excessive gap between the top of the bounding
425    * box, and the initial internal paragraph.
426    */
427   margin-top: 0;
428 }
429 pre.vt, code
430 { /* Use a lighter text colour, to highlight code samples in
431    * running text, and the machine-output in "video-terminal"
432    * style displays...
433    */
434   color: #666699;
435 }
436 pre.vt kbd
437 { /* ...while emboldening, and darkening, the representation
438    * of user input, in those same "video-terminal" displays.
439    */
440   font-weight: bold; color: #003366;
441 }
442 p+pre.box-out, pre.box-out+p
443 { /* Keep balanced vertical spacing around pre-formatted box-out
444    * regions, when placed between two conventional paragraphs.
445    */
446   margin-top: 0.5em;
447 }
448 div.box-out dl.hanging-indent dt
449 { /* A variation on the "hanging indent" definitions list style,
450    * for use within "box-out" content.
451    */
452   width: 7%; font-style: italic;
453 }
454 div.box-out dl.hanging-indent dd:last-child
455 { padding-bottom: 0;
456 }
457 div.box-out dl.hanging-indent dd
458 { padding: 0 0 0.2em 7%;
459 }
460
461
462 /* Layout for Tables, Omitting Cell Boundary Lines
463  * ===============================================
464  */
465 table.borderless
466 { border: none; border-spacing: 1em 0;
467 }
468 table.borderless th
469 { border-bottom: 2px solid #000066;
470 }
471 table.borderless tr.leaded td
472 { padding-top: 0.3em;
473 }
474 table.borderless code
475 { color: inherit;
476 }
477 table.top-aligned tr td, table.top-aligned tr tr
478 { vertical-align: top;
479 }
480
481 p + table.borderless { margin: 0.3em -0.2em; }
482
483
484 /* Styling for In-Line Web-Search Form Fields
485  * ==========================================
486  * Derived from Juri Wornowitski's DuckDuckGo search widget implementation,
487  * version 3.0, as described at https://www.plainlight.com/ddg
488  */
489 form.search
490 { /* Let the search box fill the entire width of its containing
491    * element, with 0.3em spacing above and below; (thus, when two
492    * search boxes are placed together, they will be separated by
493    * 0.6em vertical space).
494    */
495   width: 100%; margin: 0.3em auto;
496 }
497 form.search input
498 { /* Establish styling attributes for the keywords input field,
499    * which fills the search box from its left-hand side, most of
500    * the way across to the right...
501    */
502   display: block; outline: none; box-sizing: border-box;
503   border: 1px solid #003366; border-right: none; border-radius: 7px 0 0 7px;
504   height: 30px; width: calc( 100% - 60px ); padding: 0.6em;
505   font-size: 0.8em; background-color: #f3f3ff;
506 }
507 form.search button
508 { /* ...with a search button occupying the rightmost 60px.
509    */
510   float: right; height: 30px; width:  60px; font-size: 1em;
511   border: 1px solid #003366; border-left: none; border-radius: 0 7px 7px 0;
512   cursor: pointer; color: #336699; background-color: #ccccff;
513 }
514 form.search button:active, form.search button:hover
515 { /* Invert search button colours, when the mouse is placed
516    * over it, or while a search is in progress.
517    */
518   color: #ccccff; background-color: #6699cc;
519 }
520 form.search button:focus
521 { /* Do not outline the button, even when it has the focus.
522    */
523   outline:none;
524 }
525
526 /* $RCSfile$: end of file */