diff --git a/assets/style.scss b/assets/style.scss index 50f014d..41d8c75 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -26,8 +26,19 @@ header, footer { } header { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; margin-top: 0.5rem; + pre { + font-family: monospace; + font-size: 0.8rem; + line-height: 1; + user-select: none; + } + nav { font-size: 1.2rem; } @@ -54,15 +65,32 @@ nav { display: flex; flex-direction: column; - :not(:first-child) { - margin: 0.5rem 0 0 0; + &.nav-toggleable { + flex-basis: 100%; + max-height: 0; + overflow-y: hidden; + transition: max-height 0.5s; + + .nav-toggle:checked ~ & { + max-height: calc(var(--num-elements) * 2em); + } + } + + a { + line-height: 1.5em; + margin: 0.5em 0 0 0; } @media screen and (min-width: $small) { flex-direction: row; - :not(:first-child) { - margin: 0 0 0 1rem; + &.nav-toggleable { + flex-basis: auto; + max-height: max-content; + } + + a { + margin: 0 0 0 1em; } } } @@ -91,3 +119,39 @@ a { p + p { margin-top: 0.5rem; } + +.nav-burger { + cursor: pointer; + display: flex; + flex-direction: column; + height: 1rem; + justify-content: space-between; + width: 1.2rem; + + div { + border: 1px solid #aaa; + transition: border-color 0.5s, transform 0.5s; + } + + .nav-toggle:checked ~ & div { + border-color: transparent; + + &:first-child { + border-color: #aaa; + transform: translateY(0.5rem) translateY(-1px) rotate(45deg) scaleX(141%); + } + + &:last-child { + border-color: #aaa; + transform: translateY(-0.5rem) translateY(1px) rotate(-45deg) scaleX(141%); + } + } + + @media screen and (min-width: $small) { + display: none; + } +} + +.nav-toggle { + display: none; +} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4fda27f..8c7f48d 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -11,7 +11,17 @@
-