From 04a44fcd0716adf7ba9e0dbb97376fe57a8f13a3 Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Sun, 1 May 2022 10:19:32 +1000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20scroll=20to=20top=20link?=
 =?UTF-8?q?=20alignment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #172
---
 CHANGELOG.md                 |  4 ++++
 assets/css/compiled/main.css | 16 ++++---------
 layouts/_default/baseof.html | 44 +++++++++++++++++-------------------
 layouts/partials/footer.html |  4 +++-
 4 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 02fa5786..e9d06e3b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Upgrade to Tailwind v3.0.24 ([#176](https://github.com/jpanther/congo/pull/176))
 - Upgrade to Mermaid v9.0.1 ([#183](https://github.com/jpanther/congo/pull/183))
 
+### Fixed
+
+- Scroll to top link overlaps footer menu on mobile devices when there are several links ([#172](https://github.com/jpanther/congo/issues/172))
+
 ## [2.1.3] - 2022-04-12
 
 ### Added
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index e1e7b51f..98447330 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1467,16 +1467,12 @@ body a, body button {
   top: 110vh;
 }
 
-.bottom-\[-8\.25rem\] {
-  bottom: -8.25rem;
+.bottom-0 {
+  bottom: 0px;
 }
 
-.bottom-\[-5\.5rem\] {
-  bottom: -5.5rem;
-}
-
-.top-\[calc\(100vh-5rem\)\] {
-  top: calc(100vh - 5rem);
+.top-\[calc\(100vh-5\.5rem\)\] {
+  top: calc(100vh - 5.5rem);
 }
 
 .top-20 {
@@ -2612,10 +2608,6 @@ body a, body button {
 }
 
 @media (min-width: 640px) {
-  .sm\:bottom-\[-8rem\] {
-    bottom: -8rem;
-  }
-
   .sm\:mb-0 {
     margin-bottom: 0px;
   }
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6ff3c8e0..958ec7e2 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -26,30 +26,28 @@
       >
     </div>
     {{- partial "header.html" . -}}
-    <main id="main-content" class="relative grow">
-      {{- block "main" . }}{{- end }}
-      {{ if and (.Site.Params.showScrollToTop | default true) (gt .WordCount 200) }}
-        <div
-          class="absolute top-[110vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none {{ if .Site.Menus.footer -}}
-            bottom-[-8.25rem] sm:bottom-[-8rem]
-          {{- else -}}
-            bottom-[-5.5rem]
-          {{- end }}"
-        >
-          <a
-            href="#the-top"
-            class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5rem)] bg-neutral/50 dark:bg-neutral-800/50 backdrop-blur rounded-full text-xl flex items-center justify-center text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400"
-            aria-label="{{ i18n "nav.scroll_to_top_title" }}"
-            title="{{ i18n "nav.scroll_to_top_title" }}"
+    <div class="relative">
+      <main id="main-content" class="grow">
+        {{- block "main" . }}{{- end }}
+        {{ if and (.Site.Params.showScrollToTop | default true) (gt .WordCount 200) }}
+          <div
+            class="absolute top-[110vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-0"
           >
-            &uarr;
-          </a>
-        </div>
+            <a
+              href="#the-top"
+              class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5.5rem)] bg-neutral/50 dark:bg-neutral-800/50 backdrop-blur rounded-full text-xl flex items-center justify-center text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400"
+              aria-label="{{ i18n "nav.scroll_to_top_title" }}"
+              title="{{ i18n "nav.scroll_to_top_title" }}"
+            >
+              &uarr;
+            </a>
+          </div>
+        {{ end }}
+      </main>
+      {{ if .Site.Params.enableSearch | default false }}
+        {{- partial "search.html" . -}}
       {{ end }}
-    </main>
-    {{ if .Site.Params.enableSearch | default false }}
-      {{- partial "search.html" . -}}
-    {{ end }}
-    {{- partial "footer.html" . -}}
+      {{- partial "footer.html" . -}}
+    </div>
   </body>
 </html>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index e066be44..a9b45df9 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -4,7 +4,9 @@
     <nav class="pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400">
       <ul class="flex flex-col list-none sm:flex-row">
         {{ range .Site.Menus.footer }}
-          <li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
+          <li
+            class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
+          >
             <a
               class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
               href="{{ .URL }}"