Implement docs sidebar #3

sass/_docs.scss

@@ -0,0 +1,64 @@
+#docs {
+	background-color: var(--fg-muted-1-soft);
+	padding: 0.5em 1em;
+	border-radius: var(--rounded-corner);
+	min-width: 200px;
+	margin: 0rem 1rem 0rem 1rem;
+
+	ul {
+		padding: 0;
+		list-style-type: none;
+	}
+
+	a {
+		display: block;
+		text-decoration: none;
+		color: var(--fg-muted-5);
+		padding: 0.5em 1em 0.5em 1em;
+		background: transparent;
+		border-radius: var(--rounded-corner-small);
+		width: 100%;
+	}
+
+	a:hover {
+		background: var(--fg-muted-1-soft);
+		transition: 0.1s;
+	}
+
+	.active {
+		background: var(--fg-muted-1);
+		color: var(--fg-muted-5);
+	}
+
+	h3 {
+		padding-left: 1em;
+		font-size: var(--font-size-medium);
+	}
+}
+
+#docs-container {
+	display: flex;
+	flex-wrap: wrap;
+	height: 100%;
+	justify-content: center;
+
+	#docs {
+		left: 1em;
+		margin-bottom: 1em;
+	}
+
+	article {
+		margin-left: auto;
+		margin-right: auto;
+		max-width: min(var(--container-width), 90%);
+	}
+}
+
+#toc-hidden {
+	visibility: hidden;
+	height: 0px;
+}
+
+.expand-main {
+	width: 100%;
+}

sass/_general.scss

@@ -72,6 +72,9 @@ body {
 
 main {
 	margin: 4.25rem auto 4rem;
+}
+
+.restricted-width {
 	width: min(var(--container-width), 90%);
 }
 

sass/_variables.scss

@@ -21,6 +21,7 @@
 		--bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
 		--fg-color: rgb(255 255 255);
 		--fg-contrast: rgb(0 0 0 / 0.8);
+		--fg-muted-1-soft: rgb(255 255 255 / 0.03);
 		--fg-muted-1: rgb(255 255 255 / 0.05);
 		--fg-muted-2: rgb(255 255 255 / 0.1);
 		--fg-muted-3: rgb(255 255 255 / 0.2);
@@ -45,6 +46,7 @@
 		--fg-color: rgb(0 0 0 / 0.8);
 		--fg-contrast: rgb(255 255 255);
 		--fg-contrast-soft: rgb(255 255 255);
+		--fg-muted-1-soft: var(--fg-muted-1);
 		--fg-muted-1: rgb(0 0 0 / 0.05);
 		--fg-muted-2: rgb(0 0 0 / 0.1);
 		--fg-muted-3: rgb(0 0 0 / 0.2);

sass/style.scss

@@ -15,6 +15,7 @@
 @use "code";
 @use "comments";
 @use "crt";
+@use "docs";
 @use "emoji";
 @use "external";
 @use "footer";

templates/404.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 {%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}

templates/article.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 {%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}

templates/article_list.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 {%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}

templates/base.html

@@ -15,7 +15,7 @@
 	{%- if config.extra.nav.links %}
 		{% include "partials/nav.html" %}
 	{%- endif %}
-	<main id="main-content">
+	<main id="main-content" class="{% block classes %}{% endblock classes %}">
 		{% block custom %}{% endblock custom %}
 		{% block content %}{% endblock content %}
 		{% include "partials/extra_features.html" %}

templates/docs.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 

templates/documentation_page.html

@@ -1,5 +1,9 @@
 {% extends "base.html" %}
 
+{% block classes %}
+expand-main
+{% endblock classes %}
+
 {% block content %}
 {%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
 
@@ -11,7 +15,10 @@
 
 {%- set section = get_section(path=page.ancestors | last) -%}
 
-<article>
+<div id="docs-container">
+	{% include "partials/docs_toc.html" %}
+
+	<article>
 		{%- if page.extra.banner -%}
 			<div id="banner-container">
 				<img id="banner" class="full-bleed{% if page.extra.banner_pixels %} pixels{% endif %}" src="{{ current_url ~ page.extra.banner }}" {% if config.markdown.lazy_async_image %}decoding="async" loading="lazy"{% endif %} />
@@ -114,10 +121,13 @@
 			{%- include "partials/toc.html" -%}
 		{%- endif -%}
 
-	{% include "partials/docs_toc.html" %}
-
 		{{ page.content | safe }}
-</article>
+	</article>
+
+	<div id="toc-hidden">
+		{% include "partials/docs_toc.html" %}
+	</div>
+</div>
 
 {%- if page.extra.comments.id -%}
 	{%- include "partials/comments.html" -%}

templates/index.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 {{ section.content | safe }}

templates/page.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 <h1>{{ page.title }}</h1>

templates/partials/docs_toc.html

@@ -1,8 +1,15 @@
+{%- if page %}
+	{% set slug = page.slug %}
+{%- else %}
+	{% set slug = "" %}
+{%- endif %}
+
 <div id="docs">
+	<ul>
 	{%- for page in section.pages %}
 		{%- if page.extra.section == 0 %}
 			<li>
-				<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+				<a class="{%- if slug == page.slug -%}active{%- endif -%}" href="{{ page.permalink | safe }}">{{ page.title }}</a>
 			</li>
 		{%- endif %}
 	{%- endfor %}
@@ -12,9 +19,10 @@
 			<h3>{{ section.extra.sections | nth(n=int_section - 1) }}</h3>
 			{%- for page in pages %}
 				<li>
-					<a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+					<a class="{%- if slug == page.slug -%}active{%- endif -%}" href="{{ page.permalink | safe }}">{{ page.title }}</a>
 				</li>
 			{%- endfor %}
 		{%- endif %}
 	{%- endfor %}
+	</ul>
 </div>

templates/restricted_base.html

@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block classes %}
+restricted-width
+{% endblock classes %}

templates/section.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 <h1>{{ section.title }}</h1>

templates/subproject.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 {%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}

templates/subproject_list.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 

templates/taxonomy_list.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 {%- set number_of_tags = terms | length -%}

templates/taxonomy_single.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "restricted_base.html" %}
 
 {% block content %}
 {%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}