some backgrounds

5 files changed, 75 insertions, 30 deletions

diff --git a/public/assets/css.css b/public/assets/css.css
index 20e8056..46057a8 100644
--- a/public/assets/css.css
+++ b/public/assets/css.css
@@ -16,35 +16,48 @@ body.entry,
 body.submit {
   overflow: hidden;
 }
-
+body {
+  background-image: url(postbg.jpg);
+  background-size: cover;
+  background-position: center center;
+  background-attachment: fixed;
+}
 a {
-  color: #2947f3
+  color: #2947f3;
 }
-
 #header {
   width: 100%;
   margin: 0;
   background: #fff;
-  padding: 10px 0;
-  box-shadow: 0 5px 10px #ddd;
+  padding: 20px;
+  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+  background-image: url(header.jpg);
+  background-size: cover;
+  background-position: bottom center;
 }
 
-#testimonials {
-  margin-top: 15px;
-  box-shadow: 0 -5px 10px 0px #ddd;
-}
 #footer {
   width: 100%;
   margin: 0;
-  background: #fff;
   padding: 10px 0;
-  margin-top: 15px;
-  box-shadow: 0 -5px 10px #ddd;
+  padding-top: 15px;
+  height: 300px;
 }
 
 h1, h2 {
   font-weight: 300;
+  background: white;
+  padding: 5px;
+  display: inline-block;
+}
+h2 {
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
+.desktop h2:hover {
+  background: #ff0;
+}
+
+/* MODALS */
 
 #about, #entry, #submit {
   position: fixed;
@@ -75,10 +88,16 @@ h1, h2 {
   pointer-events: auto;
 }
 
+/* GRID OF POSTS */
+
+#posts {
+  padding: 40px 0;
+}
 .cell {
   display: inline-block;
-  width: 24vw;
+  width: 26vw;
   height: 23vw;
+  margin: 2vw;
   color: white;
   cursor: pointer;
   background-size: cover;
@@ -104,6 +123,11 @@ h1, h2 {
 .desktop .cell:hover {
   opacity: 1;
 }
+.cell:nth-child(2n+1) { background-color: #4f658e; }
+.cell:nth-child(2n+2) { background-color: #7a7067; }
+
+
+/* SINGLE POST VIEW */
 
 .media {
   width: 100%;
@@ -114,8 +138,26 @@ h1, h2 {
   padding: 20px 50px;
   line-height: 1.5;   
 }
+.close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px;
+  font-size: 24px;
+  background: white;
+  border: 2px solid;
+  cursor: pointer;
+}
+
+/* TESTIMONIALS */
 
-.testimonials {
+#testimonials {
+  margin-top: 15px;
+  box-shadow: 0 0 20px 0px rgba(0,0,0,0.4);
+  background-image: url(testimonials.jpg);
+  background-size: cover;
+  background-position: bottom center;
+  background-repeat: no-repeat;
   width: 100%;
   height: 300px;
 }
@@ -131,26 +173,29 @@ h1, h2 {
   width: 400px;
   max-width: 90vw;
   font-style: italic;
+  background: white;
+  padding: 10px 15px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  line-height: 1.5;
 }
 
-.cell:nth-child(2n+1) { background-color: #4f658e; }
-.cell:nth-child(2n+2) { background-color: #7a7067; }
-
-.close {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px;
-  font-size: 24px;
-  color: white;
-  background: black;
-  border: 2px solid;
-  cursor: pointer;
-}
+/* MOBILE STYLES */
 
 @media (max-width: 700px) {
   .cell {
+    display: block;
     width: 100vw;
     height: 20vh;
+    margin: 0;
+  }
+  #posts {
+    margin: 0;
+    padding: 0;
   }
-}
\ No newline at end of file
+  body {
+    background-image: none;
+  }
+  #testimonials {
+    margin: 0;
+  }
+}
diff --git a/public/assets/header.jpg b/public/assets/header.jpg
new file mode 100644
index 0000000..3a16ef3
--- /dev/null
+++ b/public/assets/header.jpg
diff --git a/public/assets/postbg.jpg b/public/assets/postbg.jpg
new file mode 100644
index 0000000..9fc5c3a
--- /dev/null
+++ b/public/assets/postbg.jpg
diff --git a/public/assets/site.js b/public/assets/site.js
index 61b7da6..eb38891 100644
--- a/public/assets/site.js
+++ b/public/assets/site.js
@@ -46,7 +46,7 @@ function bind(){
   var gallery = new Flickity( "#testimonials", {
     cellSelector: '.testimonial',
     wrapAround: true,
-    prevNextButtons: true,
+    prevNextButtons: false,
     pageDots: false,
     setGallerySize: false,
     draggable: true,
diff --git a/public/assets/testimonials.jpg b/public/assets/testimonials.jpg
new file mode 100644
index 0000000..75103bb
--- /dev/null
+++ b/public/assets/testimonials.jpg