[simple] introduce page_with_header.html template

Previously the preferences & stats templates contained the markup:

<a href="{{ url_for('index') }}"><h1><span>SearXNG</span></h1></a>

There are many things wrong with this:

1. the markup was duplicated

2. the CSS needed to be changed whenever a new page wanted to use this
   header (since the CSS used page-specific selectors)

3. h1 should be reserved for the actual page title
   (e.g. Preferences or Engine stats)

4. the image was set via CSS which also set:

       span { visibility: hidden; }

   which however removes the alternative text from the accessibility
   tree (meaning screen readers will ignore it).

This commit fixes all these problems.

1 files changed, 4 insertions, 16 deletions

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 657e0d3ac..4011dddb5 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -79,9 +79,7 @@ main {
   flex: 1;
 }
 
-#main_preferences,
-#main_about,
-#main_stats {
+.page_with_header {
   margin: 2em auto;
   width: 85em;
 }
@@ -101,16 +99,8 @@ footer {
   }
 }
 
-#main_preferences h1,
-#main_stats h1 {
-  background: url('../img/searxng.png') no-repeat;
-  background-size: contain;
-  min-height: 40px;
-  margin: 0 auto;
-
-  span {
-    visibility: hidden;
-  }
+.page_with_header .logo {
+  height: 40px;
 }
 
 input[type="submit"],
@@ -647,9 +637,7 @@ article[data-vim-selected].category-social {
 }
 
 @media screen and (max-width: @tablet) {
-  #main_preferences,
-  #main_about,
-  #main_stats {
+  .page_with_header {
     margin: 2rem 0.5rem;
     width: auto;
   }