Fix breadcrumbs to actually be a nav element

themes/maik-blog/assets/scss/_main.scss

@@ -464,3 +464,17 @@ table {
 .nostyle {
   text-decoration: none;
 }
+
+.breadcrumbs {
+  display: inline;
+
+  ol {
+    list-style-type: none;
+    margin: 0;
+    display: inline;
+
+    li {
+      display: inline;
+    }
+  }
+}

themes/maik-blog/layouts/_default/list.html

@@ -2,7 +2,7 @@
 {{ $paginator := .Paginate .Data.Pages }}
 
 <main class="posts">
-    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+    <div class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</div>
 
     <h1>{{ .Title }}</h1>
 

themes/maik-blog/layouts/_default/single.html

@@ -25,7 +25,7 @@
   </div>
 
   <article>
-    <p class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+    <div class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</div>
 
     <h1 class="post-title">
       <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>

themes/maik-blog/layouts/partials/breadcrumbs.html

@@ -16,11 +16,17 @@
 {{- $breadcrumbs = after (int .page.IsPage) $breadcrumbs}}
 {{- if ne .page.Type "page"}}
 {{- if lt (default 0 .min) (len $breadcrumbs) }}
+<nav aria-label="breadcrumb" class="breadcrumbs">
+    <ol>
         {{- range $index, $breadcrumb := $breadcrumbs }}
+        <li>
             <a href="{{ $breadcrumb.url }}">{{ $breadcrumb.name }}</a>{{ if ne $index (sub (len $breadcrumbs) 1) }}<span> > </span>{{ end }}
+        </li>
         {{- end }}
+    </ol>
     {{- if and $breadcrumbs .end }}
     {{ .end }}
     {{- end }}
+</nav>
 {{- end }}
 {{- end }}

themes/maik-blog/layouts/portfolio/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 
 <main class="portfolios">
-    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</p>
+    <div class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</div>
 
     <h1>Portfolio</h1>
 

themes/maik-blog/layouts/portfolio/single.html

@@ -20,7 +20,7 @@
   </div>
 
   <article>
-    <p class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+    <div class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</div>
 
     <h1 class="portfolio-title">
       <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>

themes/maik-blog/layouts/writeups/list.html

@@ -2,7 +2,7 @@
 {{ $paginator := (.Paginate .RegularPagesRecursive) }}
 
 <main class="posts">
-    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</p>
+    <div class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</div>
 
     <h1>{{ .Title }}</h1>
 
@@ -19,14 +19,14 @@
         <div class="post">
             <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
 
-            <p class="post-subtitle">
+            <div class="post-subtitle">
                 {{/*  {{- with .Params.Subtitle }}
                 {{ . | markdownify }}
                 <br>
                 {{- end }}  */}}
 
                 {{ partial "breadcrumbs.html" (dict "page" . "min" 0) }}
-            </p>
+            </div>
 
             <div class="post-meta">
                 {{- if .Date }}