From ccdfd37fe937eb33797bee299a5a2d9a7cbdfa46 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Sat, 21 Mar 2026 17:10:44 +0100 Subject: [PATCH] migrate CSS to SCSS Rename all src/*.css to src/_*.scss partials and convert style.css to style.scss with SASS imports. Co-Authored-By: Claude Opus 4.6 --- assets/css/src/{article.css => _article.scss} | 0 assets/css/src/{footer.css => _footer.scss} | 0 assets/css/src/{generic.css => _generic.scss} | 2 - assets/css/src/{grid.css => _grid.scss} | 0 assets/css/src/{header.css => _header.scss} | 0 assets/css/src/{home.css => _home.scss} | 0 assets/css/src/{html.css => _html.scss} | 0 assets/css/src/{nav.css => _nav.scss} | 0 .../src/{newsletter.css => _newsletter.scss} | 0 assets/css/src/{print.css => _print.scss} | 0 assets/css/src/{reset.css => _reset.scss} | 0 assets/css/src/{tabs.css => _tabs.scss} | 0 assets/css/src/{texts.css => _texts.scss} | 0 assets/css/src/{toc.css => _toc.scss} | 0 ...light-mode.css => _toggle-light-mode.scss} | 0 assets/css/src/{virtual.css => _virtual.scss} | 0 assets/css/style.css | 1292 ++++++++++++++++- assets/css/style.scss | 91 ++ 18 files changed, 1353 insertions(+), 32 deletions(-) rename assets/css/src/{article.css => _article.scss} (100%) rename assets/css/src/{footer.css => _footer.scss} (100%) rename assets/css/src/{generic.css => _generic.scss} (99%) rename assets/css/src/{grid.css => _grid.scss} (100%) rename assets/css/src/{header.css => _header.scss} (100%) rename assets/css/src/{home.css => _home.scss} (100%) rename assets/css/src/{html.css => _html.scss} (100%) rename assets/css/src/{nav.css => _nav.scss} (100%) rename assets/css/src/{newsletter.css => _newsletter.scss} (100%) rename assets/css/src/{print.css => _print.scss} (100%) rename assets/css/src/{reset.css => _reset.scss} (100%) rename assets/css/src/{tabs.css => _tabs.scss} (100%) rename assets/css/src/{texts.css => _texts.scss} (100%) rename assets/css/src/{toc.css => _toc.scss} (100%) rename assets/css/src/{toggle-light-mode.css => _toggle-light-mode.scss} (100%) rename assets/css/src/{virtual.css => _virtual.scss} (100%) create mode 100644 assets/css/style.scss diff --git a/assets/css/src/article.css b/assets/css/src/_article.scss similarity index 100% rename from assets/css/src/article.css rename to assets/css/src/_article.scss diff --git a/assets/css/src/footer.css b/assets/css/src/_footer.scss similarity index 100% rename from assets/css/src/footer.css rename to assets/css/src/_footer.scss diff --git a/assets/css/src/generic.css b/assets/css/src/_generic.scss similarity index 99% rename from assets/css/src/generic.css rename to assets/css/src/_generic.scss index 99508e2..9c30da6 100644 --- a/assets/css/src/generic.css +++ b/assets/css/src/_generic.scss @@ -138,5 +138,3 @@ button.less::after { width: 100%; margin-top: calc(var(--unit--vertical) / 2); } - - diff --git a/assets/css/src/grid.css b/assets/css/src/_grid.scss similarity index 100% rename from assets/css/src/grid.css rename to assets/css/src/_grid.scss diff --git a/assets/css/src/header.css b/assets/css/src/_header.scss similarity index 100% rename from assets/css/src/header.css rename to assets/css/src/_header.scss diff --git a/assets/css/src/home.css b/assets/css/src/_home.scss similarity index 100% rename from assets/css/src/home.css rename to assets/css/src/_home.scss diff --git a/assets/css/src/html.css b/assets/css/src/_html.scss similarity index 100% rename from assets/css/src/html.css rename to assets/css/src/_html.scss diff --git a/assets/css/src/nav.css b/assets/css/src/_nav.scss similarity index 100% rename from assets/css/src/nav.css rename to assets/css/src/_nav.scss diff --git a/assets/css/src/newsletter.css b/assets/css/src/_newsletter.scss similarity index 100% rename from assets/css/src/newsletter.css rename to assets/css/src/_newsletter.scss diff --git a/assets/css/src/print.css b/assets/css/src/_print.scss similarity index 100% rename from assets/css/src/print.css rename to assets/css/src/_print.scss diff --git a/assets/css/src/reset.css b/assets/css/src/_reset.scss similarity index 100% rename from assets/css/src/reset.css rename to assets/css/src/_reset.scss diff --git a/assets/css/src/tabs.css b/assets/css/src/_tabs.scss similarity index 100% rename from assets/css/src/tabs.css rename to assets/css/src/_tabs.scss diff --git a/assets/css/src/texts.css b/assets/css/src/_texts.scss similarity index 100% rename from assets/css/src/texts.css rename to assets/css/src/_texts.scss diff --git a/assets/css/src/toc.css b/assets/css/src/_toc.scss similarity index 100% rename from assets/css/src/toc.css rename to assets/css/src/_toc.scss diff --git a/assets/css/src/toggle-light-mode.css b/assets/css/src/_toggle-light-mode.scss similarity index 100% rename from assets/css/src/toggle-light-mode.css rename to assets/css/src/_toggle-light-mode.scss diff --git a/assets/css/src/virtual.css b/assets/css/src/_virtual.scss similarity index 100% rename from assets/css/src/virtual.css rename to assets/css/src/_virtual.scss diff --git a/assets/css/style.css b/assets/css/style.css index f415d15..36fe1fd 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,25 +1,1267 @@ -@import url("src/reset.css"); -@import url("src/html.css"); -@import url("src/generic.css"); -@import url("src/texts.css"); -@import url("src/header.css"); -@import url("src/nav.css"); -@import url("src/article.css"); -@import url("src/virtual.css"); -@import url("src/home.css"); -@import url("src/grid.css"); -@import url("src/newsletter.css"); -@import url("src/footer.css"); -@import url("src/toggle-light-mode.css"); -@import url("src/print.css"); -@import url("src/toc.css"); +@charset "UTF-8"; +html, +body, +h1, +h2, +h3, +h4, +h5, +p, +ul, +figure { + 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; /* clip is the only value that works on Safari mobile */ +} + +main { + padding: 0 var(--unit--horizontal); + padding-bottom: calc(2 * var(--unit--vertical)) !important; +} + +/* [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; +} + +/* ================= SCROLLBAR ================= */ +body, +html { + scroll-behavior: smooth; +} + +/* Works on Firefox */ +* { + scrollbar-width: thin; + scrollbar-color: var(--color-primary) transparent; +} + +/* Works on Chrome, Edge, and Safari */ +*::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +*::-webkit-scrollbar-track { + background: transparent; +} + +*::-webkit-scrollbar-thumb { + background-color: var(--color-primary); + border-radius: 0px; + 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 { + width: min(60vw, 45rem); + padding-left: var(--body-padding); + } +} +.hidden { + display: none; +} + +.no-scroll { + overflow: hidden !important; +} + +body { + background-size: var(--unit--horizontal) var(--unit--vertical); + background-image: linear-gradient(to right, var(--color-secondary--x-light) 1px, transparent 1px), linear-gradient(to bottom, var(--color-secondary--light) 1px, transparent 1px), linear-gradient(to bottom, var(--color-secondary--x-light) 1px, transparent 1px); + 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); +} + +.footnote::before { + content: "["; +} + +.footnote::after { + content: "]"; +} + +/* ================= COLORS ================= */ +.texts .text { + margin-bottom: var(--unit--vertical); +} + +/* ================= COLORS ================= */ +.color { + color: var(--color); +} + +.opacity { + opacity: var(--opacity); +} + +/* ================= BUTTONS ================= */ +.toggle-btn--left::after, +button.plus::after, +button.less::after { + margin-left: var(--unit--horizontal); +} + +.toggle-btn--left::after, +button.plus::after { + content: "+"; +} + +.toggle-btn--left.open::after, +button.less::after { + content: "-"; +} + +.toggle-btn--right::before { + margin-right: var(--unit--horizontal); +} + +.toggle-btn--right::before { + content: "+"; +} + +.toggle-btn--right.open::before { + content: "-"; +} + +.transition { + transition: all 0.5s var(--curve-sine); +} + +.short { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; + overflow: hidden; + /* Do not remove : required not to crop letters descenders */ + padding-bottom: 0.16rem; + height: 8.5rem; +} + +.see-more { + width: 100%; + margin-top: calc(var(--unit--vertical) / 2); +} + +@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: normal; +} + +* { + font-family: "Switzer-Variable", sans-serif; +} + +h1, +h1 *, +h2, +h2 *, +h3, +h3 *, +h4, +h4 *, +h5, +h5 *, +p, +p *:not(strong), +figcaption, +.toc { + font-weight: var(--font-weight-light); + line-height: 1; +} + +h1 { + font-size: var(--font-size-xl); +} + +h3, +.h3 { + font-size: var(--font-size-xl); + 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); + font-size: var(--font-size-l); +} + +.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); +} + +p, +li, +button, +.fs-m { + 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; + line-height: calc(var(--unit--vertical) * 1.3); +} + +.fs-xl { + font-size: var(--font-size-xl) !important; + line-height: calc(var(--unit--vertical) * 2) !important; +} + +.fs-xxl { + font-size: var(--font-size-xxl) !important; + line-height: calc(var(--unit--vertical) * 2.5) !important; +} + +p, +li, +button, +.fw-light { + 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 { + word-break: break-word; +} + +a > * { + word-break: normal; +} + +a * { + transition: font 0.2s ease-in-out; +} + +a.no-underline.text__title:hover * { + text-decoration: underline; + text-decoration-color: inherit; + text-decoration-line: underline; + text-underline-offset: 0.2rem; + text-decoration-thickness: 0.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: 0.2rem; + text-decoration-thickness: 0.5px; +} + +article p:not(:last-child), article ul:not(:last-child), article figure:not(:last-child) { + margin-bottom: var(--unit--vertical); +} + +.footnote, +.footnote * { + font-style: normal !important; + scroll-margin-block-start: calc(var(--unit--vertical) * 6); + color: var(--color-primary); + text-decoration: none !important; + font-weight: var(--font-weight-bold) !important; +} + +.footnote sup { + all: unset; +} + +.footnote:focus-visible, +.footnote:target { + text-decoration: underline !important; + text-underline-offset: 0.5rem; +} + +@media screen and (min-width: 640px) { + .title-center { + margin-left: calc(2 * var(--unit--horizontal)); + } + .fs-l { + line-height: calc(var(--unit--vertical) * 1.5); + } +} +main { + pointer-events: none; +} + +main article > div { + pointer-events: all; +} + +.page-cover > * { + pointer-events: all; +} + +#main-header { + position: fixed; + z-index: 2; + box-sizing: border-box; + width: 100vw; + padding-top: calc(var(--unit--vertical) / 2); +} + +[data-template=home] #main-header { + pointer-events: none; +} + +#logo * { + font-size: 25.3vw; + font-weight: var(--font-weight-extra-bold); +} + +#logo span { + height: 20vw; + width: 100%; + box-sizing: border-box; + padding-right: 3vw; + display: flex; + justify-content: flex-end; + align-items: center; +} + +#logo { + text-align: right; +} + +#logo #actuel { + font-weight: 550; +} + +[data-theme=light] #logo #actuel { + font-weight: 550; + color: white; + text-shadow: -1px 0 var(--color-primary), 1px 0 var(--color-primary), 0 -1px var(--color-primary), 0 1px var(--color-primary); +} + +#logo #actuel, +#logo #inactuel { + mix-blend-mode: difference; +} + +#logo #inactuel { + transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out; +} + +[data-theme=light] #logo #inactuel { + mix-blend-mode: difference; +} + +#main-header.minimized #inactuel { + margin-top: -20vw; + transform: translateX(-1px) translateY(-1px); +} + +#main-header.minimized #inactuel:not([data-template=home] *) { + transform: translateX(-1px) translateY(-1px) !important; +} + +.page-cover, +article > h1 { + padding-top: 50vw; +} + +.page-cover { + position: relative; + height: 100svh; + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: var(--unit--vertical); +} + +[data-template=home] .page-cover { + padding-top: 42.5vw; +} + +.page-cover .title-wrapper h1 { + margin-bottom: calc(0.255 * var(--unit--vertical)); +} + +.page-cover .text-wrapper { + height: 100%; + overflow: auto; +} + +button.toggle.left::after, +button.toggle.right::before { + transition: all 0.5s var(--curve-sine); + content: "+"; +} + +.page-cover .links { + position: absolute; + bottom: calc(var(--unit--vertical) / 2); + width: 100%; + box-sizing: border-box; +} + +.page-cover .links li { + display: inline-block; + margin-right: var(--unit--horizontal); +} + +[data-template=author] .page-cover, +[data-template=category] .page-cover, +[data-template=year] .page-cover, +[data-template=email] .page-cover, +[data-template=error] .page-cover, +[data-template=info] .page-cover { + height: initial !important; +} + +[data-template=author] .page-cover .links, +[data-template=category] .page-cover .links, +[data-template=year] .page-cover .links, +[data-template=email] .page-cover .links, +[data-template=error] .page-cover .links, +[data-template=info] .page-cover .links { + display: none; +} + +@media screen and (min-width: 640px) { + body:not([data-template=home]) #main-header { + width: var(--body-padding); + } + #logo * { + font-size: 26.65vw; + } + #logo span { + padding-right: 1vw; + } + body:not([data-template=home]) #logo * { + font-size: 5.6vw; + } + body:not([data-template=home]) #logo span { + height: 5vw; + padding-right: calc(var(--unit--horizontal) - 0.3vw); + } + 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; + } + .page-cover, + article > h1 { + padding-top: 15vw; + } + .page-cover { + min-height: calc(22 * var(--unit--vertical)); + } + [data-template=home] .page-cover { + padding-top: 42.5vw !important; + } + .page-cover .links { + display: none; + } +} +#nav-overlay { + position: fixed; + inset: 0; + background-color: var(--color-background); + opacity: 0.7; + z-index: 2; + cursor: w-resize; +} + +#nav-overlay:not(.nav-overlay--visible) { + display: none; +} + +.panel { + display: none; + position: fixed; + overflow: auto; + width: 100vw; + height: 100dvh; + top: 0; + background-color: var(--color-background); + outline: 1px solid var(--color-primary); + transition: all 0.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: var(--color-background); + 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:hover { + text-decoration: underline; + text-underline-offset: 4px; +} + +.sort-btns button.active { + text-decoration: underline; + text-underline-offset: 4px; +} + +.search { + position: relative; + width: 100%; + margin-top: var(--unit--vertical); + background-color: var(--color-background); + z-index: 1; + top: 0; + box-sizing: border-box; + border-bottom: 1px solid var(--color-primary); + display: flex; + align-items: center; +} + +.search__input { + all: unset; + width: 100%; + background-color: transparent; + padding: calc(var(--unit--vertical) / 4) 0; + border: none; + border-bottom: 1px solid var(--color-background); + color: var(--color-primary); + font-size: var(--font-size-m); + font-weight: var(--font-weight-light); + caret-color: var(--color-primary); +} + +.search__input::-moz-placeholder { + color: var(--color-primary); + font-size: var(--font-size-sm); + letter-spacing: 1px; + opacity: 0.55; +} + +.search__input::placeholder { + color: var(--color-primary); + font-size: var(--font-size-sm); + letter-spacing: 1px; + opacity: 0.55; +} + +.search__icon { + all: unset; + position: absolute; + width: 0.2rem; + height: 0.2rem; + padding: 0.5rem; + right: 0; + /* transform: translateY(0.2rem); */ + background-color: var(--color-primary); + -webkit-mask: var(--icon-search) no-repeat center; + mask: var(--icon-search) no-repeat center; + mask-size: contain; + -webkit-mask: var(--icon-search) no-repeat center; + -webkit-mask-size: contain; +} + +button.search__icon { + cursor: pointer; +} + +.panel__collection { + scroll-behavior: smooth; + height: 100%; + overflow: auto; + padding: var(--unit--vertical) var(--unit--horizontal); +} + +footer { + width: 100%; +} + +.panel-close { + position: fixed; + box-sizing: border-box; + bottom: 0; + justify-content: center; + width: 100%; + outline: none; + border-top: 1px solid var(--color-primary); + font-size: var(--font-size-m); + background-color: var(--color-background); + padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal); + margin-bottom: env(safe-area-inset-bottom); + color: var(--color-primary); + line-height: 1; +} + +/* ================= LISTS ================= */ +.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); +} + +/* ================= YEARS ================= */ +.panel__collection .panel__item:last-child { + margin-bottom: 6rem; +} + +.panel-item-content__edito { + margin-bottom: calc(var(--unit--vertical) / 2); +} + +.panel-item-content__edito p:not(:last-child) { + margin-bottom: var(--unit--vertical); +} + +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 ITEM ================= */ +.panel .text:first-child, +.panel .text:last-child { + margin-bottom: calc(var(--unit--vertical) * 2); +} + +.panel__collection--years .text:first-child .text__title { + display: inline-block; + padding-left: var(--unit--horizontal); +} + +.panel .text__subtitle { + margin-bottom: calc(var(--unit--vertical) / 4); +} + +.panel__collection--years .text:first-child .text__infos { + padding-left: var(--unit--horizontal); +} + +.panel__collection--years .text:first-child .text__infos::before { + content: ""; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 1px; + background-color: var(--color-primary); +} + +@media screen and (min-width: 640px) { + nav.panel { + width: 40rem; + } + .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 { + scroll-margin-block-start: calc(var(--unit--vertical) * 6); + padding-bottom: calc(var(--unit--vertical) * 2); + margin-top: calc(2 * var(--unit--vertical)); +} + +#main-content .texts { + margin-top: calc(2 * var(--unit--vertical)); +} + +#main-content .see-more { + margin-top: calc(var(--unit--vertical) * 0.5); +} + +[data-template=year] article > h1 { + margin-bottom: 0; +} + +article #main-content #chapo::after { + content: ""; + display: block; + margin-top: calc(2 * var(--unit--vertical)); + margin-bottom: calc(4 * var(--unit--vertical)); + width: 100%; + height: 1px; + background-color: var(--color-background); +} + +article #main-content li:not(.text) { + list-style-type: inherit; +} + +article h3 { + scroll-margin-top: calc(var(--unit--vertical) * 1); + margin-top: calc(3 * var(--unit--vertical)); + margin-bottom: calc(1 * var(--unit--vertical)); +} + +@media screen and (max-width: 640px) { + article h3 { + scroll-margin-top: calc(var(--unit--vertical) * 5); + } +} +article li, +article ol { + margin-left: var(--unit--horizontal); +} + +article figure { + margin: 4rem 0; +} + +article figure img { + max-width: 100%; +} + +@media screen and (min-width: 640px) { + article #main-content { + max-width: auto; + } +} +/* ================= SPECIFIC TO VIRTUAL PAGES ================= */ +[data-template=year] .edito { + margin-bottom: var(--unit--vertical); +} + +.main-edito-btn { + display: inline-block; + margin-right: calc(2 * var(--unit--horizontal)); +} + +#main-edito { + margin-top: calc(var(--unit--vertical) * 4); + scroll-margin-block-start: 25vw; +} + +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) var(--unit--horizontal); + box-sizing: border-box; +} + +.grid .column { + grid-column: span var(--span); +} + +.grid[data-columns="1"] .column { + grid-column: 11/span 20; +} + +[data-template=grid] main #main-content { + margin-left: inherit; +} + +@media screen and (max-width: 640px) { + .grid .column:not(:last-child) { + margin-bottom: calc(2 * var(--unit--vertical)); + } +} +@media screen and (min-width: 640px) { + [data-template=grid] main #main-content { + margin-left: calc(0px - 4 * var(--unit--horizontal)); + } + [data-template=grid] .grid { + display: grid; + grid-template-columns: repeat(39, 1fr); + -moz-column-gap: var(--unit--horizontal); + column-gap: var(--unit--horizontal); + margin-bottom: calc(var(--unit--vertical) * 2); + } +} +#subscribe-btn-wrapper { + height: 2.5rem; + margin-bottom: 0.2rem; +} + +#subscribe-form { + position: relative; + width: -moz-fit-content; + width: fit-content; +} + +#subscribe-form input { + background-color: transparent; + border: none; + box-sizing: border-box; + padding-bottom: 0.3rem; + padding-right: 2rem; + width: 15rem; + border-bottom: 1px solid var(--color-primary); + color: var(--color-primary); + caret-color: var(--color-primary); +} + +#subscribe-form input::-moz-placeholder { + color: var(--color-primary); + opacity: 0.55; +} + +#subscribe-form input::placeholder { + color: var(--color-primary); + opacity: 0.55; +} + +#subscribe-form input:focus-visible { + outline: none; +} + +#subscribe-form button[type=submit] { + color: var(--color-primary); + position: absolute; + top: 0; + right: 0; +} + +#main-footer { + position: fixed; + bottom: 0; + box-sizing: border-box; + border-bottom: 0; +} + +[data-template=home] #main-footer { + position: fixed; + left: 0; + bottom: 0; +} + +@media screen and (max-width: 640px) { + #main-footer ul { + bottom: 0; + display: flex; + justify-content: space-around; + border-top: 1px solid var(--color-primary); + background-color: var(--color-background); + } + #main-footer .open-nav-wrapper:has([data-open-panel=toc]) { + margin-right: 50px; + } +} +@media screen and (min-width: 1100px) { + /* On mobile > 1100px, le bouton table des matières n'est pas nécessaire car la TOC est visible */ + #main-footer .open-nav-wrapper:has([data-open-panel=toc]) { + display: none !important; + } +} +#main-footer li:not(.open-nav-wrapper) { + display: none; +} + +#main-footer li { + flex: 1; +} + +#main-footer li > * { + width: calc(100% - var(--unit--vertical) * 2); +} + +#main-footer button.open-nav { + transform: translateY(-2px); +} + +[data-template=home] .title-wrapper button.open-nav { + display: inline-block !important; +} + +@media screen and (max-width: 640px) { + #main-footer .open-nav { + display: flex; + justify-content: center; + outline: none; + font-size: var(--font-size-m); + background-color: var(--color-background); + color: var(--color-primary); + line-height: 1; + padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal); + } +} +@media screen and (min-width: 640px) { + #main-footer li { + display: block !important; + } + #main-footer { + position: fixed; + left: 0; + bottom: 0; + width: var(--body-padding); + background-color: transparent; + padding: var(--unit--vertical) var(--unit--horizontal); + } + #main-footer ul { + display: block; + } + #main-footer button.open-nav { + margin-bottom: var(--unit--vertical); + } + [data-template=home] #main-footer .open-nav-wrapper { + display: none !important; + } + .open-nav-wrapper { + padding: 0; + border: none; + background-color: transparent; + } +} +.theme-toggler { + position: fixed; + right: 0; + bottom: 0; + padding: calc(var(--unit--vertical) / 2 / 2) calc(var(--unit--horizontal) / 2); + margin: calc(var(--unit--vertical) / 2 / 2) calc(var(--unit--horizontal) / 2); + margin-bottom: calc(var(--unit--vertical) - var(--unit--vertical) / 2 / 2); + z-index: 100; +} + +.theme-toggler-icon { + width: 1.2rem; + height: 1.2rem; + background-color: var(--color-primary); + mask-size: cover; + -webkit-mask-size: cover; + mask: var(--icon-theme-toggler) no-repeat center; + -webkit-mask: var(--icon-theme-toggler) no-repeat center; +} + +@media screen and (max-width: 640px) { + .theme-toggler { + margin-bottom: calc(var(--unit--vertical) / 2 / 2); + } + .theme-toggler-icon { + width: 1.1rem; + height: 1.1rem; + } +} +@media print { + /* Hide header / footer infos. */ + @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; + } + } + .panel, nav { + display: none; + } + /* regle du light mode dupliqué*/ + :root { + --color-background: #ffffff; + --color-primary: #000; + --color-secondary-rgb: 140, 140, 140; + --font-weight-light: 240; + } + body { + padding-top: 4rem; + background-image: none; + background-color: var(--color-background) !important; + } + .minimized #inactuel { + transform: none !important; + margin: 0 !important; + } + #logo h1 { + display: grid; + grid-template-columns: 100%; + grid-template-rows: auto; + } + #logo #actuel, #logo #inactuel { + grid-column: 1; + grid-row: 1; + } + #logo #actuel { + font-weight: 550; + color: rgb(254, 250, 254) !important; + text-shadow: -1px 0 var(--color-primary), 1px 0 var(--color-primary), 0 -1px var(--color-primary), 0 1px var(--color-primary); + z-index: 100; + } + #logo #inactuel { + z-index: 0; + } + .main-title.fs-xxl { + font-size: 7rem !important; + line-height: 1 !important; + } + #main-header { + position: relative; + } + #entry-btns { + display: none; + } + a { + text-decoration: none !important; + } + article #main-content { + width: 60%; + margin: auto; + } +} +.toc { + display: flex; + flex-direction: column; + justify-content: center; +} + +.page-cover .toc { + flex: 1; +} + +@media (min-width: 1100px) { + .page-cover .toc { + position: fixed; + width: calc(var(--body-padding) - var(--unit--horizontal) * 2); + left: 0; + top: 15vw; + padding-inline: var(--unit--horizontal); + padding-top: calc(var(--unit--vertical) / 2); + } +} +.panel-toc .toc { + padding: var(--unit--vertical) var(--unit--horizontal); +} + +.toc_label { + font-size: var(--font-size-m); + margin-bottom: calc(var(--unit--vertical) / 4); +} + +.toc ul { + display: flex; + flex-direction: column; + gap: calc(var(--unit--vertical) / 4); +} + +.toc li { + margin-left: 0; +} :root { --color-primary--transparent: rgba(255, 255, 255, 0.86); - /* --color-secondary-rgb: 120, 171, 150; --color-secondary: rgba(var(--color-secondary-rgb), 0.86); --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2); @@ -33,43 +1275,36 @@ --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); } -[data-theme="dark"] { +[data-theme=dark] { --color-background: #000; --color-primary: #ffffff; - --font-weight-light: 200; } -[data-theme="light"] { + +[data-theme=light] { --color-background: #ffffff; --color-primary: #000; - --color-secondary-rgb: 140, 140, 140; --font-weight-light: 240; } @@ -78,17 +1313,14 @@ :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)); } -} +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..158c5b6 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,91 @@ +@import "src/reset"; +@import "src/html"; +@import "src/generic"; +@import "src/texts"; +@import "src/header"; +@import "src/nav"; +@import "src/article"; +@import "src/virtual"; +@import "src/home"; +@import "src/grid"; +@import "src/newsletter"; +@import "src/footer"; +@import "src/toggle-light-mode"; +@import "src/print"; +@import "src/toc"; + +:root { + --color-primary--transparent: rgba(255, 255, 255, 0.86); + + /* --color-secondary-rgb: 120, 171, 150; + --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: 253, 68, 26; + --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); */ + --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); +} + +[data-theme="dark"] { + --color-background: #000; + --color-primary: #ffffff; + + --font-weight-light: 200; +} +[data-theme="light"] { + --color-background: #ffffff; + --color-primary: #000; + + --color-secondary-rgb: 140, 140, 140; + --font-weight-light: 240; +} + +@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)); + } +}