Fix sticky footer issue (#10681)

* Fix sticky footer issue * Fix merge conflict * Aesthetic changes to 404 page
2019-02-27 20:07:42 -08:00
parent f0d8c8a79c
commit 0650b70742
7 changed files with 54 additions and 10 deletions
@@ -1,5 +1,28 @@
 {{ define "main" }}
-<section>
-<p>Sorry, this page was not found. :(</p>
-</section>
+<div class="container-404">
+    <h4>
+        Perhaps you were looking for:
+    </h4>
+
+    <br />
+    <br />
+
+    <ul>
+        <li>
+            <a href="/docs">
+                The Kubernetes documentation
+            </a>
+        </li>
+        <li>
+            <a href="/blog">
+                The Kubernetes blog
+            </a>
+        </li>
+        <li>
+            <a href="/community">
+                The Kubernetes community
+            </a>
+        </li>
+    </ul>
+</div>
 {{ end }}
@@ -3,7 +3,7 @@
 	<head>
 		{{ partial "head.html" . }}
 	</head>
-	<body>
+	<body class="page">
 		{{ partial "header.html" . }}
 		{{ block "hero" . }}
 		<!--  HERO  -->
@@ -18,7 +18,11 @@
 		</section>
 		{{ block "post-hero" . }}{{ end }}
 		{{ end }}
-		{{ block "main" . }}{{ end }}
+    
+    <article class="page-content">
+      {{ block "main" . }}{{ end }}
+    </article>
+
 		{{ partialCached "footer.html" . }}
 		{{ partialCached "footer-scripts.html" . }}
 	</body>
@@ -1846,6 +1846,23 @@ $feature-box-div-margin-bottom: 40px
  color: #0000CC
  margin-right: 8px

+// This Sass ensures a sticky footer at the bottom
+.page
+  display: flex
+  flex-direction: column
+  min-height: 100vh
+
+  .page-content
+    flex: 1
+
+// 404 page
+.container-404
+  text-align: center
+  margin: 3.5rem 0
+
+  ul li a
+    font-size: 1.5rem
+
 // GitHub info/edit buttons
 #pre-footer
  margin-top: 2rem