feat: respnsiveness tablet 768px

src/js/components/TopLinks/TopLinks.module.scss

@@ -46,20 +46,16 @@
     a:hover {
       color: $primary_pink;
     }
-
-    a:visited {
-      color: $primary_black;
-    }
   }
 
 }
 
 @media (max-width: 768px) {
   .TopLinks {
-    justify-content: center;
 
     .Logo {
-      font-size: 5vw;
+      font-size: 2vw;
+      float: left;
     }
 
     .Links {

src/js/pages/MainPage,module.scss

@@ -16,7 +16,7 @@ html {
 
 @media (max-width: 768px) {
     .top-bar {
-        position: relative;
+        position: fixed;
     }
 }
 
@@ -47,7 +47,7 @@ html {
 @media (max-width: 768px) {
     .footer{
         a {
-            font-size: 2vw;
+            font-size: 0.8rem;
         }
     }
 }

src/js/sections/BottomSection/BottomSection.module.scss

@@ -229,11 +229,11 @@
     background-position: bottom, 105% 48%, -5% 60%;
 
     .MiddleBlock {
-      max-width: 80vw;
+      max-width: 80%;
 
       .Title {
-        font-size: 3vw;
-        line-height: 3.4vw;
+        font-size: 1.4rem;
+        line-height: 1.8rem;
       }
 
       .Caption {
@@ -242,14 +242,15 @@
 
         .Comments {
 
+          font-size: 0.8rem;
+          line-height: 1.3rem;
+
           .FirstComment {
-            font-size: 2.4vw;
-            line-height: 2.8vw;
+
           }
 
           .SecondComment {
-            font-size: 1.6vw;
-            line-height: 2vw;
+
           }
 
         }
@@ -258,12 +259,8 @@
           max-width: 60%;
           align-self: center;
 
-          Button {
-            font-family: $primary_font;
-            font-size: 2vw;
-            width: 100%;
-            height: 50%;
-
+          a {
+            width: fit-content;
           }
 
         }
@@ -277,11 +274,11 @@
       display: flex;
       flex-direction: row;
       justify-content: center;
-      bottom: 5%;
+      bottom: 2%;
 
       .Logos {
         margin-right: 5%;
-        max-width: 40%;
+        max-width: 30%;
         flex-direction: column;
 
 
@@ -292,9 +289,9 @@
 
         p {
           max-width: 100%;
+          font-size: 0.8rem;
+          line-height: 1.3rem;
 
-          font-size: 1.8vw;
-          line-height: 2.2vw;
         }
       }
 
@@ -302,21 +299,18 @@
         max-width: 40%;
 
         .BigCaption {
-          font-size: 2.2vw;
-          line-height: 2.6vw;
+          font-size: $mobile_section_subtitle_size;
+          line-height: $mobile_section_subtitle_line_height;
           margin-bottom: 10%;
         }
 
-        Button {
-          font-size: 1.8vw;
-          width: 100%;
-          height: 30%;
-
+        a {
+          width: fit-content;
         }
 
         .SmallCaption {
-          font-size: 2vw;
-          line-height: 2.4vw;
+          font-size: 0.8rem;
+          line-height: 1.3rem;
         }
       }
     }

src/js/sections/CloudSection/CloudSection.module.scss

@@ -84,64 +84,32 @@
   .CloudSection {
 
     min-height: 70vh;
+    padding-top: 4%;
+    padding-bottom: 2%;
     .UpperBlock {
-      font-size: 4vw;
-      max-width: 40%;
       text-align: center;
 
     }
 
     .Cloud {
-      margin-top: 10%;
-      max-width: 60vw;
-      max-height: 70vh;
+      margin-top: 2%;
+      max-width: 30%;
+      max-height: 25%;
     }
 
     .BottomBlock {
-      font-size: 4vw;
-      line-height: 4.4vw;
+      margin-top: 0;
       max-width: 40%;
 
       .Caption {
-        font-size: 2.5vw;
-        line-height: 2.9vw;
-        max-width: 70%;
-
-      }
+        max-width: 80%;
+        margin: 15px auto;
       }
+    ;
     }
   }
-
-@media (max-width: 992px) {
-  .CloudSection {
-
-    .UpperBlock {
-      font-size: 4vw;
-      line-height: 4.4vw;
-      max-width: 50%;
-      text-align: center;
-
 }
 
-    .Cloud {
-      margin-top: 10%;
-  margin-bottom: 10%;
-      max-width: 60vw;
-      max-height: 70vh;
-    }
-
-    .BottomBlock {
-      font-size: 4vw;
-      line-height: 4.4vw;
-
-      .Caption {
-        font-size: 2.5vw;
-        line-height: 2.9vw;
-
-      }
-    }
-  }
-}
 
 @media (max-width: 575.98px) {
   .CloudSection {

src/js/sections/FeatureSection/FeatureSection.module.scss

@@ -102,29 +102,19 @@
 
 
 
-//ipad
 @media (max-width: 768px) {
   .FeatureSection {
-
-
-    .LeftSide {
-      .Feature {
-        font-size: 3vw;
-        line-height: 3.4vw;
-      }
-    }
+    min-height: 50vh;
 
     .RightSide {
-
         .Bubble {
           width: 90%;
-
-          font-size: 2vw;
         }
 
       .Author {
-        font-size: 2vw;
-        line-height: 2.5vw;
+        padding: 0 0 1% 15%;
+        margin-top: -15px;
+
       }
     }
   }

src/js/sections/LandingSection/LandingSection.module.scss

@@ -12,7 +12,6 @@
   flex-direction: row;
   align-items: center;
   justify-content: left;
-  flex-wrap: wrap;
 
   .LeftSide {
     flex-basis: 50%;
@@ -84,6 +83,21 @@
   }
 }
 
+@media (max-width: 768px) {
+
+  .LandingSection {
+
+    flex-direction: column;
+
+    padding-top: 15%;
+
+    .RightSide {
+      margin-left: 0;
+    }
+  }
+}
+
+
 @media (max-width: 575.98px) {
   .LandingSection {
     flex-direction: column;

src/js/sections/StatsSection/StatsSection.module.scss

@@ -97,18 +97,22 @@
 
 }
 
-@media (max-width: 992px) {
-  .StatsSection {
-    min-height: 90vh;
-
-  }
-}
+//@media (max-width: 992px) {
+//  .StatsSection {
+//    min-height: 90vh;
+//
+//  }
+//}
 
 @media (max-width: 768px) {
   .StatsSection {
 
-    min-height: 80vh;
+    min-height: 70vh;
     flex-direction: column-reverse;
+    padding-bottom: 20%;
+    padding-top: 0;
+    position: relative;
+
 
     .LeftSide {
       vertical-align: middle;
@@ -116,16 +120,17 @@
       max-width: 80%;
       margin-top: 5%;
 
-      .Title {
-        font-size: 4vw;
-        line-height: 4.4vw;
-      }
+
 
       .Caption {
-        font-size: 2vw;
-        line-height: 2.4vw;
-        color: white;
-        max-width: 80%;
+        position: absolute;
+        left: 35%;
+        right: 5%;
+        bottom: 10%;
+        max-width: 55%;
+        font-size: $mobile_section_subtitle_size;
+        line-height: $mobile_section_subtitle_line_height;
+
       }
 
     }

src/js/sections/TowerSection/TowerSection.module.scss

@@ -11,7 +11,6 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
 
   color: $primary_black;
   font-family: $primary_font;
@@ -106,32 +105,32 @@
 
 @media (max-width: 768px) {
   .TowerSection {
-    min-height: 50vh;
-    flex-direction: row;
-    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    min-height: 70vh;
+    background-position: 95% 0;
+    padding-top: 3%;
+    padding-bottom: 3%;
+
 
     .LeftSide {
-      flex-basis: 40%;
       .TowerImage {
-        max-width: 40vw;
-        max-height: 30vh;
+        width: 70vw;
+        height: 40vh;
       }
     }
 
     .RightSide {
-      flex-basis: 40%;
-      .Title {
-        font-size: 5vw;
-        line-height: 5.4vw;
-      }
-
+      padding-top: 5%;
+      max-width: 60%;
       .Caption {
-        font-size: 2.7vw;
-        line-height: 3.1vw;
-
+        padding-top: 4%;
+        max-width: 60%;
+        margin: 0 auto;
       }
     }
   }
+
 }
 
 @media (max-width: 375px) {

src/js/sections/VscodeSection/VscodeSection.module.scss

@@ -86,29 +86,25 @@
   .VscodeSection {
     flex-direction: column;
     text-align: center;
-    min-height: 60vh;
+    min-height: 70vh;
     background-position: 95% 0;
+    padding-top: 2%;
+    padding-bottom: 2%;
 
 
     .LeftSide {
       .VscodeImage {
-        margin-top: 2%;
         width: 70vw;
         height: 40vh;
       }
     }
 
     .RightSide {
-      padding-top: 5%;
-      .Title {
-        font-size: 5vw;
-        line-height: 5vw;
-      }
+      padding: 5% 0 0 0;
 
       .Caption {
-        font-size: 2.7vw;
-        line-height: 2.7vw;
-
+        max-width: 70%;
+        margin: 4% auto 0 auto;
       }
     }
   }

src/style/fonts.module.scss

@@ -28,5 +28,5 @@ $mobile_section_subtitle_size: 1rem;
 $mobile_section_subtitle_line_height: 1.4rem;
 
 
-$mobile_section_caption_size: 0.6rem;
-$mobile_section_caption_line_height: 1.1rem;
+$mobile_section_caption_size: 0.8rem;
+$mobile_section_caption_line_height: 1.2rem;
\ No newline at end of file