Create inline navigation CSS class

This commit is contained in:
Helen Chong 2024-07-18 11:13:23 +08:00
parent cf2f209fa1
commit fe2bbd44ed
4 changed files with 23 additions and 34 deletions

View File

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

View File

@ -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);

View File

@ -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 %}

View File

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