added changes related to adaptive version

Author: Nimgr

src/index.pug

@@ -228,7 +228,7 @@ html(lang="en")
             .footer__right-top
                 nav.nav
                   - var menu = ['Главная', 'Обо мне', 'Навыки', 'Работы', 'Отзывы', 'Связаться']
-                  ul.nav__list
+                  ul.nav__list-footer
                     each item in menu
                       li.nav__item-footer
                         a(href='').nav__link-footer #{item}

src/scripts/works.js

@@ -0,0 +1,13 @@
+import Vue from "vue";
+
+const skill = {
+    template: "#skill",
+    props: ["skill"],
+    methods: {
+        
+    }
+
+
+
+
+}

src/styles/blocks/about.pcss

@@ -5,15 +5,24 @@
 .about__container {
     display: flex;
     justify-content: space-between;
+    @include phones {
+      flex-direction: column;
+    }
 }
 
 .about__left {
     width: 50%;
     margin-right: 30px;
+    @include phones {
+      width: 100%;
+    }
 }
 
 .about__right {
   width: 50%;
+  @include phones {
+    width: 100%;
+  }
 }
 
 .about__prolog {

src/styles/blocks/footer.pcss

@@ -7,13 +7,22 @@
     justify-content: space-evenly;
     align-items: flex-start;
     padding: 100px 0;
+    @include phones {
+        flex-direction: column;
+    }
 }
 
 .footer__left {
     display: flex;
     width: 30%;
     justify-content: space-around;
     align-items: flex-start;
+    @include desktop {
+        flex-direction: column;
+    }
+    @include phones {
+        width: 100%;
+    }
 }
 
 .copyright {
@@ -48,11 +57,18 @@
     flex-direction: column;
     justify-content: space-between;
     align-items: flex-start;
+    @include phones {
+        width: 100%;
+    }
+
 }
 
 .footer__right-top {
     display: flex;
-    margin-bottom: 35px;;
+    margin-bottom: 35px;
+    @include tablets {
+        flex-wrap: nowrap;
+    }
 }
 
 .nav__item-footer {
@@ -72,6 +88,9 @@
 
 .footer__right-bottom {
     display: flex;
+    @include tablets {
+        flex-direction: column;
+    }
 }
 
 .socials__item-footer {

src/styles/blocks/form.pcss

@@ -10,6 +10,9 @@
     color: dark;
     font-size: 36px;
     margin-bottom: 100px;
+    @include tablets {
+        text-align: center;
+    }
 }
 
 .btn {
@@ -43,11 +46,17 @@
 .input__icon {
     width: 30px;
     height: 30px;
+    @include phones {
+        display: none;
+    }
 }
 
 .form__row {
     display: flex;
     margin-bottom: 10px;
+    @include phones {
+        flex-direction: column;
+    }
 }
 
 .form__row:last-child {
@@ -100,6 +109,9 @@
 .form__buttons-row {
     display: flex;
     align-items: center;
+    @include tablets {
+        justify-content: center;
+    }
 }
 
 .form__buttons {

src/styles/blocks/hero.pcss

@@ -23,9 +23,19 @@
     color: dark;
     font-size: 36px;
 }
+
+.hero__links {
+
+    @include tablets {
+        display: none;
+    }
+}
 
 .hero__menu {
     margin: 0 20px;
+    @include phones {
+        display: none;
+    }
 }
 
 .hero__header {
@@ -40,6 +50,16 @@
     text-align: center;
 }
 
+.user-info {
+
+    @include desktop {
+        display: flex;
+    }
+    @include tablets {
+        flex-direction: column;
+    }
+}
+
 .user-info__desc {
     @include sans(semibold);
     color: lightdark;
@@ -59,6 +79,9 @@
     justify-content: center;
     align-items: center;
     padding: 50px 0;
+    @include tablets {
+        display: none;
+    }
 }
 
 .scroll__down-btns {

src/styles/blocks/nav.pcss

@@ -2,6 +2,14 @@
     display: flex;
     align-items: center;
 }
+
+.nav__list-footer {
+    display: flex;
+    align-items: center;
+    @include tablets {
+        flex-wrap: wrap;
+    }
+}
 
 .nav__item {
     margin-right: 30px;

src/styles/blocks/skill.pcss

@@ -29,6 +29,9 @@
 
 .skills-row__list {
     display: flex;
+    @include phones {
+        flex-wrap: wrap;
+    }
 }
 
 .skill {

src/styles/blocks/values.pcss

@@ -6,6 +6,9 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    @include tablets {
+        flex-direction: column;
+    }
 }
 
 .values__title {
@@ -14,6 +17,18 @@
     flex-direction: column;
     justify-content: space-evenly;
     align-items: flex-start;
+    @include tablets {
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        width: 100%;
+    }
+    @include phones {
+        justify-content: space-evenly;
+        align-items: flex-start;
+        width: 100%;
+    }
+
 }
 
 .values__title-text {
@@ -32,4 +47,7 @@
 
 .values__image {
     width: 40%;
+    @include tablets {
+        width: 100%;
+    }
 }

src/styles/blocks/works.pcss

@@ -6,6 +6,12 @@
 .works__wrapper {
     display: flex;
     margin-left: 20px;
+    @include tablets {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
 }
 
 .section-title__works {
@@ -19,13 +25,19 @@
 
 .works__left {
     width: 70%;
+    @include tablets {
+        width: 100%;
+    }
 }
 
 .works__right {
     display: flex;
     flex-direction: column;
     width: 30%;
     margin-left: 150px;
+    @include tablets {
+        width: 100%;
+    }
 }
 
 .works__tags {