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,113 +15,119 @@
 
 {%- set section = get_section(path=page.ancestors | last) -%}
 
-<article>
+<div id="docs-container">
-	{%- 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 %} />
-		</div>
-	{%- endif -%}
-
-	<div id="heading">
-
-		<h1>{{ page.title }}</h1>
-
-		{%- if page.authors or config.extra.show_reading_time -%}
-			<p>
-				<small>
-					{%- if page.authors -%}
-						<span>{% include "partials/authors.html" -%}</span>
-						{%- if config.extra.show_reading_time -%}
-							<span> {{ config.extra.separator | default(value="•") }} </span>
-						{%- endif -%}
-					{%- endif -%}
-
-					{%- if config.extra.show_reading_time -%}
-						<span>{{ macros_translate::translate(key="minutes_read", number=page.reading_time, default="$NUMBER minute read", language_strings=language_strings) }}</span>
-						{%- if page.taxonomies -%}
-							<span> {{ config.extra.separator | default(value="•") }} </span>
-						{%- endif -%}
-					{%- endif -%}
-				</small>
-			</p>
-		{%- endif -%}
-
-		{%- if page.taxonomies -%}
-			{%- for name, taxon in page.taxonomies %}
-				<ul class="tags">
-					{%-for item in taxon -%}
-						<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
-					{%- endfor %}
-				</ul>
-			{%- endfor -%}
-		{%- endif %}
-	</div>
-
-	<div id="buttons-container">
-		{%- if page.extra.toc and page.toc | length > 0 -%}
-			<details id="toc" class="closable">
-				<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
-				<div>
-					<strong class="title">{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</strong>
-					<div>
-						<{{ list_element }}>
-							{%- for h1 in page.toc -%}
-								<li>
-									<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-									{%- if h1.children -%}
-										<{{ list_element }}>
-											{%- for h2 in h1.children -%}
-												<li>
-													<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-												</li>
-											{%- endfor -%}
-										</{{ list_element }}>
-									{%- endif -%}
-								</li>
-							{%- endfor -%}
-						</{{ list_element }}>
-					</div>
-				</div>
-			</details>
-		{%- endif -%}
-		{%- if config.extra.show_backlinks and page.backlinks | length > 0 -%}
-			<details id="backlinks" class="closable">
-				<summary title="{{ macros_translate::translate(key='backlinks', default='Backlinks', language_strings=language_strings) }}"><i class="icon"></i></summary>
-				<div>
-					<strong class="title">{{ macros_translate::translate(key="backlinks", default="Backlinks", language_strings=language_strings) }}</strong>
-					<div>
-						<ul>
-							{%- for backlink in page.backlinks -%}
-								<li>
-									<a href="{{ backlink.permalink }}">{{ backlink.title }}</a>
-								</li>
-							{%- endfor -%}
-						</ul>
-					</div>
-				</div>
-			</details>
-		{%- endif -%}
-		<a id="go-to-top" href="#top" title="{{ macros_translate::translate(key='go_to_top', default='Go to Top', language_strings=language_strings) }}"><i class="icon"></i></a>
-		{%- if config.extra.show_share_button -%}
-			<a id="share" href="https://shareopenly.org/share/?url={{ page.permalink }}{% if page.description %}&text={{ page.description | urlencode }}{% endif %}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='share', default='Share', language_strings=language_strings) }}"><i class="icon"></i></a>
-		{%- endif -%}
-		{%- if config.extra.issues_url -%}
-			<a id="issue" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='file_an_issue', default='File an Issue', language_strings=language_strings) }}"><i class="icon"></i></a>
-		{%- endif -%}
-	</div>
-
-	{%- include "partials/statements.html" -%}
-
-	{%- if page.extra.toc_inline -%}
-		{%- include "partials/toc.html" -%}
-	{%- elif config.extra.toc_inline -%}
-		{%- include "partials/toc.html" -%}
-	{%- endif -%}
-
 	{% include "partials/docs_toc.html" %}
 
