Simplify layout and templates.

By removing wrapper elements and switching to a CSS grid layout there
are overall less elements to style while providing the same
possibilities.

public/css/style.css

@@ -1,57 +1,48 @@
+/*$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 {
+html {
-	max-width: 900px;
+    margin: 0;
-	margin-left: 1em;
+    height: 100%;
-	margin-right: 1em;
-}
-
-.header {
-	margin-top: 1em;
-	margin-left: 0.5em;
-	margin-right: 0.5em;
-	padding-bottom: .7em;
-	border-bottom: 2px solid black;
 }
 
-.contents {
+body {
-	margin-bottom: 2em;
+    height: 100%;
-	padding: .7em 0;
+    margin: 0 auto;
+    display: grid;
+    grid-template:
+        "header" 7rem 
+        "content" 1fr
+        "footer" 50px;
 }
 
-.footer {
+header {
-	position: fixed;
+    grid-area: header;
-	bottom: 0;
+	border-bottom: 2px solid black;
-	left: 0.5em;
+    align-self: center;
-	right: 0.5em;
-
-	box-sizing: border-box;
-	border-top: 1px solid black;
-	height: 2em;
-	padding: 0.2em;
-	background-color: #f9f9f9ff;
-}
-
-.footer .wrapper {
-		margin-left: calc(1em - 0.5em);
 }
 
-.logoContainer {
+header .logoContainer {
         display: inline-block;
         position: relative;
     }
 
-.logoContainer .logo {
+header .logoContainer .logo {
-		height: 5em;
+            height: 5rem;
         }
 
-.logoContainer .siteTag {
+header .logoContainer .siteTag {
             position: absolute;
             right: 0;
             bottom: 0;
@@ -60,7 +51,7 @@ html, body {
             font-size: 1.3em;
         }
 
-.logoContainer .betaTag {
+header .logoContainer .betaTag {
             width: 1px; /* Out-of-box alignment hack */
             position: absolute;
             right: -.3em;
@@ -71,6 +62,20 @@ html, body {
             font-size: 1.3em;
         }
 
+main {
+    grid-area: content;
+	margin-bottom: 2em;
+}
+
+main div.search input { width: 100%; }
+
+footer {
+    grid-area: footer;
+	border-top: 1px solid black;
+	height: 2em;
+	background-color: #f9f9f9ff;
+}
+
 .counter {
 	margin-bottom: .5em;
 	font-style: italic;

src/css/style.css

@@ -1,56 +1,45 @@
 $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 {
+html {
-	max-width: 900px;
+    margin: 0;
-	margin-left: 1em;
+    height: 100%;
-	margin-right: 1em;
-}
-
-.header {
-	margin-top: 1em;
-	margin-left: $pagePadding;
-	margin-right: $pagePadding;
-	padding-bottom: .7em;
-	border-bottom: 2px solid black;
 }
 
-.contents {
+body {
-	margin-bottom: 2em;
+    height: 100%;
-	padding: .7em 0;
+    margin: 0 auto;
+    display: grid;
+    grid-template:
+        "header" 7rem 
+        "content" 1fr
+        "footer" 50px;
 }
 
-.footer {
+header {
-	position: fixed;
+    grid-area: header;
-	bottom: 0;
+	border-bottom: 2px solid black;
-	left: $pagePadding;
+    align-self: center;
-	right: $pagePadding;
-
-	box-sizing: border-box;
-	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;
+            height: 5rem;
         }
 
         .siteTag {
@@ -73,6 +62,24 @@ html, body {
             font-size: 1.3em;
         }
     }
+}
+
+main {
+    grid-area: content;
+	margin-bottom: 2em;
+
+
+    div.search {
+        input { width: 100%; }
+    }
+}
+
+footer {
+    grid-area: footer;
+	border-top: 1px solid black;
+	height: 2em;
+	background-color: $background;
+}
 
 .counter {
 	margin-bottom: .5em;

src/views/_layout.jsx

@@ -13,20 +13,17 @@ module.exports = function Layout({ children }) {
 				<link rel="stylesheet" href="/css/style.css"/>
 			</head>
 			<body>
-				<div className="header">
+				<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>
+				</header>
-				</div>
+				<main>
-				<div className="contents">
 					{children}
-				</div>
+				</main>
-				<div className="footer">
+				<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>
@@ -38,8 +35,7 @@ module.exports = function Layout({ children }) {
                     <a href="/contact" className="chat">
                         Contact/Abuse
                     </a>
-					</div>
+				</footer>
-				</div>
 				<script src="/js/bundle.js"></script>
 			</body>
 		</html>