From 313c337b5298de242fa9ff28ef7af7a7fb9ae968 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Sat, 28 Jul 2018 15:03:23 -0600
Subject: [PATCH] Fix images in Chrome

---
 src/Grid.css | 40 +++++++++++++++++++++++-----------------
 src/Grid.js  |  8 ++++----
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/Grid.css b/src/Grid.css
index 125634d..b7872c6 100644
--- a/src/Grid.css
+++ b/src/Grid.css
@@ -29,23 +29,26 @@
 }
 
 .menu .logo {
-	width: 100%;
-	padding: 1rem 5rem 0;
+	object-fit: contain;
+	padding-top: 1em;
+	min-height: 5rem;
 }
 
 .menu section {
-	display: flex;
 	min-height: 0;
+	flex: 1;
 }
 
-.menu aside {
-	flex: 1;
-	align-self: center;
+.menu section aside {
+	position: relative;
+    top: 50%;
+	transform: translateY(-50%);
 	text-align: right;
 }
 
-.menu .mug {
+.menu section img {
 	height: 100%;
+	float: right;
 	padding: 2rem;
 }
 
@@ -62,27 +65,22 @@
 .project section {
 	min-height: 0;
 	flex: 1;
-	display: flex;
-}
-
-.project footer {
-	display: flex;
-	justify-content: space-between;
-	margin: 0 1em;
-	font-size: 1rem;
-	font-family: monospace;
 }
 
 .project.bottom section {
 	flex-flow: column;
+	display: flex;
 }
 
 .project.left section p {
-	align-self: center;
+	position: relative;
+    top: 50%;
+	transform: translateY(-50%);
 }
 
 .project.left section img {
 	height: 100%;
+	float: right;
 	padding: 1rem;
 }
 
@@ -96,6 +94,14 @@
 	padding: 1rem;
 }
 
+.project footer {
+	display: flex;
+	justify-content: space-between;
+	margin: 0 1em;
+	font-size: 1rem;
+	font-family: monospace;
+}
+
 @media all and (max-width: 120rem) {
 	.grid-item {
 		width: 25%;
diff --git a/src/Grid.js b/src/Grid.js
index 289a077..d937c7b 100644
--- a/src/Grid.js
+++ b/src/Grid.js
@@ -22,8 +22,9 @@ class Grid extends React.Component {
 		return (
 			<div className='grid-container'>
 				<GridItem type='menu'>
-					<img src={logo} className='logo' alt='Tanner Collin logo' />
+					<img src={logo} className='logo' alt='Tanner Collin signature' />
 					<section>
+						<img src={tanner} alt='Tanner' />
 						<aside>
 							<p>Home</p>
 							<p>Projects</p>
@@ -32,15 +33,14 @@ class Grid extends React.Component {
 							<p>About</p>
 							<p>Contact</p>
 						</aside>
-						<img src={tanner} className='mug' alt='Picture of Tanner' />
 					</section>
 					<footer>More info or a .onion link.</footer>
 				</GridItem>
 				<GridItem type='project left'>
 					<header>LED Dress</header>
 					<section>
-						<p>A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.</p>
 						<img src={dress1} alt='LED Dress thumbnail' />
+						<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>
@@ -72,8 +72,8 @@ class Grid extends React.Component {
 				<GridItem type='project left'>
 					<header>Hand of Ozymandias</header>
 					<section>
-						<p>Sculpture welded together out of scrap metal for practice.</p>
 						<img src={hand1} alt='Metal Hand thumbnail' />
+						<p>Sculpture welded together out of scrap metal for practice.</p>
 					</section>
 					<footer>
 						<p>Project (Hardware)</p>