lewis/lewisdale.dev
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/_includes/base.njk
View File

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

15
src/css/exceptions/main-nav.css
View File

@ -1,5 +1,17 @@
.main-nav { .main-nav {
text-align: right; 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) { @media only screen and (max-width: 1280px) {
@ -11,7 +23,7 @@
ul { ul {
display: flex; display: flex;
gap: var(--space-size-xs); gap: var(--space-size-s);
flex-grow: 1; flex-grow: 1;
align-items: center; align-items: center;
align-content: center; align-content: center;
@ -19,6 +31,7 @@
margin-left: 0; margin-left: 0;
margin-right: auto; margin-right: auto;
padding: 0 var(--space-size-l); padding: 0 var(--space-size-l);
} }
} }
} }