OSDN Git Service

Redirect OSDN mail archive searches from DuckDuckGo to Google.
[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 hr
66 { /* Match the colour of horizontal page dividing rules to that
67    * of the text.
68    */
69   color: #000066;
70 }
71 a
72 { /* Links are distiguisable by use of a contrasting text colour;
73    * there is no need to underline them too!
74    */
75   text-decoration: none;
76 }
77 a:visited
78 { /* Visited links are further distinguishable, by use of an
79    * alternative contrasting text colour.
80    */
81   color: #aa00cc;
82 }
83 p
84 { /* Use the browser's default paragraph styling, but tighten the
85    * inter-paragraph spacing...
86    */
87   margin-top: 0.6em; margin-bottom: 0;
88 }
89 p:first-child
90 { /* ...while maintaining a deeper space before the first in any
91    * free-standing text division.
92    */
93   margin-top: 1.3em;
94 }
95 hr+p, p+hr
96 { /* Also maintain a deeper space between paragraph text and any
97    * intervening horizontal rule.
98    */
99   margin-top: 1.2em;
100 }
101 p+ul, p+ol, p+dl
102 { /* Keep any unordered list, ordered list, or defining list
103    * closer to any immediately preceding paragraph text than
104    * normal inter-paragraph spacing, but separated slightly
105    * more than single-line text spacing.
106    */
107   margin-top: 0.3em; margin-bottom: 0;
108 }
109 ul li, ol li
110 { margin-top: 0.12em;
111 }
112 ul li:first-child, ol li:first-child
113 { margin-top: 0;
114 }
115 dl dt
116 { /* Similarly, set explicit layout rules for definition lists.
117    */
118   margin-top: 0.8em; font-weight: bold;
119 }
120 dl dt:first-child, dl dd+dd
121 { margin-top: 0.4em;
122 }
123 dl dt+dd
124 { margin-top: 0.2em;
125 }
126 dl.no-indent dd
127 { /* Suppress indentation of definition blocks, within any
128    * definition list of the "no-indent" class.
129    */
130   margin-left: 0;
131 }
132
133
134 /* Fixed Position Page Header Block Formatting
135  * ===========================================
136  */
137 #header
138 { /* All pages share a common header block layout; it will be fixed
139    * at the top of the viewport, across its full width, and variable
140    * page content will scroll below it.
141    */
142   position: fixed; z-index: 50; top: 0; width: 100%; height: 70px;
143   border-bottom: 5px solid #336699; background-color: #ccccff; opacity: 1;
144 }
145 #logo
146 { /* Encapsulated within the header block, place a single copy of
147    * the graphical site logo to the left of the region.
148    */
149   float: left; height: 100%; width: 15%;
150   background: url("logo.png") no-repeat center;
151 }
152 #header .text
153 { /* Allocate the region of the header block, to the right of the
154    * logo, for display of centred mid-blue-grey text, in Google's
155    * "Alegreya Sans" small-caps web-font, at nominal 14pt size.
156    */
157   float: both; width = 100%; text-align: center;
158   font-family: "Alegreya Sans SC", verdana, sans-serif; font-size: 14pt;
159   color: #336699; font-variant: small-caps; font-weight: bold;
160   white-space: nowrap; overflow: none;
161 }
162 #header .text h1
163 { /* The primary text, in the header block, is set as a level one
164    * heading, (and thus at double the nominal font size); also set
165    * it with expanded tracking.
166    */
167   margin: 0; padding: 0; letter-spacing: 0.2em; word-spacing: 0.4em;
168 }
169 #navbar
170 { /* The navigation tab-bar is also encapsulated within the header
171    * block; implemented as an unordered list, without bullet marks,
172    * it is placed centrally, with its top set at two logical pixel
173    * heights below the top level (h1) heading text.
174    */
175   list-style: none; margin-top: 2px;
176 }
177 #navbar li
178 { /* Each navigation tab is represented by a list item, arranged
179    * within an inline-block display, (hence laid out horizontally).
180    * Each tab is styled to give the appearance of a row of filing
181    * cabinet tabs, with the entire row occupying 99% of available
182    * display width, (after deduction of the 15% reserved for the
183    * logo); hence the width of each tab (currently there are 5)
184    * becomes (99 - 15) / 5 = 16.8%.
185    */
186   display: inline-block;
187   min-width: 16.8%; margin: 0 1px; border-bottom: 3px solid;
188   border-top: 1px solid; border-left: 1px solid; border-right: 3px solid;
189   border-top-left-radius: 7px; border-top-right-radius: 7px;
190   border-bottom-style: none; border-color: #336699;
191   color: #003366; background-color: #d9d9ff;
192 }
193 #navbar li:hover
194 { /* Invert navigation tab colours, on mouse-over.
195    */
196   color: #ffffff; background-color: #6699cc;
197 }
198 #navbar li a
199 { /* Make link anchors, on navigation tabs, fill the entire area
200    * of their respective tabs, while preserving the text colour
201    * theme of the page header block.
202    */
203   display: block; color: inherit;
204 }
205
206
207 /* General Page Content Formatting
208  * ===============================
209  */
210 .page-view
211 { /* Set the page content to begin immediately below the reserved
212    * space for the fixed page header; (it may subsequently scroll,
213    * to be occluded behind the header).
214    */
215   position: absolute; top: 70px;
216   text-align: justify; padding: 0 3% 1.5em;
217 }
218 .masthead
219 { /* Nominally placed at the top of the page content region, we
220    * allow for a "masthead" region, offset from the main content
221    * by one vertical em-space, in which the page title, and any
222    * desired page subtitle, may be placed.
223    */
224   margin-bottom: 1em;
225 }
226 .masthead h1
227 { /* Within the "masthead" region, the page title will be set as
228    * a level one heading, with no space below.
229    */
230   margin-bottom: 0;
231 }
232 .masthead h2
233 { /* Similarly, if present, the page subtitle will be set as a
234    * level two heading, at default size for such headings, but
235    * with no emboldening.
236    */
237   margin: 0; padding-top: 1px; font-weight: normal;
238 }
239 dl.masthead
240 { /* On page overlays, we use a definition list to specify the
241    * page title, and subtitle, which are to be propagated to the
242    * masthead section within the page content; the content of the
243    * definition list, itself, should not be directly visible.
244    */
245   display: none;
246 }
247 .masthead+p
248 { /* The masthead section is separated from the remaining page
249    * content, by a horizontal rule; to keep white space balanced,
250    * above and below this rule, when it is immediately followed
251    * by a paragraph, with no intervening heading, we need to
252    * explicitly adjust the paragraph margin.
253    */
254   margin-top: 1.3em;
255 }
256
257
258 /* Subsection Reference Positioning Relative to Page Header
259  * ========================================================
260  */
261 .overlapped
262 { /* Any internal page reference will be positioned at the same
263    * vertical offset, within the viewport, as the top of the page
264    * header block.  Thus, any text which appears within the upper
265    * 70px of the subsection division will be hidden behind the
266    * header block; adjust the alignment of the target element,
267    * such that its top margin overlaps the lower region of the
268    * preceding element, by the depth of the header block, then
269    * pad it, to push the content downward, into the viewport.
270    */
271   margin-top: -70px; padding-top: 70px;
272 }
273 hr+div.overlapped
274 { /* When an overlapped division follows a horizontal rule, we
275    * need to adjust its position upward, to allow for the blank
276    * space in the bottom margin of the rule element.
277    */
278   margin-top: calc( -70px - 0.6em );
279 }
280
281
282 /* Supplementary Formatting for Sections with Numbered Headings
283  * ============================================================
284  */
285 .h3-numbered
286 { /* On starting any new numbered section division, reset the
287    * heading serial number sequence, and establish a suitable
288    * space at the top of the display region.
289    */
290   counter-reset: h3-number;
291   margin-top: 0.8em;
292 }
293 .h3-numbered h3::before
294 { /* For each section heading, in sequence, increment the serial
295    * number, and prefix it to the heading text.
296    */
297   counter-increment: h3-number;
298   font-family: inherit; font-size: 0.87em; font-weight: bold;
299   content: counter(h3-number) ". ";
300 }
301
302
303 /* Styling for In-Line Web-Search Form Fields
304  * ==========================================
305  * Derived from Juri Wornowitski's DuckDuckGo search widget implementation,
306  * version 3.0, as described at https://www.plainlight.com/ddg
307  */
308 form.search
309 { /* Let the search box fill the entire width of its containing
310    * element, with 0.3em spacing above and below; (thus, when two
311    * search boxes are placed together, they will be separated by
312    * 0.6em vertical space).
313    */
314   width: 100%; margin: 0.3em auto;
315 }
316 form.search input
317 { /* Establish styling attributes for the keywords input field,
318    * which fills the search box from its left-hand side, most of
319    * the way across to the right...
320    */
321   display: block; outline: none; box-sizing: border-box;
322   border: 1px solid #003366; border-right: none; border-radius: 7px 0 0 7px;
323   height: 30px; width: calc( 100% - 60px ); padding: 0.6em;
324   font-size: 0.8em; background-color: #f3f3ff;
325 }
326 form.search button
327 { /* ...with a search button occupying the rightmost 60px.
328    */
329   float: right; height: 30px; width:  60px; font-size: 1em;
330   border: 1px solid #003366; border-left: none; border-radius: 0 7px 7px 0;
331   cursor: pointer; color: #336699; background-color: #ccccff;
332 }
333 form.search button:active, form.search button:hover
334 { /* Invert search button colours, when the mouse is placed
335    * over it, or while a search is in progress.
336    */
337   color: #ccccff; background-color: #6699cc;
338 }
339 form.search button:focus
340 { /* Do not outline the button, even when it has the focus.
341    */
342   outline:none;
343 }
344
345 /* $RCSfile$: end of file */