improve nav design

This commit is contained in:
isUnknown 2024-11-26 10:19:13 +01:00
parent cf867bbc14
commit 26047fb0e1
7 changed files with 37 additions and 88 deletions

View file

@ -1,7 +1,16 @@
/* ================= PANELS ================= */
#desktop-nav {
#nav-overlay {
position: fixed;
inset: 0;
background-color: #000;
opacity: 0.7;
z-index: 2;
cursor: w-resize;
}
#nav-overlay:not(.nav-overlay--visible) {
display: none;
}
.panel {
display: none;
position: fixed;
@ -136,7 +145,11 @@ button.search__icon {
overflow: hidden;
}
.panel-item-content__texts {
button.see-more {
margin-bottom: var(--unit--vertical);
}
.panel-item-content__texts:not(.panel__collection .panel-item-content__texts) {
padding: var(--unit--vertical) var(--unit--horizontal);
}
@ -146,21 +159,9 @@ button.search__icon {
}
@media screen and (min-width: 640px) {
#desktop-nav {
display: block;
position: fixed;
box-sizing: border-box;
z-index: 3;
bottom: 0;
left: 0;
width: var(--padding-body);
height: 29vh;
padding: var(--unit--vertical) var(--unit--horizontal);
nav.panel {
width: 40rem;
}
#desktop-nav .empty {
height: calc(3 * var(--unit--vertical));
}
#subscribe-btn-wrapper {
height: 2.5rem;
margin-bottom: 0.2rem;
@ -194,7 +195,6 @@ button.search__icon {
.panel {
z-index: 4;
width: var(--padding-body);
padding-top: var(--unit--vertical);
}
.panel-close {