Updated pagination design. Improved tag category bar scroll behavior.

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;
 	}
 }

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 });
 }