From 92625d2fb9bc9b4618309993571144c50e8fb73c Mon Sep 17 00:00:00 2001 From: isUnknown Date: Sun, 7 Apr 2024 11:09:43 +0200 Subject: [PATCH] new nav buttons --- assets/css/src/header.css | 2 +- assets/css/src/nav.css | 41 ++++ assets/css/src/tabs.css | 2 +- assets/css/style.css | 1 + assets/dist/style.css | 475 +++++++++++++++++++++++++++++++++++++- assets/js/script.js | 33 ++- site/snippets/header.php | 18 +- site/snippets/nav.php | 4 + site/snippets/tabs.php | 6 +- site/templates/home.php | 2 +- site/templates/linear.php | 7 +- 11 files changed, 552 insertions(+), 39 deletions(-) create mode 100644 assets/css/src/nav.css create mode 100644 site/snippets/nav.php diff --git a/assets/css/src/header.css b/assets/css/src/header.css index c0d5005..7367192 100644 --- a/assets/css/src/header.css +++ b/assets/css/src/header.css @@ -47,7 +47,7 @@ margin-top: calc(var(--unit--vertical-relative) * 19); } -#home .page-cover { +[data-template="home"] .page-cover { padding-top: calc(var(--unit--vertical-relative) * 6); } diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css new file mode 100644 index 0000000..058d4f1 --- /dev/null +++ b/assets/css/src/nav.css @@ -0,0 +1,41 @@ +#entries { + position: sticky; + top: calc(var(--unit--vertical) * 8); + display: flex; + justify-content: space-between; +} + +.entry-btn { + transition: all 0.5s var(--curve-sine); +} + +[data-template="linear"] #entries { + transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4)); +} + +.entry-btn--left::after, +.entry-btn--right::before { + transition: all 0.5s var(--curve-sine); + content: "+"; +} +.entry-btn--left::after { + margin-left: var(--unit--horizontal); +} +.entry-btn--right::before { + margin-right: var(--unit--horizontal); +} + +#entries.minimized { + color: var(--color-secondary); +} +#entries.minimized .entry-btn::before, +#entries.minimized .entry-btn::after { + font-weight: bold; +} + +#entries.minimized .entry-btn--left { + margin-left: calc(-4px - var(--width)); +} +#entries.minimized .entry-btn--right { + margin-right: calc(-4px - var(--width)); +} diff --git a/assets/css/src/tabs.css b/assets/css/src/tabs.css index b31c8ec..b881ca1 100644 --- a/assets/css/src/tabs.css +++ b/assets/css/src/tabs.css @@ -89,7 +89,7 @@ button.toggle.right.open::before { } @media screen and (min-width: 640px) { - #home #tabs { + [data-template="home"] #tabs { margin-top: calc(0px - (10 * var(--unit--vertical))); } button.toggle.left::after { diff --git a/assets/css/style.css b/assets/css/style.css index 58311db..543f0a6 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -5,6 +5,7 @@ @import url("src/texts.css"); @import url("src/header.css"); @import url("src/tabs.css"); +@import url("src/nav.css"); @import url("src/home.css"); @import url("src/linear.css"); @import url("src/footer.css"); diff --git a/assets/dist/style.css b/assets/dist/style.css index 18ed273..ee8585d 100644 --- a/assets/dist/style.css +++ b/assets/dist/style.css @@ -1 +1,474 @@ -body,h1,h2,h3,h4,h5,html,p,ul{margin:0;padding:0}button{background:none;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}a,button{color:inherit}a{text-decoration:none}li{list-style-type:none}:root{--color-background:#000;--color-primary:#fff;--color-primary--transparent:hsla(0,0%,100%,.86);--color-secondary:rgba(120,171,150,.86);--color-secondary--light:rgba(119,177,157,.2);--color-secondary--x-light:rgba(119,177,157,.1);--unit--horizontal:5vw;--unit--vertical:1.7rem;--unit--vertical-relative:calc(var(--unit--vertical) * var(--window-height-factor));--font-size-s:0.8rem;--font-size-m:calc(var(--font-size-s) * 1.5);--font-size-l:calc(var(--font-size-m) * 1.5);--font-size-xl:calc(var(--font-size-l) * 1.5);--font-size-xxl:calc(var(--font-size-xl) * 1.5);--font-weight-light:200;--font-weight-bold:400;--font-weight-extra-bold:550}@media screen and (min-width:640px){:root{--color-background:#000;--color-primary:#fff;--color-primary--transparent:hsla(0,0%,100%,.86);--color-secondary:rgba(120,171,150,.86);--color-secondary--light:rgba(119,177,157,.25);--color-secondary--x-light:rgba(119,177,157,.15);--unit--horizontal:5vw;--unit--vertical:1.7rem;--font-size-s:0.9rem;--font-size-m:calc(var(--font-size-s) * 1.5);--font-size-l:calc(var(--font-size-m) * 1.5);--font-size-xl:calc(var(--font-size-l) * 1.5);--font-size-xxl:calc(var(--font-size-xl) * 1.5);--font-weight-light:200;--font-weight-bold:400;--font-weight-extra-bold:550}}body{box-sizing:border-box;padding:0 var(--unit--horizontal);background-color:var(--color-background);color:var(--color-primary)}body,main{position:relative}hr{height:calc(var(--unit--vertical) / 2);border:none;background-color:var(--color-primary);width:calc(var(--unit--horizontal) * 4);margin:calc(var(--unit--vertical) * 2) calc(var(--unit--horizontal))}nav hr{background-color:var(--color-background);margin-left:0}body,html{scroll-behavior:smooth}*{scrollbar-width:thin;scrollbar-color:transparent transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:transparent;border-radius:0;border:none}@media screen and (min-width:640px){body{padding:0 calc(6 * var(--unit--horizontal))}}.hidden{display:none}.grid{background-size:var(--unit--horizontal) var(--unit--vertical);background-image:linear-gradient(90deg,var(--color-secondary--x-light) 1px,transparent 0),linear-gradient(180deg,var(--color-secondary--light) 1px,transparent 0),linear-gradient(180deg,var(--color-secondary--x-light) 1px,transparent 0);background-position:0 0,0 0,0 calc(var(--unit--vertical) / 2);background-attachment:fixed}.left:not(.padding){margin-left:calc(var(--unit--horizontal) * var(--left))}.padding.left{padding-left:calc(var(--unit--horizontal) * var(--left))}.top:not(.padding){margin-top:calc(var(--unit--vertical) * var(--top))}.padding.top{padding-top:calc(var(--unit--vertical) * var(--top))}.right:not(.padding){margin-right:calc(var(--unit--horizontal) * var(--right))}.padding.right{padding-right:calc(var(--unit--horizontal) * var(--right))}.bottom:not(.padding){margin-bottom:calc(var(--unit--vertical) * var(--bottom))}.padding.bottom{padding-bottom:calc(var(--unit--vertical) * var(--bottom))}.full-width{width:100%}.width{width:calc(var(--unit--horizontal) * var(--width))}.flex{display:flex;justify-content:var(--content);align-items:var(--align);gap:calc(var(--gap) * var(--unit--horizontal))}.flex.column{flex-direction:column}.color{color:var(--color)}.opacity{opacity:var(--opacity)}@font-face{font-family:Switzer-Variable;src:url(/assets/fonts/Switzer-Variable.woff2) format("woff2"),url(/assets/fonts/Switzer-Variable.woff) format("woff"),url(/assets/fonts/Switzer-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap;font-style:normal}.accent{color:var(--color-secondary);font-weight:400}*{font-family:Switzer-Variable,sans-serif}#logo *{font-size:25vw;line-height:4rem;transform:translate(-2px,-13px);font-weight:var(--font-weight-extra-bold)}h1,h2,h3,h4,h5,p{font-weight:var(--font-weight-light);line-height:1}h2{font-size:var(--font-size-xl)}article h2{margin-bottom:calc(var(--unit--vertical) / 2)}.title-center{--margin-left:calc(4 * var(--unit--horizontal));width:calc(100% - var(--margin-left));margin-left:var(--margin-left);font-size:var(--font-size-l);line-height:var(--unit--vertical)}.main-title{line-height:calc(var(--unit--vertical) * 2);text-align:left;box-sizing:border-box;font-weight:var(--font-weight-light);margin-bottom:var(--unit--vertical)}.texts__title{font-size:var(--font-size-l)}.fs-m,button,li,p{transform:translateY(calc(var(--unit--vertical) * .12));font-size:var(--font-size-m);line-height:calc(var(--unit--vertical))}.fs-s{font-size:var(--font-size-s)!important}.fs-m{font-size:var(--font-size-m)!important}.fs-l{font-size:var(--font-size-l)!important}.fs-xl{font-size:var(--font-size-xl)!important;line-height:calc(var(--unit--vertical) * 1.5)!important}.fs-xxl{font-size:var(--font-size-xxl)!important;line-height:calc(var(--unit--vertical) * 2.5)!important}.fw-light,button,li,p{font-weight:var(--font-weight-light)}.fw-bold{font-weight:var(--font-weight-bold)}.fw-extra-bold{font-weight:var(--font-weight-extra-bold)}.f-inherit{font-size:inherit;line-height:inherit;font-weight:inherit}.ta-center{text-align:center}p{transform:translateY(3px)}button{display:flex;align-items:center}a *{transition:font .2s ease-in-out}a.no-line:hover *{font-weight:250}a:not(.no-line):hover{text-decoration:none}a:not(.no-line){text-decoration:underline;text-decoration-color:inherit;text-decoration-line:underline;text-underline-offset:.2rem;text-decoration-thickness:.5px}article p:not(:last-child){margin-bottom:var(--unit--vertical)}@media screen and (min-width:640px){.title-center{margin-left:calc(2 * var(--unit--horizontal))}}#main-header{position:fixed;z-index:1;top:0;left:0;box-sizing:border-box;width:100vw;height:calc(var(--unit--vertical) * 5);padding:var(--unit--vertical) var(--unit--horizontal);transition:height .2s ease-in-out}#logo{position:relative}#main-header.open #actuel{color:var(--color-background)}#logo #actuel{color:var(--color-primary--transparent);position:relative;z-index:1}#logo #inactuel{position:absolute;z-index:0;color:var(--color-secondary);bottom:-48%;transition:bottom .2s ease-in-out}#main-header.minimized #logo #inactuel{bottom:0}.page-cover{position:relative;box-sizing:border-box;height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(var(--unit--vertical-relative) * 5);padding-bottom:calc(5 * var(--unit--vertical))}.page-cover.open+*{margin-top:calc(var(--unit--vertical-relative) * 19)}#home .page-cover{padding-top:calc(var(--unit--vertical-relative) * 6)}#category .page-cover{height:auto;padding-bottom:0;margin-bottom:calc(2 * var(--unit--vertical))}#category .active-tab{max-height:none}@media screen and (min-width:640px){#main-header{display:flex;justify-content:center}#logo{width:37vw}#logo *{font-size:11vw}#main-header.minimized{height:calc(var(--unit--vertical) * 4.3)}.page-cover{padding:calc(10 * var(--unit--vertical)) 0}}.toggle-btns{position:sticky}button.toggle.open:not(.see-more){font-weight:700}button.toggle.left:after{margin-left:var(--unit--horizontal)}button.toggle.left.close:after{content:"+"}button.toggle.left.open:after{content:"-"}button.toggle.right:before{margin-right:var(--unit--horizontal)}button.toggle.right.close:before{content:"+"}button.toggle.right.open:before{content:"-"}#tabs{position:absolute;width:100%;z-index:1;bottom:calc(var(--unit--vertical-relative) * 4)}.active-tab{position:absolute;max-height:calc(var(--unit--vertical-relative) * 17);overflow:auto;transition:max-height .5s ease-in-out;padding:var(--unit--vertical) 0;scrollbar-width:thin;scrollbar-color:#fff transparent}.active-tab::-webkit-scrollbar{width:3px;height:auto}.active-tab::-webkit-scrollbar-track{background:transparent}.active-tab::-webkit-scrollbar-thumb{background-color:#fff;border-radius:1px;border:none}.texts__year.short .year__edito{display:-webkit-box;-webkit-line-clamp:5;overflow:hidden}.texts__year .see-more{width:100%;margin-top:calc(var(--unit--vertical) / 2)}@media screen and (min-width:640px){#home #tabs{margin-top:calc(0px - (10 * var(--unit--vertical)))}button.toggle.left:after{margin-left:calc(var(--unit--horizontal) / 2)}button.toggle.right:before{margin-right:calc(var(--unit--horizontal) / 2)}}.article-header .title-wrapper{--margin-left:2;width:calc(100% - (var(--margin-left) * var(--unit--horizontal)));padding-left:calc(var(--margin-left) * var(--unit--horizontal))}#main-footer{position:fixed;left:0;bottom:0;width:calc(18 * var(--unit--horizontal));padding:var(--unit--horizontal)}#main-footer a{text-shadow:0 0 2px #000;-moz-text-shadow:0 0 2px #000;-webkit-text-shadow:0 0 2px #000}@media screen and (min-width:640px){#main-footer{padding:calc(var(--unit--horizontal) / 2) var(--unit--horizontal)}} \ No newline at end of file +body, +h1, +h2, +h3, +h4, +h5, +html, +p, +ul { + margin: 0; + padding: 0; +} +button { + background: none; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; +} +a, +button { + color: inherit; +} +a { + text-decoration: none; +} +li { + list-style-type: none; +} +:root { + --color-background: #000; + --color-primary: #fff; + --color-primary--transparent: hsla(0, 0%, 100%, 0.86); + --color-secondary: rgba(120, 171, 150, 0.86); + --color-secondary--light: rgba(119, 177, 157, 0.2); + --color-secondary--x-light: rgba(119, 177, 157, 0.1); + --unit--horizontal: 5vw; + --unit--vertical: 1.7rem; + --unit--vertical-relative: calc( + var(--unit--vertical) * var(--window-height-factor) + ); + --font-size-s: 0.8rem; + --font-size-m: calc(var(--font-size-s) * 1.5); + --font-size-l: calc(var(--font-size-m) * 1.5); + --font-size-xl: calc(var(--font-size-l) * 1.5); + --font-size-xxl: calc(var(--font-size-xl) * 1.5); + --font-weight-light: 200; + --font-weight-bold: 400; + --font-weight-extra-bold: 550; +} +@media screen and (min-width: 640px) { + :root { + --color-background: #000; + --color-primary: #fff; + --color-primary--transparent: hsla(0, 0%, 100%, 0.86); + --color-secondary: rgba(120, 171, 150, 0.86); + --color-secondary--light: rgba(119, 177, 157, 0.25); + --color-secondary--x-light: rgba(119, 177, 157, 0.15); + --unit--horizontal: 5vw; + --unit--vertical: 1.7rem; + --font-size-s: 0.9rem; + --font-size-m: calc(var(--font-size-s) * 1.5); + --font-size-l: calc(var(--font-size-m) * 1.5); + --font-size-xl: calc(var(--font-size-l) * 1.5); + --font-size-xxl: calc(var(--font-size-xl) * 1.5); + --font-weight-light: 200; + --font-weight-bold: 400; + --font-weight-extra-bold: 550; + } +} +body { + box-sizing: border-box; + padding: 0 var(--unit--horizontal); + background-color: var(--color-background); + color: var(--color-primary); +} +body, +main { + position: relative; +} +hr { + height: calc(var(--unit--vertical) / 2); + border: none; + background-color: var(--color-primary); + width: calc(var(--unit--horizontal) * 4); + margin: calc(var(--unit--vertical) * 2) calc(var(--unit--horizontal)); +} +nav hr { + background-color: var(--color-background); + margin-left: 0; +} +body, +html { + scroll-behavior: smooth; +} +* { + scrollbar-width: thin; + scrollbar-color: transparent transparent; +} +::-webkit-scrollbar { + width: 6px; + height: 6px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + background-color: transparent; + border-radius: 0; + border: none; +} +@media screen and (min-width: 640px) { + body { + padding: 0 calc(6 * var(--unit--horizontal)); + } +} +.hidden { + display: none; +} +.grid { + background-size: var(--unit--horizontal) var(--unit--vertical); + background-image: linear-gradient( + 90deg, + var(--color-secondary--x-light) 1px, + transparent 0 + ), + linear-gradient(180deg, var(--color-secondary--light) 1px, transparent 0), + linear-gradient(180deg, var(--color-secondary--x-light) 1px, transparent 0); + background-position: 0 0, 0 0, 0 calc(var(--unit--vertical) / 2); + background-attachment: fixed; +} +.left:not(.padding) { + margin-left: calc(var(--unit--horizontal) * var(--left)); +} +.padding.left { + padding-left: calc(var(--unit--horizontal) * var(--left)); +} +.top:not(.padding) { + margin-top: calc(var(--unit--vertical) * var(--top)); +} +.padding.top { + padding-top: calc(var(--unit--vertical) * var(--top)); +} +.right:not(.padding) { + margin-right: calc(var(--unit--horizontal) * var(--right)); +} +.padding.right { + padding-right: calc(var(--unit--horizontal) * var(--right)); +} +.bottom:not(.padding) { + margin-bottom: calc(var(--unit--vertical) * var(--bottom)); +} +.padding.bottom { + padding-bottom: calc(var(--unit--vertical) * var(--bottom)); +} +.full-width { + width: 100%; +} +.width { + width: calc(var(--unit--horizontal) * var(--width)); +} +.flex { + display: flex; + justify-content: var(--content); + align-items: var(--align); + gap: calc(var(--gap) * var(--unit--horizontal)); +} +.flex.column { + flex-direction: column; +} +.color { + color: var(--color); +} +.opacity { + opacity: var(--opacity); +} +@font-face { + font-family: Switzer-Variable; + src: url(/assets/fonts/Switzer-Variable.woff2) format("woff2"), + url(/assets/fonts/Switzer-Variable.woff) format("woff"), + url(/assets/fonts/Switzer-Variable.ttf) format("truetype"); + font-weight: 100 900; + font-display: swap; + font-style: normal; +} +.accent { + color: var(--color-secondary); + font-weight: 400; +} +* { + font-family: Switzer-Variable, sans-serif; +} +#logo * { + font-size: 25vw; + line-height: 4rem; + transform: translate(-2px, -13px); + font-weight: var(--font-weight-extra-bold); +} +h1, +h2, +h3, +h4, +h5, +p { + font-weight: var(--font-weight-light); + line-height: 1; +} +h2 { + font-size: var(--font-size-xl); +} +article h2 { + margin-bottom: calc(var(--unit--vertical) / 2); +} +.title-center { + --margin-left: calc(4 * var(--unit--horizontal)); + width: calc(100% - var(--margin-left)); + margin-left: var(--margin-left); + font-size: var(--font-size-l); + line-height: var(--unit--vertical); +} +.main-title { + line-height: calc(var(--unit--vertical) * 2); + text-align: left; + box-sizing: border-box; + font-weight: var(--font-weight-light); + margin-bottom: var(--unit--vertical); +} +.texts__title { + font-size: var(--font-size-l); +} +.fs-m, +button, +li, +p { + transform: translateY(calc(var(--unit--vertical) * 0.12)); + font-size: var(--font-size-m); + line-height: calc(var(--unit--vertical)); +} +.fs-s { + font-size: var(--font-size-s) !important; +} +.fs-m { + font-size: var(--font-size-m) !important; +} +.fs-l { + font-size: var(--font-size-l) !important; +} +.fs-xl { + font-size: var(--font-size-xl) !important; + line-height: calc(var(--unit--vertical) * 1.5) !important; +} +.fs-xxl { + font-size: var(--font-size-xxl) !important; + line-height: calc(var(--unit--vertical) * 2.5) !important; +} +.fw-light, +button, +li, +p { + font-weight: var(--font-weight-light); +} +.fw-bold { + font-weight: var(--font-weight-bold); +} +.fw-extra-bold { + font-weight: var(--font-weight-extra-bold); +} +.f-inherit { + font-size: inherit; + line-height: inherit; + font-weight: inherit; +} +.ta-center { + text-align: center; +} +p { + transform: translateY(3px); +} +button { + display: flex; + align-items: center; +} +a * { + transition: font 0.2s ease-in-out; +} +a.no-line:hover * { + font-weight: 250; +} +a:not(.no-line):hover { + text-decoration: none; +} +a:not(.no-line) { + text-decoration: underline; + text-decoration-color: inherit; + text-decoration-line: underline; + text-underline-offset: 0.2rem; + text-decoration-thickness: 0.5px; +} +article p:not(:last-child) { + margin-bottom: var(--unit--vertical); +} +@media screen and (min-width: 640px) { + .title-center { + margin-left: calc(2 * var(--unit--horizontal)); + } +} +#main-header { + position: fixed; + z-index: 1; + top: 0; + left: 0; + box-sizing: border-box; + width: 100vw; + height: calc(var(--unit--vertical) * 5); + padding: var(--unit--vertical) var(--unit--horizontal); + transition: height 0.2s ease-in-out; +} +#logo { + position: relative; +} +#main-header.open #actuel { + color: var(--color-background); +} +#logo #actuel { + color: var(--color-primary--transparent); + position: relative; + z-index: 1; +} +#logo #inactuel { + position: absolute; + z-index: 0; + color: var(--color-secondary); + bottom: -48%; + transition: bottom 0.2s ease-in-out; +} +#main-header.minimized #logo #inactuel { + bottom: 0; +} +.page-cover { + position: relative; + box-sizing: border-box; + height: 100svh; + display: flex; + flex-direction: column; + justify-content: space-between; + padding-top: calc(var(--unit--vertical-relative) * 5); + padding-bottom: calc(5 * var(--unit--vertical)); +} +.page-cover.open + * { + margin-top: calc(var(--unit--vertical-relative) * 19); +} +[data-template="home"] .page-cover { + padding-top: calc(var(--unit--vertical-relative) * 6); +} +#category .page-cover { + height: auto; + padding-bottom: 0; + margin-bottom: calc(2 * var(--unit--vertical)); +} +#category .active-tab { + max-height: none; +} +@media screen and (min-width: 640px) { + #main-header { + display: flex; + justify-content: center; + } + #logo { + width: 37vw; + } + #logo * { + font-size: 11vw; + } + #main-header.minimized { + height: calc(var(--unit--vertical) * 4.3); + } + .page-cover { + padding: calc(10 * var(--unit--vertical)) 0; + } +} +.toggle-btns { + position: sticky; +} +button.toggle.open:not(.see-more) { + font-weight: 700; +} +button.toggle.left:after { + margin-left: var(--unit--horizontal); +} +button.toggle.left.close:after { + content: "+"; +} +button.toggle.left.open:after { + content: "-"; +} +button.toggle.right:before { + margin-right: var(--unit--horizontal); +} +button.toggle.right.close:before { + content: "+"; +} +button.toggle.right.open:before { + content: "-"; +} +#tabs { + position: absolute; + width: 100%; + z-index: 1; + bottom: calc(var(--unit--vertical-relative) * 4); +} +.active-tab { + position: absolute; + max-height: calc(var(--unit--vertical-relative) * 17); + overflow: auto; + transition: max-height 0.5s ease-in-out; + padding: var(--unit--vertical) 0; + scrollbar-width: thin; + scrollbar-color: #fff transparent; +} +.active-tab::-webkit-scrollbar { + width: 3px; + height: auto; +} +.active-tab::-webkit-scrollbar-track { + background: transparent; +} +.active-tab::-webkit-scrollbar-thumb { + background-color: #fff; + border-radius: 1px; + border: none; +} +.texts__year.short .year__edito { + display: -webkit-box; + -webkit-line-clamp: 5; + overflow: hidden; +} +.texts__year .see-more { + width: 100%; + margin-top: calc(var(--unit--vertical) / 2); +} +@media screen and (min-width: 640px) { + [data-template="home"] #tabs { + margin-top: calc(0px - (10 * var(--unit--vertical))); + } + button.toggle.left:after { + margin-left: calc(var(--unit--horizontal) / 2); + } + button.toggle.right:before { + margin-right: calc(var(--unit--horizontal) / 2); + } +} +.article-header .title-wrapper { + --margin-left: 2; + width: calc(100% - (var(--margin-left) * var(--unit--horizontal))); + padding-left: calc(var(--margin-left) * var(--unit--horizontal)); +} +#main-footer { + position: fixed; + left: 0; + bottom: 0; + width: calc(18 * var(--unit--horizontal)); + padding: var(--unit--horizontal); +} +#main-footer a { + text-shadow: 0 0 2px #000; + -moz-text-shadow: 0 0 2px #000; + -webkit-text-shadow: 0 0 2px #000; +} +@media screen and (min-width: 640px) { + #main-footer { + padding: calc(var(--unit--horizontal) / 2) var(--unit--horizontal); + } +} diff --git a/assets/js/script.js b/assets/js/script.js index 16927b5..9b5cb85 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -73,25 +73,24 @@ function roundToNearestHalf(num) { return Math.max(round, 0); } -function enableToggleTabsVisibility() { - const tabs = document.querySelector("#tabs"); - const toggleLeftBtn = tabs.querySelector("button.toggle.left"); - const toggleRightBtn = tabs.querySelector("button.toggle.right"); - const toggleLeftBtnWidth = toggleLeftBtn.offsetWidth; - const toggleRightBtnWidth = toggleRightBtn.offsetWidth; +function enableToggleEntriesVisibility() { + const entries = document.querySelector("#entries"); - toggleLeftBtn.style = `--width: ${toggleLeftBtnWidth}px`; - toggleRightBtn.style = `--width: ${toggleRightBtnWidth}px`; + const leftBtn = entries.querySelector(".entry-btn--left"); + const rightBtn = entries.querySelector(".entry-btn--right"); + const leftBtnWidth = leftBtn.offsetWidth; + const rightBtnWidth = rightBtn.offsetWidth; - const toggleVisibility = (entries) => { - entries.forEach((entry) => { - const isIntersecting = entry.isIntersecting; + leftBtn.style = `--width: ${leftBtnWidth}px`; + rightBtn.style = `--width: ${rightBtnWidth}px`; + + const toggleVisibility = (items) => { + items.forEach((item) => { + const isIntersecting = item.isIntersecting; if (isIntersecting) { - console.log("is intersecting"); - tabs.classList.remove("minimized"); + entries.classList.remove("minimized"); } else { - console.log("is not intersecting"); - tabs.classList.add("minimized"); + entries.classList.add("minimized"); } }); }; @@ -104,7 +103,7 @@ function enableToggleTabsVisibility() { threshold: 0, }); - observer.observe(tabs); + observer.observe(entries); } function toggleLogoState() { @@ -132,6 +131,6 @@ document.addEventListener("DOMContentLoaded", () => { // Wait for fonts applied setTimeout(() => { - enableToggleTabsVisibility(); + enableToggleEntriesVisibility(); }, 100); }); diff --git a/site/snippets/header.php b/site/snippets/header.php index 191bf03..f480da4 100644 --- a/site/snippets/header.php +++ b/site/snippets/header.php @@ -9,12 +9,12 @@ - -
- -
\ No newline at end of file + +
+ +
\ No newline at end of file diff --git a/site/snippets/nav.php b/site/snippets/nav.php new file mode 100644 index 0000000..265007d --- /dev/null +++ b/site/snippets/nav.php @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/site/snippets/tabs.php b/site/snippets/tabs.php index 157d1fc..cbd947d 100644 --- a/site/snippets/tabs.php +++ b/site/snippets/tabs.php @@ -29,7 +29,7 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : ''; :class="activeTab === 'texts' ? 'open' : 'close'" title="Voir tous les textes" @click="toggleTab($data, 'texts')" - >textes + >catégories
$article - ] + 'article' => $article + ] ) ?> diff --git a/site/templates/home.php b/site/templates/home.php index eb2ba14..2110172 100644 --- a/site/templates/home.php +++ b/site/templates/home.php @@ -1,6 +1,6 @@ -
+

diff --git a/site/templates/linear.php b/site/templates/linear.php index 4024377..8c13a9a 100644 --- a/site/templates/linear.php +++ b/site/templates/linear.php @@ -18,12 +18,7 @@

- [ - 'label' => 'édito ' . $page->parent()->title(), - 'content' => $page->parent()->edito() - ], - ]) ?> + body() ?>

\ No newline at end of file