diff --git a/public/css/style.css b/public/css/style.css
index da13113..2a1ba2e 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,76 +1,81 @@
+/*$background: #f9f9f9ff;*/
+
+* {
+    box-sizing: border-box;
+}
+
 html, body {
 	/* background-color: rgb(248, 249, 236); */
 	background-color: #f9f9f9ff;
 	font-family: sans-serif;
-	margin: 0;
 	padding: 0;
+    min-height: 100%;
 }
 
-.wrapper {
-	max-width: 900px;
-	margin-left: 1em;
-	margin-right: 1em;
+html {
+    margin: 0;
+    height: 100%;
 }
 
-.header {
-	margin-top: 1em;
-	margin-left: 0.5em;
-	margin-right: 0.5em;
-	padding-bottom: .7em;
+body {
+    height: 100%;
+    margin: 0 auto;
+    display: grid;
+    grid-template:
+        "header" 7rem 
+        "content" 1fr
+        "footer" 50px;
+}
+
+header {
+    grid-area: header;
 	border-bottom: 2px solid black;
+    align-self: center;
 }
 
-.contents {
+header .logoContainer {
+        display: inline-block;
+        position: relative;
+    }
+
+header .logoContainer .logo {
+            height: 5rem;
+        }
+
+header .logoContainer .siteTag {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+
+            color: teal;
+            font-size: 1.3em;
+        }
+
+header .logoContainer .betaTag {
+            width: 1px; /* Out-of-box alignment hack */
+            position: absolute;
+            right: -.3em;
+            bottom: 0;
+            font-style: italic;
+
+            color: rgb(218, 13, 13);
+            font-size: 1.3em;
+        }
+
+main {
+    grid-area: content;
 	margin-bottom: 2em;
-	padding: .7em 0;
 }
 
-.footer {
-	position: fixed;
-	bottom: 0;
-	left: 0.5em;
-	right: 0.5em;
+main div.search input { width: 100%; }
 
-	box-sizing: border-box;
+footer {
+    grid-area: footer;
 	border-top: 1px solid black;
 	height: 2em;
-	padding: 0.2em;
 	background-color: #f9f9f9ff;
 }
 
-.footer .wrapper {
-		margin-left: calc(1em - 0.5em);
-	}
-
-.logoContainer {
-	display: inline-block;
-	position: relative;
-}
-
-.logoContainer .logo {
-		height: 5em;
-	}
-
-.logoContainer .siteTag {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-
-		color: teal;
-		font-size: 1.3em;
-	}
-
-.logoContainer .betaTag {
-		width: 1px; /* Out-of-box alignment hack */
-		position: absolute;
-		right: -.3em;
-		bottom: 0;
-		font-style: italic;
-
-		color: rgb(218, 13, 13);
-		font-size: 1.3em;
-	}
-
 .counter {
 	margin-bottom: .5em;
 	font-style: italic;
diff --git a/src/css/style.css b/src/css/style.css
index 6ef97ab..be08768 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,77 +1,84 @@
 $pagePadding: 0.5em;
+/*$background: #f9f9f9ff;*/
 $background: #f9f9f9ff;
 
+* {
+    box-sizing: border-box;
+}
+
 html, body {
 	/* background-color: rgb(248, 249, 236); */
 	background-color: $background;
 	font-family: sans-serif;
-	margin: 0;
 	padding: 0;
+    min-height: 100%;
 }
 
-.wrapper {
-	max-width: 900px;
-	margin-left: 1em;
-	margin-right: 1em;
+html {
+    margin: 0;
+    height: 100%;
 }
 
-.header {
-	margin-top: 1em;
-	margin-left: $pagePadding;
-	margin-right: $pagePadding;
-	padding-bottom: .7em;
+body {
+    height: 100%;
+    margin: 0 auto;
+    display: grid;
+    grid-template:
+        "header" 7rem 
+        "content" 1fr
+        "footer" 50px;
+}
+
+header {
+    grid-area: header;
 	border-bottom: 2px solid black;
+    align-self: center;
+
+    .logoContainer {
+        display: inline-block;
+        position: relative;
+
+        .logo {
+            height: 5rem;
+        }
+
+        .siteTag {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+
+            color: teal;
+            font-size: 1.3em;
+        }
+
+        .betaTag {
+            width: 1px; /* Out-of-box alignment hack */
+            position: absolute;
+            right: -.3em;
+            bottom: 0;
+            font-style: italic;
+
+            color: rgb(218, 13, 13);
+            font-size: 1.3em;
+        }
+    }
 }
 
-.contents {
+main {
+    grid-area: content;
 	margin-bottom: 2em;
-	padding: .7em 0;
-}
 
-.footer {
-	position: fixed;
-	bottom: 0;
-	left: $pagePadding;
-	right: $pagePadding;
 
-	box-sizing: border-box;
+    div.search {
+        input { width: 100%; }
+    }
+}
+
+footer {
+    grid-area: footer;
 	border-top: 1px solid black;
 	height: 2em;
-	padding: 0.2em;
 	background-color: $background;
-
-	.wrapper {
-		margin-left: calc(1em - $pagePadding);
-	}
-}
-
-.logoContainer {
-	display: inline-block;
-	position: relative;
-
-	.logo {
-		height: 5em;
-	}
-
-	.siteTag {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-
-		color: teal;
-		font-size: 1.3em;
-	}
-
-	.betaTag {
-		width: 1px; /* Out-of-box alignment hack */
-		position: absolute;
-		right: -.3em;
-		bottom: 0;
-		font-style: italic;
-
-		color: rgb(218, 13, 13);
-		font-size: 1.3em;
-	}
 }
 
 .counter {
diff --git a/src/views/_layout.jsx b/src/views/_layout.jsx
index ff6b8bf..5d63390 100644
--- a/src/views/_layout.jsx
+++ b/src/views/_layout.jsx
@@ -13,33 +13,29 @@ module.exports = function Layout({ children }) {
 				<link rel="stylesheet" href="/css/style.css"/>
 			</head>
 			<body>
-				<div className="header">
-					<div className="wrapper">
-						<a className="logoContainer" href="/">
-							<img src="/images/logo.svg" alt="seekseek logo" className="logo"/>
-							<span className="siteTag">datasheets</span>
-							<span className="betaTag">beta</span>
-						</a>
-					</div>
-				</div>
-				<div className="contents">
+				<header>
+                    <a className="logoContainer" href="/">
+                        <img src="/images/logo.svg" alt="seekseek logo" className="logo"/>
+                        <span className="siteTag">datasheets</span>
+                        <span className="betaTag">beta</span>
+                    </a>
+				</header>
+				<main>
 					{children}
-				</div>
-				<div className="footer">
-					<div className="wrapper">
-						<a href="https://matrix.to/#/#seekseek:pixie.town?via=pixie.town&via=matrix.org&via=librepush.net" className="chat">
-							Come chat with us!
-						</a>
-						<span className="linkSpacer">•</span>
-						<a href="/technology" className="chat">
-							Technology
-						</a>
-						<span className="linkSpacer">•</span>
-						<a href="/contact" className="chat">
-							Contact/Abuse
-						</a>
-					</div>
-				</div>
+				</main>
+				<footer>
+                    <a href="https://matrix.to/#/#seekseek:pixie.town?via=pixie.town&via=matrix.org&via=librepush.net" className="chat">
+                        Come chat with us!
+                    </a>
+                    <span className="linkSpacer">•</span>
+                    <a href="/technology" className="chat">
+                        Technology
+                    </a>
+                    <span className="linkSpacer">•</span>
+                    <a href="/contact" className="chat">
+                        Contact/Abuse
+                    </a>
+				</footer>
 				<script src="/js/bundle.js"></script>
 			</body>
 		</html>