diff options
author | ache <ache@ache.one> | 2021-04-06 13:34:29 +0200 |
---|---|---|
committer | ache <ache@ache.one> | 2021-04-06 13:48:19 +0200 |
commit | 6c78ad2d8b71fb556f43a9f749b70b9740850d42 (patch) | |
tree | fdfc666caa631bfd1e45c150079d88f5e85889c2 | |
parent | Make all (diff) |
New Zen mode
-rw-r--r-- | left.m4 | 4 | ||||
-rw-r--r-- | s/img/lt.svg | 30 | ||||
-rw-r--r-- | s/imgM/lt.svg | 1 | ||||
-rwxr-xr-x | src/css/design.scss | 24 | ||||
-rw-r--r-- | src/js/zen.js | 55 |
5 files changed, 100 insertions, 14 deletions
@@ -1,3 +1,6 @@ +<nav tabindex="0" id="harr" class="hide_arrow"> +include(s/imgM/lt.svg) +</nav> <aside id="side-bar"> include(s/imgM/acheLogo.svg) <h2> Ache </h2> @@ -15,7 +18,6 @@ include(s/imgM/acheLogo.svg) </a> 🚧 En cours 🚧 </div> - <nav id="ontheweb"> <ul> <li class="about_bar"><a href="https://twitter.com/arobase_che" title="Mon twitter abandonné"> diff --git a/s/img/lt.svg b/s/img/lt.svg new file mode 100644 index 0000000..253bca5 --- /dev/null +++ b/s/img/lt.svg @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + viewBox="0 -256 1792 1792" + version="1.1" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)" + width="70px" + height="70px" + sodipodi:docname="lt.svg"> + <g id="glob"> + <path + fill="orange" + opacity="0.4" + stroke="orange" + stroke-width="5" + d="m 627,992 q 0,-13 -10,-23 L 224,576 617,183 q 10,-10 10,-23 0,-13 -10,-23 L 567,87 Q 557,77 544,77 531,77 521,87 L 55,553 q -10,10 -10,23 0,13 10,23 l 466,466 q 10,10 23,10 13,0 23,-10 l 50,-50 q 10,-10 10,-23 z" + id="lt" + inkscape:connector-curvature="0"> + + <animate id="grow" attributeName="stroke-width" values="5;75;5" dur="0.5s" begin="0s;wait.end"/> + <animate id="wait" attributeName="stroke-width" values="5;5" dur="1.5s" begin="grow.end"/> + </path> + </g> +</svg> diff --git a/s/imgM/lt.svg b/s/imgM/lt.svg new file mode 100644 index 0000000..7178909 --- /dev/null +++ b/s/imgM/lt.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792" width="70" height="70"><g id="glob"><path fill="orange" opacity=".4" stroke="orange" stroke-width="5" d="M627 992q0-13-10-23L224 576l393-393q10-10 10-23t-10-23l-50-50q-10-10-23-10t-23 10L55 553q-10 10-10 23t10 23l466 466q10 10 23 10t23-10l50-50q10-10 10-23z" id="lt"><animate id="grow" attributeName="stroke-width" values="5;75;5" dur="0.5s" begin="0s;wait.end"/><animate id="wait" attributeName="stroke-width" values="5;5" dur="1.5s" begin="grow.end"/></path></g></svg>
\ No newline at end of file diff --git a/src/css/design.scss b/src/css/design.scss index 930059c..43f4798 100755 --- a/src/css/design.scss +++ b/src/css/design.scss @@ -19,6 +19,30 @@ body { word-wrap: break-word; font-size: 16px; } +#harr { + cursor: pointer; +} +.hide_arrow { + position: fixed; + display: none; + top: 30%; + left: 303px; +} +.hide_arrow_show { + @media #{$gt-gsm} { + display: block; + } +} +.hide_arrow_off { + top: 30%; + left: 3px; + + + -moz-transform: scaleX(-1); /* Gecko */ + -o-transform: scaleX(-1); /* Opera */ + -webkit-transform: scaleX(-1); /* Webkit */ + transform: scaleX(-1); /* Standard */ +} #body_c { background-repeat: no-repeat; background-position: top left; diff --git a/src/js/zen.js b/src/js/zen.js index b3177bc..e2e7035 100644 --- a/src/js/zen.js +++ b/src/js/zen.js @@ -1,31 +1,60 @@ 'use strict'; -window.addEventListener('scroll', () => { - const articles = document.getElementsByTagName('article'); - const header = document.getElementById('side-bar'); +const articles = document.getElementsByTagName('article'); +const header = document.getElementById('side-bar'); +const toggleArrow = document.getElementById('harr'); - if (window.pageYOffset >= 500) { - if (header && !header.classList.contains('hidden')) { - header.classList.add('hidden'); +toggleArrow.addEventListener('click', () => { + if (toggleArrow.classList.contains('hide_arrow_off')) { + showAbout(); + setTimeout(() => { + toggleArrow.classList.remove('hide_arrow_off'); + }, 1000); + } else { + toggleArrow.classList.add('hide_arrow_off'); + hideAbout(); + } +}); - if (articles) { - [...articles].forEach(e => { - e.classList.add('zen-mode'); - }); - } +function hideAbout() { + if (header && !header.classList.contains('hidden')) { + header.classList.add('hidden'); + + if (articles) { + [...articles].forEach(e => { + e.classList.add('zen-mode'); + }); } - } else if (header && header.classList.contains('hidden')) { + } +} + +function showAbout() { + if (header && header.classList.contains('hidden')) { header.classList.remove('hidden'); if (articles) { [...articles].forEach(e => { e.classList.remove('zen-mode'); e.classList.add('zen-mode-disabling'); }); - setTimeout(function() { + setTimeout(() => { [...articles].forEach(e => { e.classList.remove('zen-mode-disabling'); }); }, 1000); } } +} + +window.addEventListener('scroll', () => { + const toggleArrow = document.getElementById('harr'); + + if (window.pageYOffset >= 800) { + if (toggleArrow) { + toggleArrow.classList.add('hide_arrow_show'); + } + // A hideAbout(header, articles); + } else if (toggleArrow && !toggleArrow.classList.contains('hide_arrow_off')) { + // A showAbout(header, articles); + toggleArrow.classList.remove('hide_arrow_show'); + } }); |