diff options
Diffstat (limited to 'assets/css/main.css')
| -rw-r--r-- | assets/css/main.css | 52 |
1 files changed, 51 insertions, 1 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index db58044..6a669d9 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -4,7 +4,7 @@ body { background: var(--base); color: var(--text); margin: 0; - padding: 0; + padding: 0.2rem; } a { @@ -93,4 +93,54 @@ footer .social { header h1 { font-size: medium; } +} + +.mobile-menu { + display: none; +} + +@media screen and (max-width: 500px) { + nav { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + background-color: var(--base); + z-index: 10000; + padding: 1.5rem 0.5rem; + transform: scale(0%); + filter: saturate(0) brightness(0); + pointer-events: none; + transition: transform steps(8) 200ms 300ms,filter steps(4) 200ms 0ms; + overflow-y: auto; + } + .mobile-menu { + display: block; + background: none; + color: var(--text); + border: none; + font-weight: bold; + padding: 0.8rem; + } + + nav.open { + transform: scale(100%); + pointer-events: all; + filter: saturate(1) brightness(1); + transition: transform steps(8) 200ms,filter steps(4) 200ms 300ms; + } + nav ul { + flex-direction: column; + } + nav .mobile-menu { + width: 100%; + text-align: right; + margin-bottom: 1rem; + } + nav ul a { + display: block; + padding: 0.5rem; + } }
\ No newline at end of file |