diff --git a/assets/css/src/article.css b/assets/css/src/article.css index 87f49f2..7398007 100644 --- a/assets/css/src/article.css +++ b/assets/css/src/article.css @@ -1,4 +1,4 @@ -article .content { +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); @@ -6,7 +6,7 @@ article .content { } @media screen and (min-width: 640px) { - article .content { + article #main-content { max-width: auto; } } diff --git a/assets/css/src/footer.css b/assets/css/src/footer.css index edadd31..0376ecf 100644 --- a/assets/css/src/footer.css +++ b/assets/css/src/footer.css @@ -1,4 +1,6 @@ #main-footer { + position: fixed; + bottom: 0; width: 100%; box-sizing: border-box; padding: var(--unit--horizontal); @@ -23,6 +25,12 @@ @media screen and (min-width: 640px) { #main-footer { - display: none; + position: fixed; + left: 0; + bottom: 0; + width: var(--body-padding); + } + #main-footer ul { + display: block; } } diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css index bb0c9a0..df55578 100644 --- a/assets/css/src/generic.css +++ b/assets/css/src/generic.css @@ -84,11 +84,12 @@ body { /* ================= BUTTONS ================= */ .toggle-btn--left::after, -.plus-btn::after { +button.plus::after { margin-left: var(--unit--horizontal); } + .toggle-btn--left::after, -.plus-btn::after { +button.plus::after { content: "+"; } .toggle-btn--left.open::after { diff --git a/assets/css/src/grid.css b/assets/css/src/grid.css index 56f959f..fe61cc6 100644 --- a/assets/css/src/grid.css +++ b/assets/css/src/grid.css @@ -4,7 +4,7 @@ body.full-width #desktop-nav { body.full-width #desktop-nav .empty { height: calc(var(--unit--vertical) / 2); } -body.full-width .content { +body.full-width #main-content { position: absolute; left: 0; width: 100vw; diff --git a/assets/css/src/header.css b/assets/css/src/header.css index ae08a1a..1307ca4 100644 --- a/assets/css/src/header.css +++ b/assets/css/src/header.css @@ -2,6 +2,7 @@ position: fixed; box-sizing: border-box; width: 100vw; + padding-top: calc(var(--unit--vertical) / 2); } #logo * { @@ -11,7 +12,7 @@ #logo span { height: 20vw; - width: 100vw; + width: 100%; box-sizing: border-box; padding-right: 1vw; display: flex; @@ -31,16 +32,17 @@ #logo #inactuel { transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out; } + #main-header.minimized #inactuel { - margin-top: -20vw; + margin-top: -19.6vw; transform: translateX(-2px) translateY(-2px); } .page-cover { position: relative; - height: calc(100svh - var(--entry-btns-height)); + height: 100svh; box-sizing: border-box; - padding-top: calc(var(--unit--vertical-relative) * 5); + padding-top: calc(var(--unit--vertical-relative) * 9); display: flex; flex-direction: column; @@ -51,10 +53,6 @@ overflow: auto; } -[data-template="home"] .page-cover { - padding-top: calc(var(--unit--vertical-relative) * 6); -} - /* ================= ENTRY BTNS ================= */ #entry-btns { position: sticky; @@ -101,12 +99,19 @@ button.toggle.right::before { } @media screen and (min-width: 640px) { - /* #logo { - width: 100%; + 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); } - #logo * { - font-size: 25.8vw; - } */ .page-cover:not( [data-template="author"] .page-cover, @@ -115,8 +120,12 @@ button.toggle.right::before { ) { height: 100vh; padding: calc(10 * var(--unit--vertical)) 0; - padding-top: calc(41.5vw); + padding-top: calc(var(--unit--vertical) * 8); } + [data-template="home"] .page-cover { + padding-top: calc(42.5vw) !important; + } + [data-template="author"] .page-cover, [data-template="category"] .page-cover, [data-template="year"] .page-cover { diff --git a/assets/css/src/html.css b/assets/css/src/html.css index 6c17d7f..3f2e157 100644 --- a/assets/css/src/html.css +++ b/assets/css/src/html.css @@ -69,6 +69,6 @@ html { } main { - padding: 0 calc(10 * var(--unit--horizontal)); + padding: 0 var(--body-padding); } } diff --git a/assets/css/src/print.css b/assets/css/src/print.css index 7cb3ca8..eeec2a1 100644 --- a/assets/css/src/print.css +++ b/assets/css/src/print.css @@ -60,7 +60,7 @@ text-decoration: none !important; } - article .content { + article #main-content { width: 60%; margin: auto; } diff --git a/assets/css/src/texts.css b/assets/css/src/texts.css index 876164f..9459a0a 100644 --- a/assets/css/src/texts.css +++ b/assets/css/src/texts.css @@ -95,7 +95,7 @@ button, } .fs-xxl { font-size: var(--font-size-xxl) !important; - line-height: calc(var(--unit--vertical) * 3) !important; + line-height: calc(var(--unit--vertical) * 2.5) !important; } p, @@ -141,18 +141,18 @@ a * { transition: font 0.2s ease-in-out; } -a.no-line.text__title:hover * { +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-line):hover { +a:not(.no-underline):hover { text-decoration: none; } -a:not(.no-line) { +a:not(.no-underline) { text-decoration: underline; text-decoration-color: inherit; text-decoration-line: underline; diff --git a/assets/css/style.css b/assets/css/style.css index b3b6df6..1bbc632 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -69,5 +69,7 @@ --font-weight-light: 200; --font-weight-bold: 400; --font-weight-extra-bold: 550; + + --body-padding: calc(10 * var(--unit--horizontal)); } } diff --git a/assets/dist/style.css b/assets/dist/style.css index f0d91e5..594e110 100644 --- a/assets/dist/style.css +++ b/assets/dist/style.css @@ -284,13 +284,13 @@ button { a * { transition: font 0.2s ease-in-out; } -a.no-line:hover * { +a.no-underline:hover * { font-weight: 250; } -a:not(.no-line):hover { +a:not(.no-underline):hover { text-decoration: none; } -a:not(.no-line) { +a:not(.no-underline) { text-decoration: underline; text-decoration-color: inherit; text-decoration-line: underline; diff --git a/assets/js/alpine.min.js b/assets/js/alpine.min.js index cc6050c..b050ef1 100644 --- a/assets/js/alpine.min.js +++ b/assets/js/alpine.min.js @@ -1,5 +1,5 @@ -(()=>{var rt=!1,nt=!1,U=[],it=-1;function Vt(e){An(e)}function An(e){U.includes(e)||U.push(e),On()}function Se(e){let t=U.indexOf(e);t!==-1&&t>it&&U.splice(t,1)}function On(){!nt&&!rt&&(rt=!0,queueMicrotask(Cn))}function Cn(){rt=!1,nt=!0;for(let e=0;ee.effect(t,{scheduler:r=>{ot?Vt(r):r()}}),st=e.raw}function at(e){D=e}function Wt(e){let t=()=>{};return[n=>{let i=D(n);return e._x_effects||(e._x_effects=new Set,e._x_runEffects=()=>{e._x_effects.forEach(o=>o())}),e._x_effects.add(i),t=()=>{i!==void 0&&(e._x_effects.delete(i),L(i))},i},()=>{t()}]}function ve(e,t){let r=!0,n,i=D(()=>{let o=e();JSON.stringify(o),r?n=o:queueMicrotask(()=>{t(o,n),n=o}),r=!1});return()=>L(i)}function W(e,t,r={}){e.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:!0}))}function C(e,t){if(typeof ShadowRoot=="function"&&e instanceof ShadowRoot){Array.from(e.children).forEach(i=>C(i,t));return}let r=!1;if(t(e,()=>r=!0),r)return;let n=e.firstElementChild;for(;n;)C(n,t,!1),n=n.nextElementSibling}function E(e,...t){console.warn(`Alpine Warning: ${e}`,...t)}var Gt=!1;function Jt(){Gt&&E("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems."),Gt=!0,document.body||E("Unable to initialize. Trying to load Alpine before `` is available. Did you forget to add `defer` in Alpine's `