From a765c65bc44724e0f3f1a14ec2988323758ab377 Mon Sep 17 00:00:00 2001 From: Jessica Hamilton Date: Fri, 23 Aug 2024 03:28:07 +0000 Subject: [PATCH] haikumodern: include a collapsible sidebar. --- theme/haikumodern/layout.html | 9 +++- .../haikumodern/static/haikumodern.css.jinja | 41 +++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/theme/haikumodern/layout.html b/theme/haikumodern/layout.html index d4d5c49..bdbf2ba 100644 --- a/theme/haikumodern/layout.html +++ b/theme/haikumodern/layout.html @@ -137,6 +137,7 @@ {%- block body_tag %} + {% endblock %}
@@ -147,7 +148,13 @@

{{ title|striptags|e }}

{%- block sidebar %}{{ sidebar() }}{% endblock %} diff --git a/theme/haikumodern/static/haikumodern.css.jinja b/theme/haikumodern/static/haikumodern.css.jinja index 58bb2cd..9b35839 100644 --- a/theme/haikumodern/static/haikumodern.css.jinja +++ b/theme/haikumodern/static/haikumodern.css.jinja @@ -446,3 +446,44 @@ div.viewcode-block:target { div.math p { text-align: center; } + +/* collapsible sidebar */ +input#sidebar-checkbox { + position: absolute; + width: 0; + height: 0; + visibility: hidden; +} + +input#sidebar-checkbox:checked~div#app nav.toc { + visibility: hidden; + min-width: 0; + max-width: 0; +} + +input#sidebar-checkbox:checked~div#app { + /* zero for the second column collapses layout */ + grid-template-columns: 1fr 0 minmax(0, 100ch) 1fr; +} + +label#sidebar-label { + grid-column: 1; + max-height: 20px; + padding: 1px 1em; +} + +nav.top > div { + grid-column: 3; + display: grid; + grid-template-columns: 1fr 1fr; +} +nav.top > div > ul { + display: inline-flex; + grid-column: 2; + justify-self: right; + font-size: 13px; +} +nav.top svg { + fill: #dc3c01; + width: 16px; +}