From 548d4c49f5268dd70729474c40dbcc96246fc48c Mon Sep 17 00:00:00 2001 From: cafebabel-webmaster Date: Fri, 9 Mar 2018 16:04:17 +0100 Subject: [PATCH 1/4] add animated svg on category display homepage --- cafebabel/static/css/styles.css | 31 +++++++++++++- cafebabel/static/js/script.js | 10 +++++ cafebabel/templates/home.html | 74 ++++++++++++++++++++++++++++++++- 3 files changed, 113 insertions(+), 2 deletions(-) diff --git a/cafebabel/static/css/styles.css b/cafebabel/static/css/styles.css index ba0fa0bf..9333148f 100644 --- a/cafebabel/static/css/styles.css +++ b/cafebabel/static/css/styles.css @@ -2119,7 +2119,7 @@ a.creative:before { max-height: 52rem; background-color: aliceblue; text-align: center; - padding-top: 55%; + padding-top: 15%; font-family: 'sporting_grotesque', sans-serif; font-size: 5vw; bottom: 0; @@ -2137,12 +2137,37 @@ a.creative:before { left: 50%; transform: translate(-50%, -50%); font-size: 5rem; + display: none; } .home a.section-link:hover:after { width: 0; } +.home svg { + width: 13rem; +} + +.home svg path { + display: none; +} + +.home .active svg path { + display: block; + stroke-dasharray: 400%; + stroke-dashoffset: 10%; + animation: impact 3s linear 1; +} + +@keyframes impact { + from { + stroke-dashoffset: 400%; + } + to { + stroke-dashoffset: 0; + } +} + a.section-link.impact { background: url('../img/bg-section-impact.jpg') center; } @@ -2220,6 +2245,10 @@ a.section-link.creative { height: 28vw; max-height: 38rem; font-size: 3rem; + padding-top: 30%; + } + .home svg { + width: 15rem; } .home a.section-link:before { font-size: 8rem; diff --git a/cafebabel/static/js/script.js b/cafebabel/static/js/script.js index 7d1676a1..205bb5aa 100644 --- a/cafebabel/static/js/script.js +++ b/cafebabel/static/js/script.js @@ -113,3 +113,13 @@ Array.from(document.querySelectorAll('h1.edit input')).forEach(inputh1 => { () => inputh1.value || h1.classList.remove('active') ) }) + +/* animation picto sections */ +Array.from(document.querySelectorAll('.svg-animation')).forEach(svg => { + window.addEventListener('scroll', function() { + if (svg.getBoundingClientRect().top < 600) { + svg.classList.add('active') + window.onscroll = null + } + }) +}) diff --git a/cafebabel/templates/home.html b/cafebabel/templates/home.html index 103269a4..77142082 100644 --- a/cafebabel/templates/home.html +++ b/cafebabel/templates/home.html @@ -31,7 +31,79 @@

Newest

Sections

{% for category in categories %} - {{ category.name }} + +
+ {% if category.slug == 'impact' %} + + + + + + {% endif %} + {% if category.slug == 'creative' %} + + + + + + + + + {% endif %} + {% if category.slug == 'raw' %} + + + + + + + + + + {% endif %} + {% if category.slug == 'experience' %} + + + + + + + + + {% endif %} +
+ {{ category.name }} + {% endfor %} {% if articles|length > 1 %} From d457cd071a42183c58ade31af23c4cbca1949e7c Mon Sep 17 00:00:00 2001 From: cafebabel-webmaster Date: Thu, 15 Mar 2018 18:17:18 +0100 Subject: [PATCH 2/4] change 600 to viewport height + syntax correction for consistency --- cafebabel/static/js/script.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/cafebabel/static/js/script.js b/cafebabel/static/js/script.js index cd2ec8a7..9929ab05 100644 --- a/cafebabel/static/js/script.js +++ b/cafebabel/static/js/script.js @@ -115,9 +115,13 @@ Array.from(document.querySelectorAll('h1.edit input')).forEach(inputh1 => { }) /* animation picto sections */ +const viewportHeight = Math.max( + document.documentElement.clientHeight, + window.innerHeight || 0 +) /* https://stackoverflow.com/a/8876069/6481285 */ Array.from(document.querySelectorAll('.svg-animation')).forEach(svg => { - window.addEventListener('scroll', function() { - if (svg.getBoundingClientRect().top < 600) { + window.addEventListener('scroll', () => { + if (svg.getBoundingClientRect().top < viewportHeight) { svg.classList.add('active') window.onscroll = null } From 1e24ef9bf4340998dea4acb5342da5f6a88c34b8 Mon Sep 17 00:00:00 2001 From: cafebabel-webmaster Date: Thu, 15 Mar 2018 18:20:16 +0100 Subject: [PATCH 3/4] remove duplicated section name --- cafebabel/templates/home.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cafebabel/templates/home.html b/cafebabel/templates/home.html index 348986d3..b7ad74d2 100644 --- a/cafebabel/templates/home.html +++ b/cafebabel/templates/home.html @@ -31,7 +31,7 @@

Newest

Sections

{% for category in categories %} - {{ category.name }} +
{% if category.slug == 'impact' %} Date: Fri, 16 Mar 2018 12:45:15 +0100 Subject: [PATCH 4/4] fill color blue --- cafebabel/templates/home.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cafebabel/templates/home.html b/cafebabel/templates/home.html index 3abe4912..bb1812b5 100644 --- a/cafebabel/templates/home.html +++ b/cafebabel/templates/home.html @@ -90,7 +90,7 @@

Sections

-