Fix bug: Footer is not visible by default on any page

ag-computational-bio · Sep 7, 2023 · 6f36d11 · 6f36d11
1 parent 7ad0f26
commit 6f36d11
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from "vue-router";
-import Navbar from "./components/Navbar.vue";
+import { onMounted, ref } from "vue";
+import { RouterView } from "vue-router";
 import Footer from "./components/Footer.vue";
-import { ref } from "vue";
-import { onMounted } from "vue";
+import Navbar from "./components/Navbar.vue";
 
 const theme = ref(
   window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
@@ -20,16 +19,9 @@ onMounted(() => {
 <template>
   <Navbar />
 
-  <div id="content" class="">
+  <div id="content">
     <RouterView />
   </div>
 
-  <Footer class="" />
+  <Footer />
 </template>
-
-<style>
-#content {
-  margin-top: calc(80px + 1rem);
-  min-height: calc(100vh - 200px - 80px - 1rem);
-}
-</style>
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,3 +1,20 @@
+body {
+  --header-height: 80px;
+  --footer-height: 80px;
+}
+#content {
+  margin-top: calc(var(--header-height) + 1rem);
+  min-height: calc(100vh - var(--footer-height) - var(--header-height) - 2rem);
+}
+footer {
+  margin-bottom: 1rem;
+}
+.logo {
+  height: var(--footer-height);
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
 .statstable > tr > th,
 .statstable > tbody > tr > th {
   font-weight: bold;

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -6,10 +6,10 @@
           href="https://www.uni-giessen.de/de/fbz/fb08/Inst/bioinformatik/"
           target="_blank"
         >
-          <img src="@/assets/images/CB.AG_Logo.svg" height="200" width="350" />
+          <img src="@/assets/images/CB.AG_Logo.svg" class="logo" />
         </a>
-        <a href="">
-          <img src="@/assets/images/De.NBI_Logo.svg" width="350" height="160" />
+        <a href="https://www.denbi.de/">
+          <img src="@/assets/images/De.NBI_Logo.svg" class="logo" />
         </a>
       </div>
     </footer>