Add documentation catalogue and FAQ pages.

[mingw/website.git] / site.css

diff --git a/site.css b/site.css
index 9db30cb..e0a5bac 100644 (file)
--- 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 <keith@users.osdn.me>
- * 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,
@@ -107,7 +107,7 @@ p+ul, p+ol, p+dl
   margin-top: 0.3em; margin-bottom: 0;
 }
 ul li, ol li
-{ margin-top: 0.12em;
+{ margin-top: 0.12em; margin-right: 1.2em;
 }
 ul li:first-child, ol li:first-child
 { margin-top: 0;
@@ -204,6 +204,20 @@ dl.no-indent dd
 }
 
 
+/* 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
  * ===============================
  */
@@ -244,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
@@ -255,6 +269,30 @@ dl.masthead+p
 }
 
 
+/* 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
  * ============================================================
  */
@@ -276,6 +314,50 @@ dl.masthead+p
 }
 
 
+/* 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,