Merge pull request #247 from stefanotorresi/add-xl-viewport

Add XL viewport
php-fig · Oct 30, 2018 · 46bfbe5 · 46bfbe5
2 parents 9944069 + 59ab910
commit 46bfbe5
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 9 deletions.
diff --git a/source/_sass/base/center.scss b/source/_sass/base/center.scss
@@ -8,7 +8,7 @@
     margin-right: auto;
     padding: 0 15px;
 
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: $smallVP) {
 
         padding: 0;
         width: 738px;
@@ -18,7 +18,7 @@
         */
     }
 
-    @media only screen and (min-width: 1000px) {
+    @media only screen and (min-width: $mediumVP) {
 
         width: 960px;
         /*
@@ -27,12 +27,21 @@
         */
     }
 
-    @media only screen and (min-width: 1140px) {
+    @media only screen and (min-width: $largeVP) {
 
         width: 1100px;
         /*
             Min padding: 40px
             Max padding: ~
         */
     }
-}
+
+    @media only screen and (min-width: $xlargeVP) {
+
+        width: 1600px;
+        /*
+            Min padding: 40px
+            Max padding: ~
+        */
+    }
+}
diff --git a/source/_sass/base/variables.scss b/source/_sass/base/variables.scss
@@ -1,3 +1,10 @@
 $titleFont: 'Oswald', sans-serif;
 $baseFont: 'Roboto', sans-serif;
 $codeFont: 'Source Code Pro', monospace;
+
+$bannerBgColor: #256d4e;
+
+$smallVP: 768px;
+$mediumVP: 1000px;
+$largeVP: 1140px;
+$xlargeVP: 1640px;
diff --git a/source/_sass/blocks/home_banner.scss b/source/_sass/blocks/home_banner.scss
@@ -1,9 +1,32 @@
 .home_banner {
-
-    background: #256d4e url(/img/home_banner_bg.jpg) center top no-repeat;
+    position: relative;
+
+    &__background {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background: $bannerBgColor url(/img/home_banner_bg.jpg) center top no-repeat;
+        &:before {
+            content: "";
+            top: 0;
+            left: 0;
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            background: linear-gradient(to right, $bannerBgColor 10%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, $bannerBgColor 90%);
+            @media only screen and (max-width: $xlargeVP) {
+                display: none;
+            }
+        }
+    }
 
     &__content {
         overflow: hidden;
+        z-index: 1;
+        position: relative;
     }
 
     &__title {
@@ -72,7 +95,7 @@
         }
     }
 
-    @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: $smallVP) {
         height: 545px;
         background-position: calc(50% + 450px) 50%;
 
@@ -81,17 +104,23 @@
         }
     }
 
-    @media only screen and (min-width: 1000px) {
+    @media only screen and (min-width: $mediumVP) {
         background-position: calc(50% - 60px) 50%;
 
         &__content {
             padding: 0 0 0 400px;
         }
     }
 
-    @media only screen and (min-width: 1140px) {
+    @media only screen and (min-width: $largeVP) {
         &__content {
             padding: 0 0 0 550px;
         }
     }
+
+    @media only screen and (min-width: $xlargeVP) {
+        &__content {
+            padding: 0 0 0 800px;
+        }
+    }
 }
diff --git a/source/index.twig b/source/index.twig
@@ -4,6 +4,7 @@ title: PHP-FIG — PHP Framework Interop Group
 ---
 
 {% block content %}
+
 <div class="home_banner">
     <div class="center">
         <div class="home_banner__content">
@@ -15,6 +16,7 @@ title: PHP-FIG — PHP Framework Interop Group
             </div>
         </div>
     </div>
+    <div class="home_banner__background"></div>
 </div>
 
 <div class="home_features">