Fixed Footer Styling to stick it to the bottom (#14)

developersIndia · Feb 7, 2023 · a9bc191 · a9bc191
1 parent 788afaf
commit a9bc191
Showing 1 changed file with 32 additions and 12 deletions.
diff --git a/templates/base.html b/templates/base.html
@@ -9,6 +9,27 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
   <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/developersIndia/assets/main/favicons/favicon.ico">
   <style>
+    *{
+      margin:0;
+    }
+    html{
+      overflow-y: auto;
+
+    }
+    body{
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+    main{
+      flex-grow: 1;
+      padding-bottom: 10px;
+    }
+
+    footer{
+      margin-top: 5rem;
+      height: 2rem;   
+    }
     a {
       color: #E4376D;
     }
@@ -19,13 +40,11 @@
     .grid-container.grid-repeat-5 {
       grid-template-columns: repeat(5, 1fr);
     }
-
   </style>
   <script src="https://unpkg.com/htmx.org@1.8.4"></script>
 </head>
 
 <body>
-
   <nav class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <!-- <a class="navbar-item" href="https://bulma.io">
@@ -69,16 +88,17 @@
       </div>
     </div>
   </nav>
-
-  <div class="content is-vcentered has-text-centered">
-    <h1 class="title is-2 is-center">saadhan - resource hub by <a
-        href="https://reddit.com/r/developersIndia">r/developersIndia</a></h1>
-  </div>
-
-  <div class="container">
-    {% block content %}
-    {% endblock content %}
-  </div>
+  <main>  
+      <div class="content is-vcentered has-text-centered">
+        <h1 class="title is-2 is-center">saadhan - resource hub by <a
+            href="https://reddit.com/r/developersIndia">r/developersIndia</a></h1>
+      </div>
+
+      <div class="container">
+        {% block content %}
+        {% endblock content %}
+      </div>
+  </main>
   <footer class="footer">
     <div class="content has-text-centered">
       <p>