Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

redesign b&w

Browse source
This commit is contained in:
isUnknown 2024-10-25 18:24:19 +02:00
parent 1719a1bcbb
commit 48bfd23600
9 changed files with 130 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

39
assets/css/src/header.css
View file

@ -3,10 +3,9 @@
z-index: 3;
top: 0;
left: 0;
box-sizing: border-box;
width: 100vw;
height: calc(var(--unit--vertical) * 4.5);
padding: var(--unit--vertical) var(--unit--horizontal);
width: calc(100vw - (2 * var(--unit--horizontal)));
height: calc(var(--unit--vertical) * 11.5);
padding: 0 var(--unit--horizontal);
padding-bottom: 0;
transition: height 0.2s ease-in-out;
}
@ -16,6 +15,8 @@
}
#logo__link {
position: relative;
transform: translateY(-3rem);
display: block;
height: 100%;
}
@ -23,20 +24,23 @@
#main-header.open #actuel {
color: var(--color-background);
}
#logo #actuel {
color: var(--color-primary--transparent);
position: relative;
z-index: 1;
}
#logo #actuel,
#logo #inactuel {
position: absolute;
bottom: 0;
z-index: 0;
color: var(--color-secondary);
transition: bottom 0.2s ease-in-out;
mix-blend-mode: difference;
}
#main-header.minimized {
height: 5.6rem;
#logo #actuel {
top: 0;
right: 0;
}
#logo #inactuel {
top: 15vw;
transition: all 0.3s ease-in-out;
}
#main-header.minimized #logo #inactuel {
top: 0.1vw;
}
body {
@ -136,10 +140,10 @@ button.toggle.right::before {
@media screen and (min-width: 640px) {
#logo {
width: 37vw;
width: 100%;
}
#logo * {
font-size: 11vw;
font-size: 25.8vw;
}
.page-cover:not(
@ -149,6 +153,7 @@ button.toggle.right::before {
) {
height: 100vh;
padding: calc(10 * var(--unit--vertical)) 0;
padding-top: calc(41.5vw);
}
[data-template="author"] .page-cover,
[data-template="category"] .page-cover,