From 98d7ed87b2aab3c0d550beeea4bc51f441e1d23a Mon Sep 17 00:00:00 2001 From: George Araujo Date: Fri, 12 May 2023 17:29:10 -0300 Subject: [PATCH 1/5] Created style for tip, warning, and danger blockquotes Signed-off-by: George Araujo --- _sass/_base.scss | 41 +++++++++++++++++++++++++++++++++++++++++ _sass/_themes.scss | 26 ++++++++++++++++++++++++++ 2 files changed, 67 insertions(+) diff --git a/_sass/_base.scss b/_sass/_base.scss index 545f03d73122..80b6166647c5 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -947,3 +947,44 @@ nav[data-toggle="toc"] { } } +/* Tips, warnings, and dangers blockquotes */ +.post .post-content blockquote { + &.block-tip { + border-color: var(--global-tip-block); + background-color: var(--global-tip-block-bg); + + p { + color: var(--global-tip-block-text); + } + + h1, h2, h3, h4, h5, h6 { + color: var(--global-tip-block-title); + } + } + + &.block-warning { + border-color: var(--global-warning-block); + background-color: var(--global-warning-block-bg); + + p { + color: var(--global-warning-block-text); + } + + h1, h2, h3, h4, h5, h6 { + color: var(--global-warning-block-title); + } + } + + &.block-danger { + border-color: var(--global-danger-block); + background-color: var(--global-danger-block-bg); + + p { + color: var(--global-danger-block-text); + } + + h1, h2, h3, h4, h5, h6 { + color: var(--global-danger-block-title); + } + } +} diff --git a/_sass/_themes.scss b/_sass/_themes.scss index 5370a8ee26cb..fd34af4f858b 100644 --- a/_sass/_themes.scss +++ b/_sass/_themes.scss @@ -17,6 +17,19 @@ --global-divider-color: rgba(0,0,0,.1); --global-card-bg-color: #{$white-color}; + --global-tip-block: #42b983; + --global-tip-block-bg: #e2f5ec; + --global-tip-block-text: #215d42; + --global-tip-block-title: #359469; + --global-warning-block: #e7c000; + --global-warning-block-bg: #fff8d8; + --global-warning-block-text: #6b5900; + --global-warning-block-title: #b29400; + --global-danger-block: #c00; + --global-danger-block-bg: #ffe0e0; + --global-danger-block-text: #600; + --global-danger-block-title: #c00; + .fa-sun { display : none; } @@ -49,6 +62,19 @@ html[data-theme='dark'] { --global-divider-color: #424246; --global-card-bg-color: #{$grey-900}; + --global-tip-block: #42b983; + --global-tip-block-bg: #e2f5ec; + --global-tip-block-text: #215d42; + --global-tip-block-title: #359469; + --global-warning-block: #e7c000; + --global-warning-block-bg: #fff8d8; + --global-warning-block-text: #6b5900; + --global-warning-block-title: #b29400; + --global-danger-block: #c00; + --global-danger-block-bg: #ffe0e0; + --global-danger-block-text: #600; + --global-danger-block-title: #c00; + .fa-sun { padding-left: 10px; padding-top: 12px; From ee6a596633a905815f8684bfeabc92ad6f0e0198 Mon Sep 17 00:00:00 2001 From: George Araujo Date: Fri, 12 May 2023 17:29:31 -0300 Subject: [PATCH 2/5] Created blog post showcasing custom blockquotes styles Signed-off-by: George Araujo --- _posts/2023-05-12-custom-blockquotes.md | 100 ++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 _posts/2023-05-12-custom-blockquotes.md diff --git a/_posts/2023-05-12-custom-blockquotes.md b/_posts/2023-05-12-custom-blockquotes.md new file mode 100644 index 000000000000..305f4142af06 --- /dev/null +++ b/_posts/2023-05-12-custom-blockquotes.md @@ -0,0 +1,100 @@ +--- +layout: post +title: a post with custom blockquotes +date: 2023-05-12 15:53:00-0400 +description: an example of a blog post with custom blockquotes +categories: sample-posts blockquotes +giscus_comments: true +related_posts: true +--- +This post shows how to add custom styles for blockquotes. Based on [jekyll-gitbook](https://github.com/sighingnow/jekyll-gitbook) implementation. + +We decided to support the same custom blockquotes as in [jekyll-gitbook](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html), which are also found in a lot of other sites' styles. The styles definitions can be found on [_base.scss](https://github.com/alshedivat/al-folio/blob/master/_sass/_base.scss) file, more specifically: + +```scss +/* Tips, warnings, and dangers */ +.post .post-content blockquote { + &.block-tip { + border-color: var(--global-tip-block); + background-color: var(--global-tip-block-bg); + + p { + color: var(--global-tip-block-text); + } + + h1, h2, h3, h4, h5, h6 { + color: var(--global-tip-block-title); + } + } + + &.block-warning { + border-color: var(--global-warning-block); + background-color: var(--global-warning-block-bg); + + p { + color: var(--global-warning-block-text); + } + + h1, h2, h3, h4, h5, h6 { + color: var(--global-warning-block-title); + } + } + + &.block-danger { + border-color: var(--global-danger-block); + background-color: var(--global-danger-block-bg); + + p { + color: var(--global-danger-block-text); + } + + h1, h2, h3, h4, h5, h6 { + color: var(--global-danger-block-title); + } + } +} +``` + +These styles can be used as following: + +```markdown +> ##### TIP +> +> A tip can be used when you want to give advice +> related to a certain content. +{: .block-tip } +``` + +> ##### TIP +> +> A tip can be used when you want to give advice +> related to a certain content. +{: .block-tip } + +```markdown +> ##### WARNING +> +> This is a warning, and thus should +> be used when you want to warn the user +{: .block-warning } +``` + +> ##### WARNING +> +> This is a warning, and thus should +> be used when you want to warn the user +{: .block-warning } + +```markdown +> ##### DANGER +> +> This is a danger zone, and thus should +> be used carefully +{: .block-danger } +``` + +> ##### DANGER +> +> This is a danger zone, and thus should +> be used carefully +{: .block-danger } From 8a402d6847401868ac0381a25766368cb7abfd56 Mon Sep 17 00:00:00 2001 From: George Araujo Date: Fri, 12 May 2023 17:38:00 -0300 Subject: [PATCH 3/5] Removed extra margim at the bottom of blockquote Signed-off-by: George Araujo --- _sass/_base.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_sass/_base.scss b/_sass/_base.scss index 80b6166647c5..7f24e5ca6af4 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -776,6 +776,10 @@ html.transition *:after { blockquote { border-left: 5px solid var(--global-theme-color); padding: 8px; + + p { + margin-bottom: 0; + } } } } From c3e8387f89f87a1c2cc3188bc7faf6c67369f340 Mon Sep 17 00:00:00 2001 From: George Araujo Date: Fri, 12 May 2023 17:38:11 -0300 Subject: [PATCH 4/5] Updated custom blockquotes post Signed-off-by: George Araujo --- _posts/2023-05-12-custom-blockquotes.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/_posts/2023-05-12-custom-blockquotes.md b/_posts/2023-05-12-custom-blockquotes.md index 305f4142af06..5cacd67e2dd8 100644 --- a/_posts/2023-05-12-custom-blockquotes.md +++ b/_posts/2023-05-12-custom-blockquotes.md @@ -55,7 +55,17 @@ We decided to support the same custom blockquotes as in [jekyll-gitbook](https:/ } ``` -These styles can be used as following: +A regular blockquote can be used as following: + +```markdown +> This is a regular blockquote +> and it can be used as usual +``` + +> This is a regular blockquote +> and it can be used as usual + +These custom styles can be used by adding the specific class to the blockquote, as follows: ```markdown > ##### TIP From 33a57d50e0b3ca831625684dfc62746c1396e913 Mon Sep 17 00:00:00 2001 From: George Araujo Date: Fri, 12 May 2023 17:41:16 -0300 Subject: [PATCH 5/5] Updated type Signed-off-by: George Araujo --- _posts/2023-05-12-custom-blockquotes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2023-05-12-custom-blockquotes.md b/_posts/2023-05-12-custom-blockquotes.md index 5cacd67e2dd8..751f9eb1c7a1 100644 --- a/_posts/2023-05-12-custom-blockquotes.md +++ b/_posts/2023-05-12-custom-blockquotes.md @@ -9,7 +9,7 @@ related_posts: true --- This post shows how to add custom styles for blockquotes. Based on [jekyll-gitbook](https://github.com/sighingnow/jekyll-gitbook) implementation. -We decided to support the same custom blockquotes as in [jekyll-gitbook](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html), which are also found in a lot of other sites' styles. The styles definitions can be found on [_base.scss](https://github.com/alshedivat/al-folio/blob/master/_sass/_base.scss) file, more specifically: +We decided to support the same custom blockquotes as in [jekyll-gitbook](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html), which are also found in a lot of other sites' styles. The styles definitions can be found on the [_base.scss](https://github.com/alshedivat/al-folio/blob/master/_sass/_base.scss) file, more specifically: ```scss /* Tips, warnings, and dangers */