style: wide screen

brocoders · Apr 2, 2024 · a4b79ba · a4b79ba
1 parent a15b93b
commit a4b79ba
Show file tree

Hide file tree

Showing 17 changed files with 129 additions and 35 deletions.
diff --git a/css/main.css b/css/main.css
@@ -44,6 +44,12 @@
     padding-right: 355px;
   }
 }
+@media screen and (min-width: 2600px) {
+  #articles, #team, .demo-header, .form-section, .feature-list, .container {
+    padding-left: 600px;
+    padding-right: 600px;
+  }
+}
 
 html {
   box-sizing: border-box;
@@ -175,6 +181,7 @@ img {
   align-items: center;
   border-color: #d91965;
   background-color: #d91965;
+  overflow-x: visible;
   transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
   font-family: "DIN Pro", "DIN Pro fallback", sans-serif;
   font-size: 16px;
@@ -211,6 +218,7 @@ img {
   align-items: center;
   border-color: #000;
   background-color: #000;
+  overflow-x: visible;
   transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
   font-family: "DIN Pro", "DIN Pro fallback", sans-serif;
   font-size: 16px;
@@ -245,6 +253,7 @@ img {
   align-items: center;
   border-color: #d91965;
   background-color: #fff;
+  overflow-x: visible;
   transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
   font-family: "DIN Pro", "DIN Pro fallback", sans-serif;
   font-size: 16px;
@@ -264,18 +273,6 @@ img {
   color: #fff;
 }
 
-.qualities--visually-hidden,
-.works--visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  border: 0;
-  padding: 0;
-  clip: rect(0 0 0 0);
-  overflow: hidden;
-}
-
 .menu {
   background-color: #ffffff;
   z-index: 1;
@@ -408,13 +405,13 @@ img {
 .hero {
   background-color: #10133c;
 }
-.hero .container {
+.hero .hero-container {
   padding-top: 55px;
   padding-bottom: 55px;
   overflow-x: visible;
 }
 @media screen and (min-width: 768px) {
-  .hero .container {
+  .hero .hero-container {
     padding-top: 63px;
     padding-bottom: 63px;
   }
@@ -426,7 +423,7 @@ img {
     background-size: cover;
     background-position: top right 50%;
   }
-  .hero .container {
+  .hero .hero-container {
     width: 60%;
   }
   .hero .hero-btn {
@@ -450,11 +447,32 @@ img {
   }
 }
 @media screen and (min-width: 1900px) {
-  .hero .container {
+  .hero .hero-container {
     width: 50%;
   }
 }
 
+.hero-container {
+  padding-left: 18px;
+  padding-right: 18px;
+}
+@media screen and (min-width: 1200px) {
+  .hero-container {
+    padding-right: 170px;
+    padding-left: 170px;
+  }
+}
+@media screen and (min-width: 1900px) {
+  .hero-container {
+    padding-left: 355px;
+  }
+}
+@media screen and (min-width: 2600px) {
+  .hero-container {
+    padding-left: 600px;
+  }
+}
+
 .hero-title {
   font-family: "DIN Pro", "DIN Pro fallback", sans-serif;
   font-size: 48px;
@@ -614,6 +632,11 @@ img {
     padding-left: 355px;
   }
 }
+@media screen and (min-width: 2600px) {
+  .frontend {
+    padding-left: 600px;
+  }
+}
 
 .backend {
   background-color: #fafafa;
@@ -629,6 +652,11 @@ img {
     padding-right: 355px;
   }
 }
+@media screen and (min-width: 2600px) {
+  .backend {
+    padding-right: 600px;
+  }
+}
 
 .comparison-title {
   font-family: "DIN Pro", "DIN Pro fallback", sans-serif;
@@ -785,6 +813,7 @@ img {
   .form-title {
     flex-basis: 50%;
     margin-bottom: 0;
+    overflow-x: visible;
   }
 }
 
@@ -816,6 +845,11 @@ img {
     right: 355px;
   }
 }
+@media screen and (min-width: 2600px) {
+  .demo-header .hero-btn {
+    right: 600px;
+  }
+}
 
 .demo-basic {
   font-family: "Manrope", sans-serif;
@@ -893,6 +927,14 @@ img {
     padding-right: 355px;
   }
 }
+@media screen and (min-width: 2600px) {
+  .demo-item:nth-child(odd) {
+    padding-left: 600px;
+  }
+  .demo-item:nth-child(even) {
+    padding-right: 600px;
+  }
+}
 
 .demo-text {
   font-family: "Manrope", sans-serif;
@@ -1293,6 +1335,7 @@ img {
     font-size: 72px;
     line-height: 1;
     letter-spacing: -3.6px;
+    overflow-x: visible;
   }
 }
 
@@ -1390,6 +1433,11 @@ img {
     right: 355px;
   }
 }
+@media screen and (min-width: 2600px) {
+  #articles .btn-black {
+    right: 600px;
+  }
+}
 
 .articles-title {
   font-family: "DIN Pro", "DIN Pro fallback", sans-serif;
@@ -1478,6 +1526,12 @@ footer {
     padding-right: 355px;
   }
 }
+@media screen and (min-width: 2600px) {
+  footer {
+    padding-left: 600px;
+    padding-right: 600px;
+  }
+}
 
 .footer-list {
   display: flex;

diff --git a/css/main.css.map b/css/main.css.map
diff --git a/css/main.min.css b/css/main.min.css
diff --git a/css/main.min.css.map b/css/main.min.css.map
diff --git a/index.html b/index.html
@@ -138,7 +138,7 @@
     </header>
     <main>
       <section class="hero">
-        <div class="container">
+        <div class="hero-container">
           <h1 class="hero-title">
             Start you project fast and polished with BC&nbsp;Boilerplates
           </h1>

diff --git a/sass/layouts/_articles.scss b/sass/layouts/_articles.scss
@@ -17,6 +17,11 @@
       right: $wideSidePadding;
     }
   }
+  @media screen and (min-width: $xl) {
+    .btn-black {
+      right: $xlSidePadding;
+    }
+  }
 }
 .articles-title {
   @include titleFont($fs: 36px, $lh: 1.35, $ls: -2px);

diff --git a/sass/layouts/_contacts.scss b/sass/layouts/_contacts.scss
@@ -18,6 +18,7 @@
     font-size: 72px;
     line-height: 1;
     letter-spacing: -3.6px;
+    overflow-x: visible;
   }
 }
 .contacts-text {

diff --git a/sass/layouts/_demos.scss b/sass/layouts/_demos.scss
@@ -18,6 +18,11 @@
       right: $wideSidePadding;
     }
   }
+  @media screen and (min-width: $xl) {
+    .hero-btn {
+      right: $xlSidePadding;
+    }
+  }
 }
 .demo-basic {
   @include font($fs: 22px, $lh: 1.46, $ls: -0.4px);
@@ -75,6 +80,14 @@
       padding-right: $wideSidePadding;
     }
   }
+  @media screen and (min-width: $xl) {
+    &:nth-child(odd) {
+      padding-left: $xlSidePadding;
+    }
+    &:nth-child(even) {
+      padding-right: $xlSidePadding;
+    }
+  }
 }
 .demo-text {
   @include textFont;

diff --git a/sass/layouts/_features.scss b/sass/layouts/_features.scss
@@ -82,6 +82,9 @@
   @media screen and (min-width: $wide) {
     padding-left: $wideSidePadding;
   }
+  @media screen and (min-width: $xl) {
+    padding-left: $xlSidePadding;
+  }
 }
 .backend {
   background-color: $bgdColor;
@@ -92,6 +95,9 @@
   @media screen and (min-width: $wide) {
     padding-right: $wideSidePadding;
   }
+  @media screen and (min-width: $xl) {
+    padding-right: $xlSidePadding;
+  }
 }
 .comparison-title {
   @include titleFont($fs: 36px, $lh: 1.33, $ls: -2px);

diff --git a/sass/layouts/_footer.scss b/sass/layouts/_footer.scss
@@ -13,6 +13,10 @@ footer {
     padding-left: $wideSidePadding;
     padding-right: $wideSidePadding;
   }
+  @media screen and (min-width: $xl) {
+    padding-left: $xlSidePadding;
+    padding-right: $xlSidePadding;
+  }
 }
 .footer-list {
   @include flex($ali: flex-start);

diff --git a/sass/layouts/_form.scss b/sass/layouts/_form.scss
@@ -93,6 +93,7 @@
   @media screen and (min-width: $desktop) {
     flex-basis: 50%;
     margin-bottom: 0;
+    overflow-x: visible;
   }
 }
 .form-container {

diff --git a/sass/layouts/_hero.scss b/sass/layouts/_hero.scss
@@ -1,7 +1,7 @@
 .hero {
   background-color: $blackBackground;
 
-  .container {
+  .hero-container {
     padding-top: 55px;
     padding-bottom: 55px;
     overflow-x: visible;
@@ -17,7 +17,7 @@
     background-size: cover;
     background-position: top right 50%;
 
-    .container {
+    .hero-container {
       width: 60%;
     }
     .hero-btn {
@@ -53,11 +53,26 @@
     );
   }
   @media screen and (min-width: $wide) {
-    .container {
+    .hero-container {
       width: 50%;
     }
   }
 }
+.hero-container {
+  padding-left: $mobilePadding;
+  padding-right: $mobilePadding;
+
+  @media screen and (min-width: $desktop) {
+    padding-right: $sidePadding;
+    padding-left: $sidePadding;
+  }
+  @media screen and (min-width: $wide) {
+    padding-left: $wideSidePadding;
+  }
+  @media screen and (min-width: $xl) {
+    padding-left: $xlSidePadding;
+  }
+}
 .hero-title {
   @include titleFont($cl: #fff);
   margin-bottom: 24px;

diff --git a/sass/main.scss b/sass/main.scss
@@ -4,7 +4,6 @@
 @import "./utils/placeholders";
 @import "./base/common";
 @import "./base/buttons";
-@import "./utils/vs";
 
 @import "./layouts/header";
 @import "./layouts/hero";

diff --git a/sass/utils/_mixins.scss b/sass/utils/_mixins.scss
@@ -64,6 +64,7 @@
   align-items: center;
   border-color: $bc;
   background-color: $bgc;
+  overflow-x: visible;
 
   transition: color 250ms $timingFunction,
     background-color 250ms $timingFunction, border-color 250ms $timingFunction;

diff --git a/sass/utils/_placeholders.scss b/sass/utils/_placeholders.scss
@@ -10,4 +10,8 @@
     padding-left: $wideSidePadding;
     padding-right: $wideSidePadding;
   }
+  @media screen and (min-width: $xl) {
+    padding-left: $xlSidePadding;
+    padding-right: $xlSidePadding;
+  }
 }
diff --git a/sass/utils/_vars.scss b/sass/utils/_vars.scss
@@ -6,10 +6,12 @@ $bgdColor: #fafafa;
 $mobilePadding: 18px;
 $sidePadding: 170px;
 $wideSidePadding: 355px;
+$xlSidePadding: 600px;
 $charcoalTextColor: #d4d5d7;
 $mobile: 480px;
 $tablet: 768px;
 $desktop: 1200px;
 $wide: 1900px;
+$xl: 2600px;
 $blackBackground: #10133c;
 $timingFunction: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/sass/utils/_vs.scss b/sass/utils/_vs.scss