pokpok

sass/theme.scss

@@ -27,6 +27,11 @@ hr {
         color: var(--color-on-background);
         font-size: 32px;
         font-family: "PT Serif Caption", serif;
+
+        a {
+            color: inherit;
+            text-decoration: none;
+        }
     }
 
     .info {
@@ -61,3 +66,71 @@ hr {
     }
 }
 
+.pagination {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    font-size: 18px;
+    font-family: "PT Serif Caption", serif;
+    margin: 32px 0px;
+
+    a {
+        display: block;
+        color: var(--color-primary);
+        text-decoration: none;
+
+        &:hover {
+            opacity: 80%;
+        }
+    }
+}
+
+#footer {
+    border-top: 1px solid var(--color-outline-variant);
+    padding: 16px 0px;
+    margin-top: 24px;
+}
+
+#header {
+    margin-bottom: 24px;
+    padding: 20px 0px;
+    border-bottom: 1px solid var(--color-outline-variant);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .title_desc {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .title a {
+            text-decoration: none;
+            color: var(--color-on-background);
+            font-size: 28px;
+        }
+
+        .description {
+            color: var(--color-on-surface-variant);
+            font-size: 16px;
+        }
+    }
+
+    .navigation {
+        display: flex;
+        flex-direction: row;
+
+        a {
+            display: block;
+            text-decoration: none;
+            color: var(--color-on-background);
+            padding: 8px 16px;
+            border-radius: 9999px;
+
+            &:hover {
+                background-color: var(--color-primary-container);
+                color: var(--color-on-primary-container);
+            }
+        }
+    }
+}