From 2b1fe8184068141677c2141eaea1b3dde7447dbf Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 23 Aug 2017 15:07:32 +0200 Subject: some styling --- public/assets/css.css | 76 ++++++++++++++++++++++++++++++++++++++++++-------- public/assets/site.js | 15 +++++++++- 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,'
') } \ No newline at end of file +function newlineToBr(s){ return s.replace(/\n/g,'
') } +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 @@ -
+
-
{% for entry in entries %} {% unless entry.disabled %}
- {{ entry.title }} +
+ {{ entry.title }} +
{% endunless %} {% endfor %} -
+ {% for page in pages %} {% unless page.disabled %}
-

{{ page.title }}

- {{ page.body | newline_to_br }} +
+

{{ page.title }}

+ {{ page.body | newline_to_br }} +
{% endunless %} {% endfor %}
-
×
-
-

-
+
+
×
+
+

+
+
-- cgit v1.2.3-70-g09d2