From 1ae5bdd329a6bafb0c667708cf6c0d1bb7b2ff86 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Wed, 18 Sep 2024 20:08:25 +0300
Subject: [PATCH] Simplify post nav styles

---
 CHANGELOG.md        |  1 +
 sass/_post-nav.scss | 24 +++++++++---------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 811b169..ff5b0e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Increased hover scale of aside images.
 - Scale up the blurred article banner in article list on hover.
+- Simplify prev/next post nav styles.
 - Use decimals instead of percents (again).
 
 ## [5.0.0](https://codeberg.org/daudix/duckquill/compare/v4.8.0...v5.0.0)
diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss
index 64c9059..cba5c12 100644
--- a/sass/_post-nav.scss
+++ b/sass/_post-nav.scss
@@ -1,16 +1,19 @@
 #post-nav {
 	display: flex;
+	flex-direction: row;
 	gap: 0.25rem;
-	max-width: 100vw;
+
+	@media only screen and (max-width: 720px) {
+		flex-direction: column;
+	}
 
 	.post-nav-item {
-		flex: 1 1 0;
+		flex: 1;
 		transition: var(--transition);
 		border-radius: var(--rounded-corner);
 		padding: 1rem;
 		padding-block-end: 0.75rem;
-		width: 0;
-		max-width: calc(50% - 0.125rem);
+		min-width: 0;
 		text-decoration: none;
 
 		&:hover {
@@ -35,7 +38,6 @@
 		}
 
 		&.post-nav-next {
-			margin-inline-start: auto;
 			text-align: end;
 
 			.nav-arrow::after {
@@ -48,7 +50,7 @@
 		}
 
 		.nav-arrow {
-			margin-block-end: 0.5rem;
+			margin-block-end: 0.75rem;
 			color: var(--fg-muted-5);
 			font-weight: normal;
 			line-height: 1;
@@ -57,19 +59,11 @@
 		.post-title {
 			display: block;
 			transition: var(--transition);
+			max-width: 90vw;
 			overflow: hidden;
 			color: var(--fg-color);
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
 	}
-
-	@media only screen and (max-width: 720px) {
-		flex-direction: column;
-
-		.post-nav-item {
-			width: 100%;
-			max-width: 100%;
-		}
-	}
 }