diff options
Diffstat (limited to 'internal/web/static/blog.css')
| -rw-r--r-- | internal/web/static/blog.css | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css index 7b91dbe..b3b0312 100644 --- a/internal/web/static/blog.css +++ b/internal/web/static/blog.css @@ -49,6 +49,53 @@ img { max-width: 100%; height: auto; } .nav-spread .site-header .nav-inner { text-align: justify; line-height: 0; } .nav-spread .site-header .nav-inner > a, .nav-spread .site-header .search-form { line-height: 1.5; } .nav-spread .site-header .nav-inner::after { content: ""; display: inline-block; width: 100%; } +/* menu fold (theme nav_fold): the header menu becomes a button when its links + do not fit. The hidden (offscreen, still focusable) checkbox before the + header's blocks is the open/closed state; the label is the button, at the + right of the title or logo block above the menu (.has-burger on that + block), or in the bar when nothing is above it. Which state applies: + .nav-folded is set by the page's script when a link wraps, .nav-auto is the + no-script fallback (folded on phones only) the script removes; the two + blocks below must stay identical. */ +.nav-toggle { position: absolute; left: -9999px; } +.nav-burger { display: none; cursor: pointer; font-weight: bold; font-size: 1.2em; line-height: 2em; padding: 0 0.5em; white-space: nowrap; } +.burger-icon .nb-text, .burger-text .nb-icon { display: none; } +.burger-both .nb-icon { margin-right: 0.3em; } +.nav-toggle:focus-visible ~ .has-burger .nav-burger { outline: 2px solid; } /* the keyboard's focus ring, on the button */ +.nav-folded .nav-burger { display: block; } +.nav-folded .has-burger { position: relative; padding-right: 3.6em; } +.nav-folded.header-center .has-burger { padding-left: 3.6em; } /* the brand stays centred */ +.nav-folded .has-burger > .nav-burger { position: absolute; right: 1em; top: 50%; margin-top: -1em; } +.nav-folded .site-nav.has-burger { padding-right: 0; } +.nav-folded .site-nav.has-burger .nav-inner { padding-left: 0; padding-right: 0; } /* the button keeps its place when the panel opens */ +.nav-folded .site-nav.has-burger .nav-inner > .nav-burger { display: inline-block; margin-left: 0.5em; } +.nav-folded .site-nav .nav-inner > a, .nav-folded .site-nav .search-form { display: none; } +.nav-folded .site-nav:not(.has-burger) { border-bottom: 0; } /* the bar is nothing until opened */ +.nav-folded .site-nav:not(.has-burger) .nav-inner { padding: 0; } +.nav-folded .nav-toggle:checked ~ .site-nav { border-bottom: 1px solid rgba(0,0,0,0.1); } +.nav-folded .nav-toggle:checked ~ .site-nav .nav-inner { padding: 0.3em 0; text-align: left; line-height: 1.5; } +.nav-folded .nav-toggle:checked ~ .site-nav .nav-inner > a { display: block; padding: 0.6em 1.2em; } +.nav-folded .nav-toggle:checked ~ .site-nav .nav-inner::after { display: none; } +.nav-folded .nav-toggle:checked ~ .site-nav .search-form { display: block; float: none; margin: 0.4em 1.2em; } +.nav-folded .nav-toggle:checked ~ .site-nav .search-form input { width: 100%; } +@media (max-width: 700px) { + .nav-auto .nav-burger { display: block; } + .nav-auto .has-burger { position: relative; padding-right: 3.6em; } + .nav-auto.header-center .has-burger { padding-left: 3.6em; } + .nav-auto .has-burger > .nav-burger { position: absolute; right: 1em; top: 50%; margin-top: -1em; } + .nav-auto .site-nav.has-burger { padding-right: 0; } + .nav-auto .site-nav.has-burger .nav-inner { padding-left: 0; padding-right: 0; } /* the button keeps its place when the panel opens */ + .nav-auto .site-nav.has-burger .nav-inner > .nav-burger { display: inline-block; margin-left: 0.5em; } + .nav-auto .site-nav .nav-inner > a, .nav-auto .site-nav .search-form { display: none; } + .nav-auto .site-nav:not(.has-burger) { border-bottom: 0; } + .nav-auto .site-nav:not(.has-burger) .nav-inner { padding: 0; } + .nav-auto .nav-toggle:checked ~ .site-nav { border-bottom: 1px solid rgba(0,0,0,0.1); } + .nav-auto .nav-toggle:checked ~ .site-nav .nav-inner { padding: 0.3em 0; text-align: left; line-height: 1.5; } + .nav-auto .nav-toggle:checked ~ .site-nav .nav-inner > a { display: block; padding: 0.6em 1.2em; } + .nav-auto .nav-toggle:checked ~ .site-nav .nav-inner::after { display: none; } + .nav-auto .nav-toggle:checked ~ .site-nav .search-form { display: block; float: none; margin: 0.4em 1.2em; } + .nav-auto .nav-toggle:checked ~ .site-nav .search-form input { width: 100%; } +} .body-wrap { padding: 1.5em 1em; } .content { padding: 1.5em 2em; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .page-title { margin-top: 0; } |