Rewrite footer to support links and socials, tweak heading sizes, deprecate page/site links and replace with "external" class, change discalimer heading from plural to singular
This commit is contained in:
David Lapshin
15
config.toml
15
config.toml
@ -63,6 +63,21 @@ links = [
|
||||
]
|
||||
|
||||
[extra.footer]
|
||||
# Links used in the footer.
|
||||
# For local files use same link format as in Markdown,
|
||||
# i.e "@/blog/_index.md".
|
||||
# See https://www.getzola.org/documentation/content/linking/#internal-links
|
||||
# links = []
|
||||
# Social links in the footer.
|
||||
# Any URL-encoded SVG can be used as an icon.
|
||||
# https://simpleicons.org is recommended source of SVG icons.
|
||||
# For URL encoding https://yoksel.github.io/url-encoder/ can be used.
|
||||
socials = [
|
||||
{url = "https://github.com", name = "GitHub", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EGitHub%3C/title%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E"},
|
||||
{url = "https://www.instagram.com", name = "Instagram", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EInstagram%3C/title%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"},
|
||||
{url = "https://mastodon.social", name = "Mastodon", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EMastodon%3C/title%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E"},
|
||||
{url = "https://twitter.com", name = "Twitter", icon = "%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ETwitter%3C/title%3E%3Cpath d='M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z'/%3E%3C/svg%3E"},
|
||||
]
|
||||
# URL to the website without the https:// part,
|
||||
# used for Johnvertisement leaderboard.
|
||||
johnvert_ref = "daudix.codeberg.page"
|
||||
|
||||
@ -282,21 +282,13 @@ To switch the keyboard layout, press <kbd>⌘ Super</kbd> + <kbd>Space</kbd>.
|
||||
|
||||
You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>important</mark> that even **bold** is not enough.
|
||||
|
||||
## Link to page (rightwards arrow)
|
||||
## External link
|
||||
|
||||
```html
|
||||
<a class="page-link" href="demo/demo-page">Link to page</a>
|
||||
<a class="external" href="https://example.org">Link to site</a>
|
||||
```
|
||||
|
||||
<a class="link-page" href="demo/page">Link to page</a>
|
||||
|
||||
## Link to site (up-rightwards arrow)
|
||||
|
||||
```html
|
||||
<a class="site-link" href="https://example.org">Link to site</a>
|
||||
```
|
||||
|
||||
<a class="link-site" href="https://example.org">Link to site</a>
|
||||
<a class="external" href="https://example.org">Link to site</a>
|
||||
|
||||
## Buttons
|
||||
|
||||
|
||||
@ -1,11 +1,81 @@
|
||||
#site-footer {
|
||||
margin-top: 4rem;
|
||||
padding: 3rem 0 3rem;
|
||||
font-size: 1rem;
|
||||
margin-top: 6rem;
|
||||
background-color: var(--fg-muted-1);
|
||||
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(--content-width) + 10rem, 90%);
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: 0.25rem 0;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: auto;
|
||||
color: var(--fg-muted-5);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#socials {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: 0;
|
||||
padding: 0.25rem 0;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
margin: 0;
|
||||
background-color: var(--fg-muted-5);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
content: "";
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: auto;
|
||||
padding: 0.5rem;
|
||||
max-width: min(var(--content-width) + 10rem, 90%);
|
||||
}
|
||||
|
||||
details {
|
||||
all: unset;
|
||||
margin: 0 auto;
|
||||
color: var(--fg-muted-5);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
.link-page::after {
|
||||
content: " →";
|
||||
}
|
||||
|
||||
.link-site::after {
|
||||
content: " ↗";
|
||||
.external::after {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' %3E%3Cpath d='m6 6 5-5M7 1h4v4M4 2H3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V8' style='fill:none;stroke:black;stroke-linejoin:round;stroke-linecap:round;stroke-width:2;stroke-dasharray:none'/%3E%3C/svg%3E");
|
||||
display: inline-block;
|
||||
opacity: 0.6;
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' %3E%3Cpath d='m6 6 5-5M7 1h4v4M4 2H3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V8' style='fill:none;stroke:black;stroke-linejoin:round;stroke-linecap:round;stroke-width:2;stroke-dasharray:none'/%3E%3C/svg%3E");
|
||||
margin-left: 3px;
|
||||
background-color: var(--primary-color);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
@ -91,11 +91,11 @@ h6 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.4rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
<div class="statement-container disclaimer">
|
||||
<strong class="big">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7.906.094C7.38.066 6.867.375 6.47 1.063L.219 12.656C-.316 13.621.266 15 1.313 15h13.156c.98 0 1.902-1.16 1.219-2.344L9.375 1.125C8.977.48 8.434.121 7.906.094M9 4v5c.008.527-.473 1-1 1s-1.008-.473-1-1V4zm-1 7c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m0 0"/></svg>
|
||||
Disclaimer(s)
|
||||
Disclaimer
|
||||
</strong>
|
||||
{{ page.extra.disclaimer | markdown | safe }}
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,54 @@
|
||||
<footer id="site-footer">
|
||||
{% if config.extra.footer.links %}
|
||||
<nav>
|
||||
<ul id="links">
|
||||
{% for link in config.extra.footer.links %}
|
||||
{%- if link.url is matching('https?://') %}
|
||||
<li>
|
||||
<a href="{{ link.url | safe }}">{{ link.name }}</a>
|
||||
</li>
|
||||
{%- else %}
|
||||
<li>
|
||||
<a href="{{ get_url(path=link.url | safe )}}">{{ link.name }}</a>
|
||||
</li>
|
||||
{%- endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
{% if config.extra.footer.show_copyright %}
|
||||
<p title="Last built at {{ now() | date(format='%F %a %R') }}">© {{ config.title }}, {{ now() | date(format="%Y") }}</p>
|
||||
{% endif %}
|
||||
|
||||
{% if config.extra.footer.show_source %}
|
||||
<p><a href="{{ config.extra.source_url | safe }}">Website source</a></p>
|
||||
<p>
|
||||
<a href="{{ config.extra.source_url | safe }}">Website source</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if config.extra.footer.show_powered_by %}
|
||||
<p><small>Powered by <a href="https://www.getzola.org">Zola</a> and <a href="https://daudix.codeberg.page/duckquill">Duckquill</a></small></p>
|
||||
<p>
|
||||
<small>
|
||||
Powered by <a href="https://www.getzola.org">Zola</a> and <a href="https://daudix.codeberg.page/duckquill">Duckquill</a>
|
||||
</small>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if config.extra.footer.show_johnvert %}
|
||||
<details>
|
||||
<summary>Johnvertisement</summary>
|
||||
<iframe id="johnvertisement" title="Johnvertisement" src="https://john.citrons.xyz/embed?ref={{ config.extra.footer.johnvert_ref }}"></iframe>
|
||||
<iframe id="johnvertisement" src="https://john.citrons.xyz/embed?ref={{ config.extra.footer.johnvert_ref }}" title="Johnvertisement"></iframe>
|
||||
</details>
|
||||
{% endif %}
|
||||
|
||||
{% if config.extra.footer.socials %}
|
||||
<ul id="socials">
|
||||
{% for link in config.extra.footer.socials %}
|
||||
<li>
|
||||
<a style='mask-image: url("data:image/svg+xml,{{ link.icon }}"); -webkit-mask-image: url("data:image/svg+xml,{{ link.icon }}")' href="{{ link.url | safe }}" rel="me" title="{{ link.name }}"><span>{{ link.name }}</span></a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</footer>
|
||||
Reference in New Issue
Block a user