More visually interesting paginator, move paginator to article-list.html

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v5.1.0...main)
 
+### Changed
+
+- More visually interesting paginator.
+- Move paginator from `articles.html` to `article-list.html`.
+
 ## [5.1.0](https://codeberg.org/daudix/duckquill/compare/v5.0.0...v5.1.0)
 
 ### Added

sass/_article-list.scss

@@ -343,7 +343,7 @@
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
-	gap: 0.5rem;
+	gap: 0.25rem;
 	margin-block-start: 4rem;
 
 	#paginator-first,
@@ -353,21 +353,12 @@
 		display: inline-block;
 		transition: var(--transition);
 		box-shadow: var(--edge-highlight);
-		border-radius: 999px;
+		border-radius: 1rem;
 		background-color: var(--fg-muted-1);
 		padding: 0.5rem;
 		color: var(--fg-muted-4);
 		line-height: 0;
 
-		&:hover {
-			background-color: var(--fg-muted-2);
-			color: var(--fg-muted-5);
-		}
-
-		&:active {
-			transform: var(--active);
-		}
-
 		.icon {
 			transition: var(--transition);
 			width: 1rem;
@@ -379,6 +370,39 @@
 		}
 	}
 
+	a#paginator-first,
+	a#paginator-previous,
+	a#paginator-next,
+	a#paginator-last {
+		&:hover {
+			background-color: var(--fg-muted-2);
+			color: var(--fg-muted-5);
+		}
+
+		&:active {
+			transform: var(--active);
+			border-radius: 1rem;
+		}
+	}
+
+	span#paginator-first,
+	span#paginator-previous,
+	span#paginator-next,
+	span#paginator-last {
+		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
+	}
+
+	#paginator-previous {
+		border-start-end-radius: var(--rounded-corner-small);
+		border-end-end-radius: var(--rounded-corner-small);
+	}
+
+	#paginator-next {
+		border-start-start-radius: var(--rounded-corner-small);
+		border-end-start-radius: var(--rounded-corner-small);
+	}
+
 	#paginator-first .icon {
 		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 2v12h2V8.414l5.293 5.293a1 1 0 1 0 1.414-1.414L7.414 8l4.293-4.293a1 1 0 1 0-1.414-1.414L5 7.586V2zm0 0'/%3E%3C/svg%3E");
 	}
@@ -395,29 +419,14 @@
 		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M11 2v5.586L5.707 2.293a1 1 0 1 0-1.414 1.414L8.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414L11 8.414V14h2V2zm0 0'/%3E%3C/svg%3E");
 	}
 
-	span {
-		&#paginator-first,
-		&#paginator-previous,
-		&#paginator-next,
-		&#paginator-last {
-			opacity: var(--disabled-opacity);
-			cursor: not-allowed;
-
-			&:hover {
-				background-color: var(--fg-muted-1);
-				color: var(--fg-muted-4);
-			}
-
-			&:active {
-				transform: none;
-			}
-		}
-	}
-
 	#paginator-counter {
 		display: inline-block;
-		margin: 0 0.5rem;
+		box-shadow: var(--edge-highlight);
-		color: var(--fg-muted-5);
+		border-radius: var(--rounded-corner-small);
+		background-color: var(--accent-color-alpha);
+		padding: 0.5rem 0.625rem;
+		color: var(--accent-color);
+		font-weight: bold;
 		line-height: 1;
 		font-variant-numeric: tabular-nums;
 	}

templates/article_list.html

@@ -23,4 +23,50 @@
 </p>
 
 {% include "partials/articles.html" %}
+
+{%- if paginator.pages -%}
+	<nav id="paginator">
+		{%- if paginator.first != current_url -%}
+			<a id="paginator-first" href="{{ paginator.first }}" title="{{ macros_translate::translate(key='first', default='First', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</a>
+		{% else %}
+			<span id="paginator-first" title="{{ macros_translate::translate(key='first', default='First', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</span>
+		{%- endif -%}
+
+		{%- if paginator.previous -%}
+			<a id="paginator-previous" href="{{ paginator.previous }}" title="{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</a>
+		{% else %}
+			<span id="paginator-previous" title="{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</span>
+		{%- endif -%}
+
+		<span id="paginator-counter">{{ paginator.current_index }}/{{ paginator.number_pagers }}</span>
+
+		{%- if paginator.next -%}
+			<a id="paginator-next" href="{{ paginator.next }}" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</a>
+		{%- else -%}
+			<span id="paginator-next" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</span>
+		{%- endif -%}
+
+		{%- if paginator.last != current_url -%}
+			<a id="paginator-last" href="{{ paginator.last }}" title="{{ macros_translate::translate(key='last', default='Last', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</a>
+		{% else %}
+			<span id="paginator-last" title="{{ macros_translate::translate(key='last', default='Last', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</span>
+		{%- endif -%}
+	</nav>
+{%- endif -%}
 {% endblock content %}

templates/partials/articles.html

@@ -82,49 +82,3 @@
 		</article>
 	{%- endfor %}
 </div>
-
-{%- if paginator.pages -%}
-	<nav id="paginator">
-		{%- if paginator.first != current_url -%}
-			<a id="paginator-first" href="{{ paginator.first }}" title="{{ macros_translate::translate(key='first', default='First', language_strings=language_strings) }}">
-				<i class="icon"></i>
-			</a>
-		{% else %}
-			<span id="paginator-first" title="{{ macros_translate::translate(key='first', default='First', language_strings=language_strings) }}">
-				<i class="icon"></i>
-			</span>
-		{%- endif -%}
-
-		{%- if paginator.previous -%}
-			<a id="paginator-previous" href="{{ paginator.previous }}" title="{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}">
-				<i class="icon"></i>
-			</a>
-		{% else %}
-			<span id="paginator-previous" title="{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}">
-				<i class="icon"></i>
-			</span>
-		{%- endif -%}
-
-		<span id="paginator-counter">{{ paginator.current_index }}/{{ paginator.number_pagers }}</span>
-
-		{%- if paginator.next -%}
-			<a id="paginator-next" href="{{ paginator.next }}" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
-				<i class="icon"></i>
-			</a>
-		{%- else -%}
-			<span id="paginator-next" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
-				<i class="icon"></i>
-			</span>
-		{%- endif -%}
-
-		{%- if paginator.last != current_url -%}
-			<a id="paginator-last" href="{{ paginator.last }}" title="{{ macros_translate::translate(key='last', default='Last', language_strings=language_strings) }}">
-				<i class="icon"></i>
-			</a>
-		{% else %}
-			<span id="paginator-last" title="{{ macros_translate::translate(key='last', default='Last', language_strings=language_strings) }}">
-				<i class="icon"></i>
-			</span>
-		{%- endif -%}
-	</nav>
-{%- endif -%}