diff --git a/src/.vuepress/public/images/icons/bulb.svg b/src/.vuepress/public/images/icons/bulb.svg
new file mode 100644
index 0000000000..984f318125
--- /dev/null
+++ b/src/.vuepress/public/images/icons/bulb.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="25px" viewBox="0 0 27 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>bulb</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="bulb" transform="translate(1.862069, 1.862069)" fill-rule="nonzero">
+            <circle id="Oval" stroke="#FFFFFF" stroke-width="1.72413793" fill="#42B983" cx="11.637931" cy="11.637931" r="11.637931"></circle>
+            <path d="M14.9782602,6.26958761 C13.5786192,5.02159022 11.5988246,4.66057986 9.84877456,5.3342393 C8.09872445,6.00789873 6.87199468,7.60321973 6.67041812,9.46758536 C6.47834892,11.1289711 7.14669021,12.7736149 8.44322124,13.8300715 C8.7659962,14.0883852 8.95708577,14.476934 8.96463387,14.8902773 L8.96463387,15.950483 C8.96463396,17.4335196 10.1668727,18.6357583 11.6499092,18.6357583 C13.1329458,18.6357583 14.3351845,17.4335196 14.3351846,15.950483 L14.3351846,14.9424186 C14.3370268,14.5440734 14.5075401,14.1651552 14.8044559,13.8995932 C15.9408165,12.9709421 16.6142105,11.5917678 16.6476313,10.1245967 C16.681052,8.65742545 16.0711565,7.24901903 14.9782602,6.26958761 Z M11.641219,17.2366343 C10.9348096,17.2272767 10.3644253,16.6568924 10.3550678,15.950483 L10.3550678,15.6723963 L12.9273703,15.6723963 L12.9273703,15.9331026 C12.9274337,16.6462901 12.3543431,17.2271252 11.641219,17.2366343 Z M13.900674,12.822007 C13.4611707,13.2051427 13.1514496,13.7152716 13.0142724,14.2819624 L10.2681656,14.2819624 C10.1269899,13.6848629 9.79803163,13.1487827 9.32962275,12.7524853 L9.31224241,12.7524853 C8.37165942,11.9953905 7.89132967,10.8044358 8.04347151,9.60662873 C8.29960607,7.74087102 9.94518146,6.38428223 11.8255389,6.48874655 C13.7058963,6.59321086 15.1910767,8.12373049 15.2389665,10.0063785 C15.2362892,11.09781 14.7453153,12.1307682 13.900674,12.822007 Z" id="Shape" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
diff --git a/src/.vuepress/public/images/icons/danger.svg b/src/.vuepress/public/images/icons/danger.svg
new file mode 100644
index 0000000000..45a7c34025
--- /dev/null
+++ b/src/.vuepress/public/images/icons/danger.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="25px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>danger</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="danger" transform="translate(1.000000, 1.000000)" fill-rule="nonzero">
+            <circle id="Oval" stroke="#FFFFFF" stroke-width="2" fill="#f4cd00" cx="15" cy="15" r="15"></circle>
+            <g transform="translate(13.000000, 7.000000)" fill="#FFFFFF" id="Path">
+                <path d="M1.28125,10.15625 C1.5625,10.0625 1.875,10.03125 2.1875,10.03125 C2.5,10.03125 2.84375,10.09375 3.125,10.15625 L4.0625,2.21875 C4.0625,2.125 4.0625,2.0625 4.0625,1.96875 C4.0625,0.90625 3.1875,0.0625 2.15625,0.0625 C1.625,0.0625 1.09375,0.3125 0.71875,0.71875 C0.34375,1.15625 0.1875,1.6875 0.25,2.21875 L1.28125,10.15625 Z"></path>
+                <path d="M2.15625,11.625 C1.09375,11.625 0.21875,12.5 0.21875,13.5625 C0.21875,14.625 1.09375,15.5 2.15625,15.5 C3.21875,15.5 4.09375,14.625 4.09375,13.5625 C4.09375,12.46875 3.25,11.625 2.15625,11.625 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/.vuepress/public/images/icons/info.svg b/src/.vuepress/public/images/icons/info.svg
new file mode 100644
index 0000000000..26ca6e7316
--- /dev/null
+++ b/src/.vuepress/public/images/icons/info.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="25px" viewBox="0 0 37 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>info</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="info" transform="translate(0.280000, 0.000000)">
+            <circle id="Oval" stroke="#FFFFFF" stroke-width="2" fill="#007BFF" cx="18.22" cy="17.5" r="16.5"></circle>
+            <path d="M17.1216,25 L16.08,25 C16.0659695,24.986485 16.0503955,24.9746702 16.0336,24.9648 C15.3744,24.664 15.0576,24.0592 15.2336,23.3536 C15.7056,21.408 16.1936,19.4656 16.6736,17.5216 C16.7396331,17.2526281 16.7872106,16.9794586 16.816,16.704 C16.8351634,16.6342702 16.8131707,16.5597033 16.7592342,16.5115335 C16.7052976,16.4633638 16.6287286,16.449907 16.5616,16.4768 C16.4511988,16.5017231 16.3438833,16.5387469 16.2416,16.5872 C16.0048,16.6864 15.7744,16.8032 15.536,16.8944 C15.3580176,17.0055338 15.12448,16.9609176 15,16.792 L15,16.4128 C15.161254,16.18715 15.3439728,15.9776396 15.5456,15.7872 C16.2592,15.2256 16.9856,14.6896 17.7264,14.1536 C17.8845663,14.0495989 18.0542259,13.9642321 18.232,13.8992 C18.4640903,13.7982495 18.7216913,13.7714277 18.9696,13.8224 C19.896,14.0096 20.376,14.752 20.1504,15.6656 C19.6928,17.5386667 19.2330667,19.4117333 18.7712,21.2848 C18.6985976,21.5899608 18.6451599,21.8993652 18.6112,22.2112 C18.5924524,22.2812922 18.6174222,22.3558024 18.6746193,22.400444 C18.7318164,22.4450857 18.8101602,22.4512105 18.8736,22.416 C19.048,22.3632 19.2128,22.2784 19.3824,22.2096 C19.5872,22.12 19.8,22.0384 20.0064,21.96 C20.1299445,21.9145907 20.2686639,21.9547804 20.3488,22.0592 C20.4368513,22.1623525 20.4503146,22.3098072 20.3824,22.4272 C20.3304715,22.5362651 20.2642934,22.6379534 20.1856,22.7296 C20.0137612,22.9214794 19.8282059,23.1006178 19.6304,23.2656 C18.84,23.9024 18.0304,24.528 17.1216,25 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
+            <path d="M18.4688,12.9408104 C17.6720261,12.9401517 16.9541283,12.459517 16.6499644,11.7230841 C16.3458004,10.9866513 16.5152931,10.1395036 17.0793839,9.57678643 C17.6434746,9.01406924 18.491033,8.84664244 19.2267221,9.15260094 C19.9624112,9.45855944 20.4412943,10.1776269 20.4400026,10.9744 C20.4404282,11.4968853 20.2327326,11.998024 19.8628294,12.3670264 C19.4929263,12.7360288 18.9912827,12.9425021 18.4688,12.9408104 L18.4688,12.9408104 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>
diff --git a/src/.vuepress/public/images/icons/stop.svg b/src/.vuepress/public/images/icons/stop.svg
new file mode 100644
index 0000000000..85cd36a014
--- /dev/null
+++ b/src/.vuepress/public/images/icons/stop.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>stop</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="stop" transform="translate(1.000000, 1.000000)" fill-rule="nonzero">
+            <path d="M11.5,0 C5.15907273,0 0,5.15893955 0,11.5 C0,17.8410605 5.15907273,23 11.5,23 C17.8409273,23 23,17.8410605 23,11.5 C23,5.15893955 17.8409273,0 11.5,0 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#FF6666"></path>
+            <rect id="Rectangle" fill="#FFFFFF" x="6" y="10" width="11" height="3"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl
index 145736fc00..c7fa213db1 100644
--- a/src/.vuepress/styles/index.styl
+++ b/src/.vuepress/styles/index.styl
@@ -1,99 +1,152 @@
-.demo
-  font-family sans-serif
-  border 1px solid #eee
-  border-radius 2px
-  padding 20px 30px
-  margin-top 1em
-  margin-bottom 40px
-  user-select none
-  overflow-x auto
-
-.custom-block
-  padding 0.1rem 1.5rem
-  margin 2em 0
-  border-left-width 0.5rem
-  border-left-style solid
-  background-color #f8f8f8
-  position relative
-  border-bottom-right-radius 2px
-  border-top-right-radius 2px
-  margin 1rem 0
-
-  &::before
-    position absolute
-    top 14px
-    left -14px
-    color #fff
-    width 20px
-    height 20px
-    border-radius 100%
-    text-align center
-    line-height 20px
-    font-weight bold
-    font-family 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
-    font-size 14px
-
-  .custom-block-title
-    font-weight 600
-    margin-bottom -0.4rem
-
-  &.info
-    border-color #007bff
-
-  &.tip
-    border-color #42b983
-
-  &.warning
-    border-color #dcbc1e
-    background-color #f8f8f8
-
-  &.danger
-    border-color #f66
-    background-color #f8f8f8
-
-    &::before
-      content '!'
-      background-color #f66
-
-  &.details
-    display block
-    position relative
-    border-radius 2px
-    margin 1.6em 0
-    padding 1.6em
-    background-color #eee
-
-    h4
-      margin-top 0
+.demo {
+  font-family: sans-serif;
+  border: 1px solid #eee;
+  border-radius: 2px;
+  padding: 20px 30px;
+  margin-top: 1em;
+  margin-bottom: 40px;
+  user-select: none;
+  overflow-x: auto;
+}
 
