From 6f3774a5d7302c96ce019b665543d17cdb99969e Mon Sep 17 00:00:00 2001 From: isUnknown Date: Sat, 30 Nov 2024 18:18:43 +0100 Subject: [PATCH 001/121] new design --- site/blueprints/tabs/meta.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/blueprints/tabs/meta.yml b/site/blueprints/tabs/meta.yml index 9ca2155..5836a3c 100644 --- a/site/blueprints/tabs/meta.yml +++ b/site/blueprints/tabs/meta.yml @@ -3,6 +3,9 @@ sections: metadata: type: fields fields: + keywords: + label: Mots-clés + type: tags published: label: Date de publication type: date From e3207ee58e5515d18eb9ae1ae19952678faeea27 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Sat, 30 Nov 2024 18:49:45 +0100 Subject: [PATCH 002/121] aad fields --- assets/dist/script.js | 176 +++++++++--- assets/dist/style.css | 475 +------------------------------ site/blueprints/pages/linear.yml | 3 + 3 files changed, 139 insertions(+), 515 deletions(-) diff --git a/assets/dist/script.js b/assets/dist/script.js index 987e69e..1d2257b 100644 --- a/assets/dist/script.js +++ b/assets/dist/script.js @@ -1,63 +1,157 @@ "use strict"; -var remFactor = 16; -var verticalUnit = 1.3 * remFactor; -function toggleTab(data, tab) { - if (data.activeTab === tab) { - window.scrollTo({ - top: 0, - behavior: "smooth" - }); - setTimeout(function () { - data.isOpen = false; - data.activeTab = ""; - }, 500); - } else { - data.activeTab = tab; - data.isOpen = true; - scrollToElem(".active-tab"); - } +var verticalUnit = getUnit("--unit--vertical"); +function getUnit(id) { + var remFactor = 16; + var rawUnit = getComputedStyle(document.documentElement).getPropertyValue(id) || "1.7rem"; + var remUnit = parseFloat(rawUnit); + var pxUnit = remUnit * remFactor; + return pxUnit; } -function scrollToElem(selector) { - document.querySelector(".active-tab").scrollTop = 0; - setTimeout(function () { - var yOffset = -7 * verticalUnit; - var elem = document.querySelector(selector); - var top = elem.getBoundingClientRect().top; - window.scrollTo({ - top: top + window.scrollY + yOffset, - behavior: "smooth" - }); - }, 100); +function throttle(callback, limit) { + var waiting = false; + return function () { + if (!waiting) { + callback.apply(this, arguments); + waiting = true; + setTimeout(function () { + waiting = false; + }, limit); + } + }; } function setWindowHeightFactor() { var windowHeight = window.innerHeight; var min = 650; var delta = windowHeight - min; var factor = roundToNearestHalf(delta / 300) + 1; - var head = document.querySelector("head"); - var style = document.createElement("style"); - style.innerText = ":root { --window-height-factor:".concat(factor, " }"); - head.appendChild(style); + document.querySelector(":root").style.setProperty("--window-height-factor", factor); } function roundToNearestHalf(num) { var round = Math.round(num * 2) / 2; return Math.max(round, 0); } -setWindowHeightFactor(); -document.addEventListener("DOMContentLoaded", function () { - function toggleLogoState() { - var scrollY = window.scrollY || window.pageYOffset; - if (scrollY > 10) { - document.querySelector("#main-header").classList.add("minimized"); - } else { - document.querySelector("#main-header").classList.remove("minimized"); - } +function toggleLogoState() { + var scrollY = window.scrollY || window.pageYOffset; + if (scrollY > 10) { + document.querySelector("#main-header").classList.add("minimized"); + } else { + document.querySelector("#main-header").classList.remove("minimized"); } +} +function fixFootNotes() { + var footnotes = document.querySelectorAll('a[href^="#sdfootnote"]'); + footnotes.forEach(function (footnote) { + var href = footnote.href; + footnote.classList.add("footnote"); + if (href.includes("sym")) { + footnote.id = footnote.hash.replace("sym", "anc").replace("#", ""); + } + if (href.includes("anc")) { + footnote.id = footnote.hash.replace("anc", "sym").replace("#", ""); + } + }); +} +function removeAccents(str) { + var from = "áäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;"; + var to = "aaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------"; + for (var i = 0, l = from.length; i < l; i++) { + str = str.replace(new RegExp(from.charAt(i), "g"), to.charAt(i)); + } + return str; +} +function slugify(str) { + return removeAccents(str.toLowerCase()); +} +var subscribeBtn = document.querySelector("#subscribe-btn"); +function showSubscribeField(event) { + event.preventDefault(); + var button = event.target; + var li = button.parentNode; + var form = li.querySelector("#subscribe-form"); + var input = form.querySelector("input"); + form.classList.remove("hidden"); + button.classList.add("hidden"); + input.focus(); +} +function subscribe(event) { + event.preventDefault(); + var email = document.querySelector("#subscribe-form input"); + if (email.value.toLowerCase().match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) { + var header = { + method: "POST", + body: email.value + }; + fetch("/subscribe.json"); + } else { + email.value = "E-mail invalide. Recommencez."; + } +} +var panelNav = document.querySelector(".panel"); +var navOverlay = document.querySelector("#nav-overlay"); +var openNavBtn = document.querySelector("button.open-nav"); +var closeNavBtn = document.querySelector(".panel-close"); +function closeNav() { + panelNav.classList.remove("panel--visible"); + navOverlay.classList.remove("nav-overlay--visible"); + document.body.classList.remove("no-scroll"); +} +document.addEventListener("DOMContentLoaded", function () { + ragadjust("h1, h2, h3, h4, h5", ["all"]); window.window.scrollTo({ top: 0 }); window.addEventListener("scroll", function () { toggleLogoState(); }); + setWindowHeightFactor(); + window.addEventListener("resize", function () { + setWindowHeightFactor(); + }); + fixFootNotes(); + window.addEventListener("keyup", function (event) { + if (event.key === "Escape") { + closeNav(); + } + }); + document.querySelectorAll(".panel").forEach(function (panel) { + panel.addEventListener("click", function (event) { + event.stopPropagation(); + }); + }); + var navSortBtns = document.querySelectorAll("nav .sort-btn"); + var navSections = document.querySelectorAll(".panel__all-texts, .panel__collection"); + navSortBtns.forEach(function (sortBtn) { + sortBtn.addEventListener("click", function () { + navSortBtns.forEach(function (btn) { + return btn.classList.remove("active"); + }); + sortBtn.classList.add("active"); + var sections = { + "sort-btn--all": ".panel__all-texts", + "sort-btn--years": ".panel__collection--years", + "sort-btn--categories": ".panel__collection--categories" + }; + navSections.forEach(function (navSection) { + return navSection.classList.add("hidden"); + }); + Object.keys(sections).forEach(function (key) { + if (sortBtn.classList.contains(key)) { + document.querySelector(sections[key]).classList.remove("hidden"); + } + }); + }); + }); + openNavBtn.addEventListener("click", function () { + panelNav.classList.add("panel--visible"); + navOverlay.classList.add("nav-overlay--visible"); + document.body.classList.add("no-scroll"); + }); + closeNavBtn.addEventListener("click", function () { + closeNav(); + }); + navOverlay.addEventListener("click", function () { + closeNav(); + }); + subscribeBtn.addEventListener("click", showSubscribeField); }); \ No newline at end of file diff --git a/assets/dist/style.css b/assets/dist/style.css index 594e110..34cfc65 100644 --- a/assets/dist/style.css +++ b/assets/dist/style.css @@ -1,474 +1 @@ -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; -} -.background-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-underline:hover * { - font-weight: 250; -} -a:not(.no-underline):hover { - text-decoration: none; -} -a:not(.no-underline) { - 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); - } -} +body,h1,h2,h3,h4,h5,html,p,ul{margin:0;padding:0}button{all:unset;cursor:pointer}a{text-decoration:none;color:inherit}a:focus-visible{outline:none}li{list-style-type:none}body{position:relative;margin:0;background-color:var(--color-background);color:var(--color-primary);overflow-x:clip}main{padding:0 var(--unit--horizontal)}[data-template=info] main{margin-top:calc(var(--unit--vertical) * 2)}hr{height:1px;border:none;background-color:var(--color-primary)}nav hr{background-color:var(--color-background);margin-left:0}input[type=text]:focus-visible{outline:none}body,html{scroll-behavior:smooth}*{scrollbar-width:thin;scrollbar-color:hsla(0,0%,100%,.25) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.25);border-radius:0;border:none}@media screen and (min-width:640px){body.full-width{--padding-body:calc(var(--unit--horizontal) * 10)}body{padding-left:var(--padding-body)!important;box-sizing:content-box}main{padding:0 var(--body-padding)}}.hidden{display:none}.no-scroll{overflow:hidden!important}body{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}.light{opacity:var(--opacity-light)}.color{color:var(--color)}.opacity{opacity:var(--opacity)}.toggle-btn--left:after,button.plus:after{margin-left:var(--unit--horizontal);content:"+"}.toggle-btn--left.open:after{content:"-"}.toggle-btn--right:before{margin-right:var(--unit--horizontal);content:"+"}.toggle-btn--right.open:before{content:"-"}.transition{transition:all .5s var(--curve-sine)}@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}h1,h1 *,h2,h2 *,h3,h3 *,h4,h4 *,h5,h5 *,p,p *{font-weight:var(--font-weight-light);line-height:1}.h3,h2,h3{font-size:var(--font-size-xl)}.h3,h3{color:var(--color-primary)}article h2{margin-bottom:calc(var(--unit--vertical) / 2)}.title-center{--margin-left:calc(3 * var(--unit--horizontal));width:calc(100% - var(--margin-left));margin-left:var(--margin-left);line-height:var(--unit--vertical)}.title-center,.title-center h2{font-size:var(--font-size-l)}.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)}.text__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;line-height:var(--unit--vertical)}.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)}input{font-size:var(--font-size-s);font-weight:var(--font-weight-light)}button{display:flex;align-items:center}a *{transition:font .2s ease-in-out}a.no-underline.text__title:hover *{text-decoration:underline;text-decoration-color:inherit;text-decoration-line:underline;text-underline-offset:.2rem;text-decoration-thickness:.5px}a:not(.no-underline):hover{text-decoration:none}a:not(.no-underline){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)}.footnote,.footnote *{scroll-margin-block-start:calc(var(--unit--vertical) * 6);color:var(--color-secondary);text-decoration:none!important;font-weight:var(--font-weight-bold)!important}@media screen and (min-width:640px){.title-center{margin-left:calc(2 * var(--unit--horizontal))}}#main-header{position:fixed;box-sizing:border-box;width:100vw;padding-top:calc(var(--unit--vertical) / 2)}#logo *{font-size:26.65vw;font-weight:var(--font-weight-extra-bold)}#logo span{height:20vw;width:100%;box-sizing:border-box;padding-right:1vw;display:flex;justify-content:flex-end;align-items:center}#logo{text-align:right}#logo #actuel,#logo #inactuel{mix-blend-mode:difference}#logo #inactuel{transition:margin-top .3s ease-in-out,transform .3s ease-in-out}#main-header.minimized #inactuel{margin-top:-20vw;transform:translateX(-2px) translateY(-2px)}#main-header.minimized #inactuel:not([data-template=home] *){transform:translateX(-1px) translateY(-1px)!important}.page-cover{position:relative;height:100svh;box-sizing:border-box;padding-top:calc(var(--unit--vertical-relative) * 9);display:flex;flex-direction:column}.page-cover .text-wrapper{height:100%;overflow:auto}#entry-btns{position:sticky;position:-webkit-sticky;height:var(--entry-btns-height);display:flex;justify-content:space-between}#entry-btns,[data-template=info] #entry-btns{top:calc(var(--unit--vertical) * 4)}[data-template=home] .entry-btn{align-items:start}button.toggle.left:after,button.toggle.right:before{transition:all .5s var(--curve-sine);content:"+"}#entry-btns.minimized{color:#000}#entry-btns.minimized .entry-btn--left:before,#entry-btns.minimized .entry-btn--right:after{background-color:var(--color-secondary)}#entry-btns.minimized .entry-btn:after,#entry-btns.minimized .entry-btn:before{font-weight:700}#entry-btns.minimized .entry-btn--left{padding-right:4px;margin-left:calc(-4px - var(--width))}#entry-btns.minimized .entry-btn--right{padding-left:4px;margin-right:calc(-4px - var(--width))}@media screen and (min-width:640px){body:not([data-template=home]) #main-header{width:var(--body-padding)}body:not([data-template=home]) #logo *{font-size:6vw}body:not([data-template=home]) #logo span{height:5vw}body:not([data-template=home]) #main-header.minimized #inactuel{margin-top:-4.9vw;transform:translateX(-2px) translateY(-2px)}.page-cover:not([data-template=author] .page-cover,[data-template=year] .page-cover,[data-template=category] .page-cover){height:100vh;padding:calc(10 * var(--unit--vertical)) 0;padding-top:calc(var(--unit--vertical) * 8)}[data-template=home] .page-cover{padding-top:42.5vw!important}[data-template=author] .page-cover,[data-template=category] .page-cover,[data-template=year] .page-cover{height:auto}#entry-btns{display:none}}#nav-overlay{position:fixed;inset:0;background-color:#000;opacity:.7;z-index:2;cursor:w-resize}#nav-overlay:not(.nav-overlay--visible),.panel{display:none}.panel{position:fixed;overflow:auto;width:100vw;height:100dvh;top:0;background-color:#000;outline:1px solid #fff;transition:all .5s var(--curve-sine);z-index:3;box-sizing:border-box;flex-direction:column}.panel.panel--visible{display:flex}.panel header{position:sticky;top:0;z-index:1;background-color:#000;padding:var(--unit--vertical) var(--unit--horizontal);padding-bottom:0}.sort-btns{box-sizing:border-box}.sort-btns button{all:unset;cursor:pointer;display:inline-block;margin-right:2vw}.sort-btns button.active,.sort-btns button:hover{text-decoration:underline;text-underline-offset:4px}.search{position:relative;width:100%;margin-top:var(--unit--vertical);background-color:#000;z-index:1;top:0;box-sizing:border-box}.search__input{all:unset;width:100%;background-color:transparent;padding:calc(var(--unit--vertical) / 4) 0;border:none;border-bottom:1px solid #fff;color:#fff;font-size:var(--font-size-m);font-weight:var(--font-weight-light)}.search__input::placeholder{font-size:var(--font-size-sm);letter-spacing:1px}.search__icon{all:unset;position:absolute;width:1.2rem;height:1.2rem;padding:.5rem;right:0;transform:translateX(.5rem) translateY(.2rem)}button.search__icon{cursor:pointer}.panel__collection{scroll-behavior:smooth;height:100%;overflow:auto;padding:var(--unit--vertical) var(--unit--horizontal)}.panel-close{position:fixed;box-sizing:border-box;bottom:0;justify-content:center;width:100%;outline:none;border-top:1px solid #fff;font-size:var(--font-size-m);background-color:#000;padding:calc(var(--unit--vertical) / 2) var(--unit--horizontal);margin-bottom:env(safe-area-inset-bottom)}.panel__toggle-btn{width:100%;display:flex;justify-content:space-between;margin-bottom:var(--unit--vertical)}.panel__toggle-icon{color:var(--color-secondary);font-size:var(--font-size-xl)}.panel-item-content__edito{margin-bottom:calc(var(--unit--vertical) / 2)}.panel-item-content__edito.short{display:-webkit-box;-webkit-line-clamp:5;overflow:hidden}button.see-more{margin-bottom:var(--unit--vertical)}.panel-item-content__texts:not(.panel__collection .panel-item-content__texts){padding:var(--unit--vertical) var(--unit--horizontal)}.text{margin-bottom:var(--unit--vertical)}@media screen and (min-width:640px){nav.panel{width:40rem}#subscribe-btn-wrapper{height:2.5rem;margin-bottom:.2rem}#subscribe-form{position:relative;width:-moz-fit-content;width:fit-content}#subscribe-form input{background-color:transparent;border:none;border-bottom:1px solid #fff;box-sizing:border-box;padding-bottom:.3rem;padding-right:2rem;color:#fff;width:15rem}#subscribe-form input:focus-visible{outline:none}#subscribe-form button[type=submit]{color:#fff;position:absolute;top:0;right:0}.panel{z-index:4;width:var(--padding-body)}.panel-close{display:none}.panel--right{right:auto;left:calc(-100vw - 1px)}.panel--right.open{left:0}}article #main-content{max-width:calc(18 * var(--unit--horizontal));scroll-margin-block-start:calc(var(--unit--vertical) * 6);margin-top:calc(var(--unit--vertical) * 2);padding-bottom:calc(var(--unit--vertical) * 2)}@media screen and (min-width:640px){article #main-content{max-width:auto}}[data-template=year] .edito{margin-bottom:var(--unit--vertical)}body.full-width #desktop-nav{height:auto}body.full-width #desktop-nav .empty{height:calc(var(--unit--vertical) / 2)}body.full-width #main-content{position:absolute;left:0;width:100vw;padding:0 var(--unit--horizontal) var(--unit--vertical);box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(39,1fr);column-gap:var(--unit--horizontal);margin-bottom:calc(var(--unit--vertical) * 2)}.grid .column{grid-column:span var(--span)}.grid[data-columns="1"] .column{grid-column:11/span 20}#main-footer{position:fixed;bottom:0;width:100%;box-sizing:border-box;padding:var(--unit--horizontal)}[data-template=home] #main-footer{position:fixed;left:0;bottom:0}#main-footer ul{display:flex;justify-content:center;gap:calc(2 * 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{position:fixed;left:0;bottom:0;width:var(--body-padding)}#main-footer ul{display:block}}@media print{@page{margin:0;size:auto;@top-left{content:none}@top-right{content:none}@top-center{content:none}@bottom-left{content:none}@bottom-right{content:none}@bottom-center{content:none}}body{padding-top:4rem;color:#000}.panel{display:none}.main-title.fs-xxl{font-size:7rem!important;line-height:1!important}#main-header{position:relative}#logo #actuel{color:#000;opacity:.8}#logo #inactuel{color:#56d9a3}#entry-btns{display:none}a{text-decoration:none!important}article #main-content{width:60%;margin:auto}}:root{--color-background:#000;--color-primary:#fff;--color-primary--transparent:hsla(0,0%,100%,.86);--color-secondary-rgb:200,200,200;--color-secondary:rgba(var(--color-secondary-rgb),0.86);--color-secondary--light:rgba(var(--color-secondary-rgb),0.2);--color-secondary--x-light:rgb(var(--color-secondary-rgb),0.1);--color-tertiary-rgb:200,200,200;--color-tertiary:rgba(var(--color-tertiary-rgb),0.86);--color-tertiary--light:rgba(var(--color-tertiary-rgb),0.2);--color-tertiary--x-light:rgb(var(--color-tertiary-rgb),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;--opacity-light:0.6;--curve-sine:cubic-bezier(0.445,0.05,0.55,0.95)}@media screen and (min-width:640px){:root{--unit--horizontal:2.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-padding:calc(10 * var(--unit--horizontal))}} \ No newline at end of file diff --git a/site/blueprints/pages/linear.yml b/site/blueprints/pages/linear.yml index a9e13d5..37b78b2 100644 --- a/site/blueprints/pages/linear.yml +++ b/site/blueprints/pages/linear.yml @@ -15,6 +15,9 @@ tabs: label: Corps type: fields fields: + chapo: + label: Chapo + type: writer body: label: Corps type: writer From 8e09bceb021f1d3c7627fda128ea39b44eecdb0b Mon Sep 17 00:00:00 2001 From: isUnknown Date: Sun, 1 Dec 2024 12:16:27 +0100 Subject: [PATCH 003/121] home : center texts button --- assets/css/src/home.css | 5 ++++- assets/css/src/nav.css | 5 ++++- site/blueprints/pages/linear.yml | 2 +- site/snippets/footer.php | 3 --- site/templates/home.php | 3 +++ 5 files changed, 12 insertions(+), 6 deletions(-) diff --git a/assets/css/src/home.css b/assets/css/src/home.css index 8b13789..4d8d4fb 100644 --- a/assets/css/src/home.css +++ b/assets/css/src/home.css @@ -1 +1,4 @@ - +.main-edito-btn { + display: inline-block; + margin-right: calc(2 * var(--unit--horizontal)); +} diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css index e243dcc..93f406e 100644 --- a/assets/css/src/nav.css +++ b/assets/css/src/nav.css @@ -1,4 +1,7 @@ -/* ================= PANELS ================= */ +button.open-nav { + display: inline-block; +} + #nav-overlay { position: fixed; inset: 0; diff --git a/site/blueprints/pages/linear.yml b/site/blueprints/pages/linear.yml index 37b78b2..f5f2107 100644 --- a/site/blueprints/pages/linear.yml +++ b/site/blueprints/pages/linear.yml @@ -21,4 +21,4 @@ tabs: body: label: Corps type: writer - metaTab: tabs/meta + metaTab: tabs/meta \ No newline at end of file diff --git a/site/snippets/footer.php b/site/snippets/footer.php index 82eba67..f097815 100644 --- a/site/snippets/footer.php +++ b/site/snippets/footer.php @@ -1,8 +1,5 @@