styling: ensure background gradient always fills page

ygoex · Dec 21, 2021 · 2490d4b · 2490d4b
1 parent 1cc7228
commit 2490d4b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/src/assets/styles/scss/partials/01-Abstract/_settings.scss b/src/assets/styles/scss/partials/01-Abstract/_settings.scss
@@ -12,12 +12,14 @@
 /// 62rem * 16px = 992px; not in use yet
 /// 64rem * 16px = 1024px;
 /// 80rem * 16px = 1280px;
+/// 90rem * 16px = 1440px
 $breakpoints: (
-  "xs": 36em,
-  "sm": 48em,
-  "md": 60em,
-  "lg": 64em,
-  "xl": 80em,
+  "xs":  36em,
+  "sm":  48em,
+  "md":  60em,
+  "lg":  64em,
+  "xl":  80em,
+  "xxl": 90em,
 ) !default;
 
 // Palette generated with -->

diff --git a/src/assets/styles/scss/partials/02-Generic/_common.scss b/src/assets/styles/scss/partials/02-Generic/_common.scss
@@ -84,6 +84,9 @@
     background-image: url("/assets/images/mesh-gradient-black.webp");
     background-repeat: no-repeat;
     background-size: contain;
+    @include media-query(xxl) {
+      background-size: cover;
+    }
   }
 }
 
@@ -92,4 +95,7 @@
   background-image: url("/assets/images/mesh-gradient-black.jpg");
   background-repeat: no-repeat;
   background-size: contain;
+  @include media-query(xxl) {
+    background-size: cover;
+  }
 }
diff --git a/src/assets/styles/scss/partials/05-Templates/_home-tmpl.scss b/src/assets/styles/scss/partials/05-Templates/_home-tmpl.scss
@@ -14,11 +14,17 @@
   background-image: url("/assets/images/mesh-gradient-white.webp");
   background-repeat: no-repeat;
   background-size: contain;
+  @include media-query(xxl) {
+    background-size: cover;
+  }
 }
 
 /*! purgecss ignore */
 .no-webp .gradient-home {
   background-image: url("/assets/images/mesh-gradient-white.jpg");
   background-repeat: no-repeat;
   background-size: contain;
+  @include media-query(xxl) {
+    background-size: cover;
+  }
 }
diff --git a/src/assets/styles/scss/partials/08-MQ/_dark-theme.scss b/src/assets/styles/scss/partials/08-MQ/_dark-theme.scss
@@ -41,13 +41,19 @@
     background-image: url("/assets/images/mesh-gradient-black.webp");
     background-repeat: no-repeat;
     background-size: contain;
+    @include media-query(xxl) {
+      background-size: cover;
+    }
   }
 
   /*! purgecss ignore */
   .no-webp .gradient-home {
     background-image: url("/assets/images/mesh-gradient-black.jpg");
     background-repeat: no-repeat;
     background-size: contain;
+    @include media-query(xxl) {
+      background-size: cover;
+    }
   }
 
   .light-theme {
@@ -92,12 +98,18 @@
     background-image: url("/assets/images/mesh-gradient-white.webp");
     background-repeat: no-repeat;
     background-size: contain;
+    @include media-query(xxl) {
+      background-size: cover;
+    }
   }
 
   /*! purgecss ignore */
   .no-webp .gradient-home.light-theme {
     background-image: url("/assets/images/mesh-gradient-white.jpg");
     background-repeat: no-repeat;
     background-size: contain;
+    @include media-query(xxl) {
+      background-size: cover;
+    }
   }
 }