From 59356debb136c3988270d7ea8a8177d97f2027e3 Mon Sep 17 00:00:00 2001
From: Egbadon Victor <thethinkerx100@gmail.com>
Date: Sat, 5 Oct 2024 01:34:16 +0100
Subject: [PATCH 1/2] implements a scroll-to-top element

---
 docs/index.html                     |  2 +-
 specimen/contexts/archive-page.html |  3 +++
 src/css/vendor/normalize.css        |  1 +
 src/css/vocabulary.css              | 31 +++++++++++++++++++++++++++++
 4 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/docs/index.html b/docs/index.html
index fc73658c..3c79c982 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -995,7 +995,7 @@ <h1>Name</h1>
      </div>
   
   </header>
-
+  
 </code>
 </pre>
 
diff --git a/specimen/contexts/archive-page.html b/specimen/contexts/archive-page.html
index 567ccf71..8ee29605 100644
--- a/specimen/contexts/archive-page.html
+++ b/specimen/contexts/archive-page.html
@@ -231,6 +231,9 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<a href="#" class="scroll-to-top" aria-label="Scroll to top"></a>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/src/css/vendor/normalize.css b/src/css/vendor/normalize.css
index 1a9fc1b8..ee80f1eb 100644
--- a/src/css/vendor/normalize.css
+++ b/src/css/vendor/normalize.css
@@ -11,6 +11,7 @@
  html {
     line-height: 1.15; /* 1 */
     -webkit-text-size-adjust: 100%; /* 2 */
+    scroll-behavior: smooth;
   }
 
   /* Sections
diff --git a/src/css/vocabulary.css b/src/css/vocabulary.css
index 678fe3b6..1d9e8c70 100644
--- a/src/css/vocabulary.css
+++ b/src/css/vocabulary.css
@@ -1821,6 +1821,34 @@ body > footer .license svg {
 
 /* program-page context */
 
+/* scroll to top element */
+
+.scroll-to-top{
+    position: sticky;
+    bottom: 20px;
+    left: 100%;
+    width: 2.5em;
+    height: 2.5em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: calc(100vh + 200px);
+    margin-bottom: 10px;
+
+    background-color: var(--vocabulary-brand-color-dark-tomato);
+    color: var(--vocabulary-brand-color-soft-gold);
+    border-radius: 50%;
+    text-decoration: none;
+}
+
+.scroll-to-top:hover {
+    background-color: var(--vocabulary-brand-color-tomato);
+}
+
+.scroll-to-top::before{
+    content:"↑";
+    font-size: 1.2rem;
+}
 
 /* responsive contexts */
 
@@ -1934,6 +1962,9 @@ body > footer .license svg {
         width: 20%;
     }
 
