Make footer stick to bottom of window

Using this method: https://css-tricks.com/a-clever-sticky-footer-technique/ Also: * Add v-cloak to avoid flashing unrendered template * Move scripts to top with defer attr to improve performance
Eldanjiu · Nov 18, 2021 · d5daba5 · d5daba5
1 parent 7e21734
commit d5daba5
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,19 @@
   <title>TOTP Generator</title>
   <link rel="stylesheet" href="css/bulma-0.9.0.min.css">
   <style>
+    [v-cloak] {
+      display: none;
+    }
+
+    html, body {
+      height: 100%;
+    }
+
+    body > footer {
+      position: sticky;
+      top: 100vh;
+    }
+
     @media screen and (min-width: 1068px) {
       .container {
         max-width: 600px;
@@ -16,7 +29,12 @@
 </head>
 <body>
 
-  <section id="app" class="section">
+  <script defer src="js/vue-2.4.0.min.js"></script>
+  <script defer src="js/otpauth-3.1.3.min.js"></script>
+  <script defer src="js/clipboard-2.0.6.min.js"></script>
+  <script defer src="js/app.js?v=1.0"></script>
+
+  <section id="app" class="section" v-cloak>
 
     <div class="container">
 
@@ -77,10 +95,5 @@ <h1 class="title">TOTP Token Generator</h1>
     </div>
   </footer>
 
-  <script src="js/vue-2.4.0.min.js"></script>
-  <script src="js/otpauth-3.1.3.min.js"></script>
-  <script src="js/clipboard-2.0.6.min.js"></script>
-  <script src="js/app.js?v=1.0"></script>
-
 </body>
 </html>