cobweb/xmitter-11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Skip content link, why is the home link in an h1, better nav markup

Browse Source
This commit is contained in:
Zach Leatherman 2023-01-23 10:41:40 -06:00
parent 65feb1c686
commit 1f09716cd8
3 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
_includes/layouts/base.njk
View File

@ -17,20 +17,23 @@
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}"> <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
</head> </head>
<body> <body>
<a href="#skip" class="visually-hidden">Skip to main content</a>
<header> <header>
<h1 class="home"><a href="/">{{ metadata.title }}</a></h1> <a href="/" class="home-link">{{ metadata.title }}</a>
{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #} {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
<nav> <nav>
<ul class="nav"> <ul class="nav">
<h2 class="visually-hidden">Top level navigation menu</h2>
{%- for entry in collections.all | eleventyNavigation %} {%- for entry in collections.all | eleventyNavigation %}
<li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li> <li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
{%- endfor %} {%- endfor %}
</ul> </ul>
</nav> </nav>
</header> </header>
<main> <main id="skip">
{{ content | safe }} {{ content | safe }}
</main> </main>

17
blog/thirdpost.md
View File

@ -8,6 +8,23 @@ tags:
--- ---
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
## Code
### Unstyled
```
// this is a command
function myCommand() {
let counter = 0;
counter++;
}
// Test with a line break above this line.
console.log('Test');
```
### Styled (with Syntax)
```js ```js
// this is a command // this is a command
function myCommand() { function myCommand() {

28
public/css/index.css
View File

@ -16,6 +16,8 @@
--text-color-link: #082840; --text-color-link: #082840;
--text-color-link-active: #5f2b48; --text-color-link-active: #5f2b48;
--text-color-link-visited: #17050F; --text-color-link-visited: #17050F;
--syntax-tab-size: 2;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -54,6 +56,17 @@ body {
max-width: 40em; max-width: 40em;
} }
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
p:last-child { p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -82,6 +95,7 @@ main {
main :first-child { main :first-child {
margin-top: 0; margin-top: 0;
} }
header { header {
border-bottom: 1px dashed var(--color-gray-20); border-bottom: 1px dashed var(--color-gray-20);
} }
@ -103,13 +117,12 @@ pre,
code { code {
font-family: var(--font-family-monospace); font-family: var(--font-family-monospace);
} }
pre, pre:not([class*="language-"]) {
pre[class*="language-"] {
margin: .5em 0; margin: .5em 0;
line-height: 1.375; /* 22px /16 */ line-height: 1.375; /* 22px /16 */
-moz-tab-size: 2; -moz-tab-size: var(--syntax-tab-size);
-o-tab-size: 2; -o-tab-size: var(--syntax-tab-size);
tab-size: 2; tab-size: var(--syntax-tab-size);
-webkit-hyphens: none; -webkit-hyphens: none;
-ms-hyphens: none; -ms-hyphens: none;
hyphens: none; hyphens: none;
@ -130,11 +143,12 @@ header {
align-items: center; align-items: center;
padding: 1em; padding: 1em;
} }
.home { .home-link {
font-size: 1em; /* 16px /16 */ font-size: 1em; /* 16px /16 */
font-weight: 700;
margin-right: 2em; margin-right: 2em;
} }
.home :link:not(:hover) { .home-link:link:not(:hover) {
text-decoration: none; text-decoration: none;
} }