Adjust some colors, font sizes, borders in markdown

This commit is contained in:
Alex Shpak 2019-06-19 13:58:46 +02:00
parent 618ffadcb3
commit 220d999ce6
6 changed files with 32 additions and 17 deletions

View file

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

View file

@ -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 { > :first-child {
margin-top: 0; margin-top: 0;
} }
@ -11,10 +12,14 @@
// {{< expand "Label" "icon" >}} // {{< expand "Label" "icon" >}}
.book-expand { .book-expand {
border: 1px solid $gray-200;
margin-top: $padding-16; margin-top: $padding-16;
margin-bottom: $padding-16; margin-bottom: $padding-16;
border: $padding-1 solid $gray-200;
border-radius: $border-radius;
overflow: hidden;
.book-expand-head { .book-expand-head {
background: $gray-100; background: $gray-100;
padding: $padding-8 $padding-16; padding: $padding-8 $padding-16;
@ -33,7 +38,14 @@
// {{< tabs >}} // {{< tabs >}}
.book-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; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -79,7 +91,7 @@ a.book-btn {
color: $color-link !important; color: $color-link !important;
text-decoration: none !important; text-decoration: none !important;
border: $padding-1 solid $color-link; border: $padding-1 solid $color-link;
border-radius: $padding-4; border-radius: $border-radius;
padding: $padding-4 $padding-16; padding: $padding-4 $padding-16;
margin-top: $padding-8; margin-top: $padding-8;
margin-bottom: $padding-8; margin-bottom: $padding-8;

View file

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

View file

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

View file

@ -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="}}