Skip to content

Commit 6335474

Browse files
george-gcageorge-gca
authored
Custom blockquotes (alshedivat#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>
1 parent 8f960bb commit 6335474

File tree

3 files changed

+182
-0
lines changed

3 files changed

+182
-0
lines changed

‎_posts/2023-05-12-custom-blockquotes.md

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
layout: post
3+
title: a post with custom blockquotes
4+
date: 2023-05-12 15:53:00-0400
5+
description: an example of a blog post with custom blockquotes
6+
categories: sample-posts blockquotes
7+
giscus_comments: true
8+
related_posts: true
9+
---
10+
This post shows how to add custom styles for blockquotes. Based on [jekyll-gitbook](https://github.com/sighingnow/jekyll-gitbook) implementation.
11+
12+
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:
13+
14+
```scss
15+
/* Tips, warnings, and dangers */
16+
.post .post-content blockquote {
17+
&.block-tip {
18+
border-color: var(--global-tip-block);
19+
background-color: var(--global-tip-block-bg);
20+
21+
p {
22+
color: var(--global-tip-block-text);
23+
}
24+
25+
h1, h2, h3, h4, h5, h6 {
26+
color: var(--global-tip-block-title);
27+
}
28+
}
29+
30+
&.block-warning {
31+
border-color: var(--global-warning-block);
32+
background-color: var(--global-warning-block-bg);
33+
34+
p {
35+
color: var(--global-warning-block-text);
36+
}
37+
38+
h1, h2, h3, h4, h5, h6 {
39+
color: var(--global-warning-block-title);
40+
}
41+
}
42+
43+
&.block-danger {
44+
border-color: var(--global-danger-block);
45+
background-color: var(--global-danger-block-bg);
46+
47+
p {
48+
color: var(--global-danger-block-text);
49+
}
50+
51+
h1, h2, h3, h4, h5, h6 {
52+
color: var(--global-danger-block-title);
53+
}
54+
}
55+
}
56+
```
57+
58+
A regular blockquote can be used as following:
59+
60+
```markdown
61+
> This is a regular blockquote
62+
> and it can be used as usual
63+
```
64+
65+
> This is a regular blockquote
66+
> and it can be used as usual
67+
68+
These custom styles can be used by adding the specific class to the blockquote, as follows:
69+
70+
```markdown
71+
> ##### TIP
72+
>
73+
> A tip can be used when you want to give advice
74+
> related to a certain content.
75+
{: .block-tip }
76+
```
77+
78+
> ##### TIP
79+
>
80+
> A tip can be used when you want to give advice
81+
> related to a certain content.
82+
{: .block-tip }
83+
84+
```markdown
85+
> ##### WARNING
86+
>
87+
> This is a warning, and thus should
88+
> be used when you want to warn the user
89+
{: .block-warning }
90+
```
91+
92+
> ##### WARNING
93+
>
94+
> This is a warning, and thus should
95+
> be used when you want to warn the user
96+
{: .block-warning }
97+
98+
```markdown
99+
> ##### DANGER
100+
>
101+
> This is a danger zone, and thus should
102+
> be used carefully
103+
{: .block-danger }
104+
```
105+
106+
> ##### DANGER
107+
>
108+
> This is a danger zone, and thus should
109+
> be used carefully
110+
{: .block-danger }

‎_sass/_base.scss

+46
Original file line numberDiff line numberDiff line change
@@ -780,6 +780,10 @@ html.transition *:after {
780780
blockquote {
781781
border-left: 5px solid var(--global-theme-color);
782782
padding: 8px;
783+
784+
p {
785+
margin-bottom: 0;
786+
}
783787
}
784788
}
785789
}
@@ -950,3 +954,45 @@ nav[data-toggle="toc"] {
950954
top: 0;
951955
}
952956
}
957+
958+
/* Tips, warnings, and dangers blockquotes */
959+
.post .post-content blockquote {
960+
&.block-tip {
961+
border-color: var(--global-tip-block);
962+
background-color: var(--global-tip-block-bg);
963+
964+
p {
965+
color: var(--global-tip-block-text);
966+
}
967+
968+
h1, h2, h3, h4, h5, h6 {
969+
color: var(--global-tip-block-title);
970+
}
971+
}
972+
973+
&.block-warning {
974+
border-color: var(--global-warning-block);
975+
background-color: var(--global-warning-block-bg);
976+
977+
p {
978+
color: var(--global-warning-block-text);
979+
}
980+
981+
h1, h2, h3, h4, h5, h6 {
982+
color: var(--global-warning-block-title);
983+
}
984+
}
985+
986+
&.block-danger {
987+
border-color: var(--global-danger-block);
988+
background-color: var(--global-danger-block-bg);
989+
990+
p {
991+
color: var(--global-danger-block-text);
992+
}
993+
994+
h1, h2, h3, h4, h5, h6 {
995+
color: var(--global-danger-block-title);
996+
}
997+
}
998+
}

‎_sass/_themes.scss

+26
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,19 @@
1717
--global-divider-color: rgba(0,0,0,.1);
1818
--global-card-bg-color: #{$white-color};
1919

20+
--global-tip-block: #42b983;
21+
--global-tip-block-bg: #e2f5ec;
22+
--global-tip-block-text: #215d42;
23+
--global-tip-block-title: #359469;
24+
--global-warning-block: #e7c000;
25+
--global-warning-block-bg: #fff8d8;
26+
--global-warning-block-text: #6b5900;
27+
--global-warning-block-title: #b29400;
28+
--global-danger-block: #c00;
29+
--global-danger-block-bg: #ffe0e0;
30+
--global-danger-block-text: #600;
31+
--global-danger-block-title: #c00;
32+
2033
.fa-sun {
2134
display : none;
2235
}
@@ -49,6 +62,19 @@ html[data-theme='dark'] {
4962
--global-divider-color: #424246;
5063
--global-card-bg-color: #{$grey-900};
5164

65+
--global-tip-block: #42b983;
66+
--global-tip-block-bg: #e2f5ec;
67+
--global-tip-block-text: #215d42;
68+
--global-tip-block-title: #359469;
69+
--global-warning-block: #e7c000;
70+
--global-warning-block-bg: #fff8d8;
71+
--global-warning-block-text: #6b5900;
72+
--global-warning-block-title: #b29400;
73+
--global-danger-block: #c00;
74+
--global-danger-block-bg: #ffe0e0;
75+
--global-danger-block-text: #600;
76+
--global-danger-block-title: #c00;
77+
5278
.fa-sun {
5379
padding-left: 10px;
5480
padding-top: 12px;

0 commit comments

Comments
 (0)