diff options
| -rw-r--r-- | index.js | 3 | ||||
| -rw-r--r-- | public/assets/css.css | 21 | ||||
| -rw-r--r-- | public/assets/site.js | 12 | ||||
| -rw-r--r-- | templates/entry.liquid | 44 |
4 files changed, 47 insertions, 33 deletions
@@ -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"> |