carousel

4 files changed, 47 insertions, 33 deletions

diff --git a/index.js b/index.js
index f5d787c..79c55ab 100644
--- a/index.js
+++ b/index.js
@@ -54,9 +54,10 @@ var app = okcms.createApp({
 
   views: {
     '/': {
-      template: 'index',
+      template: 'entry',
       data: [
         {type: 'entry', query: '*'},
+        {type: 'testimonial', query: '*'},
       ]
     },
     '/entry/:id': {
diff --git a/public/assets/css.css b/public/assets/css.css
index d6af91e..04e26da 100644
--- a/public/assets/css.css
+++ b/public/assets/css.css
@@ -103,15 +103,13 @@ h2 {
 
 #posts {
   position: relative;
+  background-image: url(postbg.jpg);
+  background-size: cover;
+  background-position: center center;
 }
 .cell {
   display: block;
-  background-size: cover;
-  background-position: center center;
   position: relative;
-  background-image: url(postbg.jpg);
-  background-size: cover;
-  background-position: center center;
   padding: 20px;
   text-align: center;
 }
@@ -119,7 +117,7 @@ h2 {
   text-transform: uppercase;
   font-weight: bold;
   text-align: center;
-  margin: 20px;
+  margin: 0 5px 10px 5px;
 }
 .cell .title span {
   font-size: 20px;
@@ -137,19 +135,20 @@ h2 {
 .media iframe {
   margin: 10px auto;
   max-height: 30vh;
-  max-width: 90%;
+  max-width: 82vw;
 }
 .media img {
   display: block;
   margin: 10px auto;
-  max-width: 90%;
+  max-width: 82vw;
 }
 .content {
-  padding: 20px;
-  line-height: 1.5;   
+  padding: 8px;
+  line-height: 1.4;
+  font-size: 15px;
   background: white;
   color: black;
-  max-width: 600px;
+  max-width: 82vw;
   margin: 0 auto;
 }
 
diff --git a/public/assets/site.js b/public/assets/site.js
index f875fee..478cffc 100644
--- a/public/assets/site.js
+++ b/public/assets/site.js
@@ -51,7 +51,7 @@ function bind(){
     var tag = $(this).html()
     filter_by_tag(tag)
   })
-  var gallery = new Flickity( "#testimonials", {
+  new Flickity( "#testimonials", {
     cellSelector: '.testimonial',
     wrapAround: true,
     prevNextButtons: false,
@@ -60,6 +60,16 @@ function bind(){
     draggable: true,
     autoPlay: 5000,
   })
+  
+  new Flickity( "#posts", {
+    cellSelector: '.cell',
+    wrapAround: true,
+    prevNextButtons: false,
+    pageDots: false,
+    setGallerySize: false,
+    draggable: true,
+    autoPlay: 5000,
+  })
 }
 function build(){
   $('.cell').each( function(){
diff --git a/templates/entry.liquid b/templates/entry.liquid
index f5884ae..cbb839a 100644
--- a/templates/entry.liquid
+++ b/templates/entry.liquid
@@ -26,27 +26,31 @@
 <a href="/"><img src="/assets/header.jpg" id="header"></a>
 
 <div id='posts'>
-  {% unless entry.disabled %}
-    <div class='cell' data-id='{{ entry.id }}'>
-      <div class='title'>
-        <span>{{ entry.title }}</span>
-      </div>
-      <div class='media'>
-      {% for media in entry.media %}
-        {% if media.type == 'youtube' %}
-          <iframe src="https://www.youtube.com/embed/{{ media.token }}?modestbranding=1&rel=0" width="{{media.width}}" height="{{media.height}}" frameborder="0" allowfullscreen></iframe>
-        {% else %}
-          <img src="{{media.uri}}">
-        {% endif %}
-      {% endfor %}
-      <a href=""><img id="left" src="/assets/left.png"></a>
-      <a href=""><img id="right" src="/assets/right.png"></a>
-      </div>
-      <div class="content">
-        {{ entry.body | newline_to_br }}
+  {% for entry in entries %}
+    {% unless entry.disabled %}
+      <div class='cell' data-id='{{ entry.id }}'>
+        <div class='title'>
+          <span>{{ entry.title }}</span>
+        </div>
+        <div class='media'>
+        {% for media in entry.media %}
+          {% if forloop.index == 1 %}
+            {% if media.type == 'youtube' %}
+              <iframe src="https://www.youtube.com/embed/{{ media.token }}?modestbranding=1&rel=0" width="{{media.width}}" height="{{media.height}}" frameborder="0" allowfullscreen></iframe>
+            {% else %}
+              <img src="{{media.uri}}">
+            {% endif %}
+          {% endif %}
+        {% endfor %}
+        </div>
+        <div class="content">
+          {{ entry.body | newline_to_br }}
+        </div>
       </div>
-    </div>
-  {% endunless %}
+    {% endunless %}
+  {% endfor %}
+  <a href="#"><img src="/assets/left" id="left"></a>
+  <a href="#"><img src="/assets/left" id="right"></a>
 </div>
 
 <div id="footer">