Restyled note html + added icon to notes

scripts/tags.js

@@ -24,12 +24,24 @@ hexo.extend.tag.register('note', function(args, content){
   //   </p>
   // </blockquote>
 
+  const iconLookup = {
+    info: "info",
+    warning: "exclamation",
+    success: "check",
+    danger: "times",
+  }
+
   var className = args.shift()
   var header = ''
   var result = ''
+  var icon = iconLookup[className]
+
 
   if (args.length){
-    header += '<strong class="note-title">' + args.join(' ') + '</strong>'
+    header += `<strong class="note-title foo">
+      ${icon ? `<i class="fa fa-${icon}"></i>` : ""}
+      ${args.join(' ')}
+    </strong>`
   }
 
   result += '<blockquote class="note ' + className + '">' + header

source/guides/guides/environment-variables.md

@@ -8,8 +8,11 @@ Environment variables should be used:
 - Whenever values are different across developer machines
 - Whenever values change frequently and are highly dynamic
 
+
 The most common use case is to access custom values you've written in your `hosts` file.
 
+
+
 For instance instead of hard coding this in your tests:
 
 ```javascript

themes/cypress/source/css/_partial/base.scss

@@ -6,7 +6,7 @@ html, body, a, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blo
   font-weight: inherit;
   font-style: inherit;
   font-family: inherit;
-  font-size: 100%;
+  font-size: inherit;
   vertical-align: baseline;
 }
 
@@ -14,9 +14,10 @@ html {
   box-sizing: border-box;
 }
 body {
-  line-height: 1;
+  line-height: $line-height;
   background: $color-background;
   font-size: $font-size;
+  font-weight: 300;
   font-family: $font-sans;
   color: $color-default;
   text-rendering: optimizeLegibility;

themes/cypress/source/css/_partial/page.scss

@@ -236,29 +236,61 @@
   video {
     max-width: 100%;
   }
+
+
+
   .note {
+    font-weight: 200;
+    border: 0;
+    padding: 1em;
+    border-left: 4px solid #999;
+
     &.warning {
       border-left-color: #f0ad4e;
       background-color: #fcf8f2;
+
+      .note-title {
+        color: #f0ad4e;
+      }
     }
     &.info {
       border-left-color: #5bc0de;
       background-color: #f4f8fa;
+
+      .note-title {
+        color: #5bc0de;
+      }
     }
     &.success {
       border-left-color: #50af51;
       background-color: #f3f8f3;
+
+      .note-title {
+        color: #50af51;
+      }
     }
     &.danger {
       border-left-color: #d9534f;
       background-color: #fdf7f7;
+
+      .note-title {
+        color: #d9534f;
+      }
+    }
+
+    p {
+      margin: 0;
+    }
+
+    ul {
+      margin: 0 20px 0 40px;
     }
   }
   .note-title {
-    margin: 1em 0;
+    margin: 0;
     display: block;
-    font-size: 1em;
-    font-weight: bold;
+    font-size: 0.9em;
+    font-weight: 500;
   }
 }
 

themes/cypress/source/css/_partial/toc.scss

@@ -51,8 +51,8 @@
   display: block;
   color: #999;
   text-decoration: none;
-  padding: 7px 0;
-  line-height: 1;
+  padding: 0;
+  line-height: $line-height;
   position: relative;
   width: 100%;
   text-overflow: ellipsis;

themes/cypress/source/css/_variables.scss

@@ -10,7 +10,7 @@ $white-60: rgba(255,255,255,0.6);
 $red: #f00;
 
 $color-gray: #999;
-$color-default: #474a54;
+$color-default: #595d6b;
 $color-border: #e3e3e3;
 $color-link: #3B94D9;
 $color-link-hover: #0369b3;
@@ -32,7 +32,7 @@ $color-san-marino: #4271ae;
 $color-trendy-pink: #8959a8;
 
 // Typography
-$font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-sans: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $font-serif: Garamond, Georgia, "Times New Roman", serif;
 $font-mono: Consolas, Monaco, 'Andale Mono', monospace;
 $font-title: "Fira Sans", font-sans;