feed page indicator now more clearly communicates button behaviour when trying to go to a page earlier than first or later than last

src/routes/+layout.svelte

@@ -96,6 +96,7 @@
             /* colours */
             --color-text: #d0d0d0;
             --color-text-secondary: #b0b0b0;
+            --color-text-tertiary: #808080;
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
 

src/routes/feed/+page.svelte

@@ -13,7 +13,7 @@
 {#snippet pageButtons(currentIndex: number)}
     <div class="page-button-container blurred-background">
         {#if currentIndex == 1}
-            <p class="page-button page-button-left">x</p>
+            <p class="page-button page-button-left page-button-disabled">x</p>
         {:else}
             <a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}">&lt;</a>
         {/if}
@@ -23,7 +23,7 @@
         {/each}
 
         {#if currentIndex == data.maxPages}
-            <p class="page-button page-button-right">x</p>
+            <p class="page-button page-button-right page-button-disabled">x</p>
         {:else}
             <a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">&gt;</a>
         {/if}
@@ -101,6 +101,11 @@
         cursor: pointer;
     }
 
+    .page-button-disabled {
+        color: var(--color-text-tertiary);
+        cursor: not-allowed;
+    }
+
     .page-index:link, .page-index:visited {
         color: var(--color-text)
     }