fix: Footer position

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 */

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