update footer styling

AmrSaber · May 3, 2024 · 42ab77a · 42ab77a
1 parent 2c84dc5
commit 42ab77a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -41,6 +41,8 @@
   <slot />
 </main>
 
+<div id="spacer" />
+
 <footer>
   <a href="https://github.com/AmrSaber/prayer-times" target="_blank">
     <img class="github-mark light-only" alt="github logo" src="/github-mark.svg" />
@@ -53,16 +55,16 @@
 </footer>
 
 <style>
-  footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  #spacer {
+    flex-grow: 1;
+    min-height: 2rem;
+  }
 
+  footer {
     padding-block: 0.5rem;
     padding-inline: 1rem;
 
-    width: 100vw;
+    width: 100%;
     display: flex;
     justify-content: end;
     align-items: center;

diff --git a/src/routes/global.css b/src/routes/global.css
@@ -34,6 +34,13 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   color: #333;
   background-color: #fdfdfd;
+
+  min-height: 100vh;
+  min-width: 100vw;
+  margin: 0;
+
+  display: flex;
+  flex-direction: column;
 }
 
 main {