diff options
| -rw-r--r-- | public/assets/css.css | 103 | ||||
| -rw-r--r-- | public/assets/header.jpg | bin | 0 -> 82629 bytes | |||
| -rw-r--r-- | public/assets/postbg.jpg | bin | 0 -> 257408 bytes | |||
| -rw-r--r-- | public/assets/site.js | 2 | ||||
| -rw-r--r-- | public/assets/testimonials.jpg | bin | 0 -> 113254 bytes | |||
| -rw-r--r-- | templates/index.liquid | 26 |
6 files changed, 96 insertions, 35 deletions
diff --git a/public/assets/css.css b/public/assets/css.css index 20e8056..46057a8 100644 --- a/public/assets/css.css +++ b/public/assets/css.css @@ -16,35 +16,48 @@ body.entry, body.submit { overflow: hidden; } - +body { + background-image: url(postbg.jpg); + background-size: cover; + background-position: center center; + background-attachment: fixed; +} a { - color: #2947f3 + color: #2947f3; } - #header { width: 100%; margin: 0; background: #fff; - padding: 10px 0; - box-shadow: 0 5px 10px #ddd; + 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; } -#testimonials { - margin-top: 15px; - box-shadow: 0 -5px 10px 0px #ddd; -} #footer { width: 100%; margin: 0; - background: #fff; padding: 10px 0; - margin-top: 15px; - box-shadow: 0 -5px 10px #ddd; + padding-top: 15px; + height: 300px; } h1, h2 { font-weight: 300; + background: white; + padding: 5px; + display: inline-block; +} +h2 { + box-shadow: 0 2px 4px rgba(0,0,0,0.2); } +.desktop h2:hover { + background: #ff0; +} + +/* MODALS */ #about, #entry, #submit { position: fixed; @@ -75,10 +88,16 @@ h1, h2 { pointer-events: auto; } +/* GRID OF POSTS */ + +#posts { + padding: 40px 0; +} .cell { display: inline-block; - width: 24vw; + width: 26vw; height: 23vw; + margin: 2vw; color: white; cursor: pointer; background-size: cover; @@ -104,6 +123,11 @@ h1, h2 { .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%; @@ -114,8 +138,26 @@ h1, h2 { padding: 20px 50px; line-height: 1.5; } +.close { + position: absolute; + top: 10px; + right: 10px; + padding: 5px; + font-size: 24px; + background: white; + border: 2px solid; + cursor: pointer; +} + +/* TESTIMONIALS */ -.testimonials { +#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; } @@ -131,26 +173,29 @@ h1, h2 { width: 400px; max-width: 90vw; font-style: italic; + background: white; + padding: 10px 15px; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); + line-height: 1.5; } -.cell:nth-child(2n+1) { background-color: #4f658e; } -.cell:nth-child(2n+2) { background-color: #7a7067; } - -.close { - position: absolute; - top: 10px; - right: 10px; - padding: 5px; - font-size: 24px; - color: white; - background: black; - border: 2px solid; - cursor: pointer; -} +/* MOBILE STYLES */ @media (max-width: 700px) { .cell { + display: block; width: 100vw; height: 20vh; + margin: 0; + } + #posts { + margin: 0; + padding: 0; } -}
\ No newline at end of file + body { + background-image: none; + } + #testimonials { + margin: 0; + } +} diff --git a/public/assets/header.jpg b/public/assets/header.jpg Binary files differnew file mode 100644 index 0000000..3a16ef3 --- /dev/null +++ b/public/assets/header.jpg diff --git a/public/assets/postbg.jpg b/public/assets/postbg.jpg Binary files differnew file mode 100644 index 0000000..9fc5c3a --- /dev/null +++ b/public/assets/postbg.jpg diff --git a/public/assets/site.js b/public/assets/site.js index 61b7da6..eb38891 100644 --- a/public/assets/site.js +++ b/public/assets/site.js @@ -46,7 +46,7 @@ function bind(){ var gallery = new Flickity( "#testimonials", { cellSelector: '.testimonial', wrapAround: true, - prevNextButtons: true, + prevNextButtons: false, pageDots: false, setGallerySize: false, draggable: true, diff --git a/public/assets/testimonials.jpg b/public/assets/testimonials.jpg Binary files differnew file mode 100644 index 0000000..75103bb --- /dev/null +++ b/public/assets/testimonials.jpg diff --git a/templates/index.liquid b/templates/index.liquid index 46ed396..9e6bd49 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -1,20 +1,36 @@ <!doctype html> <html> <head> -<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'> + <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> <div id='header'> <h1>How to make a Folkestone.</h1> + <br> <a href="https://docs.google.com/forms/d/10dqrK_3UZW_xlPWQLERd0xTwVONryyicNuz2aYz3X_I/edit?c=0&w=1"><h2>Participate!</h2></a> <div id='tags'></div> </div> -<br> -<div id='body'> +<div id='posts'> {% for entry in entries %} {% unless entry.disabled %} <div class='cell' data-id='{{ entry.id }}'> |
