optimize mobile header

This commit is contained in:
Your Name 2023-04-20 09:31:07 -04:00 committed by Henri Dickson
parent 07b55703ef
commit d1861d023b
3 changed files with 9 additions and 30 deletions

View file

@ -8,7 +8,7 @@
padding: 0 2.0rem;
width: 100%
.grid
.grid
@include container
$main-width: 70%
@ -18,7 +18,7 @@
width: $main-width
float: left
position: relative
& &__aside
width: $aside-width
// background-color: $color-bright
@ -30,11 +30,12 @@
justify-content: space-around
&::after
@include clear
@include clear
// Small devices (landscape phones, 576px and up)
@media (max-width: $small-devices)
.grid
padding: 0 0.2rem;
& &__aside
flex-direction: column !important
// Medium devices (tablets, 768px and up)
@ -58,9 +59,7 @@
& &__main--reverse-order
transform: scaleY(-1)
& &__aside--reverse-order
transform: scaleY(-1)
transform: scaleY(-1)
// Extra large devices (large desktops, 1200px and up)
@media (max-width: $x-large-devices)
pass

View file

@ -85,41 +85,22 @@
& &__wrapper
display: block
& &__logo-img
width: 72px
max-width: 72px
max-height: 26px
margin-right: 10px
position: relative
top: 7px
// dropdown
& &__link-list
// display: block
margin-top: 7px
max-height: 0
transition: max-height 0.6s ease-out
overflow: hidden;
& &__dropdown-btn
display: block
position: absolute
right: 5px
top: 3px
transform: scale(0.7)
&:hover + .navbar__link-list
max-height: 500px
transition: max-height 0.6s ease-in
& &__search-box
margin: 0
width: 46vw
width: 80%
$widget-height: 26px
& > input[type="search"]
height: $widget-height
padding: 4px 6px
width: 32vw
& .navbar__search-dropdown
cursor: pointer
height: $widget-height
width: 80px
width: 60px
padding-left: 5px
.dropdown
display: inline

View file

@ -24,7 +24,6 @@
</select>
</div>
<button class="navbar__dropdown-btn">• • •</button>
<ul class="navbar__link-list">
{% if request.user.is_authenticated %}