Implement simple theme for blog list paginators #1

sass/_article-list.scss

@@ -253,23 +253,22 @@
 #paginator {
 	display: flex;
 	flex-direction: row;
-	justify-content: center;
+	justify-content: space-between;
 	align-items: center;
 	gap: 0.25rem;
 	margin-block-start: 4rem;
 
-	#paginator-first,
 	#paginator-previous,
-	#paginator-next,
+	#paginator-next {
-	#paginator-last {
 		display: inline-block;
 		transition: var(--transition);
 		box-shadow: var(--edge-highlight);
 		border-radius: 1rem;
 		background-color: var(--fg-muted-1);
-		padding: 0.5rem;
+		padding: 0.7rem;
 		color: var(--fg-muted-4);
 		line-height: 0;
+		text-decoration: None;
 
 		.icon {
 			transition: var(--transition);
@@ -280,10 +279,13 @@
 		}
 	}
 
-	a#paginator-first,
 	a#paginator-previous,
-	a#paginator-next,
+	a#paginator-next {
-	a#paginator-last {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+
 		&:hover {
 			background-color: var(--fg-muted-2);
 			color: var(--fg-muted-5);
@@ -295,29 +297,12 @@
 		}
 	}
 
-	span#paginator-first,
 	span#paginator-previous,
-	span#paginator-next,
+	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 {
-		-webkit-mask-image: var(--icon-first);
-		mask-image: var(--icon-first);
-	}
-
 	#paginator-previous .icon {
 		-webkit-mask-image: var(--icon-previous);
 		mask-image: var(--icon-previous);

templates/article_list.html

@@ -46,46 +46,20 @@
 
 {%- 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) }}">
+			<a id="paginator-previous" href="{{ paginator.previous }}">
 				<i class="icon"></i>
+				<div>{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}</div>
 			</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>
+		<div></div>
 
 		{%- if paginator.next -%}
-			<a id="paginator-next" href="{{ paginator.next }}" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
+			<a id="paginator-next" href="{{ paginator.next }}">
+				<div>{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}</div>
 				<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 -%}