make the top bar a header element

Ragnar-Oock · Mar 29, 2021 · f0ada67 · f0ada67
1 parent 255342d
commit f0ada67
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git 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
@@ -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;
 				}