From da5e0a96e7b5daca2aa29bc569a17da045bc3335 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 28 Aug 2017 00:28:22 +0200 Subject: new icons --- db.json | 16 ++++---- public/assets/bird.png | Bin 0 -> 11079 bytes public/assets/csm.png | Bin 0 -> 11075 bytes public/assets/css.css | 89 +++++++++++++++++++++++---------------------- public/assets/footer.jpg | Bin 0 -> 222049 bytes public/assets/geidai.png | Bin 0 -> 31332 bytes public/assets/header.jpg | Bin 82629 -> 108868 bytes public/assets/postbg.jpg | Bin 257408 -> 177193 bytes public/assets/site.js | 18 ++++++++- public/assets/wayshape.png | Bin 0 -> 8874 bytes templates/index.liquid | 62 +++++++++++++++++++------------ 11 files changed, 107 insertions(+), 78 deletions(-) create mode 100644 public/assets/bird.png create mode 100644 public/assets/csm.png create mode 100644 public/assets/footer.jpg create mode 100644 public/assets/geidai.png create mode 100644 public/assets/wayshape.png diff --git a/db.json b/db.json index f295601..5a0c2d8 100644 --- a/db.json +++ b/db.json @@ -5,19 +5,12 @@ "title": "How to catch a riffraff!", "date": "2017.08.26", "tags": "#rifraff #youngboys #police #grass #1930s", - "body": "David Simpson, a Folkestone local born in the 1920 has agreed to explain to us what the local politics involving local grass were back in the day!", + "body": "David Simpson, a Folkestone local born in 1920, has agreed to explain to us what the local politics involving local grass were back in the day!", "gallery": false, "disabled": false, "__index": 0, "dateCreated": "Fri, 18 Aug 2017 21:05:58 GMT", "media": [ - { - "uri": "https://marsupial.s3.amazonaws.com/folkestone/f24a93e0-8b39-11e7-ad44-cbee73b467bc.png", - "width": "800", - "height": "480", - "caption": "Plaque on the fence at the end of the Leas", - "type": "image" - }, { "type": "youtube", "token": "vl_zTjfrJ8k", @@ -28,6 +21,13 @@ "thumb": "http://i.ytimg.com/vi/vl_zTjfrJ8k/hqdefault.jpg", "autoplay": "false", "loop": "false" + }, + { + "uri": "https://marsupial.s3.amazonaws.com/folkestone/f24a93e0-8b39-11e7-ad44-cbee73b467bc.png", + "width": "800", + "height": "480", + "caption": "Plaque on the fence at the end of the Leas", + "type": "image" } ] }, diff --git a/public/assets/bird.png b/public/assets/bird.png new file mode 100644 index 0000000..9f5edc0 Binary files /dev/null and b/public/assets/bird.png differ diff --git a/public/assets/csm.png b/public/assets/csm.png new file mode 100644 index 0000000..18dea2d Binary files /dev/null and b/public/assets/csm.png differ diff --git a/public/assets/css.css b/public/assets/css.css index 46057a8..79c6989 100644 --- a/public/assets/css.css +++ b/public/assets/css.css @@ -2,6 +2,7 @@ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + border-radius: 5px; } html,body { padding: 0; @@ -27,21 +28,33 @@ a { } #header { width: 100%; - margin: 0; - background: #fff; - 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; } - #footer { width: 100%; margin: 0; + background-image: url(footer.jpg); + background-size: cover; + background-position: center; +} +#coda { padding: 10px 0; padding-top: 15px; - height: 300px; +} +#coda a { + display: inline-block; + font-size: 16px; + padding: 5px; + border-radius: 4px; + background: white; + margin: 10px; +} +#logos { + background: rgba(255,255,255,0.2); + padding: 20px 0; +} +#logos img { + max-height: 12vh; + margin: 5px; } h1, h2 { @@ -90,53 +103,50 @@ h2 { /* GRID OF POSTS */ -#posts { - padding: 40px 0; -} .cell { - display: inline-block; - width: 26vw; - height: 23vw; - margin: 2vw; - color: white; + display: block; cursor: pointer; 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; } .cell .title { - position: absolute; - top: 50%; left: 50%; - transform: translate3d(-50%, -50%, 0); text-transform: uppercase; font-weight: bold; text-align: center; + margin: 20px; +} +.cell .title span { font-size: 20px; - color: black; - background: white; + color: white; padding: 5px; + text-shadow: 0 1px 2px #000; } -.desktop .cell { - opacity: 0.9; - transition: opacity 0.2s; -} -.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%; - max-height: 50vh; +} +.media iframe { + margin: 10px auto; + max-height: 30vh; + max-width: 100%; +} +.media img { + display: block; + margin: 10px auto; + max-width: 100%; } .content { - text-align: left; - padding: 20px 50px; + padding: 20px; line-height: 1.5; + background: white; } .close { position: absolute; @@ -154,10 +164,6 @@ h2 { #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; } @@ -185,16 +191,11 @@ h2 { .cell { display: block; width: 100vw; - height: 20vh; - margin: 0; } #posts { margin: 0; padding: 0; } - body { - background-image: none; - } #testimonials { margin: 0; } diff --git a/public/assets/footer.jpg b/public/assets/footer.jpg new file mode 100644 index 0000000..6a485c9 Binary files /dev/null and b/public/assets/footer.jpg differ diff --git a/public/assets/geidai.png b/public/assets/geidai.png new file mode 100644 index 0000000..7dd78b6 Binary files /dev/null and b/public/assets/geidai.png differ diff --git a/public/assets/header.jpg b/public/assets/header.jpg index 3a16ef3..0839c17 100644 Binary files a/public/assets/header.jpg and b/public/assets/header.jpg differ diff --git a/public/assets/postbg.jpg b/public/assets/postbg.jpg index 9fc5c3a..61a193e 100644 Binary files a/public/assets/postbg.jpg and b/public/assets/postbg.jpg differ diff --git a/public/assets/site.js b/public/assets/site.js index eb38891..f875fee 100644 --- a/public/assets/site.js +++ b/public/assets/site.js @@ -3,6 +3,7 @@ var isIpad = !! (navigator.userAgent.match(/iPad/i)) var isAndroid = !! (navigator.userAgent.match(/Android/i)) var isMobile = isIphone || isIpad || isAndroid var isDesktop = ! isMobile +var youtubePlayer = null document.body.classList.add(isDesktop ? 'desktop' : 'mobile') @@ -17,7 +18,14 @@ $(function(){ }) }) ready() - }) + }); + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-35821710-3', 'auto'); + ga('send', 'pageview'); }) function ready() { @@ -59,6 +67,7 @@ function build(){ var entry = site.entries[id] if (! entry) return if (entry.media && entry.media.length) { + /* var media = entry.media[0] switch (media.type) { case 'youtube': @@ -68,7 +77,12 @@ function build(){ bg = media.uri break } - $(this).css('background-image', 'url(' + bg + ')') + */ + // $(this).css('background-image', 'url(' + bg + ')') + if (youtubePlayer) { + youtubePlayer.seekTo(0, true) + return youtubePlayer.playVideo() + } } }) } diff --git a/public/assets/wayshape.png b/public/assets/wayshape.png new file mode 100644 index 0000000..089f223 Binary files /dev/null and b/public/assets/wayshape.png differ diff --git a/templates/index.liquid b/templates/index.liquid index cd22794..f8df776 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -23,19 +23,26 @@ - +
{% for entry in entries %} {% unless entry.disabled %}
- {{ entry.title }} + {{ entry.title }} +
+
+ {% for media in entry.media %} + {% if media.type == 'youtube' %} + + {% else %} + + {% endif %} + {% endfor %} +
+
+ {{ entry.body | newline_to_br }}
{% endunless %} @@ -53,24 +60,30 @@ {% endunless %} {% endfor %} -
- {% for testimonial in testimonials %} - {% unless testimonial.disabled %} -
- - {{ testimonial.body | newline_to_br }} - —{{ testimonial.byline }} - -
- {% endunless %} - {% endfor %} -
-
@@ -82,6 +95,7 @@
+ -- cgit v1.2.3-70-g09d2