html { margin-left:0; @include lg() { 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: 320px; height:100vh; transition: left 0.2s; padding: 1rem; overflow: hidden; &.shown { left:0; } @include lg() { left:0; } z-index:10; 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 lg() { display: none; } }