Remove custom keyboard navigation

In favour of accessibility and simplicity

sass/_global.scss

@@ -84,18 +84,6 @@ a {
 
 a:focus {
   outline: 4px solid var(--accent-color);
-}
-
-a[data-focusable]::before {
-  content: "▶";
-  display: inline-block;
-  font-size: 75%;
-  margin-right: 0.25rem;
-  visibility: hidden;
-}
-
-a[data-focusable]:focus::before {
-  visibility: visible;
   background-color: var(--accent-color);
   text-decoration: none;
 }

sass/_section.scss

@@ -13,14 +13,10 @@
   gap: 2.25em 1em;
   grid-template-columns: 1fr auto;
   margin-top: 3em;
-  
+
   @media (max-width: 639px) {
     grid-template-columns: auto;
   }
-
-  a[data-focusable] {
-    text-indent: -0.5rem;
-  }
 
   time {
     color: var(--primary-color-dimmed);
@@ -29,7 +25,7 @@
     justify-self: end;
     letter-spacing: 0.1em;
     text-transform: uppercase;
-    
+
     @media (max-width: 639px) {
       display: none;
     }
@@ -41,8 +37,4 @@
   flex-flow: row wrap;
   gap: 1em 1.5em;
   margin-top: 3em;
-
-  a[data-focusable] {
-    text-indent: -0.5rem;
-  }
 }

templates/base.html

@@ -16,7 +16,7 @@
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
   <link rel="manifest" href="/site.webmanifest">
 
-  <script type="module" src="/scripts/main.js"></script>
+  <script type="module" src="https://cdn.skypack.dev/@hotwired/turbo"></script>
 
   {% block head_extra %} {% endblock %}
 </head>
@@ -29,4 +29,4 @@
   </section>
 </body>
 
-</html>
+</html>

templates/index.html

@@ -30,7 +30,6 @@
     }
 
     .main-menu {
-      margin-left: -17px;
       margin-top: 1rem;
     }
 
@@ -97,7 +96,7 @@ <h1>The name is Darshak.</h1>
     <nav class="main-menu">
       <ul>
         {% for link in links.pages %}
-          <li><a href="{{ link.url }}" data-focusable {% if loop.first %}data-autofocus{% endif %}>{{ link.long }}</a></li>
+          <li><a href="{{ link.url }}">{{ link.long }}</a></li>
         {% endfor %}
       </ul>
     </nav>

templates/section.html

@@ -26,7 +26,7 @@ <h1>{{ section.title }}</h1>
       </header>
       <section class="section-list">
         {% for page in section.pages %}
-          <a href="{{ page.permalink }}" data-focusable {% if loop.first %}data-autofocus{% endif %}>{{ page.title }}</a>
+          <a href="{{ page.permalink }}">{{ page.title }}</a>
           {% if page.date -%}
             <time datetime="{{ page.date }}">{{ page.date | date(format="%-d %b %Y") }}</time>
           {% else %}

templates/tags/list.html

@@ -10,9 +10,9 @@
       <h1>Tags</h1>
       <section class="tag-list">
         {% for tag in terms %}
-          <a href="{{ tag.permalink }}" data-focusable {% if loop.first %}data-autofocus{% endif %}>#{{ tag.name }}</a>
+          <a href="{{ tag.permalink }}">#{{ tag.name }}</a>
         {% endfor %}
       </section>
     </article>
   </main>
-{% endblock %}
+{% endblock %}

templates/tags/single.html

@@ -12,10 +12,10 @@ <h1>#{{ term.name }}</h1>
       </header>
       <section class="section-list">
         {% for page in term.pages %}
-          <a href="{{ page.permalink }}" data-focusable {% if loop.first %}data-autofocus{% endif %}>{{ page.title }}</a>
+          <a href="{{ page.permalink }}">{{ page.title }}</a>
           <time datetime="{{ page.date }}">{{ page.date | date(format="%-d %b %Y") }}</time>
         {% endfor %}
       </section>
     </article>
   </main>
-{% endblock %}
+{% endblock %}