Remove footers, install font

src/App.css

@@ -4,7 +4,8 @@
 
 body {
 	line-height: 1.6;
-	font-size: 1.125rem;
+	font-size: 1.25rem;
+	font-family: 'Open Sans', sans-serif;
 	color: #333;
 	background-color: #F9F9F9;
 }

src/Grid.css

@@ -1,11 +1,10 @@
 .grid-container {
-	background: #bad4ff;
+	text-align: center;
 	max-width: 120rem;
 	margin: 0 auto;
 }
 
 .grid-item {
-	//background: linear-gradient(135deg, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
 	position: relative;
 
 	float: left;
@@ -29,19 +28,21 @@
 }
 
 .menu .logo {
+	background-color: #E9E9E9;
 	object-fit: contain;
 	padding-top: 1em;
 	min-height: 5rem;
 }
 
 .menu section {
+	background-color: #E9E9E9;
 	min-height: 0;
 	flex: 1;
 }
 
 .menu section aside {
 	position: relative;
-    top: 50%;
+	top: 50%;
 	transform: translateY(-50%);
 	text-align: right;
 }
@@ -52,13 +53,18 @@
 	padding: 2rem;
 }
 
+.menu footer {
+	background-color: #E9E9E9;
+	padding-bottom: 1rem;
+}
+
 .project {
 	display: flex;
 	flex-flow: column;
 }
 
 .project header {
-	font-size: 2.25rem;
+	font-size: 2rem;
 	line-height: 1.2;
 }
 
@@ -74,7 +80,7 @@
 
 .project.left section p {
 	position: relative;
-    top: 50%;
+	top: 50%;
 	transform: translateY(-50%);
 }
 
@@ -94,21 +100,13 @@
 	padding: 1rem;
 }
 
-.project footer {
-	display: flex;
-	justify-content: space-between;
-	margin: 0 1em;
-	font-size: 1rem;
-	font-family: monospace;
-}
-
 .photo a {
 	display: block;
 	position: relative;
 	height: 100%;
 }
 
-.photo header, .photo footer {
+.photo header {
 	display: none;
 	position: absolute;
 	width: 100%;
@@ -124,22 +122,10 @@
 	padding: 0.5rem;
 }
 
-.photo footer {
-	bottom: 0;
-	justify-content: space-between;
-	padding: 0 1em;
-	font-size: 1rem;
-	font-family: monospace;
-}
-
 .photo a:hover header {
 	display: block;
 }
 
-.photo a:hover footer {
-	display: flex;
-}
-
 .photo img {
 	position: absolute;
 	height: 100%;
@@ -179,13 +165,13 @@
 		padding-bottom: 100%;
 		margin-bottom: 1rem;
 	}
+	.menu {
+		background-color: #E9E9E9;
+	}
 	.grid-item-content.photo {
 		padding: 0;
 	}
 	.photo a header {
 		display: block;
 	}
-	.photo a footer {
-		display: flex;
-	}
 }

src/Grid.js

@@ -47,17 +47,11 @@ class Grid extends React.Component {
 						<img src={dress1} alt='' />
 						<p>A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.</p>
 					</section>
-					<footer>
-						<p>Project (Hardware)</p><p>2018-10-11</p>
-					</footer>
 				</GridItem>
 				<GridItem type='photo'>
 					<a>
 						<header>Thorncliffe Car Show</header>
 						<img src={carshow1} alt='' />
-						<footer>
-							<p>Photography</p><p>2018-10-11</p>
-						</footer>
 					</a>
 				</GridItem>
 				<GridItem type='project bottom'>
@@ -66,9 +60,6 @@ class Grid extends React.Component {
 						<img src={switch1} alt='' />
 						<p>Custom circuit that lets me control a ceiling light over Wifi.</p>
 					</section>
-					<footer>
-						<p>Project (Hardware)</p><p>2018-10-11</p>
-					</footer>
 				</GridItem>
 				<GridItem type='project bottom'>
 					<header>Plant Waterer</header>
@@ -76,26 +67,17 @@ class Grid extends React.Component {
 						<img src={pump1} alt='' />
 						<p>Controller that waters my plant automatically every day.</p>
 					</section>
-					<footer>
-						<p>Project (Hardware)</p><p>2018-10-11</p>
-					</footer>
 				</GridItem>
 				<GridItem type='photo'>
 					<a>
 						<header>Prince's Island Park</header>
 						<img src={bee1} alt='' />
-						<footer>
-							<p>Photography</p><p>2018-10-11</p>
-						</footer>
 					</a>
 				</GridItem>
 				<GridItem type='photo'>
 					<a>
 						<header>Johnston Creek, Banff</header>
 						<img src={banff1} alt='' />
-						<footer>
-							<p>Photography</p><p>2018-10-11</p>
-						</footer>
 					</a>
 				</GridItem>
 				<GridItem type='project left'>
@@ -104,17 +86,11 @@ class Grid extends React.Component {
 						<img src={hand1} alt='' />
 						<p>Sculpture welded together out of scrap metal for practice.</p>
 					</section>
-					<footer>
-						<p>Project (Hardware)</p><p>2018-10-11</p>
-					</footer>
 				</GridItem>
 				<GridItem type='photo'>
 					<a>
 						<header>VW Van in Canmore</header>
 						<img src={canmore1} alt='' />
-						<footer>
-							<p>Photography</p><p>2018-10-11</p>
-						</footer>
 					</a>
 				</GridItem>
 			</div>

src/Home.css

@@ -1,3 +0,0 @@
-.Home {
-	text-align: center;
-}

src/server.js

@@ -30,6 +30,7 @@ server
 						<title>Tanner Collin</title>
 						<meta name="viewport" content="width=device-width, initial-scale=1">
 						<link rel="stylesheet" href="reset.css">
+						<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 						${
 							assets.client.css
 								? `<link rel="stylesheet" href="${assets.client.css}">`