diff options
| -rw-r--r-- | public/assets/css.css | 76 | ||||
| -rw-r--r-- | public/assets/site.js | 15 | ||||
| -rw-r--r-- | templates/index.liquid | 28 |
3 files changed, 95 insertions, 24 deletions
diff --git a/public/assets/css.css b/public/assets/css.css index 51a750e..59a4c68 100644 --- a/public/assets/css.css +++ b/public/assets/css.css @@ -4,6 +4,10 @@ html,body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + font-family: sans-serif; + font-weight: 300; + text-align: center; + background: #fff; } body.about, body.entry, @@ -11,13 +15,43 @@ body.submit { overflow: hidden; } +a { + color: #2947f3 +} + +#header { + width: 100%; + margin: 0; + background: #fff; + padding: 10px; + box-shadow: 0 5px 10px #ddd; +} + +h1, h2 { + font-weight: 300; +} + #about, #entry, #submit { position: fixed; top: 0; left: 0; - width: 100%; height: 100%; - background: #fff; + width: 100%; + height: 100%; pointer-events: none; opacity: 0; + background: rgba(105,135,195,0.8); + transition: opacity 0.2s; + cursor: pointer; +} +.inner { + cursor: normal; + position: absolute; + top: 50%; left: 50%; + min-width: 400px; + max-width: 80vw; + height: 80vh; + padding: 10px; + transform: translate3d(-50%, -50%, 0); + background: #fff; } .about #about, .entry #entry, @@ -26,28 +60,48 @@ body.submit { pointer-events: auto; } -#header { - width: 100%; -} - .cell { display: inline-block; - width: 25vw; - height: 20vw; + width: 24vw; + height: 23vw; color: white; - text-shadow: 0 0 2px #000; cursor: pointer; background-size: cover; background-position: center center; + position: relative; +} +.cell .title { + position: absolute; + top: 50%; left: 50%; + transform: translate3d(-50%, -50%, 0); + text-transform: uppercase; + font-weight: bold; + text-align: center; + font-size: 20px; + color: black; + background: white; + padding: 5px; +} +.desktop .cell { + opacity: 0.9; + transition: opacity 0.2s; +} +.desktop .cell:hover { + opacity: 1; } .media { width: 100%; max-height: 50vh; } +.content { + text-align: left; + padding: 20px 50px; + line-height: 1.5; +} -.cell:nth-child(2n+1) { background-color: #ddd; } -.cell:nth-child(2n+2) { background-color: #eee; } +.cell:nth-child(2n+1) { background-color: #4f658e; } +.cell:nth-child(2n+2) { background-color: #7a7067; } .close { position: absolute; diff --git a/public/assets/site.js b/public/assets/site.js index ff109da..215df11 100644 --- a/public/assets/site.js +++ b/public/assets/site.js @@ -27,6 +27,12 @@ function bind(){ $('.close').click( function(){ close_modals() }) + $('.page, #entry').click( function(){ + close_modals() + }) + $('.inner').click( function(e){ + e.stopPropagation() + }) $('.tag').click( function(){ var tag = $(this).html() filter_by_tag(tag) @@ -74,4 +80,11 @@ function close_modals(){ $('body').removeClass('entry').removeClass('about') } -function newlineToBr(s){ return s.replace(/\n/g,'<br>') }
\ No newline at end of file +function newlineToBr(s){ return s.replace(/\n/g,'<br>') } +var isIphone = !! (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) +var isIpad = !! (navigator.userAgent.match(/iPad/i)) +var isAndroid = !! (navigator.userAgent.match(/Android/i)) +var isMobile = isIphone || isIpad || isAndroid +var isDesktop = ! isMobile + +document.body.classList.add(isDesktop ? 'desktop' : 'mobile')
\ No newline at end of file diff --git a/templates/index.liquid b/templates/index.liquid index eea39fe..2756620 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -6,39 +6,43 @@ </head> <body> -<center> <div id='header'> <h1>How to make a Folkestone.</h1> - <a href="https://docs.google.com/forms/d/10dqrK_3UZW_xlPWQLERd0xTwVONryyicNuz2aYz3X_I/edit?c=0&w=1"<h2>Participate!</h2></a> + <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></center> +</div> <br> -<center> <div id='body'> {% for entry in entries %} {% unless entry.disabled %} <div class='cell' data-id='{{ entry.id }}'> - {{ entry.title }} + <div class='title'> + {{ entry.title }} + </div> </div> {% endunless %} {% endfor %} -</div></center> +</div> {% for page in pages %} {% unless page.disabled %} <div id='{{ page.id }}' class='page'> - <h2>{{ page.title }}</h2> - {{ page.body | newline_to_br }} + <div class='inner'> + <h2>{{ page.title }}</h2> + {{ page.body | newline_to_br }} + </div> </div> {% endunless %} {% endfor %} <div id='entry'> - <div class='close'>×</div> - <div class='media'></div> - <h2></h2> - <div class='content'></div> + <div class='inner'> + <div class='close'>×</div> + <div class='media'></div> + <h2></h2> + <div class='content'></div> + </div> </div> </body> |