Optional TOC sidebar (fixes #107)

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.

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:
 

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.

sass/_footer.scss

@@ -1,4 +1,5 @@
 #site-footer {
+	grid-area: footer;
 	margin-block-end: 2rem;
 	text-align: center;
 

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 {

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;

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 -%}
+		<div id="sidebar">
+			<div>
+				{%- include "partials/toc.html" -%}
+			</div>
+		</div>
+	{%- endif -%}
 	<main id="main-content">
 		{% block custom %}{% endblock custom %}
 		{% block content %}{% endblock content %}

templates/page.html

@@ -3,6 +3,8 @@
 {% block content %}
 <h1>{{ page.title }}</h1>
 {%- include "partials/statements.html" -%}
+{%- if page.extra.toc and not page.extra.toc_sidebar -%}
 {%- include "partials/toc.html" -%}
+{%- endif -%}
 {{ page.content | safe }}
 {% endblock content %}

templates/section.html

@@ -3,6 +3,8 @@
 {% block content %}
 <h1>{{ section.title }}</h1>
 {%- include "partials/statements.html" -%}
+{%- if section.extra.toc and not section.extra.toc_sidebar -%}
 {%- include "partials/toc.html" -%}
+{%- endif -%}
 {{ section.content | safe }}
 {% endblock content %}