From 6c890d03d666804223eb92b664ecb0d51604ec79 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <kamilniemczycki@gmail.com>
Date: Thu, 6 Jan 2022 01:04:14 +0100
Subject: [PATCH] RWD fix for the home page

---
 src/components/sections/About.vue            | 12 +++++++-----
 src/components/sections/Experiences.vue      |  8 +++++---
 src/components/sections/FavoriteProjects.vue |  6 +++---
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/sections/About.vue b/src/components/sections/About.vue
index bcf88d7..7966789 100644
--- a/src/components/sections/About.vue
+++ b/src/components/sections/About.vue
@@ -28,6 +28,8 @@
 </template>
 
 <style lang="scss">
+@import "scss/media";
+
 .about {
   background-color: var(--gray-color) !important;
 
@@ -66,7 +68,7 @@
              margin-right: 0;
            }
 
-           @media screen and (max-width: 600px) {
+           @include media-tablet {
              margin: 0 auto 15px;
 
              &:last-child {
@@ -75,18 +77,18 @@
            }
          }
 
-         @media screen and (max-width: 900px) {
+         @include media-small {
            justify-content: center;
            margin-bottom: 25px;
          }
 
-         @media screen and (max-width: 600px) {
+         @include media-tablet {
            display: block;
            margin-bottom: 25px;
          }
        }
 
-       @media screen and (max-width: 400px) {
+       @include media-mobile() {
          .buttons .btn,
          .buttons a {
            min-width: unset;
@@ -110,7 +112,7 @@
        }
      }
   }
-  @media (max-width: 900px) {
+  @include media-small {
     #grid {
       grid-template-columns: 1fr 1fr;
       grid-template-areas:
diff --git a/src/components/sections/Experiences.vue b/src/components/sections/Experiences.vue
index 81e249f..26e334b 100644
--- a/src/components/sections/Experiences.vue
+++ b/src/components/sections/Experiences.vue
@@ -159,6 +159,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "scss/media";
+
 .experiences {
   .container {
     padding-top: 45px;
@@ -212,13 +214,13 @@ export default {
         }
       }
 
-      @media screen and (max-width: 1100px) {
+      @include media-small {
         grid-template-columns: repeat(3, 1fr);
       }
-      @media screen and (max-width: 800px) {
+      @include media-tablet {
         grid-template-columns: repeat(2, 1fr);
       }
-      @media screen and (max-width: 550px) {
+      @include media-mobile {
         grid-template-columns: repeat(1, 1fr);
       }
     }
diff --git a/src/components/sections/FavoriteProjects.vue b/src/components/sections/FavoriteProjects.vue
index dde4fca..d9d4256 100644
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -8,7 +8,7 @@
     </projects>
     <div class="more-button">
       <GhostButton @click.native="$router.push('projects')">
-        RESZTA PROJEKTÓW
+        ZOBACZ WIĘCEJ
       </GhostButton>
     </div>
   </section>
@@ -57,12 +57,12 @@ export default {
     .btn {
       margin: 0 auto;
 
-      @media screen and (max-width: 600px) {
+      @include media-tablet {
         width: 100%;
       }
     }
 
-    @media screen and (max-width: 600px) {
+    @include media-tablet {
       padding: 0 25px;
     }
   }