diff --git a/lib/ffdocs/view/release_renderer.rb b/lib/ffdocs/view/release_renderer.rb index 150e042..6f6c25b 100644 --- a/lib/ffdocs/view/release_renderer.rb +++ b/lib/ffdocs/view/release_renderer.rb @@ -249,11 +249,15 @@ def emphasis(text) when "Other Vers." js = <<~JS - (function(e) { - e.open = true; + (function() { + const ov = document.querySelector(".other-versions"); + const sidebar = document.querySelector("#sidebar-toggle-check"); - requestAnimationFrame(() => e.scrollIntoView(true)); - })(document.querySelector(".other-versions")); + sidebar.checked = true; + ov.open = true; + + requestAnimationFrame(() => ov.scrollIntoView(true)); + })(); return false; JS diff --git a/lib/ffdocs/view/styles/_layout.scss b/lib/ffdocs/view/styles/_layout.scss index 3c7ae38..870c2d1 100644 --- a/lib/ffdocs/view/styles/_layout.scss +++ b/lib/ffdocs/view/styles/_layout.scss @@ -21,6 +21,10 @@ body { header { grid-column: 1 / 3; grid-row: 1 / 2; + + .sidebar-toggle, #sidebar-toggle-check { + display: none; + } } nav { @@ -34,38 +38,84 @@ main { } @media screen and (max-width: 20cm) { + @supports selector(:has(a, b)) { - body { - grid-template-rows: auto 1fr auto; - grid-template-columns: auto; - } + body { + grid-template-rows: auto 1fr auto; + grid-template-columns: auto; + } - header { - grid-column: 1 / 2; - grid-row: 1 / 2; - } + header { + grid-column: 1 / 2; + grid-row: 1 / 2; + } - nav { - grid-column: 1 / 2; - grid-row: 3 / 4; - } + nav, main { + grid-column: 1 / 2; + grid-row: 2 / 3; + } - main { - grid-column: 1 / 2; - grid-row: 2 / 3; - } + // Toggle sidebar + header .sidebar-toggle { + display: flex; + } + + body:has(#sidebar-toggle-check:checked) { + nav { display: block; } + main { display: none; } + } + body:not(:has(#sidebar-toggle-check:checked)) { + main { display: block; } + nav { display: none; } + } + + } } // Content. header { + $padding: 1ex; + display: flex; - justify-content: space-between; - padding: 1ex; + padding: $padding; + align-items: center; - .links { - align-self: flex-end; + .title { + flex: 1; + } + + // Sidebar toggle button. + .sidebar-toggle { + align-items: center; + + padding-right: $padding; + + label { + font-size: 0; + overflow: hidden; + + &::after { + content: " "; + + font-size: 1rem; + display: inline-block; + + $size: calc(var(--base-font-size) * 1.4); + height: $size; + width: $size; + + background-image: svg-file(menu); + background-size: 100%; + background-position: center center; + background-repeat: no-repeat; + } + } + + &:has(input:checked) label::after { + filter: sepia(100%) hue-rotate(90deg) saturate(10) drop-shadow(0 0 3px var(--main-green));; + } } } diff --git a/lib/ffdocs/view/svg/menu.svg b/lib/ffdocs/view/svg/menu.svg new file mode 100644 index 0000000..b6b5442 --- /dev/null +++ b/lib/ffdocs/view/svg/menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/lib/ffdocs/view/templates/_layout.haml b/lib/ffdocs/view/templates/_layout.haml index e7b4023..96bfcf3 100644 --- a/lib/ffdocs/view/templates/_layout.haml +++ b/lib/ffdocs/view/templates/_layout.haml @@ -22,7 +22,12 @@ %body %header + .sidebar-toggle + %input{type: "checkbox", id: "sidebar-toggle-check"} + %label{for: "sidebar-toggle-check"} Sidebar + .title= "FFmpeg #{release ? release.version : ""}" + .links != link_to_file :version_matrix, "Version Matrix" - if project_url