Create inline navigation CSS class
This commit is contained in:
parent
cf2f209fa1
commit
fe2bbd44ed
|
@ -6,7 +6,7 @@
|
||||||
{%- if tags and tags.includes("shrine pages") %}
|
{%- if tags and tags.includes("shrine pages") %}
|
||||||
<nav class="footer__shrines" aria-labelledby="backto-title">
|
<nav class="footer__shrines" aria-labelledby="backto-title">
|
||||||
<p id="backto-title">Back to:</p>
|
<p id="backto-title">Back to:</p>
|
||||||
<ul class="footer__links">
|
<ul class="inline-nav footer__links">
|
||||||
<li><a href="/shrines/">Shrine Directory</a></li>
|
<li><a href="/shrines/">Shrine Directory</a></li>
|
||||||
<li><a href="/">{{ sitemeta.siteName }}</a></li>
|
<li><a href="/">{{ sitemeta.siteName }}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -18,9 +18,7 @@
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root { --footer-gap: 0.5em; }
|
||||||
--footer-gap: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
|
@ -40,19 +38,6 @@
|
||||||
column-gap: var(--footer-gap);
|
column-gap: var(--footer-gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__links {
|
.footer__links { justify-self: center; }
|
||||||
justify-self: center;
|
.footer__shrines { align-self: center; }
|
||||||
list-style-type: "";
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer__links li:not(:last-child)::after {
|
|
||||||
content: '•';
|
|
||||||
padding-left: var(--footer-gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer__shrines {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
|
@ -7,7 +7,7 @@ articleElement: true
|
||||||
|
|
||||||
<nav class="changelog__nav" aria-labelledby="changelog-nav-title">
|
<nav class="changelog__nav" aria-labelledby="changelog-nav-title">
|
||||||
<p class="changelog__nav--title" id="changelog-nav-title">Changelog Archive:</p>
|
<p class="changelog__nav--title" id="changelog-nav-title">Changelog Archive:</p>
|
||||||
<ul class="changelog__nav--links">
|
<ul class="inline-nav changelog__nav--links">
|
||||||
<li><a
|
<li><a
|
||||||
{% if currentUrl === "/changelogs/" %}aria-current="page"{% endif %}
|
{% if currentUrl === "/changelogs/" %}aria-current="page"{% endif %}
|
||||||
href="/changelogs"
|
href="/changelogs"
|
||||||
|
@ -43,23 +43,11 @@ articleElement: true
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changelog__nav--links {
|
|
||||||
list-style-type: "";
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
gap: 0.25em 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.changelog__nav--links li {
|
.changelog__nav--links li {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changelog__nav--links li:not(:last-child)::after {
|
|
||||||
content: '•';
|
|
||||||
padding-left: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.changelog__nav--links [aria-current="page"] {
|
.changelog__nav--links [aria-current="page"] {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--clr-bold-txt);
|
color: var(--clr-bold-txt);
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<p>Made with ♥ by {{ sitemeta.siteAuthor.name }} since 11 September 2022</p>
|
<p>Made with ♥ by {{ sitemeta.siteAuthor.name }} since 11 September 2022</p>
|
||||||
|
|
||||||
{% set currentUrl %}{{ page.url }}{% endset %}
|
{% set currentUrl %}{{ page.url }}{% endset %}
|
||||||
<ul class="footer__links">
|
<ul class="inline-nav footer__links">
|
||||||
<li><a href="/feed.xml">RSS</a></li>
|
<li><a href="/feed.xml">RSS</a></li>
|
||||||
<li><a
|
<li><a
|
||||||
{% if currentUrl === "/sitemap/" %}aria-current="page"{% endif %}
|
{% if currentUrl === "/sitemap/" %}aria-current="page"{% endif %}
|
||||||
|
|
|
@ -8,7 +8,23 @@
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mod entry */
|
/* Inline Navigation */
|
||||||
|
.inline-nav {
|
||||||
|
--inline-nav-gap: 0.5em;
|
||||||
|
list-style-type: "";
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25em var(--inline-nav-gap);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-nav li:not(:last-child)::after {
|
||||||
|
content: '•';
|
||||||
|
padding-left: var(--inline-nav-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mod Entry */
|
||||||
.mod-entry,
|
.mod-entry,
|
||||||
.mod-entry__downloads {
|
.mod-entry__downloads {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
Loading…
Reference in New Issue