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

redesign nav and logo

Browse source
This commit is contained in:
isUnknown 2024-11-26 09:53:05 +01:00
parent 48bfd23600
commit cf867bbc14
14 changed files with 315 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,43 +3,59 @@
display: none;
}
.panel {
display: none;
position: fixed;
overflow: auto;
width: 100vw;
height: 100dvh;
top: 0;
background-color: #000;
outline: 1px solid #fff;
transition: all 0.5s var(--curve-sine);
z-index: 2;
padding-top: calc(var(--unit--vertical) * 5);
z-index: 3;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.search,
.panel__items {
padding: 0 var(--unit--horizontal);
.panel.panel--visible {
display: flex;
}
.panel--left {
left: calc(-100vw - 1px);
}
.panel--right {
right: calc(-100vw - 1px);
.panel header {
position: sticky;
top: 0;
z-index: 1;
background-color: #000;
padding: var(--unit--vertical) var(--unit--horizontal);
padding-bottom: 0;
}
.panel--left.open {
left: 0;
.sort-btns {
box-sizing: border-box;
}
.panel--right.open {
right: 0;
.sort-btns button {
all: unset;
cursor: pointer;
display: inline-block;
margin-right: 2vw;
}
.sort-btns button:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.sort-btns button.active {
text-decoration: underline;
text-underline-offset: 4px;
}
.search {
position: relative;
width: 100%;
margin-top: var(--unit--vertical);
background-color: #000;
z-index: 1;
top: 0;
@ -66,24 +82,26 @@
width: 1.2rem;
height: 1.2rem;
padding: 0.5rem;
bottom: 0;
right: var(--unit--horizontal);
transform: translateX(0.5rem) translateY(-0.2rem);
right: 0;
transform: translateX(0.5rem) translateY(0.2rem);
}
button.search__icon {
cursor: pointer;
}
.panel__items {
.panel__collection {
scroll-behavior: smooth;
height: 100%;
padding-top: var(--unit--vertical);
overflow: auto;
padding: var(--unit--vertical) var(--unit--horizontal);
}
.panel-close {
position: fixed;
box-sizing: border-box;
bottom: 0;
justify-content: center;
width: calc(100% - 2 * var(--unit--horizontal));
width: 100%;
outline: none;
border-top: 1px solid #fff;
font-size: var(--font-size-m);
@ -119,7 +137,7 @@ button.search__icon {
}
.panel-item-content__texts {
margin-top: var(--unit--vertical);
padding: var(--unit--vertical) var(--unit--horizontal);
}
/* ================= TEXT ITEM ================= */