Kaynağa Gözat

fix(themes): apply nav button spacing at all viewport widths (#8743)

Four themes (Alternative-Dark, Origine, Flat, Pafat) define `.nav_menu .btn`, `.nav_menu .stick`, and `.nav_menu .group` margin rules only inside `@media (max-width: 840px)`. At wider viewports the spacing falls back to incidental inline-block whitespace, so narrow view has ~20px between nav-button groups while wide view has ~5px. This PR lifts those margin rules to base scope so both widths match. Narrow-only tweaks (`padding`, `min-height`, Pafat's `min-width`) stay inside @media. Nord is left untouched; it already handles wide-view spacing with its own rem-based values.

**Worth keeping?** I can't speak to whether the asymmetry was intentional. If maintainers prefer the tighter desktop density (closer to Nord's `.125rem`), happy to close or rework with smaller wide-view values.

Follow-up to #8738, which added the narrow-view rules for Pafat.

Wide view, before:
<img width="530" height="39" alt="wide viewport before" src="https://github.com/user-attachments/assets/a25310bd-1b6d-4966-ae4e-7812d73b45f9" />

Wide view, after:
<img width="632" height="40" alt="wide viewport after" src="https://github.com/user-attachments/assets/3c2db89c-0280-4baa-97aa-5ea83211771e" />

Narrow view (unchanged):
<img width="482" height="39" alt="narrow viewport" src="https://github.com/user-attachments/assets/97fc6b7f-9c17-4116-a64f-09255b9cc808" />

Lift .nav_menu .btn, .stick, and .group margin rules out of
@media (max-width: 840px) to base scope in Alternative-Dark,
Origine, Flat, and Pafat. Narrow-only padding and min-height
tweaks stay inside @media. Nord unchanged.

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
polybjorn 2 hafta önce
ebeveyn
işleme
a21eee7ea5

+ 14 - 11
p/themes/Alternative-Dark/adark.css

@@ -752,6 +752,20 @@ kbd {
 	position: static;
 }
 
+.nav_menu .btn {
+	margin: 5px 10px;
+}
+
+.nav_menu .stick,
+.nav_menu .group {
+	margin: 0 10px;
+}
+
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
+	margin: 5px 0;
+}
+
 /*=== Feed articles */
 .flux {
 	background: var(--background-color-dark);
@@ -1140,21 +1154,10 @@ kbd {
 	}
 
 	.nav_menu .btn {
-		margin: 5px 10px;
 		padding: 3px 5px;
 		min-height: 0;
 	}
 
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0 10px;
-	}
-
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 5px 0;
-	}
-
 	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
 		border-left: 1px solid var(--border-color-middle);
 		border-top-left-radius: 3px;

+ 14 - 11
p/themes/Alternative-Dark/adark.rtl.css

@@ -752,6 +752,20 @@ kbd {
 	position: static;
 }
 
+.nav_menu .btn {
+	margin: 5px 10px;
+}
+
+.nav_menu .stick,
+.nav_menu .group {
+	margin: 0 10px;
+}
+
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
+	margin: 5px 0;
+}
+
 /*=== Feed articles */
 .flux {
 	background: var(--background-color-dark);
@@ -1140,21 +1154,10 @@ kbd {
 	}
 
 	.nav_menu .btn {
-		margin: 5px 10px;
 		padding: 3px 5px;
 		min-height: 0;
 	}
 
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0 10px;
-	}
-
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 5px 0;
-	}
-
 	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
 		border-right: 1px solid var(--border-color-middle);
 		border-top-right-radius: 3px;

+ 14 - 11
p/themes/Flat/flat.css

@@ -687,6 +687,20 @@ th {
 	position: static;
 }
 
+.nav_menu .btn {
+	margin: 5px 10px;
+}
+
+.nav_menu .stick,
+.nav_menu .group {
+	margin: 0 10px;
+}
+
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
+	margin: 5px 0;
+}
+
 .dropdown-menu .dropdown-header .icon {
 	filter: invert(0.6);
 }
@@ -973,21 +987,10 @@ th {
 	}
 
 	.nav_menu .btn {
-		margin: 5px 10px;
 		padding: 3px 5px;
 		min-height: 0;
 	}
 
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0 10px;
-	}
-
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 5px 0;
-	}
-
 	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
 		border-left-width: 0;
 		border-top-left-radius: 5px;

+ 14 - 11
p/themes/Flat/flat.rtl.css

@@ -687,6 +687,20 @@ th {
 	position: static;
 }
 
