Merge pull request #12 from cryptexglobal/develop

Develop

src/styles/main.scss

@@ -42,11 +42,11 @@
 
 
 
-@import "responsive/mobile_375_667px";
-@import "responsive/mobile_410_870px";
-@import "responsive/mobile_390_844px";
-@import "responsive/mobile_414_896px";
+@import "responsive/mobile_390_rmax2";
+@import "responsive/mobile_391min";
+@import "responsive/mobile_390_rmin3";
+@import "responsive/mobile_414min_rmin2";
 @import "responsive/tablet_768_1024px";
 @import "responsive/tablet_834_1194px";
 @import "responsive/tablet_1024_1366px";
-@import "responsive/mobile_320px";
+@import "responsive/mobile_315px";

src/styles/responsive/_mobile_320px.scss → src/styles/responsive/_mobile_315px.scss

@@ -1,4 +1,4 @@
-@media only screen and (max-device-width: 320px) {
+@media only screen and (max-device-width: 315px) {
     body,
     html {
       overflow-x: hidden;

src/styles/responsive/_mobile_375_667px.scss → src/styles/responsive/_mobile_390_rmax2.scss

@@ -1,10 +1,9 @@
-@media only screen and (max-device-width: 385px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-max-device-pixel-ratio: 2) {
+@media only screen and (max-device-width: 390px) and (max-device-height: 890px) and (orientation: portrait) and (-webkit-max-device-pixel-ratio: 2) {
   body,
   html {
     overflow-x: hidden;
   }
   body {
-    // height: 100vh;
     width: 100vw;
   }
 
@@ -679,7 +678,6 @@
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0.3px;
-    // margin-top: 16px;
     margin-bottom: 12px;
   }
 
@@ -796,9 +794,6 @@
   .section-main {
     position: relative;
     height: 110vh;
-    // display: block;
-    // padding-bottom: 27.66%;
-    // background-color: khaki;
     .main-image {
       position: absolute;
       width: 470px;

src/styles/responsive/_mobile_390_844px.scss → src/styles/responsive/_mobile_390_rmin3.scss

@@ -1,4 +1,4 @@
-@media only screen and (max-device-width: 390px) and (max-device-height: 844px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3) {
+@media only screen and (max-device-width: 390px) and (max-device-height: 890px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3) {
   body,
   html {
     overflow-x: hidden;
@@ -795,9 +795,6 @@
   .section-main {
     position: relative;
     height: 140vh;
-    // display: block;
-    // padding-bottom: 27.66%;
-    // background-color: khaki;
     .main-image {
       position: absolute;
       width: 470px;
@@ -827,7 +824,6 @@
     z-index: 10;
     height: 210vh;
     position: relative;
-    // background-color: peachpuff;
   }
   .section-faq.expand1{
     margin-bottom: 160px;
@@ -845,7 +841,6 @@
   .section-community {
     height: 100vh;
     position: relative;
-    // background-color: darkorange;
   }
 
   @media only screen and (min-device-height: 710px) and (max-device-height: 760px)  {

src/styles/responsive/_mobile_410_870px.scss → src/styles/responsive/_mobile_391min.scss

@@ -1,4 +1,4 @@
-@media only screen and (min-device-width: 410px) and (max-device-height: 870px) and (orientation: portrait) {
+@media only screen and (min-device-width: 391px) and (max-device-height: 890px) and (orientation: portrait) {
   body,
   html {
     overflow-x: hidden;
@@ -863,6 +863,12 @@
       height: 100vh;
     }    
   }
+  @media only screen and (min-device-height: 750px)  {
+    .newsbox{
+      margin-top: 140px;
+    }
+
+  }
   @media only screen and (min-device-width: 440px)  {
     .features {
       &-row {

src/styles/responsive/_mobile_414_896px.scss → src/styles/responsive/_mobile_414min_rmin2.scss

@@ -4,7 +4,6 @@
     overflow-x: hidden;
   }
   body {
-    // height: 100vh;
     width: 100vw;
   }
 
@@ -23,21 +22,14 @@
 
   .nav-links a {
     z-index: 30;
-    // border: 1px solid red;
     height: 100vh;
     background: $color-black;
-    // padding-left: 48px !important;
-    // padding-right: 48px !important;
     padding-top: 60px;
     padding-bottom: 44px;
     text-align: center;
     font-size: 18px;
     line-height: 28px;
-    // display: flex;
-    // align-items: center;
-    // text-align: center;
     letter-spacing: 0.6px;
-    // margin-right: 0% !important;
     color: $color-grey !important;
 
     &::first-child {
@@ -63,7 +55,6 @@
     background: $color-grey-dark !important;
     background-color: $color-grey-dark !important;
     z-index: 10;
-    // border: 1px solid $color-grey-dark;
     border: 1px solid #494866;
     box-sizing: border-box;
     margin-left: 35px;
@@ -85,27 +76,21 @@
   .menu-logo {
     width: 30px;
     margin-left: -15px;
-    // padding-left: 20px;
 
     &-divider {
       position: absolute;
       width: 1px;
       height: 49px;
       left: 60px;
       top: 0px;
-      // left: 504px;
-      // top: 362px;
-
-      background-color: $color-grey-dark !important; //$color-grey-dark;
+      background-color: $color-grey-dark !important; 
       z-index: 0;
     }
   }
 
   .navbar-toggler,
   .navbar-toggler-icon {
-    // display: none !important;
     position: relative;
-    // left: -25px;
     left: -190px;
   }
 
@@ -117,7 +102,6 @@
   .navbar-toggler:focus {
     position: relative;
     padding: 10px 20px 10px 20px;
-    // left: -25;
   }
 
   .mobile_menu_bar:before {
@@ -128,12 +112,9 @@
     font-family: $font-primary;
     content: "MENU";
     position: relative;
-    // left: -175px;
     padding: 10px 20px 10px 20px;
-    // background-color: #3e4555;
     color: $color-dark-clean !important;
     text-decoration: none;
-    // cursor: pointer;
     &:focus {
       outline: none !important;
     }
@@ -151,12 +132,10 @@
       color: $color-dark-clean !important;
       text-decoration: none;
     }
-    // margin-left: 20px;
   }
 
   .main {
     &-title {
-      // position: absolute;
       width: 362px;
       height: 108px;
       left: calc(50% - 362px / 2 + 20px);
@@ -237,9 +216,7 @@
     position: absolute;
     width: 85%;
     height: 54px;
-    // left: calc(50% - 300px/2 - 2.7px);
     left: 28px;
-    // top: 436px;
     top: calc(50% - 54px / 2 + 50.55px);
     font-size: 14px;
     line-height: 16px;
@@ -491,9 +468,7 @@
   .team-row {
     position: absolute;
     width: 100%;
-    // left: calc(50% - 10.6875rem/2 - 33.6562Z5rem);
     top: calc(50% - 260px / 2 - 103.7px);
-    // background-color: #212138;
   }
 
   .team-box {
@@ -632,7 +607,6 @@
     &-row {
       position: absolute;
       width: 100%;
-      // left: calc(50% - 312px/2 - 7.5px);
       left: 40px;
       top: calc(50% - 200px / 2 - 16px);
     }
@@ -852,7 +826,33 @@
     height: 95vh;
     position: relative;
   }
-  @media only screen and (max-device-height: 800px)  {
+  @media only screen and (max-device-height: 720px)  {
+    .section-main {
+      margin-top: 90px;
+    } 
+    .section-about {
+      margin-top: 170px; 
+    }
+    .section-features {
+      margin-top: 200px; 
+    }
+    .section-team {
+      height: 330vh;
+    }
+    .section-faq{
+      height: 140vh;
+    }
+    .newsbox {
+      margin-top: 200px;
+      .newsgroup {
+        top: calc(50% - 280px / 2 + 2056px);
+      }
+    }
+    .section-community {
+      height: 140vh;
+    }
+  }
+  @media only screen and (min-device-height: 721px) and (max-device-height: 800px)  {
     .section-main {
       margin-top: 90px;
     } 
@@ -874,19 +874,20 @@
       height: 140vh;
     }
   }
-  @media only screen and (min-device-height: 801px) and (max-device-height: 860px)  {
+  @media only screen and (min-device-height: 801px) and (max-device-height: 890px)  {
     .section-features {
       margin-top: 50px; 
     }
     .section-team {
       height: 240vh;
     }
     .newsbox {
+      margin-top: 30px;
       .newsgroup {
-        top: calc(50% - 150px / 2 + 2056px);
+        top: calc(50% - 210px / 2 + 2056px);
       }
       &-title {
-        top: calc(50% - 106px / 2 + 1960px);
+        top: calc(50% - 250px / 2 + 1960px);
       }
     }
     .section-community {