129 lines
2.5 KiB
CSS
129 lines
2.5 KiB
CSS
#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;
|
|
}
|
|
}
|