silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Custom blockquotes (#1419) 

Added some custom blockquotes `tip`, `warning`, and `danger` as seen in
[jekyll-gitbook](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html),
and a blog post showcasing them.

Light look:

![image](https://github.com/alshedivat/al-folio/assets/31376482/8441bd56-a1a6-41c0-951f-2a2efa20c16c)

Dark look:

![image](https://github.com/alshedivat/al-folio/assets/31376482/a916218a-176e-40d0-ad87-6acc9eedf8e3)

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
This commit is contained in:
George 2023-05-15 12:30:53 -03:00 committed by GitHub
parent 8f960bbae6
commit 6335474075
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 182 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
_posts/2023-05-12-custom-blockquotes.md Normal file
View File

@ -0,0 +1,110 @@
---
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 the [_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);
}
}
}
```
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
>
> 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 }

46
_sass/_base.scss
View File

@ -780,6 +780,10 @@ html.transition *:after {
blockquote {
border-left: 5px solid var(--global-theme-color);
padding: 8px;
p {
margin-bottom: 0;
}
}
}
}
@ -950,3 +954,45 @@ nav[data-toggle="toc"] {
top: 0;
}
}
/* 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);
}
}
}

26
_sass/_themes.scss
View File

@ -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;