improve design

This commit is contained in:
isUnknown 2024-11-26 13:21:42 +01:00
parent 26047fb0e1
commit 266765fa75
26 changed files with 99 additions and 180 deletions

View file

@ -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 {