From 2364afc57ab7ca2ddafe75845885ef2330cc7f4b Mon Sep 17 00:00:00 2001
From: Keith Marshall <keith@users.osdn.me>
Date: Fri, 6 Nov 2020 10:12:24 +0000
Subject: [PATCH] Correctly handle internal page section references.

* site.js (load_content) ["#" in URL]: Scroll to internal reference.
* site.css (overlapped): New styling class; define it, such that any
element to which it is assigned will be positioned, with its topmost
content fully visible below the page header block, when an internal
page reference is scrolled into view.

* contact.html (general-enquiry, bug-report, feature-request)
* mailing.html (mingw-users, mingw-notify, mingw-msys, list-etiquette)
* about.html (cross-compile): Mark reference points as "overlapped".
---
 about.html   |  5 +++--
 contact.html |  6 +++---
 mailing.html |  8 ++++----
 site.css     | 24 ++++++++++++++++++++++++
 site.js      |  5 +++++
 5 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/about.html b/about.html
index 80c9ac3..4676c85 100644
--- a/about.html
+++ b/about.html
@@ -171,7 +171,8 @@ project mailing lists available
 subscription to these older lists is no longer permitted.
 </p>
 <hr />
-<h3 id="cross-compile">Using MinGW for Cross-Hosted Development</h3>
+<div class="overlapped" id="cross-compile">
+<h3>Using MinGW for Cross-Hosted Development</h3>
 <p>While <strong>MinGW</strong> provides tools
 primarily intended for use by developers working on the
 MS&#8209;Windows platform,
@@ -188,6 +189,6 @@ although we may be able to help out with advice related to the specifics
 of MS&#8209;Windows applications development,
 common to the use of our own native tool chains
 and to such cross&#8209;compilers.
-</p>
+</p></div><!-- cross-compile -->
 
 <!-- $RCSfile$: end of file -->
diff --git a/contact.html b/contact.html
index f2fe7c8..87cdc7b 100644
--- a/contact.html
+++ b/contact.html
@@ -78,7 +78,7 @@ in any way, affiliated with MinGW.org;
 MinGW.org <strong>does not</strong> support the products
 of these projects.</em>
 </p>
-<div id="general-enquiry">
+<div class="overlapped" id="general-enquiry">
 <h3>General Enquiries</h3>
 <p>If you encounter a problem using MinGW, or MSYS,
 and you cannot find a satisfactory answer on our web&#8209;site,
@@ -111,7 +111,7 @@ we <em>strongly</em> recommend that you acquaint yourself with
 compliance with this may improve your chances of receiving a response,
 whereas non&#8209;compliance may result in your post being ignored.
 </p></div><!-- general-enquiry -->
-<div id="bug-report">
+<div class="overlapped" id="bug-report">
 <h3>Reporting Bugs</h3>
 <p>After discussing an issue on the mailing&#8209;list,
 as described above, you may be asked to file a formal bug report.
@@ -185,7 +185,7 @@ and create a bad impression of the reporter).
 Finally, when you are satisfied, click the &#8220;Submit&#8221; button
 to complete the ticket submission process.
 </p></div><!-- bug-report -->
-<div id="feature-request">
+<div class="overlapped" id="feature-request">
 <h3>Feature Requests</h3>
 <p>When you wish to request the implementation of a new feature,
 (e.g.&nbsp;to support a currently unsupported MSVC or POSIX API function),
diff --git a/mailing.html b/mailing.html
index df6a8b1..c1655b9 100644
--- a/mailing.html
+++ b/mailing.html
@@ -74,7 +74,7 @@ today, only two remain operational, and both are
 <p>The currently operational
 MinGW.org mailing&#8209;lists are:&mdash;
 </p>
-<dl class="no-indent" id="mingw-users">
+<dl class="no-indent overlapped" id="mingw-users">
 <dt><a rel="noopener noreferrer" target="_blank"
  href="https://lists.osdn.me/mailman/listinfo/mingw-users"
 >MinGW&#8209;Users Mailing&#8209;List</a>
@@ -133,7 +133,7 @@ and the SourceForge.net (lower box) archives, respectively.
   <input type="hidden" name="mailing_list" value="mingw-users" />
 </form>
 </dd>
-</dl><dl class="no-indent" id="mingw-notify">
+</dl><dl class="no-indent overlapped" id="mingw-notify">
 <dt><a rel="noopener noreferrer" target="_blank"
  href="https://lists.osdn.me/mailman/listinfo/mingw-notify"
 >MinGW&#8209;Notify Mailing&#8209;List</a>
@@ -186,7 +186,7 @@ However, archives of historical postings remain
 and may be searched using their respective keyword&#8209;search boxes,
 below.
 </p>
-<dl class="no-indent" id="mingw-msys">
+<dl class="no-indent overlapped" id="mingw-msys">
 <dt><a rel="noopener noreferrer" target="_blank"
  href="https://sourceforge.net/p/mingw/mailman/mingw-msys"
 >MinGW&#8209;MSYS Mailing&#8209;List</a>
@@ -245,7 +245,7 @@ on the historical MinGW-CVS archive.
 </form>
 </dd>
 </dl>
-<div id="list-etiquette">
+<div class="overlapped" id="list-etiquette">
 <h3>Mailing&#8209;List Posting Etiquette</h3>
 <p>MinGW is an open source project.
 As such, it is heavily dependent on people who dedicate
diff --git a/site.css b/site.css
index 9db30cb..d8ae3d8 100644
--- a/site.css
+++ b/site.css
@@ -255,6 +255,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
  * ============================================================
  */
diff --git a/site.js b/site.js
index 1a7c368..b684e92 100644
--- a/site.js
+++ b/site.js
@@ -73,6 +73,11 @@ function load_content( container, src )
 	  update_page_content_header( "title" );
 	  update_page_content_header( "subtitle" );
 	  set_content( "e404-missing-page", document.URL );
+	  if( src.includes("#") )
+	  { src = src.substring( src.indexOf("#") + 1, src.length );
+	    element = document.getElementById( src );
+	    if( element ) element.scrollIntoView();
+	  }
 	  break;
 	case 404:
 	  load_content( container, "missing.html" );
-- 
2.11.0