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 (
A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.
+A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.