+    .scroll-to-top{
+        display: none;
+    }
 }
 
 @media (max-width: 680px) {

From f0af77dbaefc7afa61ffbb3edbde849165935ed7 Mon Sep 17 00:00:00 2001
From: Egbadon Victor <thethinkerx100@gmail.com>
Date: Tue, 15 Oct 2024 15:29:30 +0100
Subject: [PATCH 2/2] makes improvements to scroll-to-top element and applies
 in all specimens

---
 docs/index.html                         | 23 ++++++++++++
 specimen/contexts/archive-page.html     |  4 ++-
 specimen/contexts/blog-index.html       |  5 +++
 specimen/contexts/blog-post.html        |  5 +++
 specimen/contexts/default-page.html     |  5 +++
 specimen/contexts/home-index.html       |  5 +++
 specimen/contexts/license-page.html     |  5 +++
 specimen/contexts/person-page.html      |  5 +++
 specimen/contexts/program-index.html    |  5 +++
 specimen/contexts/program-page.html     |  5 +++
 specimen/contexts/search-index.html     |  5 +++
 specimen/contexts/team-index.html       |  5 +++
 specimen/contexts/walkthrough-page.html |  5 +++
 specimen/index-logo.html                |  5 +++
 specimen/product-logo.html              |  5 +++
 specimen/tests/grid-sidebar.html        |  5 +++
 specimen/tests/grid.html                |  5 +++
 specimen/tests/kitchensink.html         |  5 +++
 src/css/vendor/normalize.css            |  1 -
 src/css/vocabulary.css                  | 48 +++++++++++++++++--------
 20 files changed, 140 insertions(+), 16 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 075b86be..6f9c872e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -939,6 +939,29 @@ <h2>Title</h2>
 </pre>
 
 
+<h3 id="scroll-to-top">Scroll to Top - Block</h3><a class="permalink" href="#scroll-to-top">permalink</a>
+
+<h4>Expected Contexts</h3>
+<ul>
+<li>The 
+  <span class="distinct">Scroll to top</span> element appears just before the opening 
+  <span class="distinct">Footer</span> tag and immediately after the closing 
+  <span class="distinct">Main</span> tag, and appears only once per page, on all page levels.
+</li>
+
+</ul>
+
+<pre>
+<code class="lang-html">
+
+  <aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+  </aside>
+
+</code>
+</pre>
+
+
 <h3 id="page-header-region">Page Header - Region</h3><a class="permalink" href="#page-header-region">permalink</a>
 
 <h4>Expected Contexts</h3>
diff --git a/specimen/contexts/archive-page.html b/specimen/contexts/archive-page.html
index 82755b98..5bbdc7ec 100644
--- a/specimen/contexts/archive-page.html
+++ b/specimen/contexts/archive-page.html
@@ -232,7 +232,9 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 </main>
 
 <!-- Scroll-to-top element -->
-<a href="#" class="scroll-to-top" aria-label="Scroll to top"></a>
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
 
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
diff --git a/specimen/contexts/blog-index.html b/specimen/contexts/blog-index.html
index 9d0c256a..afe3c64c 100644
--- a/specimen/contexts/blog-index.html
+++ b/specimen/contexts/blog-index.html
@@ -516,6 +516,11 @@ <h2>Images Attribution</h2>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/contexts/blog-post.html b/specimen/contexts/blog-post.html
index e98eadd0..fd4ab2c2 100644
--- a/specimen/contexts/blog-post.html
+++ b/specimen/contexts/blog-post.html
@@ -272,6 +272,11 @@ <h3><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/contexts/default-page.html b/specimen/contexts/default-page.html
index 0b99b162..2116104a 100644
--- a/specimen/contexts/default-page.html
+++ b/specimen/contexts/default-page.html
@@ -204,6 +204,11 @@ <h3>Steps to launch</h3>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/contexts/home-index.html b/specimen/contexts/home-index.html
index 9816f8dd..a2b931cf 100644
--- a/specimen/contexts/home-index.html
+++ b/specimen/contexts/home-index.html
@@ -378,6 +378,11 @@ <h2>Images Attribution</h2>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/contexts/license-page.html b/specimen/contexts/license-page.html
index 1a7bb456..44951235 100644
--- a/specimen/contexts/license-page.html
+++ b/specimen/contexts/license-page.html
@@ -107,6 +107,11 @@ <h1>License</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/contexts/person-page.html b/specimen/contexts/person-page.html
index 9113b4c1..7c7e4846 100644
--- a/specimen/contexts/person-page.html
+++ b/specimen/contexts/person-page.html
@@ -201,6 +201,11 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/contexts/program-index.html b/specimen/contexts/program-index.html
index fad04815..505496e2 100644
--- a/specimen/contexts/program-index.html
+++ b/specimen/contexts/program-index.html
@@ -206,6 +206,11 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/contexts/program-page.html b/specimen/contexts/program-page.html
index 8dc66141..c60dc981 100644
--- a/specimen/contexts/program-page.html
+++ b/specimen/contexts/program-page.html
@@ -185,6 +185,11 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/contexts/search-index.html b/specimen/contexts/search-index.html
index 640a4ed1..4ac5201b 100644
--- a/specimen/contexts/search-index.html
+++ b/specimen/contexts/search-index.html
@@ -224,6 +224,11 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/contexts/team-index.html b/specimen/contexts/team-index.html
index 6b82975e..fc94a260 100644
--- a/specimen/contexts/team-index.html
+++ b/specimen/contexts/team-index.html
@@ -159,6 +159,11 @@ <h2>Be a part of our team</h2>
     <a href="#">Check Open Positions</a>
 </article> -->
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/contexts/walkthrough-page.html b/specimen/contexts/walkthrough-page.html
index 3957ccd7..0ae2f827 100644
--- a/specimen/contexts/walkthrough-page.html
+++ b/specimen/contexts/walkthrough-page.html
@@ -115,6 +115,11 @@ <h1>Walkthrough</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/index-logo.html b/specimen/index-logo.html
index a9531d92..75343318 100644
--- a/specimen/index-logo.html
+++ b/specimen/index-logo.html
@@ -97,6 +97,11 @@ <h1>Index Logo Specimen</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/product-logo.html b/specimen/product-logo.html
index f0c452d2..9d658698 100644
--- a/specimen/product-logo.html
+++ b/specimen/product-logo.html
@@ -92,6 +92,11 @@ <h1>Product Logo Specimen</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/tests/grid-sidebar.html b/specimen/tests/grid-sidebar.html
index 492a86c9..940ec808 100644
--- a/specimen/tests/grid-sidebar.html
+++ b/specimen/tests/grid-sidebar.html
@@ -133,6 +133,11 @@ <h1>Grid Testing</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/tests/grid.html b/specimen/tests/grid.html
index 9d697031..c44b60d0 100644
--- a/specimen/tests/grid.html
+++ b/specimen/tests/grid.html
@@ -133,6 +133,11 @@ <h1>Grid Testing</h1>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/specimen/tests/kitchensink.html b/specimen/tests/kitchensink.html
index fa4d2127..ba1347ff 100644
--- a/specimen/tests/kitchensink.html
+++ b/specimen/tests/kitchensink.html
@@ -509,6 +509,11 @@ <h2>Images Attribution</h2>
 
 </main>
 
+<!-- Scroll-to-top element -->
+<aside class="scroll-to-top-wrapper">
+    <a href="#" class="scroll-to-top" aria-label="Scroll to top" tabindex="0"></a>
+</aside>
+
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
diff --git a/src/css/vendor/normalize.css b/src/css/vendor/normalize.css
index ee80f1eb..1a9fc1b8 100644
--- a/src/css/vendor/normalize.css
+++ b/src/css/vendor/normalize.css
@@ -11,7 +11,6 @@
  html {
     line-height: 1.15; /* 1 */
     -webkit-text-size-adjust: 100%; /* 2 */
-    scroll-behavior: smooth;
   }
 
   /* Sections
diff --git a/src/css/vocabulary.css b/src/css/vocabulary.css
index ca799cb9..01bad203 100644
--- a/src/css/vocabulary.css
+++ b/src/css/vocabulary.css
@@ -46,6 +46,7 @@ body {
     display: grid;
     grid-template-columns: 5% 3% 6% 6% 15% 30% 15% 6% 6% 3% 5%;
     overflow-x: hidden;
+    position: relative;
 
     font-weight: 400;
     -moz-osx-font-smoothing: grayscale;
@@ -1806,31 +1807,50 @@ body > footer .license svg {
 
 /* scroll to top element */
 
-.scroll-to-top{
+.scroll-to-top-wrapper {
+    position: absolute;
+    left: 0;
+    bottom: 470px;
+    display: grid;
+    grid-template-columns: inherit;
+    width: 100%;
+    height: calc(100% - 220vh); /* to account for the top offset */
+    pointer-events: none;
+    backface-visibility: hidden;
+    overflow: clip;
+}
+
+.scroll-to-top {
     position: sticky;
-    bottom: 20px;
-    left: 100%;
+    top: 88vh;
+    grid-column: 10 / span 1;
     width: 2.5em;
     height: 2.5em;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: calc(100vh + 200px);
+    pointer-events: all;
     margin-bottom: 10px;
 
-    background-color: var(--vocabulary-brand-color-dark-tomato);
-    color: var(--vocabulary-brand-color-soft-gold);
     border-radius: 50%;
-    text-decoration: none;
+    text-decoration: none; 
+    background-color: var(--vocabulary-neutral-color-lighter-gray);
+
+}
+
+.scroll-to-top:before {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    content: var(--fa-angle-up);
 }
 
 .scroll-to-top:hover {
     background-color: var(--vocabulary-brand-color-tomato);
 }
 
-.scroll-to-top::before{
-    content:"↑";
-    font-size: 1.2rem;
+.scroll-to-top:focus {
+    outline: 2px solid var(--vocabulary-brand-color-dark-tomato)
 }
 
 /* responsive contexts */
@@ -1867,6 +1887,10 @@ body > footer .license svg {
         display: flex;
         flex-wrap: wrap;
     }
+
+    .scroll-to-top{
+        display: none;
+    }
 }
 
 @media (max-width: 705px) {
@@ -1944,10 +1968,6 @@ body > footer .license svg {
     .search-index .search-form form button {
         width: 20%;
     }
-
-    .scroll-to-top{
-        display: none;
-    }
 }
 
 @media (max-width: 680px) {