diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index fefaeba..3c07e9a 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -225,6 +225,54 @@
{% assign _content = _heading_content %}
+
+
+{% assign blockquote_start = '' %}
+{% assign cls_prefix = 'prompt-' %}
+
+{% if _content contains blockquote_start %}
+
+ {% assign _prompt_content = nil %}
+ {% assign _prompt_snippets = _content | split: blockquote_start %}
+
+ {% for _snippet in _prompt_snippets %}
+
+ {% if forloop.first %}
+ {% assign _prompt_content = _snippet %}
+ {% continue %}
+ {% endif %}
+
+ {% assign left = _snippet | split: blockquote_end | first %}
+ {% assign right = _snippet | slice: left.size, _snippet.size %}
+
+ {% assign cls_str = left | split: '>' | first %}
+ {% assign cls_array = cls_str | remove: '"' | split: ' ' %}
+ {% assign is_prompt = false %}
+
+ {% for cls in cls_array %}
+ {% if cls contains cls_prefix %}
+ {% assign is_prompt = true %}
+ {% break %}
+ {% endif %}
+ {% endfor %}
+
+ {% unless is_prompt %}
+ {% assign _prompt_content = _prompt_content | append: blockquote_start | append: _snippet %}
+ {% continue %}
+ {% endunless %}
+
+ {% assign left = left | slice: cls_str.size, left.size %}
+ {% assign left = cls_str | append: '>' %}
+
+ {% assign _prompt_content = _prompt_content | append: blockquote_start | append: left | append: right %}
+
+ {% endfor %}
+
+ {% assign _content = _prompt_content %}
+
+{% endif %}
+
{{ _content }}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index da27ff1..e78a44a 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -104,6 +104,30 @@ blockquote {
border-left: 5px solid var(--blockquote-border-color);
padding-left: 1rem;
color: var(--blockquote-text-color);
+
+ &[class^="prompt-"] {
+ display: flex;
+ border-left: 0;
+ border-radius: 6px;
+ padding: 0.75rem 1rem;
+
+ &::before {
+ margin-right: 0.8rem;
+ font-family: "Font Awesome 5 Free";
+ text-align: center;
+ width: 1.25rem;
+ }
+
+ p:last-child {
+ margin-bottom: 0rem;
+ }
+ }
+
+ @include prompt("note", "\f0eb", 400);
+
+ @include prompt("warning", "\f06a");
+
+ @include prompt("danger", "\f071");
}
kbd {
@@ -1142,32 +1166,6 @@ $sidebar-display: "sidebar-display";
$footer-height: $footer-height-mobile; // overwrite
- #main > div.row:first-child > div:first-child {
- min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
- }
-
- #core-wrapper {
- min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
-
- h1 {
- margin-top: 2.2rem;
- font-size: 1.75rem;
- }
- }
-
- #avatar > a {
- width: 5rem;
- height: 5rem;
- }
-
- .site-subtitle {
- @include ml-mr(1.8rem);
- }
-
- #main-wrapper {
- padding-bottom: $footer-height;
- }
-
footer {
height: $footer-height;
@@ -1186,6 +1184,40 @@ $sidebar-display: "sidebar-display";
}
}
+ #main > div.row:first-child > div:first-child {
+ min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
+ }
+
+ #core-wrapper {
+ min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+
+ h1 {
+ margin-top: 2.2rem;
+ font-size: 1.75rem;
+ }
+
+ .post-content {
+ > blockquote[class^=prompt-] {
+ @include ml-mr(-1.25rem);
+ border-radius: 0;
+ }
+ }
+
+ }
+
+ #avatar > a {
+ width: 5rem;
+ height: 5rem;
+ }
+
+ .site-subtitle {
+ @include ml-mr(1.8rem);
+ }
+
+ #main-wrapper {
+ padding-bottom: $footer-height;
+ }
+
}
/* hide sidebar and panel */
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index f7ad4c1..b7f775a 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -104,17 +104,17 @@
}
}
+%sidebar-links {
+ color: rgba(117, 117, 117, 0.9);
+ user-select: none;
+}
+
/* ---------- scss mixin --------- */
@mixin no-text-decoration {
text-decoration: none;
}
-%sidebar-links {
- color: rgba(117, 117, 117, 0.9);
- user-select: none;
-}
-
@mixin ml-mr($value) {
margin-left: $value;
margin-right: $value;
@@ -142,3 +142,16 @@
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
+
+@mixin prompt($type, $fw-icon, $icon-weight: 900) {
+ &.prompt-#{$type} {
+ background-color: var(--prompt-#{$type}-bg);
+ color: var(--prompt-text-color);
+
+ &::before {
+ content: $fw-icon;
+ color: var(--prompt-#{$type}-icon-color);
+ font-weight: $icon-weight;
+ }
+ }
+}
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 6ace78d..c4d607a 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -108,6 +108,11 @@ code {
padding: 3px 5px;
border-radius: 4px;
background-color: var(--inline-code-bg);
+
+ blockquote[class^="prompt-"] & {
+ background-color: var(--prompt-code-bg);
+ color: var(--prompt-code-text-color);
+ }
}
a > &.highlighter-rouge {
diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss
index fb7c52a..cb7423c 100644
--- a/_sass/colors/dark-syntax.scss
+++ b/_sass/colors/dark-syntax.scss
@@ -79,6 +79,10 @@
--code-header-icon-color: rgb(86 86 86);
--clipboard-checked-color: #2bcc2b;
+ /* the code of prompts */
+ --prompt-code-bg: rgb(38 38 38 / 47%);
+ --prompt-code-text-color: var(--highlighter-rouge-color);
+
.highlight {
.gp { color: #818c96; }
}
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index 0eb0932..e7d6e2a 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -69,6 +69,13 @@
--kbd-wrap-color: #6a6a6a;
--kbd-text-color: #d3d3d3;
--kbd-bg-color: #242424;
+ --prompt-text-color: rgb(216 212 212 / 75%);
+ --prompt-note-bg: rgba(77, 187, 95, 0.2);
+ --prompt-note-icon-color: rgb(5 223 5 / 68%);
+ --prompt-warning-bg: rgb(90 69 3 / 95%);
+ --prompt-warning-icon-color: rgb(255 165 0 / 80%);
+ --prompt-danger-bg: rgb(86 28 8 / 80%);
+ --prompt-danger-icon-color: rgb(255 0 0 / 60%);
/* tags */
--tag-border: rgb(59, 79, 88);
@@ -145,4 +152,4 @@
color-scheme: none;
}
-} // dark-scheme
+} /* dark-scheme */
diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss
index e8f1e29..df5b24d 100644
--- a/_sass/colors/light-syntax.scss
+++ b/_sass/colors/light-syntax.scss
@@ -76,4 +76,8 @@
--code-header-icon-color: #d1d1d1;
--clipboard-checked-color: #43c743;
-} // light-syntax
+ /* the code of prompts */
+ --prompt-code-bg: rgb(219 217 217 / 35%);
+ --prompt-code-text-color: rgb(78 78 84);
+
+} /* light-syntax */
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 3cf4231..1031ab5 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -68,6 +68,13 @@
--kbd-wrap-color: #bdbdbd;
--kbd-text-color: var(--text-color);
--kbd-bg-color: white;
+ --prompt-text-color: rgb(70 70 70 / 90%);
+ --prompt-note-bg: rgb(123 247 144 / 20%);
+ --prompt-note-icon-color: green;
+ --prompt-warning-bg: rgb(255 243 205);
+ --prompt-warning-icon-color: rgb(215 138 24);
+ --prompt-danger-bg: rgb(248 215 218 / 56%);
+ --prompt-danger-icon-color: #b31d1d;
/* Categories */
--categories-hover-bg: var(--btn-border-color);
@@ -78,4 +85,4 @@
--timeline-node-bg: #c2c6cc;
--timeline-year-dot-color: #ffffff;
-} // light-scheme
+} /* light-scheme */