Custom blockquotes

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

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

_sass/_base.scss

@@ -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);
+    }
+  }
+}

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