+.nav_menu .btn {
+	margin: 5px 10px;
+}
+
+.nav_menu .stick,
+.nav_menu .group {
+	margin: 0 10px;
+}
+
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
+	margin: 5px 0;
+}
+
 .dropdown-menu .dropdown-header .icon {
 	filter: invert(0.6);
 }
@@ -973,21 +987,10 @@ th {
 	}
 
 	.nav_menu .btn {
-		margin: 5px 10px;
 		padding: 3px 5px;
 		min-height: 0;
 	}
 
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0 10px;
-	}
-
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 5px 0;
-	}
-
 	.nav_menu .stick #mark-read-menu .dropdown-toggle.btn {
 		border-right-width: 0;
 		border-top-right-radius: 5px;

+ 14 - 11
p/themes/Origine/origine.css

@@ -846,6 +846,20 @@ button:hover .icon,
 	border-bottom: 1px solid var(--border-color);
 }
 
+.nav_menu .btn {
+	margin: 5px 10px;
+}
+
+.nav_menu .stick,
+.nav_menu .group {
+	margin: 0 10px;
+}
+
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
+	margin: 5px 0;
+}
+
 /*=== Feed articles */
 .flux {
 	background-color: var(--background-color-light);
@@ -1175,21 +1189,10 @@ button:hover .icon,
 	}
 
 	.nav_menu .btn {
-		margin: 5px 10px;
 		padding: 3px 5px;
 		min-height: 0;
 	}
 
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0 10px;
-	}
-
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 5px 0;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-light);
 		border-top: 1px solid var(--border-color);

+ 14 - 11
p/themes/Origine/origine.rtl.css

@@ -846,6 +846,20 @@ button:hover .icon,
 	border-bottom: 1px solid var(--border-color);
 }
 
+.nav_menu .btn {
+	margin: 5px 10px;
+}
+
+.nav_menu .stick,
+.nav_menu .group {
+	margin: 0 10px;
+}
+
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
+	margin: 5px 0;
+}
+
 /*=== Feed articles */
 .flux {
 	background-color: var(--background-color-light);
@@ -1175,21 +1189,10 @@ button:hover .icon,
 	}
 
 	.nav_menu .btn {
-		margin: 5px 10px;
 		padding: 3px 5px;
 		min-height: 0;
 	}
 
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0 10px;
-	}
-
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 5px 0;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-light);
 		border-top: 1px solid var(--border-color);

+ 14 - 10
p/themes/Pafat/pafat.css

@@ -793,6 +793,20 @@ a.signin {
 	background-color: var(--background-color-grey-light);
 	border-bottom: 1px solid var(--border-color-grey-dark);
 	text-align: center;
+
+	.btn {
+		margin: 5px 10px;
+	}
+
+	.stick,
+	.group {
+		margin: 0 10px;
+	}
+
+	.stick .btn,
+	.group .btn {
+		margin: 5px 0;
+	}
 }
 
 /*=== Feed articles */
@@ -1095,20 +1109,10 @@ a.signin {
 		padding-left: 0;
 		padding-bottom: 5px;
 
-		.btn {
-			margin: 5px 10px;
-		}
-
 		.stick,
 		.group {
-			margin: 0 10px;
 			min-width: 0;
 		}
-
-		.stick .btn,
-		.group .btn {
-			margin: 5px 0;
-		}
 	}
 
 	.dropdown-target:target ~ .dropdown-toggle::after {

+ 14 - 10
p/themes/Pafat/pafat.rtl.css

@@ -793,6 +793,20 @@ a.signin {
 	background-color: var(--background-color-grey-light);
 	border-bottom: 1px solid var(--border-color-grey-dark);
 	text-align: center;
+
+	.btn {
+		margin: 5px 10px;
+	}
+
+	.stick,
+	.group {
+		margin: 0 10px;
+	}
+
+	.stick .btn,
+	.group .btn {
+		margin: 5px 0;
+	}
 }
 
 /*=== Feed articles */
@@ -1095,20 +1109,10 @@ a.signin {
 		padding-right: 0;
 		padding-bottom: 5px;
 
-		.btn {
-			margin: 5px 10px;
-		}
-
 		.stick,
 		.group {
-			margin: 0 10px;
 			min-width: 0;
 		}
-
-		.stick .btn,
-		.group .btn {
-			margin: 5px 0;
-		}
 	}
 
 	.dropdown-target:target ~ .dropdown-toggle::after {