Adjust some colors, font sizes, borders in markdown

assets/_markdown.scss

@@ -1,7 +1,5 @@
 @import 'variables';
 
-$block-border-radius: 0.15rem;
-
 .markdown {
   line-height: 1.6;
 
@@ -35,15 +33,15 @@ $block-border-radius: 0.15rem;
 
   code {
     padding: 0 $padding-4;
-    background: $gray-100;
-    border-radius: $block-border-radius;
+    background: $gray-200;
+    border-radius: $border-radius;
+    font-size: .875em;
   }
 
   pre {
     padding: $padding-16;
     background: $gray-100;
-    border-radius: $block-border-radius;
-    font-size: .875em;
+    border-radius: $border-radius;
     overflow-x: auto;
 
     code {
@@ -53,9 +51,11 @@ $block-border-radius: 0.15rem;
   }
 
   blockquote {
-    border-left: $padding-1*2 solid $gray-300;
     margin: $padding-16 0;
-    padding: $padding-1 $padding-16;
+    padding: $padding-4 ($padding-16 - $padding-4); //to keep total left space 16dp
+
+    border-left: $padding-4 solid $gray-200;
+    border-radius: $border-radius;
 
     :first-child { margin-top: 0; }
     :last-child { margin-bottom: 0; }

assets/_shortcodes.scss

@@ -1,6 +1,7 @@
-@import 'variables';
+@import "variables";
 
-.markdown-inner { // Util class to remove extra margin in nested markdown content
+.markdown-inner {
+  // Util class to remove extra margin in nested markdown content
   > :first-child {
     margin-top: 0;
   }
@@ -11,10 +12,14 @@
 
 // {{< expand "Label" "icon" >}}
 .book-expand {
-  border: 1px solid $gray-200;
   margin-top: $padding-16;
   margin-bottom: $padding-16;
 
+  border: $padding-1 solid $gray-200;
+  border-radius: $border-radius;
+
+  overflow: hidden;
+
   .book-expand-head {
     background: $gray-100;
     padding: $padding-8 $padding-16;
@@ -33,7 +38,14 @@
 
 // {{< tabs >}}
 .book-tabs {
-  border: 1px solid $gray-200;
+  margin-top: $padding-16;
+  margin-bottom: $padding-16;
+
+  border: $padding-1 solid $gray-200;
+  border-radius: $border-radius;
+
+  overflow: hidden;
+
   display: flex;
   flex-wrap: wrap;
 
@@ -79,7 +91,7 @@ a.book-btn {
   color: $color-link !important;
   text-decoration: none !important;
   border: $padding-1 solid $color-link;
-  border-radius: $padding-4;
+  border-radius: $border-radius;
   padding: $padding-4 $padding-16;
   margin-top: $padding-8;
   margin-bottom: $padding-8;

assets/_variables.scss

@@ -9,6 +9,8 @@ $font-size-12: 0.75rem;
 $font-size-14: 0.875rem;
 $font-size-16: 1rem;
 
+$border-radius: 0.15rem;
+
 // Grayscale
 $white: #ffffff;
 $gray-100: #f8f9fa;
@@ -37,5 +39,5 @@ $header-height: 3.5rem;
 $menu-width: 16rem;
 $toc-width: 16rem;
 
-$sm-breakpoint: $menu-width + $body-min-width + 5;
-$md-breakpoint: $sm-breakpoint + $toc-width;
+$md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width;
+$sm-breakpoint: $menu-width + $body-min-width;

exampleSite/content/docs/shortcodes.md

@@ -1,4 +1,5 @@
 # Shortcodes
+
 ## Expand shortcode
 
 ### Default

exampleSite/resources/_gen/assets/scss/book.scss_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"book.min.27ab072a10b6c916706e78f8a221f604fb02c94d5396ebfabf8121410911cc92.css","MediaType":"text/css","Data":{"Integrity":"sha256-J6sHKhC2yRZwbnj4oiH2BPsCyU1Tluv6v4EhQQkRzJI="}}
+{"Target":"book.min.f4161f5e2de53a2e927f51df1611323a2a12cccb2681f23cb6fc3517852e8643.css","MediaType":"text/css","Data":{"Integrity":"sha256-9BYfXi3lOi6Sf1HfFhEyOioSzMsmgfI8tvw1F4UuhkM="}}