diff --git a/cafebabel/static/css/styles.css b/cafebabel/static/css/styles.css index b5651aa9..d7499c40 100644 --- a/cafebabel/static/css/styles.css +++ b/cafebabel/static/css/styles.css @@ -2952,6 +2952,42 @@ article.article-video:before { .home a.section-link:before { font-family: 'icomoon-icons'; + position: absolute; + top: 43%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 5rem; + display: none; +} + +.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.tag-impact { + background: url('../img/bg-section-impact.jpg') center; + font-family: 'icomoon-icons'; + display: block; font-size: 5rem; } @@ -3252,6 +3288,29 @@ section[class*=' participation-'] img { font-size: 2.8rem; } + .home a.section-link { + height: 28vw; + max-height: 28rem; + font-size: 3rem; + padding-top: 30%; + } + .home svg { + width: 15rem; + } + + .home a.section-link:before { + font-size: 8rem; + } + + a.section-link.experience:before { + font-size: 7rem; + } + + .home .editors-pick article .article-detail h3 { + font-size: 4.2rem; + } + + .home .editors-pick article .article-detail p:first-of-type { display: block; } diff --git a/cafebabel/static/js/script.js b/cafebabel/static/js/script.js index 1f8c7533..ffff4e22 100644 --- a/cafebabel/static/js/script.js +++ b/cafebabel/static/js/script.js @@ -137,6 +137,19 @@ 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', () => { + if (svg.getBoundingClientRect().top < viewportHeight) { + svg.classList.add('active') + window.onscroll = null + } + }) + /* Add player if tag #video is present */ Array.from( document.querySelectorAll('article .article-detail .tags-list a.tag-video') @@ -144,4 +157,5 @@ Array.from( homepageTagList.parentNode.parentNode.parentNode.classList.add( 'article-video' ) + }) diff --git a/cafebabel/templates/home.html b/cafebabel/templates/home.html index d5bc53fb..3bfb7827 100644 --- a/cafebabel/templates/home.html +++ b/cafebabel/templates/home.html @@ -53,11 +53,93 @@ {% block body_class %}home{% endblock %} {% block body %} -
+
{% set tag_editors_pick, articles_editors_pick = articles_for_tag('editors-pick', limit=1) %} {% for article_editors_pick in articles_editors_pick %} {{ card(article_editors_pick, image_dimensions=config.RESIZE_SIZE_ARTICLE_COVER) }} {% endfor %} +
+ +

Sections

+{% for category in categories|shuffle %} + {{ 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 %} + + {{ latest("latest1", 3) }} + {{ series("meet-my-hood", 2) }} + {{ latest("latest2", 3) }}
{% if current_language == 'en' %}

Latest