Improved: Nav buttons as buttons (#6485)

* improved HTML

* CSS

* i18n: new title text

* Update swage.scss

* Update app/i18n/fr/gen.php

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update swage.scss

---------

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

25 files changed, 28 insertions, 102 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 1bc7a5097..ce45f036d 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -922,11 +922,7 @@ kbd {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
 	background: var(--background-color-light);
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 }
 
 /*=== READER VIEW */
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index f618560a9..fff6e102f 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -922,11 +922,7 @@ kbd {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
 	background: var(--background-color-light);
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 }
 
 /*=== READER VIEW */
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index c0d0a4f96..8ad5099be 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -372,9 +372,5 @@ main.prompt {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3em;
-	table-layout: fixed;
 	background: variables.$sid-bg;
 }
diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index 720211a2a..21eb43c52 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -140,8 +140,8 @@
 
 	}
 
-	#nav_entries {
-		line-height: 4.5rem;
+	#nav_entries button {
+		height: 4.5rem;
 	}
 
 	.notification {
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 29fe2de0a..fcefd861e 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -973,10 +973,6 @@ main.prompt {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3em;
-	table-layout: fixed;
 	background: #fbf9f6;
 }
 
@@ -1291,8 +1287,8 @@ main.prompt {
 		line-height: 1.5rem;
 		margin-bottom: 1rem;
 	}
-	#nav_entries {
-		line-height: 4.5rem;
+	#nav_entries button {
+		height: 4.5rem;
 	}
 	.notification {
 		border-radius: 0;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 37a3e82ee..fe535fbc5 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -973,10 +973,6 @@ main.prompt {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3em;
-	table-layout: fixed;
 	background: #fbf9f6;
 }
 
@@ -1291,8 +1287,8 @@ main.prompt {
 		line-height: 1.5rem;
 		margin-bottom: 1rem;
 	}
-	#nav_entries {
-		line-height: 4.5rem;
+	#nav_entries button {
+		height: 4.5rem;
 	}
 	.notification {
 		border-radius: 0;
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index bfe5eb8a2..61622b840 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -846,10 +846,6 @@ th {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3em;
-	table-layout: fixed;
 	background: #34495e;
 }
 
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index ee882a5b7..35cd1d620 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -846,10 +846,6 @@ th {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3em;
-	table-layout: fixed;
 	background: #34495e;
 }
 
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index 4404fd211..ce78db7f2 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -386,9 +386,5 @@ main.prompt {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3em;
-	table-layout: fixed;
 	background: variables.$sid-bg;
 }
diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss
index 9c1ad44c7..974c5cf65 100644
--- a/p/themes/Mapco/_mobile.scss
+++ b/p/themes/Mapco/_mobile.scss
@@ -147,8 +147,8 @@
 
 	}
 
-	#nav_entries {
-		line-height: 4.5rem;
+	#nav_entries button {
+		height: 4.5rem;
 	}
 
 	.notification {
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index a25cfade3..925e6ec8b 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -991,10 +991,6 @@ main.prompt {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3em;
-	table-layout: fixed;
 	background: #303136;
 }
 
@@ -1311,8 +1307,8 @@ main.prompt {
 		line-height: 1.5rem;
 		margin-bottom: 1rem;
 	}
-	#nav_entries {
-		line-height: 4.5rem;
+	#nav_entries button {
+		height: 4.5rem;
 	}
 	.notification {
 		border-radius: 0;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index cece7cc55..c85d108d9 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -991,10 +991,6 @@ main.prompt {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3em;
-	table-layout: fixed;
 	background: #303136;
 }
 
@@ -1311,8 +1307,8 @@ main.prompt {
 		line-height: 1.5rem;
 		margin-bottom: 1rem;
 	}
-	#nav_entries {
-		line-height: 4.5rem;
+	#nav_entries button {
+		height: 4.5rem;
 	}
 	.notification {
 		border-radius: 0;
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index ab2e9e34e..7df84b20a 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -920,10 +920,7 @@ li.item.active {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
 	background: var(--accent-bg);
-	text-align: center;
-	line-height: 3em;
 }
 
 #nav_entries .item a:hover {
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 94a07b725..ee20cc6e4 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -920,10 +920,7 @@ li.item.active {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
 	background: var(--accent-bg);
-	text-align: center;
-	line-height: 3em;
 }
 
 #nav_entries .item a:hover {
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 333bb5354..99f8547ce 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -988,12 +988,8 @@ a:hover .icon {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
 	background-color: var(--background-color-light);
 	border-top: 1px solid var(--border-color);
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 }
 
 /*=== READER VIEW */
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 9f8522613..8b88c4329 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -988,12 +988,8 @@ a:hover .icon {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
 	background-color: var(--background-color-light);
 	border-top: 1px solid var(--border-color);
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 }
 
 /*=== READER VIEW */
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 4da46bc7f..675b472fd 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -958,12 +958,8 @@ a.signin {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
 	background-color: var(--background-color-white);
 	border-top: 1px solid var(--border-color-grey-light);
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 }
 
 #nav_entries .item:hover {
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 0c969f1f1..78ed6f984 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -958,12 +958,8 @@ a.signin {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
 	background-color: var(--background-color-white);
 	border-top: 1px solid var(--border-color-grey-light);
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 }
 
 #nav_entries .item:hover {
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 2b8e4b86e..7321fac86 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -833,10 +833,6 @@ form th {
 }
 
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 	background-color: var(--color-background-aside);
 }
 
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index b512ad0d5..c46869e91 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -833,10 +833,6 @@ form th {
 }
 
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 	background-color: var(--color-background-aside);
 }
 
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index e329a57c8..f05bf8ee4 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -1070,10 +1070,6 @@ form {
 }
 
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 
 	@extend %aside-width;
 	background-color: var(--color-background-aside);
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index f2807ceee..69bf5fbe5 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -630,10 +630,6 @@ th {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 }
 
 /*=== READER VIEW */
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index 5809a1e6c..7c50d3083 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -630,10 +630,6 @@ th {
 
 /*=== Navigation menu (for articles) */
 #nav_entries {
-	margin: 0;
-	text-align: center;
-	line-height: 3;
-	table-layout: fixed;
 }
 
 /*=== READER VIEW */
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 131d0ddc7..adea1f6cc 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1670,13 +1670,17 @@ a.website:hover .favicon {
 	z-index: 50;
 }
 
-#nav_entries .item {
+#nav_entries button {
+	background-color: transparent;
 	display: table-cell;
-	width: 30%;
+	width: 33.3%;
+	height: 3rem;
+	border: 0;
+	cursor: pointer;
 }
 
-#nav_entries a {
-	display: block;
+#nav_entries button:hover {
+	background-color: var(--frss-darken-background-hover-transparent);
 }
 
 /*=== "Load" parts */
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 073306ca5..5684501c3 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1670,13 +1670,17 @@ a.website:hover .favicon {
 	z-index: 50;
 }
 
-#nav_entries .item {
+#nav_entries button {
+	background-color: transparent;
 	display: table-cell;
-	width: 30%;
+	width: 33.3%;
+	height: 3rem;
+	border: 0;
+	cursor: pointer;
 }
 
-#nav_entries a {
-	display: block;
+#nav_entries button:hover {
+	background-color: var(--frss-darken-background-hover-transparent);
 }
 
 /*=== "Load" parts */