From 05983e8091b99cef6d7baebe2b72ac3c19d41151 Mon Sep 17 00:00:00 2001
From: “Ryder <“r@okfoc.us”>
Date: Mon, 28 Mar 2016 13:06:36 -0400
Subject: css

---
 package.json            |  1 +
 public/assets/js/app.js |  5 ++++
 templates/index.liquid  | 64 +++++++++++++++++++++++++++++++++++--------------
 3 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 635e23d..d09219a 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "dotenv": "^2.0.0",
+    "flickity": "^1.2.1",
     "object-assign": "^2.0.0",
     "okcms": "git+ssh://git@github.com:okfocus/okcms.git#v0.1.18"
   },
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 84919fd..bf0616d 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -9,3 +9,8 @@ $(function() {
     $("html").addClass("desktop");
   }
 });
+
+$('.gallery').flickity({
+  cellAlign: 'left',
+  contain: true
+});
\ No newline at end of file
diff --git a/templates/index.liquid b/templates/index.liquid
index 492dbcd..0d625b3 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -53,50 +53,73 @@
         float: left;
     }
     
+    .item {
+        height: 100vh;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-flex-flow: column wrap;
+        flex-flow: column wrap;
+    }
+    
+    .top,
+    .bottom {
+        -webkit-flex: 1 auto;
+        flex: 1 auto;
+    }
+    
     .top {
         background: yellow;
         width: 100%;
-        height: 80vh;
+        /*height: 80vh;*/
+        flex: 1 auto;
     }
     
     .bottom {
-        height: 20vh;
+        /*height: 20vh;*/
+        flex: 0 auto;
         background: #eee;
+        overflow: hidden;
+        padding:5px 0;
     }
     
     .five {
         width: 100%;
     }
-
+    
     .headings {
-    	font-size:10px;
-    	font-weight: 700;
+        font-size: 10px;
+        font-weight: 700;
     }
+    
     .texts {
-    	font-weight:400;
-    	padding:5px 0 0 0;
+        font-weight: 400;
+        padding: 5px 0 0 0;
     }
+    
     .five span {
-        width:calc(12% - 8px);
-        margin:0 4px;
+        width: calc(12% - 8px);
+        margin: 0 4px;
     }
-
-    .press .headings span:nth-child(5){
+    
+    .press .headings span:nth-child(5) {
         width: calc(40% - 8px);
     }
+    
     .headings span {
         border-bottom: 1px solid;
-        padding:5px 0;
+        padding: 0 0 2px 0;
     }
     
     .press .headings span:last-child:before {
         content: "PRESS";
     }
+    
     .five .description {
         width: 50%;
         -webkit-column-count: 3;
-        font-size:12px;
-    }    
+        font-size: 12px;
+    }
+    
     .press .five .description {
         width: calc(40% - 8px);
         -webkit-column-count: 2;
@@ -110,9 +133,9 @@
     ul li {
         list-style-type: none;
     }
-
-    .nopress span:last-child{
-    	width: calc(51.5555555555% - 2px);
+    
+    .nopress span:last-child {
+        width: calc(52% - 8px);
     }
     </style>
 </head>
@@ -121,7 +144,12 @@
 
 {% for project in projects %}
     <div class="item">
-        <div class="top" style="background-image:url({{ project.image.uri }})">
+        <div class="top">
+            <div class="gallery">
+                <div class="cell" style="background-image:url({{ project.image.uri }})">...</div>
+                <div class="cell">...</div>
+                <div class="cell">...</div>
+            </div>
         </div>
         <div class="bottom {% if project.press %}press{% else %}nopress{% endif %}">
             <div class="headings five">
-- 
cgit v1.2.3-70-g09d2