New aside style for red errors and warnings now yelow

<aside class=error> Error message goes here. </aside> Idea taken from: sdelements#10
center-key · Feb 4, 2019 · bee7f11 · bee7f11
1 parent f68a723
commit bee7f11
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 41 deletions.
diff --git a/source/includes/_errors.md b/source/includes/_errors.md
@@ -1,6 +1,8 @@
 # Errors
 
-<aside class="notice">This error section is stored in a separate file in `includes/_errors.md`. Slate allows you to optionally separate out your docs into many files...just save them to the `includes` folder and add them to the top of your `index.md`'s front matter. Files are included in the order listed.</aside>
+<aside class=error>
+This error section is stored in a separate file in `includes/_errors.md`. Slate allows you to optionally separate out your docs into many files...just save them to the `includes` folder and add them to the top of your `index.md`'s front matter. Files are included in the order listed.
+</aside>
 
 The Kittn API uses the following error codes:
 

diff --git a/source/includes/main.md b/source/includes/main.md
@@ -42,7 +42,7 @@ Kittn expects for the API key to be included in all API requests to the server i
 
 `Authorization: meowmeowmeow`
 
-<aside class="notice">
+<aside class=notice>
 You must replace <code>meowmeowmeow</code> with your personal API key.
 </aside>
 
@@ -110,7 +110,7 @@ Parameter | Default | Description
 include_cats | false | If set to true, the result will also include cats.
 available | true | If set to false, the result will include kittens that have already been adopted.
 
-<aside class="success">
+<aside class=success>
 Remember — a happy kitten is an authenticated kitten!
 </aside>
 
@@ -156,7 +156,9 @@ let max = api.kittens.get(2);
 
 This endpoint retrieves a specific kitten.
 
-<aside class="warning">Inside HTML code blocks like this one, you can't use Markdown, so use <code>&lt;code&gt;</code> blocks to denote code.</aside>
+<aside class=warning>
+Inside HTML code blocks like this one, you can't use Markdown, so use <code>&lt;code&gt;</code> blocks to denote code.
+</aside>
 
 ### HTTP Request (with ID)
 

