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

style desktop nav panel

Browse source
This commit is contained in:
isUnknown 2024-04-15 13:43:57 +02:00
parent 57e9ca74da
commit 81454b3e4e
16 changed files with 157 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/src/footer.css
View file

@ -23,6 +23,6 @@
@media screen and (min-width: 640px) {
#main-footer {
padding: calc(var(--unit--horizontal) / 2) var(--unit--horizontal);
display: none;
}
}

12
assets/css/src/generic.css
View file

@ -79,21 +79,21 @@ body {
}
/* ================= BUTTONS ================= */
.toggle-btn.left::after {
.toggle-btn--left::after {
margin-left: var(--unit--horizontal);
}
.toggle-btn.left::after {
.toggle-btn--left::after {
content: "+";
}
.toggle-btn.left.open::after {
.toggle-btn--left.open::after {
content: "-";
}
.toggle-btn.right::before {
.toggle-btn--right::before {
margin-right: var(--unit--horizontal);
}
.toggle-btn.right::before {
.toggle-btn--right::before {
content: "+";
}
.toggle-btn.right.open::before {
.toggle-btn--right.open::before {
content: "-";
}

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

@ -5,13 +5,19 @@
left: 0;
box-sizing: border-box;
width: 100vw;
height: calc(var(--unit--vertical) * 4);
height: calc(var(--unit--vertical) * 4.5);
padding: var(--unit--vertical) var(--unit--horizontal);
padding-bottom: 0;
transition: height 0.2s ease-in-out;
}
#logo {
position: relative;
height: 100%;
}
#logo__link {
display: block;
height: 100%;
}
#main-header.open #actuel {
@ -24,13 +30,13 @@
}
#logo #inactuel {
position: absolute;
bottom: 0;
z-index: 0;
color: var(--color-secondary);
bottom: -48%;
transition: bottom 0.2s ease-in-out;
}
#main-header.minimized #logo #inactuel {
bottom: 0%;
#main-header.minimized {
height: 5.6rem;
}
body {
@ -63,7 +69,7 @@ body[data-template="home"] {
#entry-btns {
position: sticky;
position: -webkit-sticky;
top: calc(var(--unit--vertical) * 3);
top: calc(var(--unit--vertical) * 4);
height: var(--entry-btns-height);
display: flex;
justify-content: space-between;
@ -143,11 +149,12 @@ button.toggle.right::before {
font-size: 11vw;
}
#main-header.minimized {
height: calc(var(--unit--vertical) * 4.3);
}
.page-cover {
height: 100vh;
padding: calc(10 * var(--unit--vertical)) 0;
}
#entry-btns {
display: none;
}
}

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

@ -61,7 +61,11 @@ html {
}
@media screen and (min-width: 640px) {
:root {
--padding-body: calc(12 * var(--unit--horizontal));
}
body {
padding: 0 calc(6 * var(--unit--horizontal));
padding-left: var(--padding-body);
max-width: calc(17 * var(--unit--horizontal));
}
}

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

@ -1,4 +1,7 @@
/* ================= PANELS ================= */
#desktop-nav {
display: none;
}
.panel {
position: fixed;
width: 100%;
@ -8,7 +11,6 @@
outline: 1px solid #fff;
transition: all 0.5s var(--curve-sine);
z-index: 2;
padding: 0 var(--unit--horizontal);
padding-top: calc(var(--unit--vertical) * 5);
box-sizing: border-box;
@ -16,6 +18,11 @@
flex-direction: column;
}
.search,
.panel__items {
padding: 0 var(--unit--horizontal);
}
.panel--left {
left: calc(-100vw - 1px);
}
@ -36,6 +43,7 @@
background-color: #000;
z-index: 1;
top: 0;
box-sizing: border-box;
}
.search__input {
all: unset;
@ -59,8 +67,8 @@
height: 1.2rem;
padding: 0.5rem;
bottom: 0;
right: calc(var(--unit--horizontal) / 6);
transform: translateX(0.5rem);
right: var(--unit--horizontal);
transform: translateX(0.5rem) translateY(-0.2rem);
}
button.search__icon {
cursor: pointer;
@ -76,12 +84,11 @@ button.search__icon {
.panel-close {
justify-content: center;
width: calc(100% - 2 * var(--unit--horizontal));
bottom: 0;
outline: none;
border-top: 1px solid #fff;
font-size: var(--font-size-m);
background-color: #000;
padding: calc(var(--unit--vertical) / 2) 0;
padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
margin-bottom: env(safe-area-inset-bottom);
}
@ -119,3 +126,38 @@ button.search__icon {
.text {
margin-bottom: var(--unit--vertical);
}
@media screen and (min-width: 640px) {
#desktop-nav {
display: block;
position: fixed;
box-sizing: border-box;
z-index: 3;
top: 0;
left: 0;
width: var(--padding-body);
height: 100vh;
padding: var(--unit--vertical) var(--unit--horizontal);
}
#desktop-nav .empty {
height: calc(3 * var(--unit--vertical));
}
.panel {
z-index: 4;
width: var(--padding-body);
padding-top: var(--unit--vertical);
}
.panel-close {
display: none;
}
.panel--right {
right: auto;
left: calc(-100vw - 1px);
}
.panel--right.open {
left: 0;
}
}

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

@ -20,7 +20,6 @@
#logo * {
font-size: 25vw;
line-height: 4rem;
transform: translate(-2px, -13px);
font-weight: var(--font-weight-extra-bold);
}

53
assets/css/src/variables.css
View file

@ -1,53 +0,0 @@
:root {
--color-background: #000;
--color-primary: #ffffff;
--color-primary--transparent: rgba(255, 255, 255, 0.86);
--color-secondary: rgb(120, 171, 150, 0.86);
--color-secondary--light: rgb(119, 177, 157, 0.2);
--color-secondary--x-light: rgb(119, 177, 157, 0.1);
--unit--horizontal: 5vw;
--unit--vertical: 1.7rem;
--unit--vertical-relative: calc(
var(--unit--vertical) * var(--window-height-factor)
);
--font-size-s: 0.8rem;
--font-size-sm: calc(var(--font-size-s) * 1);
--font-size-m: calc(var(--font-size-s) * 1.5);
--font-size-l: calc(var(--font-size-m) * 1.5);
--font-size-xl: calc(var(--font-size-l) * 1.5);
--font-size-xxl: calc(var(--font-size-xl) * 1.5);
--font-weight-light: 200;
--font-weight-bold: 400;
--font-weight-extra-bold: 550;
--opacity-light: 0.6;
--curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@media screen and (min-width: 640px) {
:root {
--color-background: #000;
--color-primary: #ffffff;
--color-primary--transparent: rgba(255, 255, 255, 0.86);
--color-secondary: rgb(120, 171, 150, 0.86);
--color-secondary--light: rgb(119, 177, 157, 0.25);
--color-secondary--x-light: rgb(119, 177, 157, 0.15);
--unit--horizontal: 5vw;
--unit--vertical: 1.7rem;
--font-size-s: 0.9rem;
--font-size-m: calc(var(--font-size-s) * 1.5);
--font-size-l: calc(var(--font-size-m) * 1.5);
--font-size-xl: calc(var(--font-size-l) * 1.5);
--font-size-xxl: calc(var(--font-size-xl) * 1.5);
--font-weight-light: 200;
--font-weight-bold: 400;
--font-weight-extra-bold: 550;
}
}