Merge pull request #68 from sumocoders/174-error-page-styling

Add error page styling
sumocoders · Nov 10, 2021 · 013497d · 013497d
2 parents f6809b6 + 33380bd
commit 013497d
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 8 deletions.
diff --git a/src/fonts/lato-lightItalic-webfont.ttf → src/fonts/lato-lightitalic-webfont.ttf b/src/fonts/lato-lightItalic-webfont.ttf → src/fonts/lato-lightitalic-webfont.ttf
diff --git a/src/images/404.png b/src/images/404.png
diff --git a/src/sass/base/_error.scss b/src/sass/base/_error.scss
@@ -0,0 +1,52 @@
+.error-page {
+  color: #444;
+  background-color: #b2cadd;
+
+  #content {
+    text-align: center;
+
+    &::before {
+      content: '';
+      background-color: #ebf3f9;
+      width: 100vw;
+      height: 350px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: -1;
+
+      @include media-breakpoint-up(sm) {
+        height: 385px;
+      }
+
+      @include media-breakpoint-up(md) {
+        height: 420px;
+      }
+
+      @include media-breakpoint-up(xl) {
+        height: 450px;
+      }
+    }
+  }
+
+  #content .header {
+    padding-top: 70px;
+    padding-bottom: 20px;
+    min-height: 300px;
+  }
+
+  #content p {
+    margin: 2rem 0;
+  }
+
+  #content #illustration {
+    display: block;
+    width: 584px;
+    max-width: 100%;
+    height: 410px;
+    background: url("../../images/404.png") no-repeat top center;
+    background-size: contain;
+    margin: 20px auto auto auto;
+    padding-bottom: 30px;
+  }
+}
diff --git a/src/sass/base/_fonts.scss b/src/sass/base/_fonts.scss
@@ -2,22 +2,19 @@
 
   @font-face {
     font-family: "#{$font-name}";
-    src: url("../Fonts/#{$font-file}.eot"); /* IE9 Compat Modes */
-    src: url("../Fonts/#{$font-file}.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
-    url("../Fonts/#{$font-file}.woff") format('woff'), /* Modern Browsers */
-    url("../Fonts/#{$font-file}.ttf")  format('truetype'), /* Safari, Android, iOS */
-    url("../Fonts/#{$font-file}.svg") format('svg'); /* Legacy iOS */
+    src: url("../../fonts/#{$font-file}.woff") format('woff'), /* Modern Browsers */
+    url("../../fonts/#{$font-file}.ttf")  format('truetype'); /* Safari, Android, iOS */
 
     font-style:   $style;
     font-weight:  $weight;
   }
 }
 
-@include font-import(Lato, lato-light-webfont, normal, 300);
-@include font-import(Lato, lato-lightitalic-webfont, italic, 300);
 @include font-import(Lato, lato-regular-webfont, normal, 400);
-@include font-import(Lato, lato-regularitalic-webfont, italic, 400);
+@include font-import(Lato, lato-italic-webfont, italic, 400);
 @include font-import(Lato, lato-bold-webfont, normal, 700);
 @include font-import(Lato, lato-bolditalic-webfont, italic, 700);
+@include font-import(Lato, lato-light-webfont, normal, 300);
+@include font-import(Lato, lato-lightitalic-webfont, italic, 300);
 @include font-import(Lato, lato-black-webfont, normal, 900);
 @include font-import(Lato, lato-blackitalic-webfont, italic, 900);
diff --git a/src/sass/error.scss b/src/sass/error.scss
@@ -0,0 +1,7 @@
+// Bootstrap variables
+@import "~bootstrap/scss/functions";
+@import '~bootstrap/scss/variables';
+@import 'bootstrap-variables';
+@import 'bootstrap-imports';
+
+@import "base/error";