1 files changed, 96 insertions, 11 deletions
diff --git a/public/assets/css.css b/public/assets/css.css
index 51a750e..8a6c7c9 100644
--- a/public/assets/css.css
+++ b/public/assets/css.css
@@ -4,6 +4,10 @@ html,body {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
+  font-family: sans-serif;
+  font-weight: 300;
+  text-align: center;
+  background: #fff;
 }
 body.about,
 body.entry,
@@ -11,13 +15,56 @@ body.submit {
   overflow: hidden;
 }
 
+a {
+  color: #2947f3
+}
+
+#header {
+  width: 100%;
+  margin: 0;
+  background: #fff;
+  padding: 10px;
+  box-shadow: 0 5px 10px #ddd;
+}
+
+#testimonials {
+  margin-top: 15px;
+  box-shadow: 0 -5px 10px 0px #ddd;
+}
+#footer {
+  width: 100%;
+  margin: 0;
+  background: #fff;
+  padding: 10px;
+  margin-top: 15px;
+  box-shadow: 0 -5px 10px #ddd;
+}
+
+h1, h2 {
+  font-weight: 300;
+}
+
 #about, #entry, #submit {
   position: fixed;
   top: 0; left: 0;
-  width: 100%; height: 100%;
-  background: #fff;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
   opacity: 0;
+  background: rgba(105,135,195,0.8);
+  transition: opacity 0.2s;
+  cursor: pointer;
+}
+.inner {
+  cursor: normal;
+  position: absolute;
+  top: 50%; left: 50%;
+  min-width: 400px;
+  max-width: 80vw;
+  height: 80vh;
+  padding: 10px;
+  transform: translate3d(-50%, -50%, 0);
+  background: #fff;
 }
 .about #about,
 .entry #entry,
@@ -26,28 +73,66 @@ body.submit {
   pointer-events: auto;
 }
 
-#header {
-  width: 100%;
-}
-
 .cell {
   display: inline-block;
-  width: 25vw;
-  height: 20vw;
+  width: 24vw;
+  height: 23vw;
   color: white;
-  text-shadow: 0 0 2px #000;
   cursor: pointer;
   background-size: cover;
   background-position: center center;
+  position: relative;
+}
+.cell .title {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  text-transform: uppercase;
+  font-weight: bold;
+  text-align: center;
+  font-size: 20px;
+  color: black;
+  background: white;
+  padding: 5px;
+}
+.desktop .cell {
+  opacity: 0.9;
+  transition: opacity 0.2s;
+}
+.desktop .cell:hover {
+  opacity: 1;
 }
 
 .media {
   width: 100%;
   max-height: 50vh;
 }
+.content {
+  text-align: left;
+  padding: 20px 50px;
+  line-height: 1.5;   
+}
+
+.testimonials {
+  width: 100%;
+  height: 300px;
+}
+.testimonial {
+  position: relative;
+  height: 300px;
+  width: 100%;
+}
+.testimonial .blurb {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  width: 400px;
+  max-width: 90vw;
+  font-style: italic;
+}
 
-.cell:nth-child(2n+1) { background-color: #ddd; }
-.cell:nth-child(2n+2) { background-color: #eee; }
+.cell:nth-child(2n+1) { background-color: #4f658e; }
+.cell:nth-child(2n+2) { background-color: #7a7067; }
 
 .close {
   position: absolute;