main { pointer-events: none; } .page-cover > * { pointer-events: all; } #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 0.3s ease-in-out, transform 0.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 ================= */ #entry-btns { position: sticky; position: -webkit-sticky; top: calc(var(--unit--vertical) * 4); height: var(--entry-btns-height); display: flex; justify-content: space-between; } [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 0.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::before, #entry-btns.minimized .entry-btn::after { font-weight: bold; } #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: calc(42.5vw) !important; } [data-template="author"] .page-cover, [data-template="category"] .page-cover, [data-template="year"] .page-cover { height: initial; } #entry-btns { display: none; } }