Return footer links, with a bit different style

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.

sass/_footer.scss

@@ -4,29 +4,47 @@
 	padding: 2rem 0 2rem;
 	text-align: center;
 
-	#links {
+	nav {
-		display: block;
+		margin: 0 auto 1rem auto;
-		column-gap: 2rem;
+		box-shadow: var(--edge-highlight);
-		column-width: 25ex;
+		border-radius: 999px;
-		margin: 0 auto 1rem;
+		background-color: var(--fg-muted-1);
-		padding: 0;
+		padding: 0.25rem;
-		max-width: min(var(--container-width) + 10rem, 90%);
+		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;
+			display: flex;
-			padding: 0.25rem 0;
+			line-height: normal;
 			list-style: none;
+		}
 
-			a {
+		a {
-				display: block;
+			transition: var(--transition);
-				margin: auto;
+			border-radius: 999px;
-				color: var(--fg-muted-5);
+			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 {
+			&:active {
-					color: var(--primary-color);
+				transform: scale(var(--active));
-					text-decoration: underline;
-				}
 			}
 		}
 	}

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") }}

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"