Fix sticky footer issue (kubernetes#10681)

* Fix sticky footer issue * Fix merge conflict * Aesthetic changes to 404 page
yagonobre · Mar 14, 2019 · c39ce8d · c39ce8d
1 parent 14768b1
commit c39ce8d
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 10 deletions.
diff --git a/layouts/404.html b/layouts/404.html
@@ -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 }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -3,7 +3,7 @@
 	<head>
 		{{ partial "head.html" . }}
 	</head>
-	<body>
+	<body class="page">
 		{{ partial "header.html" . }}
 		{{ block "hero" . }}
 		<!--  HERO  -->
@@ -18,8 +18,12 @@ <h5>{{ .Params.abstract }}</h5>
 		</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>
-</html>
+</html>
diff --git a/sass/_base.sass b/sass/_base.sass
@@ -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

diff --git a/static/css/case-study-styles.css b/static/css/case-study-styles.css
diff --git a/static/css/case-study-styles.css.map b/static/css/case-study-styles.css.map
diff --git a/static/css/styles.css b/static/css/styles.css
diff --git a/static/css/styles.css.map b/static/css/styles.css.map