diff --git a/src/App.css b/src/App.css
index 24a2ee9..54b6b5f 100644
--- a/src/App.css
+++ b/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;
}
diff --git a/src/Grid.css b/src/Grid.css
index 4779ffd..9b44913 100644
--- a/src/Grid.css
+++ b/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;
- }
}
diff --git a/src/Grid.js b/src/Grid.js
index d0d8874..7248ecc 100644
--- a/src/Grid.js
+++ b/src/Grid.js
@@ -47,17 +47,11 @@ class Grid extends React.Component {
A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.
-Custom circuit that lets me control a ceiling light over Wifi.
-Controller that waters my plant automatically every day.
-Sculpture welded together out of scrap metal for practice.
-