From 1f09716cd86653366ee0d5e5c4507b39f24e1dc9 Mon Sep 17 00:00:00 2001
From: Zach Leatherman <zachleatherman@gmail.com>
Date: Mon, 23 Jan 2023 10:41:40 -0600
Subject: [PATCH] Skip content link, why is the home link in an h1, better nav
 markup

---
 _includes/layouts/base.njk |  9 ++++++---
 blog/thirdpost.md          | 17 +++++++++++++++++
 public/css/index.css       | 28 +++++++++++++++++++++-------
 3 files changed, 44 insertions(+), 10 deletions(-)
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 86c3f01..66bb7da 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -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>
 
diff --git a/blog/thirdpost.md b/blog/thirdpost.md
index c57ab3b..db8926d 100644
--- 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() {
diff --git a/public/css/index.css b/public/css/index.css
index 2e10a7f..f410874 100644
--- 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;
 }
 
