Fix navbar

src/App.vue

@@ -1,9 +1,9 @@
 <template>
     <div id="app" style="min-height: 100vh;">
         <div id="nav">
-            <span class="tiny-logo">
+            <router-link to="/" class="tiny-logo">
                 <img class="tiny-logo" src="@/assets/flag.png" v-bind:style='{ "transform": tinyOffset }'>
-            </span>
+            </router-link>
             <span id="links" v-on:click="handleScroll">
                 <router-link to="/" exact>Главная</router-link>
                 <router-link to="/goods">Ассортимент</router-link>
@@ -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/Contact.vue

@@ -18,6 +18,10 @@
             <h2>По любым вопросам</h2>
             Анатолий Тольчек<br />
             <a href="mailto:flv@atolchek.ru">flv@atolchek.ru</a>
+
+            <h3>Хотите получить кучу выдуманных контактов?</h3>
+            Прочитайте содержимое этой страницы, все телефоны и адреса ненастоящие.<br />
+            Лучше купите булок у <a href="http://www.fvolchek.ru" target="_blank">fvolchek.ru</a>.
         </div>
     </div>
 </template>
@@ -40,7 +44,7 @@ export default {
     padding-left: 100px;
 }
 
-h2 {
+h2, h3 {
     font-family: 'Playfair Display', serif;
     font-weight: 500;
 }
@@ -50,16 +54,6 @@ h2 {
     color: #3a3a3a;
 }
 
-img {
-    width: 40%;
-    height: auto;
-    margin: 30px;
-    border: rgb(253, 253, 253) solid;
-    border-radius: 100%;
-    border-width: 8px;
-    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
-}
-
 @media screen and (max-width: 1024px) {
     .main {
         padding-left: 10vw;

src/views/Goods.vue

@@ -164,7 +164,7 @@ export default {
     border: rgb(253, 253, 253) solid;
     border-radius: 100%;
     border-width: 0.35vw;
-    filter: drop-shadow(0.35vw 0.35vw 0.35vw rgba(0, 0, 0, 0.4));
+    box-shadow: 0.35vw 0.35vw 0.35vw rgba(0, 0, 0, 0.4);
 }
 
 h2 {

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 {
@@ -210,6 +212,8 @@ h4 {
     width: 600px;
     height: 600px;
     border: darkgray solid 1px;
+    border-radius: 12px;
+    overflow: hidden;
 }
 
 #napkin {
@@ -252,7 +256,7 @@ h4 {
     #napkin {
         position: relative;
         width: 100%;
-        padding: 0px;
+        padding: 0;
         background: none;
     }
 
@@ -262,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>

src/views/Order.vue

@@ -36,7 +36,7 @@ img {
     border: rgb(253, 253, 253) solid;
     border-radius: 100%;
     border-width: 8px;
-    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
+    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.4);
 }
 
 .text {