fix(error): update error styles

Pruned some styles; now using Bootstrap.
techfromsage · Oct 8, 2021 · 0fc30d4 · 0fc30d4
1 parent 4b321d5
commit 0fc30d4
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 30 deletions.
diff --git a/docs/assets/css/talis.css b/docs/assets/css/talis.css
diff --git a/docs/assets/css/talis.css.map b/docs/assets/css/talis.css.map
diff --git a/docs/error/index.html b/docs/error/index.html
@@ -20,7 +20,7 @@
           media="print"
           onload="this.media='all'" />
 
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/error.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
   </head>
   <body class="t-error">
 
@@ -31,7 +31,7 @@ <h2 class="c-error-page__subheader">
           Something has gone wrong, and our team has been notified
         </h2>
     <hr/>
-    <dl id="errorDesc" class="o-dl--inline">
+    <dl class="o-dl--inline list-unstyled d-inline-block">
       <dt>Error code:</dt>
       <dd>Error message</dd>
     </dl>

diff --git a/scss/error.scss → scss/_error.scss b/scss/error.scss → scss/_error.scss
@@ -8,32 +8,11 @@
 
   hr {
     max-width: 20rem;
-    height: 1px;
     margin: 2rem 0;
-    background-color: rgba(255, 255, 255, .2);
-    border: none;
-    box-sizing: content-box;
-  }
-
-  dl {
-    margin-top: 0;
-    margin-bottom: 20px;
-  }
-
-  dl {
-    line-height: 1.6;
-  }
-
-  dt{
-    font-weight: 700;
-  }
-
-  dd {
-    margin-left: 0;
   }
 
   a {
-    color: inherit;
+    color: $white;
   }
 
   a:hover,
@@ -45,7 +24,7 @@
   }
 }
 
-.o-dl--inline *:not(div) {
+.o-dl--inline > *:not(div) {
   display: inline;
 }
 
@@ -62,7 +41,7 @@
   font-family: inherit;
   font-size: 3.25rem;
   font-weight: 700;
-  color: #fff;
+  color: $white;
   line-height: 1.1;
   margin-top: 20px;
   margin-bottom: 10px;
@@ -71,6 +50,7 @@
 .c-error-page__subheader {
   margin-top: 20px;
   margin-bottom: 10px;
+  color: $white;
   font-size: 2.4375rem;
   font-family: inherit;
   font-weight: 300;

diff --git a/scss/talis.scss b/scss/talis.scss
@@ -78,6 +78,7 @@ $enable-shadows: false;
 @import "badges";
 @import "buttons";
 @import "dropdown";
+@import "error";
 @import "forms";
 @import "loader";
 @import "modal";

diff --git a/src/docs/_includes/layouts/error.njk b/src/docs/_includes/layouts/error.njk
@@ -23,7 +23,7 @@ title: Error Page
           media="print"
           onload="this.media='all'" />
 
-    <link rel="stylesheet" href="{{ '/assets/css/error.css' | url }}" />
+    <link rel="stylesheet" href="{{ '/assets/css/talis.css' | url }}" />
   </head>
   <body class="t-error">
     {{ content | safe }}

diff --git a/src/docs/error.njk b/src/docs/error.njk
@@ -10,7 +10,7 @@ title: Error
           Something has gone wrong, and our team has been notified
         </h2>
     <hr/>
-    <dl id="errorDesc" class="o-dl--inline">
+    <dl class="o-dl--inline list-unstyled d-inline-block">
       <dt>Error code:</dt>
       <dd>Error message</dd>
     </dl>