hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Return footer links, with a bit different style

Browse Source
This commit is contained in:
daudix
2024-06-18 04:02:32 +03:00
parent 52e9cbeda0
commit dce877ff85
4 changed files with 81 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
config.toml
View File

@ -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.

44
sass/_footer.scss
View File

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

34
templates/partials/footer.html
View File

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

4
templates/partials/nav.html
View File

@ -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"