diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2017-08-29 01:19:02 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2017-08-29 01:19:02 +0200 |
| commit | 4d4cfcbf72fd61e15fba23abc85ba2e8e492f93e (patch) | |
| tree | 4efd9d73a2124b4b567c0122c4412318487b8856 | |
| parent | 58c8a7f4f6b3b09a440b566a2e5653f68071e868 (diff) | |
gap
| -rw-r--r-- | index.js | 23 | ||||
| -rw-r--r-- | public/assets/css.css | 8 | ||||
| -rw-r--r-- | public/assets/gap.png | bin | 0 -> 23831 bytes | |||
| -rw-r--r-- | templates/entry.liquid | 90 | ||||
| -rw-r--r-- | templates/index.liquid | 84 |
5 files changed, 113 insertions, 92 deletions
@@ -3,18 +3,9 @@ var path = require('path') var isProduction = process.env.OK_PRODUCTION === 'true' -var viewConfig = { - template: 'index', - data: [ - {type: 'entry', query: '*'}, - {type: 'page', query: '*'}, - {type: 'testimonial', query: '*'}, - ] -} - var app = okcms.createApp({ - project: 'Folkestone Gossip', + project: 'How To Make A Folkestone', debug: !isProduction, production: isProduction, @@ -62,8 +53,16 @@ var app = okcms.createApp({ ], views: { - '/': viewConfig, - '/entry/:id': viewConfig, + '/': { + template: 'index', + }, + '/entry/:id': { + template: 'entry', + data: [ + {type: 'entry', query: ':id'}, + {type: 'testimonial', query: '*'}, + ] + }, '/acknowledgements': { template: 'acknowledgements', data: [{type:'page',query:'*'}] }, }, diff --git a/public/assets/css.css b/public/assets/css.css index d951efd..013a0ee 100644 --- a/public/assets/css.css +++ b/public/assets/css.css @@ -10,7 +10,8 @@ html,body { font-family: sans-serif; font-weight: 300; text-align: center; - background: #fff; + background-color: white; + color: black; } body.about, body.entry, @@ -132,17 +133,18 @@ h2 { .media iframe { margin: 10px auto; max-height: 30vh; - max-width: 100%; + max-width: 90%; } .media img { display: block; margin: 10px auto; - max-width: 100%; + max-width: 90%; } .content { padding: 20px; line-height: 1.5; background: white; + color: black; max-width: 600px; margin: 0 auto; } diff --git a/public/assets/gap.png b/public/assets/gap.png Binary files differnew file mode 100644 index 0000000..a4263e0 --- /dev/null +++ b/public/assets/gap.png diff --git a/templates/entry.liquid b/templates/entry.liquid new file mode 100644 index 0000000..6b1e688 --- /dev/null +++ b/templates/entry.liquid @@ -0,0 +1,90 @@ +<!doctype html> +<html> +<head> + <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> + +<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 %} + </div> + <div class="content"> + {{ entry.body | newline_to_br }} + </div> + </div> + {% endunless %} +</div> + +<div id="footer"> + <div id="testimonials"> + {% for testimonial in testimonials %} + {% unless testimonial.disabled %} + <div id='{{ testimonial.id }}' class='testimonial'> + <span class="blurb"> + {{ testimonial.body | newline_to_br }} + —{{ testimonial.byline }} + </span> + </div> + {% endunless %} + {% endfor %} + </div> + + <div id="coda"> + <a href="/acknowledgements">Acknowledgements</a> + <a href="https://docs.google.com/forms/d/10dqrK_3UZW_xlPWQLERd0xTwVONryyicNuz2aYz3X_I/edit?c=0&w=1">Participate!</a> + </div> + <div id="logos"> + <a target="_blank" href="http://asdf.us/"><img src="/assets/bird.png"></a> + <a target="_blank" href="http://catalinavallejos.com/"><img src="/assets/wayshape.png"></a> + <a target="_blank" href="http://www.geidai.ac.jp/english/"><img src="/assets/geidai.png"></a> + <a target="_blank" href="http://www.arts.ac.uk/csm/"><img src="/assets/csm.png"></a> + <a target="_blank" href="http://gap.geidai.ac.jp/en/"><img src="/assets/gap.png"></a> + </div> +</div> + +<div id='entry'> + <div class='inner'> + <div class='close'>×</div> + <div class='media'></div> + <h2></h2> + <div class='content'></div> + </div> +</div> +</body> +<script src="http://www.youtube.com/player_api"></script> +<script src="/assets/jquery.min.js"></script> +<script src="/assets/flickity.pkgd.js"></script> +<script src="/assets/site.js"></script> +</html> diff --git a/templates/index.liquid b/templates/index.liquid index 1968816..ad198a0 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -18,86 +18,16 @@ <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> - -<img src="/assets/header.jpg" id="header"> - -<div id='posts'> - {% 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 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 %} - </div> - <div class="content"> - {{ entry.body | newline_to_br }} - </div> - </div> - {% endunless %} - {% endfor %} -</div> - -{% for page in pages %} - {% unless page.disabled %} - <div id='{{ page.id }}' class='page'> - <div class='inner'> - <h2>{{ page.title }}</h2> - {{ page.body | newline_to_br }} - </div> - </div> - {% endunless %} +<body style='background-color:black'> +<div style='opacity:0' id='entries'> +{% for entry in entries %} + <a href='/entry/{{ entry.id }}'>{{ entry.title }}</a> {% endfor %} - -<div id="footer"> - <div id="testimonials"> - {% for testimonial in testimonials %} - {% unless testimonial.disabled %} - <div id='{{ testimonial.id }}' class='testimonial'> - <span class="blurb"> - {{ testimonial.body | newline_to_br }} - —{{ testimonial.byline }} - </span> - </div> - {% endunless %} - {% endfor %} - </div> - - <div id="coda"> - <a href="/acknowledgements">Acknowledgements</a> - <a href="https://docs.google.com/forms/d/10dqrK_3UZW_xlPWQLERd0xTwVONryyicNuz2aYz3X_I/edit?c=0&w=1">Participate!</a> - </div> - <div id="logos"> - <a target="_blank" href="http://asdf.us/"><img src="/assets/bird.png"></a> - <a target="_blank" href="http://catalinavallejos.com/"><img src="/assets/wayshape.png"></a> - <a target="_blank" href="http://www.geidai.ac.jp/english/"><img src="/assets/geidai.png"></a> - <a target="_blank" href="http://www.arts.ac.uk/csm/"><img src="/assets/csm.png"></a> - <a target="_blank" href="http://gap.geidai.ac.jp/en/"><img src="/assets/gap.png"></a> - </div> -</div> - -<div id='entry'> - <div class='inner'> - <div class='close'>×</div> - <div class='media'></div> - <h2></h2> - <div class='content'></div> - </div> </div> </body> <script src="http://www.youtube.com/player_api"></script> -<script src="/assets/jquery.min.js"></script> -<script src="/assets/flickity.pkgd.js"></script> -<script src="/assets/site.js"></script> +<script> +window.location.href=document.getElementById('entries').children[0].href +</script> </html> |