-	{{ page.content | safe }}
+	<article>
-</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 %} />
+			</div>
+		{%- endif -%}
+
+		<div id="heading">
+
+			<h1>{{ page.title }}</h1>
+
+			{%- if page.authors or config.extra.show_reading_time -%}
+				<p>
+					<small>
+						{%- if page.authors -%}
+							<span>{% include "partials/authors.html" -%}</span>
+							{%- if config.extra.show_reading_time -%}
+								<span> {{ config.extra.separator | default(value="•") }} </span>
+							{%- endif -%}
+						{%- endif -%}
+
+						{%- if config.extra.show_reading_time -%}
+							<span>{{ macros_translate::translate(key="minutes_read", number=page.reading_time, default="$NUMBER minute read", language_strings=language_strings) }}</span>
+							{%- if page.taxonomies -%}
+								<span> {{ config.extra.separator | default(value="•") }} </span>
+							{%- endif -%}
+						{%- endif -%}
+					</small>
+				</p>
+			{%- endif -%}
+
+			{%- if page.taxonomies -%}
+				{%- for name, taxon in page.taxonomies %}
+					<ul class="tags">
+						{%-for item in taxon -%}
+							<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
+						{%- endfor %}
+					</ul>
+				{%- endfor -%}
+			{%- endif %}
+		</div>
+
+		<div id="buttons-container">
+			{%- if page.extra.toc and page.toc | length > 0 -%}
+				<details id="toc" class="closable">
+					<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
+					<div>
+						<strong class="title">{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</strong>
+						<div>
+							<{{ list_element }}>
+								{%- for h1 in page.toc -%}
+									<li>
+										<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+										{%- if h1.children -%}
+											<{{ list_element }}>
+												{%- for h2 in h1.children -%}
+													<li>
+														<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+													</li>
+												{%- endfor -%}
+											</{{ list_element }}>
+										{%- endif -%}
+									</li>
+								{%- endfor -%}
+							</{{ list_element }}>
+						</div>
+					</div>
+				</details>
+			{%- endif -%}
+			{%- if config.extra.show_backlinks and page.backlinks | length > 0 -%}
+				<details id="backlinks" class="closable">
+					<summary title="{{ macros_translate::translate(key='backlinks', default='Backlinks', language_strings=language_strings) }}"><i class="icon"></i></summary>
+					<div>
+						<strong class="title">{{ macros_translate::translate(key="backlinks", default="Backlinks", language_strings=language_strings) }}</strong>
+						<div>
+							<ul>
+								{%- for backlink in page.backlinks -%}
+									<li>
+										<a href="{{ backlink.permalink }}">{{ backlink.title }}</a>
+									</li>
+								{%- endfor -%}
+							</ul>
+						</div>
+					</div>
+				</details>
+			{%- endif -%}
+			<a id="go-to-top" href="#top" title="{{ macros_translate::translate(key='go_to_top', default='Go to Top', language_strings=language_strings) }}"><i class="icon"></i></a>
+			{%- if config.extra.show_share_button -%}
+				<a id="share" href="https://shareopenly.org/share/?url={{ page.permalink }}{% if page.description %}&text={{ page.description | urlencode }}{% endif %}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='share', default='Share', language_strings=language_strings) }}"><i class="icon"></i></a>
+			{%- endif -%}
+			{%- if config.extra.issues_url -%}
+				<a id="issue" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='file_an_issue', default='File an Issue', language_strings=language_strings) }}"><i class="icon"></i></a>
+			{%- endif -%}
+		</div>
+
+		{%- include "partials/statements.html" -%}
+
+		{%- if page.extra.toc_inline -%}
+			{%- include "partials/toc.html" -%}
+		{%- elif config.extra.toc_inline -%}
+			{%- include "partials/toc.html" -%}
+		{%- endif -%}
+
+		{{ page.content | safe }}
+	</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) -%}