Skip content link, why is the home link in an h1, better nav markup
This commit is contained in:
parent
65feb1c686
commit
1f09716cd8
@ -17,20 +17,23 @@
|
||||
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#skip" class="visually-hidden">Skip to main content</a>
|
||||
|
||||
<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/ #}
|
||||
<nav>
|
||||
<ul class="nav">
|
||||
<h2 class="visually-hidden">Top level navigation menu</h2>
|
||||
{%- 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>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<main id="skip">
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
|
||||
|
@ -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.
|
||||
|
||||
## 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
|
||||
// this is a command
|
||||
function myCommand() {
|
||||
|
@ -16,6 +16,8 @@
|
||||
--text-color-link: #082840;
|
||||
--text-color-link-active: #5f2b48;
|
||||
--text-color-link-visited: #17050F;
|
||||
|
||||
--syntax-tab-size: 2;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@ -54,6 +56,17 @@ body {
|
||||
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 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -82,6 +95,7 @@ main {
|
||||
main :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px dashed var(--color-gray-20);
|
||||
}
|
||||
@ -103,13 +117,12 @@ pre,
|
||||
code {
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
pre,
|
||||
pre[class*="language-"] {
|
||||
pre:not([class*="language-"]) {
|
||||
margin: .5em 0;
|
||||
line-height: 1.375; /* 22px /16 */
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-moz-tab-size: var(--syntax-tab-size);
|
||||
-o-tab-size: var(--syntax-tab-size);
|
||||
tab-size: var(--syntax-tab-size);
|
||||
-webkit-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
@ -130,11 +143,12 @@ header {
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
}
|
||||
.home {
|
||||
.home-link {
|
||||
font-size: 1em; /* 16px /16 */
|
||||
font-weight: 700;
|
||||
margin-right: 2em;
|
||||
}
|
||||
.home :link:not(:hover) {
|
||||
.home-link:link:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user