Add indicator for current page
All checks were successful
Build and copy to prod / build-and-copy (push) Successful in 1m30s

This commit is contained in:
Lewis Dale 2024-10-12 11:29:34 +01:00
parent d332e34874
commit 53cd027243
2 changed files with 19 additions and 6 deletions

View File

@ -53,11 +53,11 @@
<div class="switcher-lg">
<nav class="main-nav">
<ul role='list'>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/blogroll">/Blogroll</a></li>
<li><a href="/uses">/Uses</a></li>
<li><a href="/" {% if page.url == "/" %}aria-current="page"{% endif %}>Home</a></li>
<li><a href="/blog" {% if page.url.includes("/blog/") %}aria-current="page"{% endif %}>Blog</a></li>
<li><a href="/links" {% if page.url.includes("/links/") %}aria-current="page"{% endif %}>Links</a></li>
<li><a href="/blogroll" {% if page.url.includes("/blogroll/") %}aria-current="page"{% endif %}>/Blogroll</a></li>
<li><a href="/uses" {% if page.url.includes("/uses/") %}aria-current="page"{% endif %}>/Uses</a></li>
<li>
<a href="/feed/" class="rss" aria-label="RSS feed">
<i class="fa-solid fa-rss"></i>

View File

@ -1,5 +1,17 @@
.main-nav {
text-align: right;
a {
position: relative;
}
a[aria-current="page"]::before {
content: "\203A";
font-size: larger;
position: absolute;
left: -1ch;
top: -.5ch;
}
}
@media only screen and (max-width: 1280px) {
@ -11,7 +23,7 @@
ul {
display: flex;
gap: var(--space-size-xs);
gap: var(--space-size-s);
flex-grow: 1;
align-items: center;
align-content: center;
@ -19,6 +31,7 @@
margin-left: 0;
margin-right: auto;
padding: 0 var(--space-size-l);
}
}
}