A couple fixes for page navigation

- Put the previous post on the left, and the next post on the right
- Simplify the CSS class names and styles

assets/css/099_page_navigation.css

@@ -15,27 +15,27 @@
     justify-content: flex-end;
   }
 
-  li {
+  .prev, .next {
     display: block;
     padding-inline: 0;
   }
 
-  .next-page {
+  .next {
     text-align: right;
   }
 
-  .previous-page::before,
-  .next-page::after {
+  .prev::before,
+  .next::after {
     color: var(--text-color-secondary);
     font-family: var(--font-family-monospace);
   }
 
-  .previous-page::before {
+  .prev::before {
     content: "<-";
     padding-inline-end: var(--space-s);
   }
 
-  .next-page::after {
+  .next::after {
     content: "->";
     padding-inline-start: var(--space-s);
   }

layouts/partials/page/prev_next_navigation.html

@@ -1,18 +1,18 @@
 {{ if .FirstSection }}
-  {{- $pages := where .FirstSection.RegularPagesRecursive "Draft" "eq" false -}}
+  {{- $pages := (where .FirstSection.RegularPagesRecursive "Draft" "eq" false).ByDate -}}
   {{- $previousInSection := $pages.Prev . -}}
   {{- $nextInSection := $pages.Next . -}}
 
   {{ if or $previousInSection $nextInSection }}
     <ul class="page-navigation">
       {{ with $nextInSection -}}
-        <li class="previous-page">
+        <li class="prev">
           <a href="{{ .Permalink }}">{{ .LinkTitle | markdownify }}</a>
         </li>
       {{- end }}
 
       {{ with $previousInSection -}}
-        <li class="next-page">
+        <li class="next">
           <a href="{{ .Permalink }}">{{ .LinkTitle | markdownify }}</a>
         </li>
       {{- end }}