summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorache <ache@ache.one>2021-04-06 13:34:29 +0200
committerache <ache@ache.one>2021-04-06 13:48:19 +0200
commit6c78ad2d8b71fb556f43a9f749b70b9740850d42 (patch)
treefdfc666caa631bfd1e45c150079d88f5e85889c2
parentMake all (diff)
New Zen mode
-rw-r--r--left.m44
-rw-r--r--s/img/lt.svg30
-rw-r--r--s/imgM/lt.svg1
-rwxr-xr-xsrc/css/design.scss24
-rw-r--r--src/js/zen.js55
5 files changed, 100 insertions, 14 deletions
diff --git a/left.m4 b/left.m4
index 0689480..df7b063 100644
--- a/left.m4
+++ b/left.m4
@@ -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');
+ }
});