.menu {
$root: &; background-image: linear-gradient(142deg, $dark 0%, $p_darkest 45%, $dark 90%); position: fixed; left: 0; top: 0; display: flex; flex-direction: column; height: 100%; overflow-y: auto; float: left; width: $menu-size; box-sizing: border-box; border-right: 2px solid $dark; @include mobile { flex-direction: row; width: 100%; height: $menu-size; } &-top { box-sizing: border-box; height: 100%; flex-grow: 1; } &-top { padding-left: 3px; padding-right: 3px; @include mobile { padding: 3px 10px 3px 10px; } } ul { @include mobile { display: flex; flex-direction: row; margin: 0; } padding-left: 0px; li { display: flex; height: 50px; justify-content:center; position: relative; a { align-items:center; color: $p_text; cursor: pointer; display: flex; font-weight: 400; justify-content: center; letter-spacing: 1px; line-height: 28px; &:hover { font-weight: 900; color: $p_lighter; } &.selected { color: $primary; &::before{ content: ""; display: block; width: 2px; height: 100%; background-color: $primary; position: absolute; left: -2px; top: 0px; box-shadow: $primary 4px 0px 22px; @include mobile { height: 2px; width: 100%; top: -2px; left: 0; } } } @include mobile { height: calc(#{$menu-size} - 10px); width: $menu-size; font-size: 30px; } i { margin-right: 5px; } } } } h1 { font-size: 2em; padding: 0.5em; } h2 { color: darken($color: $s_text, $amount: 25); font-weight: 400; font-size: 1.1em; line-height: 1.3; } &-contact { display:flex; justify-content:center; margin-bottom: 20px; flex-wrap: wrap; @include mobile{ font-size: 16px; max-height: $menu-size; margin-bottom: 0; display: inline-grid; grid-template-rows: 50% 50%; a:nth-child(odd) { grid-row-start: 1; } a:nth-child(even) { grid-row-start: 2; } a:nth-child(odd):last-child { margin-top: 13px; } } a { color: $p_text; cursor:pointer; text-align:left; text-size-adjust:100%; user-select:none; margin-left: 4px; margin-right: 4px; &:hover { font-weight: 900; color: $p_lighter; } } }
}
.is-minimal-menu {
.menu { width: $minimal-menu-size; @include mobile { height: $minimal-menu-size; width: 100%; } ul { li { a { i { margin: 0; } @include mobile { height: calc(#{$minimal-menu-size} - 10px); width: $minimal-menu-size; } } } } }
}