[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.
This commit is contained in:
Martin Fischer 2022-01-30 09:39:21 +01:00
parent 2a6d84dab5
commit 6f0ec7e58f
6 changed files with 17 additions and 28 deletions

View file

@ -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;
}