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;
 }
 
