Skip to content

Commit ea4613d

Browse files
1bl4z3r1bl4z3r
committed
Adds Admonition with additional shortcodes. Closure for Track3/hermit#130 
1 parent f71ae18 commit ea4613d

7 files changed

Lines changed: 202 additions & 7 deletions

File tree

‎assets/scss/_admonition.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.admonition{
2+
position: relative;
3+
margin: 1rem 0 1.5rem 0;
4+
border-left: .25rem solid map-get($admonition-color, 'note');
5+
box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.5);
6+
border-radius: 0 8px 8px 0;
7+
overflow: auto;
8+
.admonition-title{
9+
padding: .25rem .50rem;
10+
border-bottom: 1px solid map-get($admonition-background, 'note');
11+
background-color: rgba(map-get($admonition-background, 'note'), 0.1);
12+
color: map-get($admonition-color, 'note');
13+
.icon{
14+
display: inline-block;
15+
padding: 0 10px 0 0;
16+
font-size: 0.85rem;
17+
color: map-get($admonition-color, 'note');
18+
}
19+
}
20+
.admonition-content{
21+
padding: .25rem .50rem;
22+
}
23+
@each $type, $color in $admonition-color {
24+
&.#{$type} {
25+
border-left-color: $color;
26+
.admonition-title {
27+
color: $color;
28+
}
29+
.icon {
30+
color: $color;
31+
}
32+
}
33+
}
34+
@each $type, $color in $admonition-background {
35+
&.#{$type} {
36+
background-color: $color;
37+
38+
.admonition-title {
39+
border-bottom-color: $color;
40+
background-color: rgba($color, 0.1);
41+
}
42+
}
43+
}
44+
}

‎assets/scss/_predefined.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,30 @@ $typewriter: hsl(172, 100%, 36%);
1313
$fonts: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
1414
$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";
1515

16+
//Admonition
17+
//
18+
$admonition-background: (
19+
'note': rgba(68, 138, 255, 0.1),
20+
'info': rgba(0, 184, 212, 0.1),
21+
'tip': rgba(0, 191, 165, 0.1),
22+
'success': rgba(0, 200, 83, 0.1),
23+
'warning': rgba(255, 145, 0, 0.1),
24+
'failure': rgba(255, 82, 82, 0.1),
25+
'danger': rgba(255, 23, 68, 0.1),
26+
'bug': rgba(245, 0, 87, 0.1),
27+
) !default;
28+
29+
$admonition-color: (
30+
'note': #448aff,
31+
'info': #00b8d4,
32+
'tip': #00bfa5,
33+
'success': #00c853,
34+
'warning': #ff9100,
35+
'failure': #ff5252,
36+
'danger': #ff1744,
37+
'bug': #f50057,
38+
) !default;
39+
1640
// Mixins
1741
//
1842
@mixin dimmed {

‎assets/scss/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "syntax.scss";
44
@import "animate.scss";
55
@import "_scroll.scss";
6+
@import "_admonition.scss";
67
@import "_mathjax.scss";
78

89
/* Webkit Scrollbar Customize */

‎content/posts/admonition-shortcode.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: "Admonition Shortcode"
3+
slug : 'admonition-shortcode'
4+
date: 2023-10-20T20:06:06+05:30
5+
draft: false
6+
featuredImg: ""
7+
description : 'This explains admonition shortcode implementation'
8+
tags:
9+
- Demo
10+
- Typography
11+
author : 1bl4z3r
12+
scrolltotop : true
13+
toc : true
14+
mathjax : false
15+
---
16+
17+
The `admonition` shortcode supports **8** types of banners to help you put a notice on your page.
18+
19+
*Markdown or HTML format in the content is supported.*
20+
21+
{{< admonition type=note title="This is a note" >}}
22+
A **note** banner
23+
{{< /admonition >}}
24+
25+
{{< admonition info "This is an info" >}}
26+
A **info** banner
27+
{{< /admonition >}}
28+
29+
{{< admonition tip >}}
30+
A **tip** banner
31+
{{< /admonition >}}
32+
33+
{{< admonition success >}}
34+
A **success** banner
35+
{{< /admonition >}}
36+
37+
{{< admonition warning >}}
38+
A **warning** banner
39+
{{< /admonition >}}
40+
41+
{{< admonition failure >}}
42+
A **failure** banner
43+
{{< /admonition >}}
44+
45+
{{< admonition danger >}}
46+
A **danger** banner
47+
{{< /admonition >}}
48+
49+
{{< admonition bug >}}
50+
A **bug** banner
51+
{{< /admonition >}}
52+
53+
The `admonition` shortcode has the following named parameters:
54+
55+
* **type** *[optional]* (**first** positional parameter)
56+
57+
Type of the `admonition` banner, the default value is `note`.
58+
59+
* **title** *[optional]* (**second** positional parameter)
60+
61+
Title of the `admonition` banner, the default value is the value of the **type** parameter.
62+
63+
Example `admonition` input:
64+
65+
```markdown
66+
{{</* admonition type=tip title="This is a tip" */>}}
67+
A **tip** banner
68+
{{</* /admonition */>}}
69+
Or
70+
{{</* admonition tip "This is a tip" */>}}
71+
A **tip** banner
72+
{{</* /admonition */>}}
73+
```
74+
75+
The rendered output looks like this:
76+
77+
{{< admonition tip "This is a tip" >}}
78+
A **tip** banner
79+
{{< /admonition >}}

‎content/posts/long-article.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ date: 2023-09-22T22:00:01+05:30
55
draft: false
66
featuredImg: ""
77
description : 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...'
8+
tags:
9+
- Demo
810
author : 1bl4z3r
911
scrolltotop : true
1012
toc : true

0 commit comments

Comments
 (0)