🐛 Fix scroll to top link alignment

Fixes #172

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

assets/css/compiled/main.css

@@ -1467,16 +1467,12 @@ body a, body button {
   top: 110vh;
 }
 
-.bottom-\[-8\.25rem\] {
+.bottom-0 {
-  bottom: -8.25rem;
+  bottom: 0px;
 }
 
-.bottom-\[-5\.5rem\] {
+.top-\[calc\(100vh-5\.5rem\)\] {
-  bottom: -5.5rem;
+  top: calc(100vh - 5.5rem);
-}
-
-.top-\[calc\(100vh-5rem\)\] {
-  top: calc(100vh - 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;
   }

layouts/_default/baseof.html

@@ -26,30 +26,28 @@
       >
     </div>
     {{- partial "header.html" . -}}
-    <main id="main-content" class="relative grow">
+    <div class="relative">
-      {{- block "main" . }}{{- end }}
+      <main id="main-content" class="grow">
-      {{ if and (.Site.Params.showScrollToTop | default true) (gt .WordCount 200) }}
+        {{- block "main" . }}{{- end }}
-        <div
+        {{ if and (.Site.Params.showScrollToTop | default true) (gt .WordCount 200) }}
-          class="absolute top-[110vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none {{ if .Site.Menus.footer -}}
+          <div
-            bottom-[-8.25rem] sm:bottom-[-8rem]
+            class="absolute top-[110vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-0"
-          {{- 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" }}"
           >
-            &uarr;
+            <a
-          </a>
+              href="#the-top"
-        </div>
+              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>
+      {{- partial "footer.html" . -}}
-    {{ if .Site.Params.enableSearch | default false }}
+    </div>
-      {{- partial "search.html" . -}}
-    {{ end }}
-    {{- partial "footer.html" . -}}
   </body>
 </html>

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 }}"