feat: more semantic html tags

themes/paprika/assets/app.css

@@ -275,7 +275,6 @@ header {
   justify-content: space-between;
 
   nav {
-    display: flex;
     gap: 1rem;
 
     a {
@@ -327,9 +326,8 @@ main {
   padding-bottom: var(--y-gap);
 }
 
-.main-nav {
-  display: flex;
-  margin-top: 5rem;
+nav[data-main] {
+  margin-top: var(--gap);
 
   a {
     font-size: 1.8rem;
@@ -341,13 +339,13 @@ main {
     padding-inline: 3rem;
   }
 
-  .next {
+  a:last-child {
     margin-left: auto;
   }
 }
 
 
-.post-entry {
+article {
   position: relative;
   padding-block: 2rem;
   transition: transform 0.1s;
@@ -414,8 +412,11 @@ hgroup {
   }
 }
 
-.post-nav {
+nav {
   display: flex;
+}
+
+nav[data-post] {
   justify-content: space-between;
   margin-top: var(--y-gap);
   background: var(--faint);
@@ -423,25 +424,18 @@ hgroup {
 
   a {
     display: flex;
+    gap: 1rem;
     align-items: center;
     width: 50%;
     padding: var(--gap);
     font-size: 2.4rem;
     font-weight: 700;
     line-height: 1.2;
+    padding-inline: 1rem;
   }
 
-  a span+span {
-    margin-left: 1rem;
-  }
-
-  .prev {
-    padding-right: 1rem;
-  }
-
-  .next {
+  a:last-child {
     justify-content: flex-end;
-    padding-left: 1rem;
     margin-left: auto;
   }
 }

themes/paprika/layouts/_default/list.html

@@ -13,9 +13,8 @@
     {{.Content}}
 </section>
 
-<!-- Articles -->
 {{ $paginator := .Paginate $pages }} {{ range $index, $page := $paginator.Pages }}
-<article class="post-entry">
+<article>
   <h2>{{ .Title }}</h2>
   {{ partial "description" . }}<br>
   {{ partial "tags" . }}
@@ -23,17 +22,15 @@
 </article>
 {{ end }}
 
-<!-- Main Nav -->
 {{ if gt $paginator.TotalPages 1 }}
-  <nav class="main-nav">
+  <nav data-main>
   {{ if $paginator.HasPrev }}
-  <a class="prev" href="{{ $paginator.Prev.URL }}">← Previous Page</a>
+  <a href="{{ $paginator.Prev.URL }}">Previous Page</a>
   {{ end }}
   {{ if $paginator.HasNext }}
-  <a class="next" href="{{ $paginator.Next.URL }}">Next Page →</a>
+  <a href="{{ $paginator.Next.URL }}">Next Page</a>
   {{ end }}
 </nav>
-{{ end }}
 
 <script>
     window.addEventListener('DOMContentLoaded', (event) => {

themes/paprika/layouts/_default/single.html

@@ -1,13 +1,11 @@
 {{ define "main" }}
-  <article class="post-single" data-pagefind-body>
-    <hgroup>
-      <p data-pagefind-ignore>
-        {{ partial "description" . }}
-      </p>
-      <h1 data-pagefind-meta="title">{{ .Title }}</h1>
-    </hgroup>
-    <section class="post-content">{{ .Content }}</section>
-  </article>
+  <hgroup data-pagefind-body>
+    <p data-pagefind-ignore>
+      {{ partial "description" . }}
+    </p>
+    <h1 data-pagefind-meta="title">{{ .Title }}</h1>
+  </hgroup>
+  <section class="post-content" data-pagefind-body>{{ .Content }}</section>
 
   <footer class="post-tags" data-pagefind-meta="tags">
     {{ partial "tags" . }}
@@ -16,11 +14,11 @@
   <!-- Post Nav -->
   {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
   {{ if and (gt (len $pages) 1) (in $pages . ) }}
-  <nav class="post-nav">
+  <nav data-post>
     {{ with $pages.Next . }}
-    <a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
+    <a href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
     {{ end }} {{ with $pages.Prev . }}
-    <a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
+    <a href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
     {{ end }}
   </nav>
   {{ end }}