Headline structure improvement (#3830)

* header: h1 deleted - full logo included

* template: config - display

* WIP

* shortcut configs. added fieldset. do not display the border by default

* system.phtml

* subscription: add feed or category

* wip

* wip

* Update bookmarklet.phtml

* Update archiving.phtml

* Update queries.phtml

* Update profile.phtml

* Update manage.phtml

* auth+update

* Update template.rtl.css

* fixed FreshRSS logo (Theme: Mapco)

* Update mapco.rtl.css

* Update _layout.scss

* fixed FreshRSS logo (theme: Dark)

* fix: FreshRSS logo (Theme: BlueLagoon)

* fix: FreshRSS logo (Theme: Ansum)

* fixed: FreshRSS logo (Theme: Alternative Dark)

* fix: FreshRSS logo (Theme: Pafat)

* fix: FreshRSS logo (Theme: Screwdriver)

* fix: FreshRSS logo (theme: Swage)

* Minor lint

* little fix: FreshRSS logo (Theme: Origine)

* Fix: FreshRSS logo (Theme: Origine Compact)

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

25 files changed, 74 insertions, 212 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 3fcf75a3c..f95f3d637 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -550,12 +550,9 @@ a.btn {
 	width: 230px;
 }
 
-.header > .item.title h1 {
+.header > .item.title .logo {
 	margin: 0.5em 0;
-}
-
-.header > .item.title h1 a {
-	text-decoration: none;
+	filter: grayscale(100%) brightness(2.5);
 }
 
 .header > .item.search input {
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index d9b34af97..4d101e7f9 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -550,12 +550,9 @@ a.btn {
 	width: 230px;
 }
 
-.header > .item.title h1 {
+.header > .item.title .logo {
 	margin: 0.5em 0;
-}
-
-.header > .item.title h1 a {
-	text-decoration: none;
+	filter: grayscale(100%) brightness(2.5);
 }
 
 .header > .item.search input {
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index a75601d06..56fe97a54 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -16,21 +16,12 @@
 		// flex-direction: row;
 		&.title {
 			width: 280px;
-
 			font-weight: 400;
 
-			h1 {
-				a {
-					text-decoration: none;
-					color: $sid-font-color;
-					font-size: 1rem;
-					text-transform: uppercase;
-					letter-spacing: 1px;
-
-					img {
-						margin-right: 0.5rem;
-
-					}
+			a {
+				img {
+					margin: 0.6em 0 0.3em;
+					filter: invert(80%);
 				}
 			}
 		}
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index ec78db32f..3843b6369 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -805,15 +805,9 @@ form th {
 	width: 280px;
 	font-weight: 400;
 }
-.header .item.title h1 a {
-	text-decoration: none;
-	color: #363330;
-	font-size: 1rem;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-.header .item.title h1 a img {
-	margin-right: 0.5rem;
+.header .item.title a img {
+	margin: 0.6em 0 0.3em;
+	filter: invert(80%);
 }
 .header .item.search input {
 	width: 230px;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 7931391d2..e78a04795 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -805,15 +805,9 @@ form th {
 	width: 280px;
 	font-weight: 400;
 }
-.header .item.title h1 a {
-	text-decoration: none;
-	color: #363330;
-	font-size: 1rem;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-.header .item.title h1 a img {
-	margin-left: 0.5rem;
+.header .item.title a img {
+	margin: 0.6em 0 0.3em;
+	filter: invert(80%);
 }
 .header .item.search input {
 	width: 230px;
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 1fd651c78..ed3980eb3 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -650,22 +650,16 @@ a.btn {
 }
 
 .header > .item.title .logo {
-	width: 40px;
+	margin: 10px 0;
 	height: 40px;
+	filter: grayscale(100%) brightness(0%);
 }
 
 .header > .item.title {
 	width: 250px;
 }
 
-.header > .item.title h1 {
-	margin: 10px 0;
-}
-
-.header > .item.title h1 a {
-	color: #222;
-	font-size: 28px;
-	text-decoration: none;
+.header > .item.title a {
 	text-shadow: 0 1px #fff;
 }
 
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 091b3e27b..cba668219 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -650,22 +650,16 @@ a.btn {
 }
 
 .header > .item.title .logo {
-	width: 40px;
+	margin: 10px 0;
 	height: 40px;
+	filter: grayscale(100%) brightness(0%);
 }
 
 .header > .item.title {
 	width: 250px;
 }
 
-.header > .item.title h1 {
-	margin: 10px 0;
-}
-
-.header > .item.title h1 a {
-	color: #222;
-	font-size: 28px;
-	text-decoration: none;
+.header > .item.title a {
 	text-shadow: 0 1px #fff;
 }
 
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 5bbae4fd4..dda0278e5 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -590,12 +590,9 @@ a.btn {
 	width: 230px;
 }
 
-.header > .item.title h1 {
+.header > .item.title .logo {
 	margin: 0.5em 0;
-}
-
-.header > .item.title h1 a {
-	text-decoration: none;
+	filter: grayscale(60%) brightness(1.1);
 }
 
 .header > .item.search input {
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index c08afe183..4de7188dd 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -590,12 +590,9 @@ a.btn {
 	width: 230px;
 }
 
-.header > .item.title h1 {
+.header > .item.title .logo {
 	margin: 0.5em 0;
-}
-
-.header > .item.title h1 a {
-	text-decoration: none;
+	filter: grayscale(60%) brightness(1.1);
 }
 
 .header > .item.search input {
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index c7c0849b4..10c572956 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -19,18 +19,9 @@
 
 			font-weight: 400;
 
-			h1 {
-				a {
-					text-decoration: none;
-					color: $sid-font-color;
-					font-size: 1rem;
-					text-transform: uppercase;
-					letter-spacing: 1px;
-
-					img {
-						margin-right: 0.5rem;
-
-					}
+			a {
+				img {
+					margin-right: 0.5rem;
 				}
 			}
 		}
@@ -107,6 +98,10 @@
 		}
 	}
 
+	.logo {
+		margin: 11px 0 5px;
+		filter: grayscale(100%) brightness(100);
+	}
 
 }
 
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 7f5c689ec..e8dffb43d 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -808,14 +808,11 @@ form th {
 	width: 280px;
 	font-weight: 400;
 }
-.header .item.title h1 a {
-	text-decoration: none;
-	color: #fff;
-	font-size: 1rem;
-	text-transform: uppercase;
-	letter-spacing: 1px;
+.header .logo {
+	margin: 11px 0 5px;
+	filter: grayscale(100%) brightness(100);
 }
-.header .item.title h1 a img {
+.header .item.title a img {
 	margin-right: 0.5rem;
 }
 .header .item.search input {
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 9f5ba3cfd..09ff43f5c 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -808,14 +808,11 @@ form th {
 	width: 280px;
 	font-weight: 400;
 }
-.header .item.title h1 a {
-	text-decoration: none;
-	color: #fff;
-	font-size: 1rem;
-	text-transform: uppercase;
-	letter-spacing: 1px;
+.header .logo {
+	margin: 11px 0 5px;
+	filter: grayscale(100%) brightness(100);
 }
-.header .item.title h1 a img {
+.header .item.title a img {
 	margin-left: 0.5rem;
 }
 .header .item.search input {
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index cd42eb2f1..1e82870b6 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -608,15 +608,6 @@ a.btn,
 	width: 230px;
 }
 
-.header > .item.title h1 {
-	margin: 0;
-	font-size: 1em;
-}
-
-.header > .item.title h1 a {
-	text-decoration: none;
-}
-
 .header .item.configure .btn,
 .header .item.search .btn {
 	min-height: 18px;
@@ -625,7 +616,6 @@ a.btn,
 }
 
 .header > .item.title .logo {
-	width: 25px;
 	height: 25px;
 }
 
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index e9e4424d3..f3c5263c0 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -608,15 +608,6 @@ a.btn,
 	width: 230px;
 }
 
-.header > .item.title h1 {
-	margin: 0;
-	font-size: 1em;
-}
-
-.header > .item.title h1 a {
-	text-decoration: none;
-}
-
 .header .item.configure .btn,
 .header .item.search .btn {
 	min-height: 18px;
@@ -625,7 +616,6 @@ a.btn,
 }
 
 .header > .item.title .logo {
-	width: 25px;
 	height: 25px;
 }
 
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 2c77e56d7..6eb3606bc 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -593,13 +593,8 @@ a.btn {
 	width: 230px;
 }
 
-.header > .item.title h1 {
+.header > .item.title .logo {
 	margin: 0.5em 0;
-	text-shadow: 1px -1px 0 #ccc;
-}
-
-.header > .item.title h1 a {
-	text-decoration: none;
 }
 
 .header > .item.search input {
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index b0bee6831..97b304161 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -593,13 +593,8 @@ a.btn {
 	width: 230px;
 }
 
-.header > .item.title h1 {
+.header > .item.title .logo {
 	margin: 0.5em 0;
-	text-shadow: -1px -1px 0 #ccc;
-}
-
-.header > .item.title h1 a {
-	text-decoration: none;
 }
 
 .header > .item.search input {
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 47229be5e..0deac1a33 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -563,11 +563,12 @@ a.btn {
 	width: 230px;
 }
 
-.header > .item.title h1 {
+.header > .item.title .logo {
 	margin: 0.5em 0;
+	filter: grayscale(100%) brightness(2.5);
 }
 
-.header > .item.title h1 a, a.signin {
+a.signin {
 	text-decoration: none;
 	color: #c5c6ca;
 }
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index f5d1cbc6b..e820459d0 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -563,11 +563,12 @@ a.btn {
 	width: 230px;
 }
 
-.header > .item.title h1 {
+.header > .item.title .logo {
 	margin: 0.5em 0;
+	filter: grayscale(100%) brightness(2.5);
 }
 
-.header > .item.title h1 a, a.signin {
+a.signin {
 	text-decoration: none;
 	color: #c5c6ca;
 }
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index aad9d963b..d01e30ec0 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -638,25 +638,15 @@ a.btn {
 }
 
 .header > .item.title .logo {
-	width: 60px;
-	height: 60px;
+	margin: 0.5em 0;
+	height: 35px;
+	filter: invert(80%);
 }
 
 .header > .item.title {
 	width: 250px;
 }
 
-.header > .item.title h1 {
-	margin: 0.5em 0;
-}
-
-.header > .item.title h1 a {
-	color: #222;
-	font-size: 28px;
-	text-decoration: none;
-	text-shadow: 0 1px #fff;
-}
-
 .header > .item.search input {
 	width: 230px;
 }
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 18fe7996d..1cbc9e604 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -638,25 +638,15 @@ a.btn {
 }
 
 .header > .item.title .logo {
-	width: 60px;
-	height: 60px;
+	margin: 0.5em 0;
+	height: 35px;
+	filter: invert(80%);
 }
 
 .header > .item.title {
 	width: 250px;
 }
 
-.header > .item.title h1 {
-	margin: 0.5em 0;
-}
-
-.header > .item.title h1 a {
-	color: #222;
-	font-size: 28px;
-	text-decoration: none;
-	text-shadow: 0 1px #fff;
-}
-
 .header > .item.search input {
 	width: 230px;
 }
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 56d50b202..b7f88bf9c 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -562,14 +562,7 @@ form th {
 }
 .header > .item.title {
 	position: absolute;
-}
-.header > .item.title h1 {
-	margin: 0;
-	display: block;
-}
-.header > .item.title h1 a {
-	text-decoration: none;
-	color: #fcfcfc;
+	text-align: center;
 }
 .header > .item.title .logo {
 	display: inline-block;
@@ -577,6 +570,7 @@ form th {
 	vertical-align: top;
 	position: relative;
 	top: 5px;
+	filter: grayscale(100%) brightness(100);
 }
 .header > .item.search input {
 	width: 230px;
@@ -593,10 +587,6 @@ form th {
 	z-index: 1000;
 	width: 35px;
 }
-.header h1 {
-	text-align: center;
-	font-size: 1.5em;
-}
 
 .aside {
 	padding: 35px 0;
@@ -859,9 +849,6 @@ form th {
 	width: 200px;
 	position: unset;
 }
-.formLogin .header > .item.title h1 {
-	display: unset;
-}
 .formLogin a.signin {
 	color: #fcfcfc;
 	padding-left: 5px;
@@ -932,12 +919,11 @@ form th {
 		display: none;
 	}
 
-	.header > .item.title h1 a {
+	.header > .item.title a {
 		display: block;
 		position: absolute;
 		top: -35px;
 		left: 10px;
-		font-size: 0.6em;
 	}
 
 	.header .item.configure,
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 87bc3d12b..5713afd06 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -562,14 +562,7 @@ form th {
 }
 .header > .item.title {
 	position: absolute;
-}
-.header > .item.title h1 {
-	margin: 0;
-	display: block;
-}
-.header > .item.title h1 a {
-	text-decoration: none;
-	color: #fcfcfc;
+	text-align: center;
 }
 .header > .item.title .logo {
 	display: inline-block;
@@ -577,6 +570,7 @@ form th {
 	vertical-align: top;
 	position: relative;
 	top: 5px;
+	filter: grayscale(100%) brightness(100);
 }
 .header > .item.search input {
 	width: 230px;
@@ -593,10 +587,6 @@ form th {
 	z-index: 1000;
 	width: 35px;
 }
-.header h1 {
-	text-align: center;
-	font-size: 1.5em;
-}
 
 .aside {
 	padding: 35px 0;
@@ -859,9 +849,6 @@ form th {
 	width: 200px;
 	position: unset;
 }
-.formLogin .header > .item.title h1 {
-	display: unset;
-}
 .formLogin a.signin {
 	color: #fcfcfc;
 	padding-right: 5px;
@@ -932,12 +919,11 @@ form th {
 		display: none;
 	}
 
-	.header > .item.title h1 a {
+	.header > .item.title a {
 		display: block;
 		position: absolute;
 		top: -35px;
 		right: 10px;
-		font-size: 0.6em;
 	}
 
 	.header .item.configure,
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 8a21584fd..44db6fa4d 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -702,16 +702,7 @@ form {
 
 			@extend %aside-width;
 			position: absolute;
-
-			h1 {
-				margin: 0;
-				display: block;
-
-				a {
-					text-decoration: none;
-					color: $color_light;
-				}
-			}
+			text-align: center;
 
 			.logo {
 				display: inline-block;
@@ -719,6 +710,7 @@ form {
 				vertical-align: top;
 				position: relative;
 				top: 5px;
+				filter: grayscale(100%) brightness(100);
 			}
 		}
 
@@ -741,11 +733,6 @@ form {
 		z-index: 1000;
 		width: 35px;
 	}
-
-	h1 {
-		text-align: center;
-		font-size: 1.5em;
-	}
 }
 
 .aside {
@@ -1077,10 +1064,6 @@ form {
 				width: 200px;
 				position: unset;
 			}
-
-			&.title h1 {
-				display: unset;
-			}
 		}
 	}
 
@@ -1162,12 +1145,11 @@ form {
 		}
 	}
 
-	.header > .item.title h1 a {
+	.header > .item.title a {
 		display: block;
 		position: absolute;
 		top: -35px;
 		left: 10px;
-		font-size: 0.6em;
 	}
 
 	.header .item.configure,
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 6502747b6..b39830319 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -119,6 +119,12 @@ audio {
 }
 
 /*=== Forms */
+fieldset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
 legend {
 	display: block;
 	width: 100%;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index cd0371d92..fc83ae5f2 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -119,6 +119,12 @@ audio {
 }
 
 /*=== Forms */
+fieldset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
 legend {
 	display: block;
 	width: 100%;