html {
margin-left:0;
@include xl() {
margin-left:280px;
}
@include xxl() {
margin-left: 320px;
}
}
#searchfield {
outline-color: $color-background-alt;
border-radius: $card-radius;
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
}
#mobile-sidebar {
position: fixed;
top:0;
left:-100vw;
width: 280px;
height:100vh;
transition: left 0.2s;
padding: 1rem;
overflow: hidden;
&.shown {
left:0;
}
@include xl() {
left:0;
}
@include xxl() {
width: 320px;
}
z-index:11;
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.6);
}
img.myavatar {
height: 140px;
width: auto;
display: block;
margin: 1rem auto 1.5rem auto;
border: 3px solid $color-background;
box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.5);
border-radius: 8px;
@include old() {
height: 128px;
margin: 0.25rem auto 1rem auto;
}
}
.menu-button {
position:fixed;
bottom: 24px;
right: 24px;
background-color:rgba(0,0,0,0.2);
color:$color-font-light;
padding:0.75em;
border:none;
font-size:1.2rem;
display:flex;
align-content: center;
justify-content: center;
aspect-ratio: 1;
border-radius:999px;
z-index: 12;
&:hover {
background-color: $color-primary;
}
@include xl() {
display: none;
}
}