diff --git a/source/stylesheets/_normalize.scss b/source/stylesheets/_normalize.scss
@@ -143,7 +143,7 @@ h1 {
 
 mark {
     background: #ff0;
-    color: #000;
+    color: black;
 }
 
 /**

diff --git a/source/stylesheets/_variables.scss b/source/stylesheets/_variables.scss
@@ -29,15 +29,16 @@ $code-bg: #292929;
 $code-annotation-bg: #1c1c1c;
 $nav-subitem-bg: #262626;
 $nav-active-bg: #2467af;
-$lang-select-border: #000;
+$lang-select-border: black;
 $lang-select-bg: #222;
 $lang-select-active-bg: $examples-bg; // feel free to change this to blue or something
 $lang-select-pressed-bg: #111; // color of language tab bg when mouse is pressed
 $main-bg: #eaf2f6;
-$aside-notice-bg: #8fbcd4;
-$aside-warning-bg: #c97a7e;
-$aside-success-bg: #6ac174;
-$search-notice-bg: #c97a7e;
+$aside-notice-bg: lightblue;
+$aside-success-bg: mediumseagreen;
+$aside-warning-bg: khaki;
+$aside-error-bg: lightcoral;
+$search-notice-bg: lightcoral;
 
 // TEXT COLORS
 ////////////////////
@@ -82,9 +83,9 @@ $phone-width: $tablet-width - $nav-width; // min width before reverting to mobil
 
 // OTHER
 ////////////////////
-$nav-active-shadow: #000;
+$nav-active-shadow: black;
 $nav-footer-border-color: #666;
-$nav-embossed-border-top: #000;
+$nav-embossed-border-top: black;
 $nav-embossed-border-bottom: #939393;
 $main-embossed-text-shadow: 0px 1px 0px white;
 $search-box-border-color: #666;

diff --git a/source/stylesheets/print.css.scss b/source/stylesheets/print.css.scss
@@ -72,7 +72,7 @@ body {
       }
    a {
       text-decoration: none;
-      color: #000;
+      color: black;
       }
    h1 {
       @extend %header-font;
@@ -119,14 +119,17 @@ body {
       vertical-align: middle;
       padding-right: 0.5em;
       font-size: 14px;
-      }
-   aside.notice:before {
-      @extend %icon-info-sign;
-      }
-   aside.warning:before {
-      @extend %icon-exclamation-sign;
-      }
-   aside.success:before {
-      @extend %icon-ok-sign;
+      &.notice {
+         @extend %icon-info-sign;
+         }
+      &.success {
+         @extend %icon-ok-sign;
+         }
+      &.warning {
+         @extend %icon-exclamation-sign;
+         }
+      &.error {
+         @extend %icon-exclamation-sign;
+         }
       }
    }
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
@@ -50,8 +50,8 @@ html, body {
 
 @mixin embossed-bg {
    background:
-      linear-gradient(to bottom, rgba(#000, 0.2), rgba(#000, 0) 8px),
-      linear-gradient(to top, rgba(#000, 0.2), rgba(#000, 0) 8px),
+      linear-gradient(to bottom, rgba(black, 0.2), rgba(black, 0) 8px),
+      linear-gradient(to top, rgba(black, 0.2), rgba(black, 0) 8px),
       linear-gradient(to bottom, rgba($nav-embossed-border-top, 1), rgba($nav-embossed-border-top, 0) 1.5px),
       linear-gradient(to top, rgba($nav-embossed-border-bottom, 1), rgba($nav-embossed-border-bottom, 0) 1.5px),
       $nav-subitem-bg;
@@ -152,9 +152,7 @@ html, body {
       }
    li {
       color: $nav-text;
-      transition-property: background;
-      transition-timing-function: linear;
-      transition-duration: 230ms;
+      transition: background-color 230ms linear;
       }
    .tocify-focus {  //currently selected ToC entry
       box-shadow: 0px 1px 0px $nav-active-shadow;
@@ -213,7 +211,7 @@ html, body {
    top: 0;
    left: 0;
    z-index: 100;
-   color: #000;
+   color: black;
    text-decoration: none;
    font-weight: bold;
    opacity: 0.7;
@@ -417,28 +415,35 @@ html, body {
       margin-bottom: 1.5em;
       background: $aside-notice-bg;
       line-height: 1.6;
+      &.success {
+         background-color: $aside-success-bg;
+         text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
+         }
       &.warning {
          background-color: $aside-warning-bg;
          text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
          }
-      &.success {
-         background-color: $aside-success-bg;
-         text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
+      &.error {
+         background-color: $aside-error-bg;
+         text-shadow: 0 1px 0 lighten($aside-error-bg, 15%);
          }
       }
    aside:before {
       vertical-align: middle;
       padding-right: 0.5em;
       font-size: 14px;
-      }
-   aside.notice:before {
-      @extend %icon-info-sign;
-      }
-   aside.warning:before {
-      @extend %icon-exclamation-sign;
-      }
-   aside.success:before {
-      @extend %icon-ok-sign;
+      &.notice {
+         @extend %icon-info-sign;
+         }
+      &.success {
+         @extend %icon-ok-sign;
+         }
+      &.warning {
+         @extend %icon-exclamation-sign;
+         }
+      &.error {
+         @extend %icon-exclamation-sign;
+         }
       }
    .search-highlight {
       padding: 2px;
@@ -483,7 +488,7 @@ html, body {
          border-radius: 5px;
          padding: $code-annotation-padding;
          color: #ccc;
-         border-top: 1px solid #000;
+         border-top: 1px solid black;
          border-bottom: 1px solid #404040;
          }
       }