restyled 404 page to fit with design

nateperry · nateperry · commit 0afbd88f11c5 · 2014-09-12T14:06:02.000-04:00
diff --git a/404.html b/404.html
@@ -1,14 +1,12 @@
 ---
-layout: default 
+layout: default
 permalink: /404.html
 title: "404"
-image: /assets/images/luke.png
 ---
 
-<div id="post-info">
-	<p style="color: #fff; opacity: .75; font-size: 420px; font-weight: bold">404</p>
-	<h2 style=" margin: 0 0 0 0;">This page has just discovered that Darth Vader is his father and ran away to not be found. Go back to the homepage.</h2>
-</div>
-<div id="nav-icon" style="bottom: 60px;">
-	<a href="{{ site.url }}"><span class="genericon genericon-home"></span></a>
-</div>
+<div class="foot-pusher">
+  <div id="error-page" class="container center">
+    <h1>Looks like this tiger den is empty.</h1>
+    <p>Try going back to the <a href="{{ site.url }}">cave entrance</a> to find what you are looking for.</p>
+  </div>
+</div>
diff --git a/_includes/foot.html b/_includes/foot.html
@@ -2,5 +2,4 @@
   <div class="inner container">
     <p>&copy;CodeRIT 2014 All Rights Reserved</p>
   </div>
-</footer>
-<div class="divider"></div>
+</footer>
diff --git a/_sass/main.sass b/_sass/main.sass
@@ -12,12 +12,19 @@ $orange-dark	: #CE5F15
 $blue					: #384859
 $offwhite			: #FCF3E8
 
-//fonts
+// fonts
 $font-body-family							:	'Open Sans', sans-serif
 $font-headlines-family				: 'Montserrat', sans-serif
 $font-headlines-weight-bold 	: 700
 $font-headlines-weight-reg 		:	400
 
+// constants
+$footer-height: 90px
+
+body, html
+	height: 100%
+	min-height: 250px
+
 body
 	background: $white
 	color: $grey-dark
@@ -117,6 +124,12 @@ a
 .center
 	text-align: center
 
+.foot-pusher
+	min-height: 100%
+	height: auto !important
+	height: 100%
+	margin-bottom: -$footer-height
+
 // SECTIONS
 #mission
 	color: $grey-dark
@@ -145,6 +158,16 @@ a
 			vertical-align: top
 			font-size: 1.45em
 
+#footer
+	height: $footer-height
+	border-bottom: 25px solid darken($blue, 10%)
+
+#error-page
+	h1
+		margin-top: 0
+		padding-top: 25px
+
+
 @media screen and (max-width: 798px)
 	body
 		font-size: 14px
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,4 +1,8 @@
 /* Main.sass */
+body, html {
+  height: 100%;
+  min-height: 250px; }
+
 body {
   background: #ecf0f1;
   color: #444444;
@@ -97,6 +101,12 @@ a {
 .center {
   text-align: center; }
 
+.foot-pusher {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  margin-bottom: -90px; }
+
 #mission {
   color: #444444;
   padding: 25px 0; }
@@ -124,6 +134,14 @@ a {
       vertical-align: top;
       font-size: 1.45em; }
 
+#footer {
+  height: 90px;
+  border-bottom: 25px solid #242f3a; }
+
+#error-page h1 {
+  margin-top: 0;
+  padding-top: 25px; }
+
 @media screen and (max-width: 798px) {
   body {
     font-size: 14px; }
