Merge pull request #368 from creativedotdesign/sticky-footer-404

feat: Sticky Footer, 404 centered

404.php

@@ -1,5 +1,19 @@
 <?php get_header(); ?>
 
-<?php _e('Sorry, but the page you were trying to view does not exist.', 'tofino'); ?>
+<main class="container flex flex-col items-center justify-center">
+  <div class="w-full text-center">
+    <span class="text-7xl">
+      404
+    </span>
+
+    <p>
+      <?php _e('Sorry, but the page you were trying to view does not exist.', 'tofino'); ?>
+    </p>
+
+    <a href="<?php echo home_url(); ?>">
+      Back to home
+    </a>
+  </div>
+</main>
 
 <?php get_footer(); ?>

footer.php

@@ -1,8 +1,9 @@
-<?php
-if (has_nav_menu('footer_navigation')) : ?>
-  <!-- Nav Menu -->
-  <div class="w-full">
-    <div class="container"><?php
+<footer>
+  <div class="container">
+    <div class="w-full text-center"><?php
+
+      if (has_nav_menu('footer_navigation')) : ?>
+        <!-- Nav Menu --><?php
         wp_nav_menu([
           'menu'            => 'nav_menu',
           'theme_location'  => 'footer_navigation',
@@ -13,18 +14,14 @@
           'menu_class'      => 'footer-nav',
           'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
         ]); ?>
-    </div>
-  </div>
-  <!-- Close Nav Menu --><?php
-endif; ?>
+        <!-- Close Nav Menu --><?php
+      endif;
+
+      $footer_text = get_field('footer_text', 'general-options');
+      if ($footer_text) :
+        echo do_shortcode($footer_text); // Shortcode wrapper function added to allow render of shortcodes added to theme theme options text field.
+      endif; ?>
 
-<footer>
-  <div class="container">
-    <div class="w-full text-center"><?php
-    $footer_text = get_field('footer_text', 'general-options');
-    if ($footer_text) :
-      echo do_shortcode($footer_text); // Shortcode wrapper function added to allow render of shortcodes added to theme theme options text field.
-    endif; ?>
     </div>
   </div>
 </footer>

src/css/base/structure.css

@@ -2,12 +2,16 @@ html {
   @apply h-full;
 }
 
+main {
+  @apply flex-auto;
+}
+
 footer {
   @apply bg-gray-100;
 }
 
 body {
-  @apply antialiased font-roboto;
+  @apply antialiased font-roboto flex flex-col min-h-full;
 
   &.no-fout {
     @apply invisible;