fix error page formatting

thegeeklab · Jul 8, 2020 · d6191be · d6191be
1 parent 2bfbea6
commit d6191be
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 1 deletion.
diff --git a/layouts/404.html b/layouts/404.html
@@ -9,7 +9,7 @@
     {{ partial "svg-icon-symbols" . }}
 
     <div class="wrapper">
-        {{ partial "site-header" (dict "Root" . "MenuEnabled" false) }}
+        {{ partial "site-header" . }}
 
         <main class="gblog-error flex-even">
             <div class="flex align-center justify-center">

diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -305,6 +305,39 @@ img {
   padding: $padding-16 0;
 }
 
+.gblog-error {
+  padding: $padding-16 * 6 $padding-16;
+  margin: 0 auto;
+  max-width: 45em;
+
+  .icon {
+    width: $font-size-16 * 6;
+    height: $font-size-16 * 6;
+    color: $gray-700;
+  }
+
+  &__link,
+  &__link:visited {
+    color: $color-link;
+  }
+
+  &__message {
+    padding-left: $padding-16 * 4;
+  }
+
+  &__line {
+    padding: $padding-8 0;
+  }
+
+  &__title {
+    font-size: $font-size-16 * 4;
+  }
+
+  &__code {
+    font-weight: bolder;
+  }
+}
+
 .gblog-toc {
   // Classes to hide nested levels of ToC/Menu
   &__level--1 ul ul,
@@ -363,6 +396,27 @@ img {
       }
     }
   }
+
+  .gblog-error {
+    padding: $padding-16 * 6 $padding-16;
+
+    .icon {
+      width: $font-size-16 * 4;
+      height: $font-size-16 * 4;
+    }
+
+    &__message {
+      padding-left: $padding-16 * 2;
+    }
+
+    &__line {
+      padding: $padding-4 0;
+    }
+
+    &__title {
+      font-size: $font-size-16 * 2;
+    }
+  }
 }
 
 #menu-control:checked ~ .gblog-nav__list {