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

2023-01-23 10:41:40 -06:00 · 2023-01-23 10:41:40 -06:00 · 1f09716cd8
commit 1f09716cd8
parent 65feb1c686
3 changed files with 44 additions and 10 deletions
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@ -17,12 +17,15 @@
    <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 %}
@ -30,7 +33,7 @@
      </nav>
    </header>

-    <main>
+    <main id="skip">
      {{ content | safe }}
    </main>

--- a/blog/thirdpost.md
+++ b/blog/thirdpost.md
@ -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() {
--- a/public/css/index.css
+++ b/public/css/index.css
@ -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;
 }