some backgrounds

6 files changed, 96 insertions, 35 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
diff --git a/templates/index.liquid b/templates/index.liquid
index 46ed396..9e6bd49 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -1,20 +1,36 @@
 <!doctype html>
 <html>
 <head>
-<title>How to make a Folkestone.</title>
-<link href='/assets/flickity.css' rel='stylesheet' type='text/css'>
-<link href='/assets/css.css' rel='stylesheet' type='text/css'>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="Stories from the Folkestone Triennale." />
+  <meta name="author" content="Catalina Vallejos">
+
+  <meta property="og:title" content="How To Make A Folkestone." />
+  <meta property="og:type" content="website" />
+  <meta property="og:image" content="http://howtomakeafolkestone.life/assets/header.jpg" />
+  <meta property="og:url" content="http://howtomakeafolkestone.life/" />
+  <meta property="og:site_name" content="Tree" />
+
+  <meta name="apple-mobile-web-app-capable" content="no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+  <title>How to make a Folkestone.</title>
+  <link href='/assets/flickity.css' rel='stylesheet' type='text/css'>
+  <link href='/assets/css.css' rel='stylesheet' type='text/css'>
 </head>
 <body>
 
 <div id='header'>
   <h1>How to make a Folkestone.</h1>
+  <br>
   <a href="https://docs.google.com/forms/d/10dqrK_3UZW_xlPWQLERd0xTwVONryyicNuz2aYz3X_I/edit?c=0&w=1"><h2>Participate!</h2></a>
   <div id='tags'></div>
 </div>
-<br>
 
-<div id='body'>
+<div id='posts'>
   {% for entry in entries %}
     {% unless entry.disabled %}
       <div class='cell' data-id='{{ entry.id }}'>