From f0ada67e0e9eba25d285e8e1d351a63ecfe247b0 Mon Sep 17 00:00:00 2001
From: Ragnar-Oock <u.drgnk@outlook.com>
Date: Mon, 29 Mar 2021 15:58:47 +0200
Subject: [PATCH] make the top bar a header element

---
 src/App.vue               | 3 +--
 src/components/TopBar.vue | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4eeaffd..45d80e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,9 +4,8 @@
 		class="app"
 	>
 		<WelcomeScreen @visible="onWelcomeScreenVisiblityChange" />
+		<TopBar :is-search-bar-docked="isSearchBarDocked" />
 		<main>
-			<TopBar :is-search-bar-docked="isSearchBarDocked" />
-
 			<RulesPage
 				v-if="!isLastRuleVersionAccepted"
 				:show="!isWelcomeScreenVisible"
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 2787d0a..7e21e49 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,5 +1,5 @@
 <template>
-	<div
+	<header
 		class="top-bar"
 		:class="{'docked': isSearchBarDocked}"
 	>
@@ -76,7 +76,7 @@
 				<span class="sr-only">{{ $t('topBar.darkMode') }}</span>
 			</label>
 		</div>
-	</div>
+	</header>
 </template>
 
 <script lang="js">
@@ -152,7 +152,7 @@ export default {
 			gap: .25em;
 
 			transition: opacity 300ms ease-in-out;
-			@media screen and (max-width: 67.3em) {
+			@media screen and (max-width: 68em) {
 				@at-root .docked & {
 					opacity: 0;
 				}