From dce877ff85b19541a7a98efd4534a73ce2dd43c6 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Tue, 18 Jun 2024 04:02:32 +0300
Subject: [PATCH] Return footer links, with a bit different style

---
 config.toml                    | 10 +++++++
 sass/_footer.scss              | 52 +++++++++++++++++++++++-----------
 templates/partials/footer.html | 34 ++++++++++++++++++++++
 templates/partials/nav.html    |  4 +--
 4 files changed, 81 insertions(+), 19 deletions(-)

diff --git a/config.toml b/config.toml
index 37662a3..e92d41e 100644
--- a/config.toml
+++ b/config.toml
@@ -153,6 +153,16 @@ langs = [
 ]
 
 [extra.footer]
+# Links used in the footer.
+# Same as the nav ones.
+links = [
+  { url = "@/blog/_index.md", name = "Blog", name_ru = "Блог" },
+  { url = "@/demo/index.md", name = "Demo", name_ru = "Демо" },
+  { url = "https://codeberg.org/daudix/duckquill", name = "Repo", name_ru = "Репо" },
+  { url = "@/blog/_index.md", name = "Blog", name_ru = "Блог" },
+  { url = "@/demo/index.md", name = "Demo", name_ru = "Демо" },
+  { url = "https://codeberg.org/daudix/duckquill", name = "Repo", name_ru = "Репо" },
+]
 # Social links in the footer.
 # Any URL-encoded SVG can be used as an icon.
 # https://simpleicons.org is recommended source of SVG icons.
diff --git a/sass/_footer.scss b/sass/_footer.scss
index 920ef82..83fbe25 100644
--- a/sass/_footer.scss
+++ b/sass/_footer.scss
@@ -4,29 +4,47 @@
 	padding: 2rem 0 2rem;
 	text-align: center;
 
-	#links {
-		display: block;
-		column-gap: 2rem;
-		column-width: 25ex;
-		margin: 0 auto 1rem;
-		padding: 0;
-		max-width: min(var(--container-width) + 10rem, 90%);
+	nav {
+		margin: 0 auto 1rem auto;
+		box-shadow: var(--edge-highlight);
+		border-radius: 999px;
+		background-color: var(--fg-muted-1);
+		padding: 0.25rem;
+		width: fit-content;
+
+		ul {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			align-items: center;
+			gap: 0.25rem;
+			margin: 0;
+			padding: 0;
+			width: min(calc(var(--container-width) / 1.5), 100%);
+		}
 
 		li {
-			display: block;
-			padding: 0.25rem 0;
+			display: flex;
+			line-height: normal;
 			list-style: none;
+		}
 
-			a {
-				display: block;
-				margin: auto;
-				color: var(--fg-muted-5);
+		a {
+			transition: var(--transition);
+			border-radius: 999px;
+			padding: 0.5rem 0.75rem;
+			color: var(--fg-muted-4);
+			text-decoration: none;
+
+			&:hover {
+				box-shadow: var(--edge-highlight);
+				background-color: var(--primary-color);
+				color: var(--fg-color);
 				text-decoration: none;
+			}
 
-				&:hover {
-					color: var(--primary-color);
-					text-decoration: underline;
-				}
+			&:active {
+				transform: scale(var(--active));
 			}
 		}
 	}
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
index acccd63..95ae847 100644
--- a/templates/partials/footer.html
+++ b/templates/partials/footer.html
@@ -1,4 +1,38 @@
+{% set current_lang = config.default_language %}
+{% if page %}
+	{% set current_lang = page.lang %}
+{% elif section %}
+	{%- set current_lang = section.lang %}
+{% endif %}
 <footer id="site-footer">
+	{% if config.extra.footer.links %}
+		<nav>
+			<ul>
+				{% for link in config.extra.footer.links %}
+					{% if current_lang == config.default_language %}
+						{% set title = link.name %}
+					{% else %}
+						{% set language_key = 'name_' ~ current_lang %}
+						{% set title = link[language_key] %}
+					{% endif %}
+					{%- if link.url is matching('https?://') %}
+						<li>
+							<a href="{{ link.url }}">
+								{{ title }}
+							</a>
+						</li>
+					{%- else %}
+						<li>
+							<a href="{{ get_url(path=link.url, lang=lang)}}">
+								{{ title }}
+							</a>
+						</li>
+					{%- endif %}
+				{% endfor %}
+			</ul>
+		</nav>
+	{% endif %}
+
 	{% if config.extra.footer.show_copyright %}
 		<p title="Last built at {{ now() | date(format='%F %a %R') }}">
 			&copy; {{ config.title }}, {{ now() | date(format="%Y") }}
diff --git a/templates/partials/nav.html b/templates/partials/nav.html
index ea9d047..ee0c94d 100644
--- a/templates/partials/nav.html
+++ b/templates/partials/nav.html
@@ -25,7 +25,7 @@
 					{% set title = link[language_key] %}
 				{% endif %}
 				{%- if link.url is matching('https?://') %}
-					<li class="link">
+					<li>
 						<a href="{{ link.url }}"
 							{% if current_url | default(value='/') | trim_end_matches(pat='/') | safe == link.url | trim_end_matches(pat='/') | safe %}
 								class="active"
@@ -34,7 +34,7 @@
 						</a>
 					</li>
 				{%- else %}
-					<li class="link">
+					<li>
 						<a href="{{ get_url(path=link.url, lang=lang)}}"
 							{% if current_url | default(value='/') | trim_end_matches(pat='/') | safe == get_url(path=link.url, lang=lang) | trim_end_matches(pat='/') | safe %}
 								class="active"