diff options
Diffstat (limited to 'css/sideMenu.scss')
| -rw-r--r-- | css/sideMenu.scss | 50 |
1 files changed, 30 insertions, 20 deletions
diff --git a/css/sideMenu.scss b/css/sideMenu.scss index 480d35c..59c93a3 100644 --- a/css/sideMenu.scss +++ b/css/sideMenu.scss @@ -4,14 +4,14 @@ display: flex; flex-direction: column; gap: 1rem; - height: calc(100% + 1rem); justify-content: space-between; left: 100%; - overflow: hidden; + min-height: calc(100vh + 1rem); padding: 1rem; padding-bottom: 2rem; - padding-top: calc(var(--hamburgerHeight) + 2rem); - position: absolute; + padding-top: calc(var(--hamburgerHeight) + 1rem); + position: relative; + top: 0; width: 100%; z-index: 127; @@ -24,42 +24,52 @@ transition-timing-function: ease-in-out; } - @media (pointer: coarse) { - font-size: 2em; - overflow: scroll; - } - &.visible { left: 0; } - div.links { - display: flex; - gap: 1rem; - max-width: $contentWidth; - padding: 1rem; - width: 100%; + section.links { + display: flex; + gap: 1rem; + justify-content: end; + max-width: $contentWidth; + padding: 1rem; + width: 100%; - @media (pointer: coarse) { + @media (orientation: portrait) { flex-direction: column; } section { display: flex; flex-direction: column; - gap: 0.25rem; + gap: $separatorWidth; p { background-color: var(--textColour); - border-radius: 0.25rem; + border-radius: $separatorWidth; color: var(--backgroundColour); font-weight: bold; - padding: 0.25rem 1rem; + padding: $separatorWidth 1rem; text-align: center; } a { - padding: 0.25rem; + padding: 0 calc($separatorWidth * 2); + position: relative; + + &[aria-current = "page"]::after { + background-color: var(--textColour); + border-radius: $separatorWidth; + content: ""; + display: block; + height: 100%; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: $separatorWidth; + } } } } |