Add pagination

assets/css/theme.css

@@ -10,6 +10,16 @@
   --fancy-font-stack: BitBold, monospace;
 }
 
+.sr-only:not(:focus):not(:active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 html {
   box-sizing: border-box;
 }
@@ -30,7 +40,7 @@ body {
   column-gap: 3rem;
 }
 
-nav,
+body > nav,
 h1,
 h2,
 h3,
@@ -47,39 +57,37 @@ img {
 body > nav {
   align-self: start;
   grid-row: 2;
-}
-nav {
   position: relative;
   margin-bottom: 2rem;
   overflow: auto;
 }
-nav ul {
+body > nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
 }
-nav li {
+body > nav li {
   font-size: 2.5rem;
   margin: 0 1rem;
   white-space: nowrap;
 }
-nav li:first-of-type {
+body > nav li:first-of-type {
   margin: 0;
 }
-nav a {
+body > nav a {
   transition: 0.2s;
 }
-nav a,
-nav a:visited {
+body > nav a,
+body > nav a:visited {
   text-decoration: none;
   color: var(--text);
   text-shadow: 3px 3px 0 black;
 }
-nav a[disabled] {
+body > nav a[disabled] {
   cursor: no-drop;
 }
-nav a:hover:not([disabled]) {
+body > nav a:hover:not([disabled]) {
   color: #fff;
 }
 
@@ -152,10 +160,10 @@ footer img {
   body {
     grid-template-columns: minmax(45rem, 70rem) minmax(18rem, 1fr);
   }
-  nav ul {
+  body > nav ul {
     display: block;
   }
-  nav li {
+  body > nav li {
     margin: 0;
   }
   body > nav {
@@ -182,7 +190,7 @@ footer img {
     grid-row: 4;
     margin-bottom: 3rem;
   }
-  nav a:hover:not([disabled]) {
+  body > nav a:hover:not([disabled]) {
     text-shadow: 0 0 5px var(--accent), 0 0 25px var(--accent),
       0 0 50px var(--accent), 0 0 100px var(--accent);
   }
@@ -265,3 +273,20 @@ p:first-of-type {
   opacity: 0.8;
   margin-bottom: 0.75rem;
 }
+
+.pagination ol {
+  padding: 0;
+  width: 100%;
+  display: grid;
+  list-style-type: none;
+  grid-template-columns: 1fr 1fr;
+  margin: 4rem 0 0 0;
+}
+.pagination .newer-item {
+  grid-column: 1;
+  justify-self: start;
+}
+.pagination .older-item {
+  grid-column: 2;
+  justify-self: end;
+}