diff options
| -rw-r--r-- | articles/article.m4 | 2 | ||||
| -rw-r--r-- | index.m4 | 2 | ||||
| -rw-r--r-- | remarkrc | 9 | ||||
| -rwxr-xr-x | src/css/_contenu.scss | 9 | ||||
| -rwxr-xr-x | src/css/_sommaire.scss | 2 | ||||
| -rwxr-xr-x | src/css/design.scss | 17 | ||||
| -rw-r--r-- | src/js/zen.js | 28 |
7 files changed, 30 insertions, 39 deletions
diff --git a/articles/article.m4 b/articles/article.m4 index e73617c..cc27d0d 100644 --- a/articles/article.m4 +++ b/articles/article.m4 @@ -8,10 +8,12 @@ include(HEADER_HEADER) +<div id="decal_panel"> <article class="post hentry clearfix"><section> include(tmpFileNameArticle) </section> </article> +</div> include(tmp/left.htm) @@ -4,8 +4,10 @@ <!-- HEADERS --> include(tmp/headers.htm) <body> +<div id="decal_panel"> <!-- Article --> include(tmp/articles.htm) <!-- aside left column --> include(tmp/left.htm) +</div> </body></html> @@ -1,15 +1,8 @@ { "plugins": { - "remark-line-input":null, - "remark-text-input":null, - "remark-select":null, - "remark-numbered-footnotes":null, - "remark-multiple-choice":null, - "remark-special-box":null, "remark-slug":null, "remark-math":null, - "remark-toc": {"heading": "Sommaire"}, - "remark-kbd":null, + "remark-toc": {"heading": "Sommaire", "ordered": true}, "remark-highlight.js":null, "remark-rehype":{"allowDangerousHTML":true}, "remark-grid-tables":null, diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss index 6497066..b878044 100755 --- a/src/css/_contenu.scss +++ b/src/css/_contenu.scss @@ -10,6 +10,7 @@ article { padding: 1.6em 1.6em; font-family: Merriweather, "Liberation Serif", "Segoe UI"; position: relative; + max-width: 950px; ; .pubdate { position: absolute; @@ -30,8 +31,8 @@ article { @media #{$gt-gsm} { float: none; - margin-right: 7%; - margin-left: 300px; + margin-right: auto; + margin-left: auto; width: auto; font-size: 1em; @@ -45,12 +46,12 @@ article { margin-bottom: 50px; &.zen-mode { - margin-left: 7%; + margin-left: auto; transition: margin-left 0.25s ease-out 0.25s; } &.zen-mode-disabling { - margin-left: 300px; + margin-left: --(width_panel); transition: margin-left 0.5s ease-out 0.25s; } } diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss index 8c589f9..7adfad6 100755 --- a/src/css/_sommaire.scss +++ b/src/css/_sommaire.scss @@ -24,7 +24,6 @@ #side-bar { text-align: center; display: block; - width: 100%; height: auto; text-rendering: optimizelegibility; box-sizing: border-box; @@ -48,7 +47,6 @@ bottom: 0; left: 0; height: 100%; - width: 290px; transition: left 0.5s ease-in 0.25s; text-align: center; diff --git a/src/css/design.scss b/src/css/design.scss index f09d695..3bddd61 100755 --- a/src/css/design.scss +++ b/src/css/design.scss @@ -28,6 +28,23 @@ body { color: #333333; word-wrap: break-word; font-size: 16px; + + --width_panel: 100%; + @media #{$gt-gsm} { + --width_panel: 290px; + --width_panel_bis: 290px; + } + + #side-bar { + width: var(--width_panel); + left: calc(var(--width_panel_bis) - var(--width_panel); + transition: width 1s ease-in-out 1s; + transition: left 0.25s ease-out 0.25s; + } + & > div { + margin-left: calc(var(--width_panel_bis) + 10px); + transition: margin-left 0.25s ease-out 0.25s; + } } #harr { cursor: pointer; diff --git a/src/js/zen.js b/src/js/zen.js index e2e7035..05ec6b3 100644 --- a/src/js/zen.js +++ b/src/js/zen.js @@ -1,8 +1,7 @@ 'use strict'; -const articles = document.getElementsByTagName('article'); -const header = document.getElementById('side-bar'); const toggleArrow = document.getElementById('harr'); +const initValue = document.body.style.getPropertyValue('--width_panel_bis'); toggleArrow.addEventListener('click', () => { if (toggleArrow.classList.contains('hide_arrow_off')) { @@ -17,32 +16,11 @@ toggleArrow.addEventListener('click', () => { }); function hideAbout() { - if (header && !header.classList.contains('hidden')) { - header.classList.add('hidden'); - - if (articles) { - [...articles].forEach(e => { - e.classList.add('zen-mode'); - }); - } - } + document.body.style.setProperty('--width_panel_bis', '0px'); } 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(() => { - [...articles].forEach(e => { - e.classList.remove('zen-mode-disabling'); - }); - }, 1000); - } - } + document.body.style.setProperty('--width_panel_bis', initValue); } window.addEventListener('scroll', () => { |