From 4a4898b73b12fb4fa69924b6eceb01b4442643ed Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Thu, 21 Mar 2024 05:37:50 +0100
Subject: [PATCH] Updated pagination design. Improved tag category bar scroll
 behavior.

---
 components/pagination/pagination.vue | 12 ++++++++++--
 pages/tags/+Page.vue                 |  5 ++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/components/pagination/pagination.vue b/components/pagination/pagination.vue
index 61b2094..6cb6fb2 100644
--- a/components/pagination/pagination.vue
+++ b/components/pagination/pagination.vue
@@ -219,6 +219,7 @@ function getPath(page) {
 
 .pages {
 	display: flex;
+	gap: 0 .25rem;
 }
 
 .wrap {
@@ -227,6 +228,11 @@ function getPath(page) {
 
 .before {
 	flex-direction: row-reverse;
+	margin-right: .25rem;
+}
+
+.after {
+	margin-left: .25rem;
 }
 
 .index {
@@ -240,6 +246,7 @@ function getPath(page) {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
+	border-radius: .5rem;
 	margin-bottom: 1rem;
 	background: var(--background);
 	box-shadow: 0 0 3px var(--shadow-weak-30);
@@ -254,7 +261,8 @@ function getPath(page) {
 	}
 
 	&.active {
-		color: var(--primary);
+		background: var(--primary);
+		color: var(--text-light);
 	}
 
 	&.disabled .icon {
@@ -283,7 +291,7 @@ function getPath(page) {
 	}
 
 	.page {
-		width: 2rem;
+		width: 2.25rem;
 		height: 2.5rem;
 	}
 }
diff --git a/pages/tags/+Page.vue b/pages/tags/+Page.vue
index ac1456d..8a3d074 100644
--- a/pages/tags/+Page.vue
+++ b/pages/tags/+Page.vue
@@ -106,7 +106,10 @@ function calculateActiveCategory() {
 
 	const activeLink = document.querySelector(`a[href="#${activeCategory.value}"]`);
 
-	activeLink.scrollIntoView();
+	activeLink.scrollIntoView({
+		behavior: 'smooth',
+		inline: 'center',
+	});
 
 	navigate(`#${activeCategory.value}`, null, { replace: true });
 }