feat(footer): fix position at the bottom (#82)

* feat(footer): fix position at the bottom * del the home page scss out of use
widefix · Sep 8, 2023 · 4b8385a · 4b8385a
1 parent 86584eb
commit 4b8385a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 49 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -39,10 +39,15 @@ $text-strong: hsl(270, 50%, 21%);
 }
 
 .is-primary {
-  background-color: rgb(102, 51, 153) !important ;
-  color: rgb(102, 51, 153);
+  background-color: hsl(270, 50%, 40%) !important ;
+  color: hsl(270, 50%, 40%);
 }
 
 .is-light {
   color: $text-light !important ;
 }
+
+html,
+body {
+  height: 100vh;
+}
diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -12,8 +12,8 @@
   </head>
 
   <body>
-    <nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
-      <div class="container">
+    <div class="container hero is-fullheight">
+      <nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
           <%= link_to root_path, class: "navbar-item" do %>
             <%= image_tag 'logo.svg', width: 112, height: 28 %>
@@ -49,18 +49,15 @@
             </div>
           </div>
         </div>
-      </div>
-    </nav>
+      </nav>
 
-    <section class="section">
-      <div class="container">
+      <section class="section is-fullheight">
         <%= yield %>
-      </div>
-    </section>
-    <footer class="footer">
-      <div class="container">
-        Copyright © 2021 WideFix. All rights reserved.
-      </div>
-    </footer>
+      </section>
+
+      <footer class="footer is-flex-align-items-flex-end mt-auto">
+        <%= "Copyright © #{Time.current.year} WideFix. All rights reserved." %>
+      </footer>
+    </div>
   </body>
 </html>