Fix footer

src/layouts/Default.vue

@@ -1,8 +1,16 @@
 <template>
-  <div id="app" dark class="min-h-screen flex flex-col font-sans">
+  <div id="app" dark class="flex flex-col font-sans">
-    <HeaderPartial v-if="hideHeader!=true" @setTheme="setTheme" :theme="this.theme"></HeaderPartial>
+    <HeaderPartial
-    <slot/>
+      v-if="hideHeader != true"
-    <NavbarPartial :disableScroll="disableScroll" @setTheme="setTheme" :theme="this.theme"></NavbarPartial>
+      @setTheme="setTheme"
+      :theme="this.theme"
+    ></HeaderPartial>
+    <NavbarPartial
+      :disableScroll="disableScroll"
+      @setTheme="setTheme"
+      :theme="this.theme"
+    ></NavbarPartial>
+    <slot />
     <FooterPartial></FooterPartial>
   </div>
 </template>
@@ -16,41 +24,41 @@ query {
 </static-query>
 
 <script>
-import HeaderPartial from '~/layouts/partials/HeaderWithNavbar.vue'
+import HeaderPartial from "~/layouts/partials/HeaderWithNavbar.vue";
-import NavbarPartial from '~/layouts/partials/Navbar.vue'
+import NavbarPartial from "~/layouts/partials/Navbar.vue";
-import FooterPartial from '~/layouts/partials/Footer.vue'
+import FooterPartial from "~/layouts/partials/Footer.vue";
 
 export default {
   props: {
     hideHeader: {
       type: Boolean,
-      default: true
+      default: true,
     },
     disableScroll: {
       type: Boolean,
-      default: true
+      default: true,
-    }
+    },
   },
-  data: function() {
+  data: function () {
     return {
-      theme: 'light'
+      theme: "light",
     };
   },
   methods: {
     setTheme(mode) {
-        this.theme = mode
+      this.theme = mode;
-    }
+    },
   },
   components: {
     HeaderPartial,
     NavbarPartial,
-    FooterPartial
+    FooterPartial,
   },
 
   metaInfo: {
     bodyAttrs: {
-      class: "m-0 pt-12"
+      class: "m-0 pt-12",
-    }
+    },
-  }
+  },
-}
+};
 </script>

src/layouts/partials/Navbar.vue

@@ -200,7 +200,7 @@ export default {
       headerHeight: 0,
       isOpen: false,
       search: "",
-      open: false
+      open: false,
     };
   },
 
@@ -248,4 +248,8 @@ input:focus,
 button:focus {
   outline: 0;
 }
+
+.inset-0 {
+  z-index: 999;
+}
 </style>

src/pages/Index.vue

@@ -1,16 +1,16 @@
 <template>
   <Layout :hideHeader="true" :disableScroll="true">
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
+    <div class="container sm:pxi-0 mx-auto overflow-hidden">
-      <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" />
+      <!-- <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" /> -->
-      <div class="flex flex-col">
+      <div class="flex flex-col" :style="{ height: contentHeight + 'px' }">
-        <img class="py-20" src="/img/new_home.png" alt="" />
+        <img src="/img/new_home.png" alt="" />
-        <div class="center py-10">
+        <!-- <div class="center py-10"> -->
-          <!-- <h2 class="text-center">CO-CREATING BETTER FUTURES TOGETHER</h2> -->
+        <!-- <h2 class="text-center">CO-CREATING BETTER FUTURES TOGETHER</h2> -->
-          <!-- <p class="text-center py-1">The ThreeFold Foundation is not ThreeFold — rather, it is sparking a movement to bring the world <br> a truly peer-to-peer internet. We acknowledge and support the many people and organizations around the world <br>  who bring crucial support to the growth and adoption of the ThreeFold Grid.</p> -->
+        <!-- <p class="text-center py-1">The ThreeFold Foundation is not ThreeFold — rather, it is sparking a movement to bring the world <br> a truly peer-to-peer internet. We acknowledge and support the many people and organizations around the world <br>  who bring crucial support to the growth and adoption of the ThreeFold Grid.</p> -->
-        </div>
+        <!-- </div> -->
       </div>
 
-      <vue-markdown> </vue-markdown>
+      <!-- <vue-markdown> </vue-markdown> -->
     </div>
   </Layout>
 </template>
@@ -22,17 +22,16 @@ export default {
   metaInfo: {
     title: "Home",
   },
-
+  computed: {
+    contentHeight() {
+      return window.innerHeight - 128;
+    },
+  },
   components: {
     VueMarkdown,
   },
 };
 </script>
-<style scoped>
-/* h2 {
-  padding-bottom: 8rem;
-} */
-</style> >
 
 
 

src/pages/News.vue

@@ -1,7 +1,10 @@
 <template>
   <Layout>
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
+    <div
-      <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4 h-screen">
+      class="container sm:pxi-0 mx-auto overflow-hidden"
+      :style="{ height: contentHeight + 'px' }"
+    >
+      <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
         <PostListItem
           v-for="edge in $page.entries.edges"
           :key="edge.node.id"
@@ -9,15 +12,15 @@
         />
       </div>
     </div>
-     <div class="pagination flex justify-center mb-8">
+    <div class="pagination flex justify-center mb-8">
-        <Pagination
+      <Pagination
-          :baseUrl="baseurl"
+        :baseUrl="baseurl"
-          :currentPage="$page.entries.pageInfo.currentPage"
+        :currentPage="$page.entries.pageInfo.currentPage"
-          :totalPages="$page.entries.pageInfo.totalPages"
+        :totalPages="$page.entries.pageInfo.totalPages"
-          :maxVisibleButtons="5"
+        :maxVisibleButtons="5"
-          v-if="$page.entries.pageInfo.totalPages > 1"
+        v-if="$page.entries.pageInfo.totalPages > 1"
-        />
+      />
-      </div>
+    </div>
   </Layout>
 </template>
 
@@ -62,12 +65,15 @@ export default {
   },
   components: {
     PostListItem,
-    Pagination
+    Pagination,
   },
   computed: {
-    baseurl: function() {
+    baseurl: function () {
-     return ""
+      return "";
-    }
+    },
+    contentHeight() {
+      return window.innerHeight - 160;
+    },
   },
 };
 </script>

src/templates/Search.vue

@@ -1,6 +1,9 @@
 <template>
   <Layout>
-    <div class="container sm:pxi-0 mx-auto">
+    <div
+      class="container sm:pxi-0 mx-auto"
+      :style="{ height: contentHeight + 'px' }"
+    >
       <img
         v-if="loading"
         class="m-auto"
@@ -18,8 +21,8 @@
         />
       </div>
       <div v-else class="flex flex-col with-large my-auto text-center">
-        <h1 class="py-1">No results</h1>
+        <h1>404</h1>
-        <p class="pb-5">OOPS! Something went wrong here</p>
+        <p>OOPS! Something went wrong here</p>
       </div>
     </div>
   </Layout>
@@ -131,6 +134,9 @@ export default {
       }
       return result;
     },
+    contentHeight() {
+      return window.innerHeight - 128;
+    },
   },
   mounted() {
     this.q = new URL(location.href).searchParams.get("query");
@@ -159,6 +165,6 @@ export default {
 
 <style scoped>
 h1 {
-  font-size: 3rem;
+  font-size: 13rem;
 }
 </style>