From 1f67ee98102e073da2e15bb4e2b4730be00cb4d5 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Thu, 14 Mar 2024 16:13:58 +0100
Subject: [PATCH] fix: Footer position

---
 src/assets/base.css           |  2 ++
 src/components/ScoresList.vue | 13 ++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index 9aeabce..8f831b4 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -9,6 +9,8 @@
   --header-size-small: 64px;
   --header-size-big: 128px;
   --header-size: var(--header-size-small);
+
+  --footer-size: 64px;
 }
 
 /* semantic color variables for this project */
diff --git a/src/components/ScoresList.vue b/src/components/ScoresList.vue
index bb937dc..3ba396a 100644
--- a/src/components/ScoresList.vue
+++ b/src/components/ScoresList.vue
@@ -149,7 +149,8 @@ function getTranslation(translations, key) {
         </template>
       </ul>
     </div>
-    <footer>
+  </main>
+  <footer>
       <p v-if="store.language == 'fr-FR'">
         Scores & Appli par <a href="https://ceiba-conseil.com">Ceiba</a>
       </p>
@@ -157,7 +158,6 @@ function getTranslation(translations, key) {
         Scores & App by <a href="https://ceiba-conseil.com">Ceiba</a>
       </p>
     </footer>
-  </main>
 </template>
 
 <style lang="sass" scoped>
@@ -166,6 +166,10 @@ footer
   text-align: center
   padding: 1rem
   color: var(--color-header-text)
+  height: var(--footer-size)
+  display: flex
+  justify-content: space-around
+  align-items: center
   a
     color: var(--color-header-text)
 header
@@ -200,11 +204,14 @@ header
 
 main
   width: 100%
-  height: calc(100% - var(--header-size))
+  min-height: calc(100% - var(--header-size) - var(--footer-size))
   background-color: var(--color-background)
   overflow-x: hidden
   overflow-y: auto
   text-align: center
+  display: flex
+  flex-direction: column
+  justify-content: space-evenly
 
   .homeImage
     height: 30vh