Fix navbar

src/App.vue

@@ -141,7 +141,7 @@ img.tiny-logo {
         margin-right: 10px;
     }
 
-    span.tiny-logo {
+    a.tiny-logo {
         display: none;
     }
 

src/components/Header.vue

@@ -10,17 +10,15 @@ export default {
 
 <style scoped>
 #header {
-    background: url('../assets/headcut.png') no-repeat center;
-    height: 388px;
+    background: url('../assets/headcut.png') no-repeat top;
+    background-size: cover;
+    aspect-ratio: 2000/388;
 }
 
 @media screen and (max-width: 1024px) {
     #header {
-        background: url('../assets/head.png') no-repeat center;
+        background: url('../assets/head.png') no-repeat top;
         background-size: contain;
-        height: 0;
-        padding-top: 17.25%; /* (img-height / img-width * container-width) */
-                /* (388 / 2000 * 100) */
     }
 }
 </style>

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="home">
         <Header/>
-        <h1>Любимые булочные Северной Столицы</h1>
+        <h1 class="header">Любимые булочные Северной Столицы</h1>
         <div id="map">
             <div id="napkin">
                 <yandex-map :settings=settings :coords=markers[selected] :zoom=16>
@@ -162,6 +162,7 @@ export default {
     methods: {
         selectMarker: function(n) {
             this.selected = n;
+            document.querySelector("ymaps").scrollIntoView();
         },
         selectOnMap: function(n) {
             this.selected = +n;
@@ -197,6 +198,7 @@ h1 {
     margin-bottom: 50px;
     margin-top: 50px;
     font-size: 5vh;
+    text-wrap: balance;
 }
 
 h4 {
@@ -254,7 +256,7 @@ h4 {
     #napkin {
         position: relative;
         width: 100%;
-        padding: 0px;
+        padding: 0;
         background: none;
     }
 
@@ -264,4 +266,16 @@ h4 {
         padding-bottom: 100%;
     }
 }
+
+@media screen and (max-width: 1024px) {
+    .header {
+        font-size: 48px;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+  .header {
+    font-size: 32px;
+  }
+}
 </style>