#77, Introduce hint shortcode

3 files changed, 20 insertions, 2 deletions

diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index 25ee154..17fed6c 100644
--- a/assets/_markdown.scss
+++ b/assets/_markdown.scss
@@ -52,7 +52,7 @@
 
   blockquote {
     margin: $padding-16 0;
-    padding: $padding-4 ($padding-16 - $padding-4); //to keep total left space 16dp
+    padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
 
     border-left: $padding-4 solid $gray-200;
     border-radius: $border-radius;
diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss
index 38e105f..bc0916c 100644
--- a/assets/_shortcodes.scss
+++ b/assets/_shortcodes.scss
@@ -97,3 +97,14 @@ a.book-btn {
   margin-bottom: $padding-8;
   cursor: pointer;
 }
+
+// {{< hint >}}
+.book-hint {
+  @each $name, $color in $hint-colors {
+    &.#{$name} {
+      border-left-color: $color;
+      background-color: rgba($color, 0.1);
+      // background-color: $gray-100;
+    }
+  };
+}
diff --git a/assets/_variables.scss b/assets/_variables.scss
index 5a6f020..6eb8e4c 100644
--- a/assets/_variables.scss
+++ b/assets/_variables.scss
@@ -24,7 +24,7 @@ $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black: #000 !default;
 
-$color-link: #004ed0 !default;
+$color-link: #05b !default;
 $color-visited-link: #8440f1 !default;
 $color-dark-link: $gray-800 !default;
 
@@ -41,3 +41,10 @@ $toc-width: 16rem !default;
 
 $md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default;
 $sm-breakpoint: $menu-width + $body-min-width !default;
+
+// Panel colors
+$hint-colors: (
+  info: #6bf,
+  warning: #fd6,
+  danger: #f66
+);