• R/O
  • HTTP
  • SSH
  • HTTPS

website: 提交

HTML source code, style-sheets, scripts, and images for deployment on mingw.osdn.io


Commit MetaInfo

修訂bed8fd450e68f095168147285998a34743ba819a (tree)
時間2021-11-20 07:58:22
作者Keith Marshall <keith@user...>
CommiterKeith Marshall

Log Message

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 <code> style, for use in
illustration of screen display output; lighten text colour.
(kbd) [pre.vt]: Darken text colour, for keyboard input.
(code) [within <a> tag scope]: Inherit text colour.
(code) [within body text]: Lighten text colour.

Change Summary

差異

--- a/site.css
+++ b/site.css
@@ -62,12 +62,18 @@ h3
6262 */
6363 margin-bottom: -0.2em;
6464 }
65+h4
66+{ margin: 0.8em 0 -0.2em;
67+}
6568 hr
6669 { /* Match the colour of horizontal page dividing rules to that
6770 * of the text.
6871 */
6972 color: #000066;
7073 }
74+.nowrap
75+{ white-space: nowrap;
76+}
7177 a
7278 { /* Links are distiguisable by use of a contrasting text colour;
7379 * there is no need to underline them too!
@@ -80,6 +86,13 @@ a:visited
8086 */
8187 color: #aa00cc;
8288 }
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+}
8396 p
8497 { /* Use the browser's default paragraph styling, but tighten the
8598 * inter-paragraph spacing...
@@ -112,6 +125,18 @@ ul li, ol li
112125 ul li:first-child, ol li:first-child
113126 { margin-top: 0;
114127 }
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+}
115140 dl dt
116141 { /* Similarly, set explicit layout rules for definition lists.
117142 */
@@ -129,6 +154,23 @@ dl.no-indent dd
129154 */
130155 margin-left: 0;
131156 }
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+}
132174
133175
134176 /* Fixed Position Page Header Block Formatting
@@ -226,7 +268,7 @@ dl.toc dt
226268 * space for the fixed page header; (it may subsequently scroll,
227269 * to be occluded behind the header).
228270 */
229- position: absolute; top: 70px;
271+ position: absolute; top: 70px; min-width: 94%;
230272 text-align: justify; padding: 0 3% 1.5em;
231273 }
232274 .masthead
@@ -250,14 +292,6 @@ dl.toc dt
250292 */
251293 margin: 0; padding-top: 1px; font-weight: normal;
252294 }
253-dl.masthead
254-{ /* On page overlays, we use a definition list to specify the
255- * page title, and subtitle, which are to be propagated to the
256- * masthead section within the page content; the content of the
257- * definition list, itself, should not be directly visible.
258- */
259- display: none;
260-}
261295 .masthead+p
262296 { /* The masthead section is separated from the remaining page
263297 * content, by a horizontal rule; to keep white space balanced,
@@ -267,6 +301,14 @@ dl.masthead
267301 */
268302 margin-top: 1.3em;
269303 }
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+}
270312
271313
272314 /* Subsection Reference Positioning Relative to Page Header
@@ -358,6 +400,87 @@ div.faq div.answer + button
358400 }
359401
360402
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+
361484 /* Styling for In-Line Web-Search Form Fields
362485 * ==========================================
363486 * Derived from Juri Wornowitski's DuckDuckGo search widget implementation,
Show on old repository browser