tidy up notes index page

public/css/base.css

@@ -201,11 +201,11 @@ figcaption {
 
 /** Navigation bar */
 
-nav {
+.navbar {
   margin-block: var(--spacing-block-sm);
 }
 
-nav ul {
+.navbar ul {
   grid-column: media-start / content-end;
   display: flex;
   justify-content: center;
@@ -215,12 +215,12 @@ nav ul {
 }
 
 @media (min-width: 36rem) {
-  nav {
+  .navbar {
     display: grid;
     grid-template-columns: subgrid;
   }
 
-  nav ul {
+  .navbar ul {
     justify-content: end;
   }
 }
@@ -296,3 +296,21 @@ pre code {
   padding-inline: var(--spacing-inline-xs);
   background-color: var(--color-primary-fg-accent);
 }
+
+
+.visually-hidden {
+    position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      border: 0;
+      padding: 0;
+
+      white-space: nowrap;
+      clip-path: inset(100%);
+      clip: rect(0 0 0 0);
+      overflow: hidden;
+
+      outline: none;
+      outline-offset: 0;
+}

public/css/feed.css

@@ -1,16 +1,23 @@
-/* Assumes there is at most one level of subheading for sub-dividing entries */
-.h-feed :is(h2, h3, h4, h5, h6) {
-	margin-block-start: var(--spacing-block-md);
-}
-
-.h-feed .h-entry {
+.skip-to {
+    display: inline-block;
     margin-block-start: var(--spacing-block-xs);
 }
 
-.h-feed .full-feed-link {
-	text-align: end;
+.skip-to ul {
+    margin-block-start: var(--spacing-block-xs);
 }
 
-.h-feed :is(a.full-feed-link, .full-feed-link a)::after {
-	content: ' >'
+.skip-to :is(ul, li) {
+    display: inline-block;
+    list-style-type: disc;
+}
+
+.skip-to li:last-of-type {
+    list-style: none;
+}
+
+.h-entry {
+    outline: 0.125rem solid var(--colour-primary-fg);
+    outline-offset: 1rem;
+    border-radius: 0.25rem;
 }

templates/components/_navbar.html.twig

@@ -1,4 +1,4 @@
-<nav>
+<nav class="navbar">
    	<ul>
   		<li>
  			<a href="/">Home</a>

templates/notes.html.twig

@@ -1,41 +1,60 @@
 {% extends 'base.html.twig' %}
 
 {% block content %}
-    <section>
-        <h1>Notes</h1>
-        <p>
+    <section class="h-feed">
+        <h1 class="p-name">Joe Carstairs' notes</h1>
+
+  		<p hidden>
+ 			These links are collected by
+            <a class="p-author h-card" href="{{ path('index') }}">
+                Joe Carstairs
+            </a>.
+  		</p>
+  		<p hidden>
+ 			<a class="u-url" href="{{ path('notes') }}">Permalink</a>
+  		</p>
+
+        <nav class="skip-to">
             Skip to:
             <ul>
                 {% for year in years %}
                     <li><a href="#{{ year }}">{{ year }}</a></li>
                 {% endfor %}
             </ul>
-        </p>
+        </nav>
 
         {% for year in years %}
             <h2 id="{{ year }}">{{ year }}</h2>
 
-            <p>
+            <nav class="skip-to">
                 Skip to:
                 <ul>
                     {% for month in months[year] %}
-                        <li><a href="#{{ year }}-{{ month }}">{{ monthNames[month] }} {{ year }}</a></li>
+                        <li><a href="#{{ year }}-{{ month }}">
+                            {{ monthNames[month] }} <span class="visually-hidden">{{ year }}</span>
+                        </a></li>
                     {% endfor %}
                 </ul>
-            </p>
-
+            </nav>
 
             {% for month in months[year] %}
                 <h3 id="{{ year }}-{{ month }}">{{ monthNames[month] }}</h3>
 
                 {% for note in notes[year][month] %}
-                    <h4><a href="/notes/{{ note.slug }}">Note {{ note.slug }}</a></h4>
-                    <time datetime="{{ note.publishedDate.format('c') }}">
+                    <section class="h-entry">
+                        <h4><a class="p-name u-url" href="/notes/{{ note.slug }}">
+                            Note {{ note.slug }}
+                        </a></h4>
+                        <time class="dt-published" datetime="{{ note.publishedDate.format('c') }}">
                             {{ note.publishedDate.format('j F Y') }}
                         </time>
+
+                        <section class="e-content">
                             {% apply markdown_to_html %}
                                 {{ note.content }}
                             {% endapply %}
+                        </section>
+                    </section>
                 {% endfor %}
             {% endfor %}
         {% else %}

todo.txt

@@ -1,4 +1,3 @@
-Tidy up notes index page to match existing links index page
 Add blog post page
 Add blog index page
 Add a most recent blog post to my home page