-    figure,
-    p
-      &:last-child
-        margin-bottom 0
-        padding-bottom 0
+.custom-block {
+  padding: 0.1rem 1.5rem;
+  margin: 2em 0;
+  border-left-width: 0.5rem;
+  border-left-style: solid;
+  position: relative;
+  border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
+  max-width: 80%;
+  margin: 1rem 0;
+
+  &::before {
+    position: absolute;
+    top: 14px;
+    left: -14px;
+    color: #fff;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    text-align: center;
+    line-height: 20px;
+    font-weight: bold;
+    font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+  }
+
+  p {
+    color: #222;
+  }
+
+  .custom-block-title {
+    font-weight: 600;
+    margin-bottom: -0.4rem;
+  }
+
+  &.info {
+    border-color: #007bff;
+    background-color: #f8f8f8;
+
+    &::before {
+      content: url('/images/icons/info.svg');
+      width: 25px;
+      height: 25px;
+      left: -16px;
+      box-sizing: border-box;
+    }
+  }
+
+  &.tip {
+    border-color: #42b983;
+    background-color: #f8f8f8;
+
+    &::before {
+      content: url('/images/icons/bulb.svg');
+      width: 25px;
+      height: 25px;
+      left: -16px;
+    }
+  }
+
+  &.warning {
+    border-color: #f4cd00;
+    background-color: #f8f8f8;
 
-    summary
-      outline none
-      cursor pointer
+    .custom-block-title {
+      color: #222;
+    }
+
+    &::before {
+      content: url('/images/icons/danger.svg');
+      width: 25px;
+      height: 25px;
+      left: -16px;
+      box-sizing: border-box;
+    }
+  }
+
+  &.danger {
+    border-color: #f66;
+    background-color: #f8f8f8;
+
+    .custom-block-title {
+      color: #222;
+    }
+
+    &::before {
+      content: url('/images/icons/stop.svg');
+      width: 25px;
+      height: 25px;
+      left: -16px;
+    }
+  }
+
+  &.details {
+    display: block;
+    position: relative;
+    border-radius: 2px;
+    margin: 1.6em 0;
+    padding: 1.6em;
+    background-color: #eee;
+    h4 {
+      margin-top: 0;
+    }
+    figure,
+    p {
+      &:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+      }
+    }
+    summary {
+      outline: none;
+      cursor: pointer;
+    }
+  }
+}
 
 .scrimba,
-.vueschool
-  background-color #e7ecf3
-  padding 1em 1.25em
-  border-radius 2px
-  color #486491
-  position relative
-  margin 24px 0
-
-  a
-    color: #486491
-    position relative
-    padding-left 16px
-
-  &::before
-    content "\f144"
-    font-family 'Font Awesome 5 Free'
-    font-size 2em
-    display inline-block
-    color #73abfe
-    vertical-align middle
+.vueschool {
+  background-color: #e7ecf3;
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  color: #486491;
+  position: relative;
+  margin: 24px 0;
+
+  a {
+    color: #486491;
+    position: relative;
+    padding-left :16px;
+  }
+
+  &::before {
+    content: "\f144";
+    font-family: 'Font Awesome 5 Free';
+    font-size: 2em;
+    display: inline-block;
+    color: #73abfe;
+    vertical-align: middle;
+  }
+}