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

6
assets/css/src/article.css
View file

@ -4,3 +4,9 @@ article .content {
margin-top: calc(var(--unit--vertical) * 2);
padding-bottom: calc(var(--unit--vertical) * 2);
}
@media screen and (min-width: 640px) {
article .content {
max-width: auto;
}
}

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,

11
assets/css/src/html.css
View file

@ -59,17 +59,16 @@ html {
}
@media screen and (min-width: 640px) {
body {
--padding-body: calc(15 * var(--unit--horizontal));
}
body.full-width {
--padding-body: calc(var(--unit--horizontal) * 10);
}
body,
#logo {
body {
padding-left: var(--padding-body) !important;
box-sizing: content-box;
}
main {
padding: 0 calc(10 * var(--unit--horizontal));
}
}

35
assets/css/src/nav.css
View file

@ -133,15 +133,46 @@ button.search__icon {
position: fixed;
box-sizing: border-box;
z-index: 3;
top: 0;
bottom: 0;
left: 0;
width: var(--padding-body);
height: 100vh;
height: 29vh;
padding: var(--unit--vertical) var(--unit--horizontal);
}
#desktop-nav .empty {
height: calc(3 * var(--unit--vertical));
}
#subscribe-btn-wrapper {
height: 2.5rem;
margin-bottom: 0.2rem;
}
#subscribe-form {
position: relative;
width: fit-content;
}
#subscribe-form input {
background-color: transparent;
border: none;
border-bottom: 1px solid #fff;
box-sizing: border-box;
padding-bottom: 0.3rem;
padding-right: 2rem;
color: #fff;
width: 15rem;
}
#subscribe-form input:focus-visible {
outline: none;
}
#subscribe-form button[type="submit"] {
color: #fff;
position: absolute;
top: 0;
right: 0;
}
.panel {
z-index: 4;
width: var(--padding-body);

6
assets/css/src/texts.css
View file

@ -19,7 +19,6 @@
#logo * {
font-size: 25vw;
line-height: 4rem;
font-weight: var(--font-weight-extra-bold);
}
@ -133,6 +132,11 @@ p {
transform: translateY(3px);
}
input {
font-size: var(--font-size-s);
font-weight: var(--font-weight-light);
}
button {
display: flex;
align-items: center;

11
assets/css/style.css
View file

@ -15,7 +15,7 @@
--color-primary: #ffffff;
--color-primary--transparent: rgba(255, 255, 255, 0.86);
--color-secondary-rgb: 120, 171, 150;
/* --color-secondary-rgb: 120, 171, 150;
--color-secondary: rgba(var(--color-secondary-rgb), 0.86);
--color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
--color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
@ -23,6 +23,15 @@
--color-tertiary-rgb: 253, 68, 26;
--color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
--color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
--color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1); */
--color-secondary-rgb: 200, 200, 200;
--color-secondary: rgba(var(--color-secondary-rgb), 0.86);
--color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
--color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
--color-tertiary-rgb: 200, 200, 200;
--color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
--color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
--color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1);
--unit--horizontal: 5vw;