From 915a71fecddd723bccb77d9ea541c2d8af14c516 Mon Sep 17 00:00:00 2001 From: daudix Date: Sun, 1 Dec 2024 16:55:08 +0300 Subject: [PATCH] Optional TOC sidebar (fixes #107) --- CHANGELOG.md | 4 +++ content/_index.md | 1 + content/mods/index.md | 1 + sass/_footer.scss | 1 + sass/_general.scss | 64 ++++++++++++++++++++++++++++++++++++++++++ sass/_nav.scss | 1 + templates/base.html | 7 +++++ templates/page.html | 2 ++ templates/section.html | 2 ++ 9 files changed, 83 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 36d4d87..d6e06da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v6.0.0...main) +### Added + +- Add `toc_sidebar` page/section variable for turning table of contents to a sidebar. + ### Changed - Don't scale down article cards when clicking on tags in them. diff --git a/content/_index.md b/content/_index.md index 24fa96f..67f430c 100644 --- a/content/_index.md +++ b/content/_index.md @@ -111,6 +111,7 @@ Configuration variables from `config.toml` that can be set/overriden per page/se - `toc`: Enables table of contents. Only first 2 levels of headings are listed. - `toc_inline`: Whether to render inline table of contents at the top of all pages, in addition to floating quick navigation buttons. - `toc_ordered`: Whether to use numbered (ordered) list for table of contents. +- `toc_sidebar`: Whether to display table of contents as a sidebar (useful for long pages). Other variables: diff --git a/content/mods/index.md b/content/mods/index.md index 30436bc..505e24d 100644 --- a/content/mods/index.md +++ b/content/mods/index.md @@ -2,6 +2,7 @@ title = "Mods" [extra] toc = true +toc_sidebar = true +++ Mods enhance/change some Duckquill visuals. They are updated alongside Duckquill to ensure that you don't need to manually update them every release. diff --git a/sass/_footer.scss b/sass/_footer.scss index 7ff0354..27a6ea9 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -1,4 +1,5 @@ #site-footer { + grid-area: footer; margin-block-end: 2rem; text-align: center; diff --git a/sass/_general.scss b/sass/_general.scss index 676ea09..8eb32a7 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -13,6 +13,10 @@ body { text-wrap: pretty; display: grid; // Put footer at the bottom for short pages, such as the 404 grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer + grid-template-areas: + "nav" + "main" + "footer"; margin: 0; background-color: var(--bg-color); min-height: 100vh; @@ -20,6 +24,21 @@ body { line-height: 1.5; font-family: var(--font-system-ui), var(--font-emoji); overflow-wrap: break-word; + + &:has(#sidebar) { + grid-template-columns: 1fr min(var(--container-width), 90%) 1fr; + grid-template-areas: + "nav nav nav" + "sidebar main ." + "footer footer footer"; + @media only screen and (max-width: 1200px) { + grid-template-areas: + "nav nav nav" + ". sidebar ." + ". main ." + "footer footer footer"; + } + } } // Style text selection to use accent color @@ -67,7 +86,52 @@ main { width: min(var(--container-width), 90%); } +#sidebar { + display: flex; + position: sticky; + top: 0; + grid-area: sidebar; + opacity: 0.2; + transition: var(--transition); + padding: 1rem; + height: 100vh; + + &:hover { + opacity: 1; + } + + @media only screen and (max-width: 1200px) { + position: static; + opacity: 1; + margin-block-start: 4.25rem; + margin-block-end: -4.25rem; + padding: 0; + height: auto; + } + + & > div { + --mask: linear-gradient(to bottom, + transparent, + black 1rem, + black calc(100% - 1rem), + transparent); + -webkit-mask-image: var(--mask); + flex: 1; + mask-image: var(--mask); + overflow: auto; + } + + & + main { + grid-area: main; + margin: 0; + margin-block-start: 4.25rem; + margin-block-end: 4rem; + width: auto; + } +} + @media (prefers-reduced-motion) { + *, *::before, *::after { diff --git a/sass/_nav.scss b/sass/_nav.scss index 1b73104..1db2958 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -64,6 +64,7 @@ #site-nav { position: sticky; + grid-area: nav; z-index: 999; margin: 1rem auto 0; inset-block-start: 1rem; diff --git a/templates/base.html b/templates/base.html index 45d9216..bbec753 100644 --- a/templates/base.html +++ b/templates/base.html @@ -15,6 +15,13 @@ {%- if config.extra.nav.links %} {% include "partials/nav.html" %} {%- endif %} + {%- if page.extra.toc_sidebar or section.extra.toc_sidebar -%} + + {%- endif -%}
{% block custom %}{% endblock custom %} {% block content %}{% endblock content %} diff --git a/templates/page.html b/templates/page.html index acc84b1..1cdcdac 100644 --- a/templates/page.html +++ b/templates/page.html @@ -3,6 +3,8 @@ {% block content %}

{{ page.title }}

{%- include "partials/statements.html" -%} +{%- if page.extra.toc and not page.extra.toc_sidebar -%} {%- include "partials/toc.html" -%} +{%- endif -%} {{ page.content | safe }} {% endblock content %} diff --git a/templates/section.html b/templates/section.html index 2cd488f..c5aded2 100644 --- a/templates/section.html +++ b/templates/section.html @@ -3,6 +3,8 @@ {% block content %}

{{ section.title }}

{%- include "partials/statements.html" -%} +{%- if section.extra.toc and not section.extra.toc_sidebar -%} {%- include "partials/toc.html" -%} +{%- endif -%} {{ section.content | safe }} {% endblock content %}