🐛 Fix scroll to top link alignment

Fixes #172
jpanther · Apr 11, 2022 · 9722330 · 9722330
1 parent ff5808b
commit 9722330
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Hungarian translation ([#170](https://github.com/jpanther/congo/pull/170))
 
+### Fixed
+
+- Scroll to top link overlaps footer menu on mobile devices ([#172](https://github.com/jpanther/congo/issues/172))
+
 ## [2.1.2] - 2022-04-08
 
 ### Added

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -1467,6 +1467,10 @@ body a, body button {
   top: 110vh;
 }
 
+.bottom-\[-8\.25rem\] {
+  bottom: -8.25rem;
+}
+
 .bottom-\[-5\.5rem\] {
   bottom: -5.5rem;
 }
@@ -2608,6 +2612,10 @@ 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
@@ -30,7 +30,11 @@
       {{- 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-[-5.5rem]"
+          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"