#main-header { position: fixed; box-sizing: border-box; width: 100vw; } #logo * { font-size: 26.65vw; font-weight: var(--font-weight-extra-bold); } #logo span { height: 20vw; width: 100vw; 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); } .page-cover { position: relative; height: calc(100svh - var(--entry-btns-height)); box-sizing: border-box; padding-top: calc(var(--unit--vertical-relative) * 5); display: flex; flex-direction: column; } .page-cover .text-wrapper { height: 100%; overflow: auto; } [data-template="home"] .page-cover { padding-top: calc(var(--unit--vertical-relative) * 6); } /* ================= 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) { /* #logo { width: 100%; } #logo * { font-size: 25.8vw; } */ .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(41.5vw); } [data-template="author"] .page-cover, [data-template="category"] .page-cover, [data-template="year"] .page-cover { height: initial; } #entry-btns { display: none; } }