Hugo 短代码

Tue, 15 Apr 2025 12:42:25 +0800

合集墙详见这里。如果没有特别说明，css样式都是在 assets/scss/custom.scss 文件里修改，短代码的html文件放在 layouts/shortcodes 文件夹里。

重点标记

新建 mark.html，内容为：

1<mark>{{ .Get "text" }}</mark>

在 custom.scss 中添加：

1//重点标记
2mark{
3    background: hsla(199, 64%, 63%, 0.696);
4}

使用：

1{{< mark text="标记" >}}

指定颜色文本

红色文本橙色文本黄色文本绿色文本深青色文本蓝色文本紫色文本

使用：

1<span style="color:red;">红色文本</span>

147种标准颜色

基础颜色 (16种)

序号	颜色名称	效果
1	`black` ; `#000080`	黑色文本
2	`silver` ; `#C0C0C0`	银色文本
3	`gray` / `grey` ; `#808080`	灰色文本
4	`white` ; `#FFFFFF`	白色文本
5	`maroon` ; `#800000`	栗色/褐红色文本
6	`red` ; `#FF0000`	红色文本
7	`purple` ; `#800080`	紫色文本
8	`fuchsia` (等同于 `magenta`) ; `#FF00FF`	紫红色/洋红色文本
9	`green` ; `#008000`	绿色文本
10	`lime` ; `#00FF00`	酸橙绿文本
11	`olive` ; `#808000`	橄榄绿文本
12	`yellow` ; `#FFFF00`	黄色文本
13	`navy` ; `#000080`	海军蓝文本
14	`blue` ; `#0000FF`	蓝色文本
15	`teal` ; `#008080`	水鸭色/蓝绿色文本
16	`aqua` (等同于 `cyan`) ; `#00FFFF`	水色/浅青色文本

扩展颜色 (131种)

红色系

红色系

序号	颜色名称	效果
1	`indianred`	红色文本
2	`lightcoral`	红色文本
3	`salmon`	红色文本
4	`darksalmon`	红色文本
5	`lightsalmon`	红色文本
6	`crimson`	红色文本
7	`firebrick`	红色文本
8	`darkred`	红色文本

粉红色系

粉红色系

序号	颜色名称	效果
1	`pink`	粉色文本
2	`lightpink`	浅粉色文本
3	`hotpink`	亮粉色文本
4	`deeppink`	深粉色文本
5	`mediumvioletred`	中紫红色文本
6	`palevioletred`	淡紫红色文本

橙色系

橙色系

序号	颜色名称	效果
1	`coral`	珊瑚色文本
2	`tomato`	番茄色文本
3	`orangered`	橙红色文本
4	`darkorange`	暗橙色文本
5	`orange`	橙色文本

黄色系

黄色系

序号	颜色名称	效果
1	`gold`	金色文本
2	`yellow`	黄色文本
3	`lightyellow`	浅黄色文本
4	`lemonchiffon`	柠檬绸色文本
5	`lightgoldenrodyellow`	浅金黄色文本
6	`papayawhip`	番木瓜色文本
7	`moccasin`	鹿皮色文本
8	`peachpuff`	桃肉色文本
9	`palegoldenrod`	苍金棒色文本
10	`khaki`	卡其色文本
11	`darkkhaki`	深卡其色文本

紫色系

紫色系

序号	颜色名称	效果
1	`lavender`	淡紫色文本
2	`thistle`	蓟色文本
3	`plum`	李子色文本
4	`violet`	紫罗兰色文本
5	`orchid`	兰花色文本
6	`fuchsia` (`magenta`)	洋红色文本
7	`mediumorchid`	中兰花色文本
8	`mediumpurple`	中紫色文本
9	`rebeccapurple`	丽贝卡紫色文本
10	`blueviolet`	蓝紫色文本
11	`darkviolet`	深紫罗兰色文本
12	`darkorchid`	深兰花色文本
13	`darkmagenta`	深洋红色文本
14	`purple`	紫色文本
15	`indigo`	靛蓝色文本
16	`slateblue`	板岩蓝文本
17	`darkslateblue`	深板岩蓝文本
18	`mediumslateblue`	中板岩蓝文本

绿色系

绿色系

序号	颜色名称	效果
1	`greenyellow`	绿黄色文本
2	`chartreuse`	黄绿色文本
3	`lawngreen`	草绿色文本
4	`lime`	亮绿色文本
5	`limegreen`	酸橙绿文本
6	`palegreen`	浅绿色文本
7	`lightgreen`	亮绿色文本
8	`mediumspringgreen`	中春绿色文本
9	`springgreen`	春绿色文本
10	`mediumseagreen`	中海绿色文本
11	`seagreen`	海绿色文本
12	`forestgreen`	森林绿文本
13	`green`	绿色文本
14	`darkgreen`	深绿色文本
15	`yellowgreen`	黄绿色文本
16	`olivedrab`	橄榄褐文本
17	`olive`	橄榄色文本
18	`darkolivegreen`	深橄榄绿文本
19	`mediumaquamarine`	中碧绿色文本
20	`darkseagreen`	深海绿色文本
21	`lightseagreen`	亮海绿色文本
22	`darkcyan`	深青色文本
23	`teal`	凫蓝文本

蓝色系

蓝色系

序号	颜色名称	效果
1	`aqua` (`cyan`)	水蓝色文本
2	`lightcyan`	浅青色文本
3	`paleturquoise`	苍绿色文本
4	`aquamarine`	碧绿色文本
5	`turquoise`	青绿色文本
6	`mediumturquoise`	中青绿色文本
7	`darkturquoise`	深青绿色文本
8	`cadetblue`	军蓝色文本
9	`steelblue`	钢蓝色文本
10	`lightsteelblue`	亮钢蓝色文本
11	`powderblue`	粉蓝色文本
12	`lightblue`	浅蓝色文本
13	`skyblue`	天蓝色文本
14	`lightskyblue`	亮天蓝色文本
15	`deepskyblue`	深天蓝色文本
16	`dodgerblue`	闪蓝色文本
17	`cornflowerblue`	矢车菊蓝色文本
18	`royalblue`	皇家蓝色文本
19	`blue`	纯蓝色文本
20	`mediumblue`	中蓝色文本
21	`darkblue`	深蓝色文本
22	`navy`	海军蓝色文本
23	`midnightblue`	午夜蓝色文本

棕色系

棕色系

序号	颜色名称	效果
1	`cornsilk`	浅玉米丝色文本
2	`blanchedalmond`	漂白杏仁色文本
3	`bisque`	乳脂色文本
4	`navajowhite`	纳瓦白文本
5	`wheat`	小麦色文本
6	`burlywood`	硬木色文本
7	`tan`	棕褐色文本
8	`rosybrown`	玫瑰棕色文本
9	`sandybrown`	沙棕色文本
10	`goldenrod`	金菊色文本
11	`darkgoldenrod`	深金菊色文本
12	`peru`	秘鲁色文本
13	`chocolate`	巧克力色文本
14	`saddlebrown`	鞍棕色文本
15	`sienna`	赭色文本
16	`brown`	棕色文本
17	`darkbrown`	深棕色文本

白色系

白色系

序号	颜色名称	效果
1	`white`	白色文本
2	`snow`	雪白文本
3	`honeydew`	蜜露色文本
4	`mintcream`	薄荷奶油色文本
5	`azure`	天蓝色文本
6	`aliceblue`	爱丽丝蓝文本
7	`ghostwhite`	幽灵白文本
8	`whitesmoke`	烟白文本
9	`seashell`	贝壳白文本
10	`beige`	米色文本
11	`oldlace`	旧蕾丝色文本
12	`floralwhite`	花卉白文本
13	`ivory`	象牙白文本
14	`antiquewhite`	古董白文本
15	`linen`	亚麻色文本

灰色系

灰色系

序号	颜色名称	效果
1	`gainsboro`	浅灰文本
2	`lightgray` / `lightgrey`	亮灰文本
3	`silver`	银灰文本
4	`darkgray` / `darkgrey`	暗灰文本
5	`gray` / `grey`	标准灰文本
6	`dimgray` / `dimgrey`	昏灰文本
7	`lightslategray` / `lightslategrey`	亮岩灰文本
8	`slategray` / `slategrey`	岩灰文本
9	`darkslategray` / `darkslategrey`	暗岩灰文本
10	`black`	纯黑文本

文本缩写

这个短代码只在电脑端生效

新建 abbr.html，内容为：

1<abbr title="{{ .Get "title" }}">{{ .Get "text" }}</abbr>

使用：

1{{< abbr title="感觉很神秘" text="这个短代码只在电脑端生效" >}}

文本折叠

点击显示

让我看看！

新建 detail.html，内容为：

1<details>
2    <summary>{{ (.Get 0) | markdownify }}</summary>
3    {{ .Inner | markdownify }}
4</details>

使用：

1{{< spoiler "点击显示" >}}
2让我看看！
3{{< /spoiler >}}

高斯模糊

手动打码效果

在 custom.scss 中添加：

 1//文本高斯模糊
 2.blur {
 3    color: transparent;
 4    text-shadow:0px 0px 8px var(--card-text-color-main)
 5}
 6 
 7.blur:hover {
 8    color: transparent;
 9    text-shadow:0px 0px 0px var(--card-text-color-main)
10   
11}

使用：

1<span class="blur">手动打码效果</span>

文本黑幕

数据删除！

在 custom.scss 中添加：

 1//文本黑幕效果
 2.shady {
 3    color:#000;
 4    font-weight: bold;
 5    box-shadow: 0px -20px 0px rgba(0,0,0,1) inset; 
 6    transition: all 0.3s ease;
 7}
 8.shady:hover{
 9   font-weight: bold;
10    color:#FFF;
11    box-shadow: 0px -20px 0px rgba(0,0,0,1) inset; 
12}

使用：

1<span class="shady">数据删除！</span>

文字抖动

这是基本的摇晃效果。

这个段落持续摇晃。

新建shake.html，内容为：

 1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css" />
 2
 3<div class="shake {{ .Get "effect" }}">{{ .Inner }}</div>
 4
 5<div class="shake"></div> 
 6<div class="shake shake-hard"></div> 
 7<div class="shake shake-slow"></div> 
 8<div class="shake shake-little"></div> 
 9<div class="shake shake-horizontal"></div> 
10<div class="shake shake-vertical"></div> 
11<div class="shake shake-rotate"></div> 
12<div class="shake shake-opacity"></div> 
13<div class="shake shake-crazy"></div>
14<!-- Freeze the animation at that point when :hover --> 
15<div class="shake shake-freeze"></div> 
16<!-- Continuous animation instead on :hover --> 
17<div class="shake shake-constant"></div>

使用：

1{{< shake effect="shake" >}}这是基本的摇晃效果。{{< /shake >}}

文字渐变

我挑的配色好看吧！

在 custom.scss 中添加：

1//文字颜色渐变
2.colorfulfont {
3    background: linear-gradient(to right, rgb(25, 221, 238), #ed4588); //第一个颜色代码是渐变起始色，第二个颜色代码是渐变结束色；
4    -webkit-background-clip: text;
5    background-clip: text;
6    color: transparent;
7}

使用：

1<font class="colorfulfont"> 我挑的配色好看吧！</font>

文本位置

文字居左

文字居中

文字居右

新建 align.html，内容为：

1<p style="text-align:{{ index .Params 0 }}">{{ index .Params 1 | markdownify }}</p>

使用：

1{{< align left "文字居左" >}}
2{{< align center "文字居中" >}}
3{{< align right "文字居右" >}}

摘录引用

“年复一年，创作的冲动随年衰减，创作的能力逐渐消失——也许两者根本上是一回事，我们常把自己的写作冲动误认为自己的写作才能，自以为要写就意味着会写。”

钱钟书 《围城》重印前记

新建 blockquote.html，内容为：

 1<!-- reset scratch variables at the start -->
 2{{ $.Scratch.Set "bl_author" false }}
 3{{ $.Scratch.Set "bl_source" false }}
 4{{ $.Scratch.Set "bl_link" false }}
 5{{ $.Scratch.Set "bl_title" false }}
 6
 7{{ if .IsNamedParams }}
 8  {{ $.Scratch.Set "bl_author" (.Get "author") }}
 9  {{ $.Scratch.Set "bl_source" (.Get "source") }}
10  {{ $.Scratch.Set "bl_link" (.Get "link") }}
11  {{ $.Scratch.Set "bl_title" (.Get "title") }}
12{{ else }}
13  <!-- for the positional version if any -->
14{{ end }}
15
16<!-- if title is not set explicitly then we need to beautify the link
17     if length of link is more than 32 chars, we will cut it off by 32 and
18     then drop everything after the last / if any and put it in into title -->
19
20{{ with $.Scratch.Get "bl_title" }}
21  <!-- do nothing -->
22{{ else }}
23  {{ with $.Scratch.Get "bl_link" }}    <!-- if link is given -->
24    {{ range last 1 (split ($.Scratch.Get "bl_link" ) "://") }}  <!-- split by :// and then only take the items after it to remove protocol:// -->
25      {{ $.Scratch.Set "title_without_protocol" . }}
26    {{ end }}
27    {{ range last 1 (split ($.Scratch.Get "title_without_protocol" ) "www.")  }} <!-- also remove the www. at the start if any. we are using a second split because all URLS may not start with it -->
28      {{ $.Scratch.Set "title_without_protocol" . }}
29    {{ end }}
30    {{ $.Scratch.Set "bl_title" ($.Scratch.Get "title_without_protocol") }}
31
32    <!-- if link is longer than 32 bytes we should trim it -->
33    {{ if (gt (len ($.Scratch.Get "title_without_protocol") ) 32) }}
34      {{ $title := (slicestr ($.Scratch.Get "title_without_protocol") 0 32) }}   <!-- get the first 32 characters of title_without_protocol -->
35      {{ $split_by_fw_slash := split $title "/" }}   <!-- now split on / because we want to stop after the last forward slash -->
36      {{ $count := (sub (len $split_by_fw_slash) 1) }}   <!-- we want everything but the last part so we adjust the count accordingly -->
37
38      {{ $.Scratch.Set "tempstring" "" }}   <!-- temp variable to hold the concatinated string -->
39      {{ range first $count $split_by_fw_slash  }}  <!-- loop through all parts except last and concat them (add / between halves) -->
40        {{ $.Scratch.Set "tempstring" ( . | printf "%s%s/" ($.Scratch.Get "tempstring") | printf "%s" ) }}
41      {{ end }}
42      {{ $.Scratch.Set "bl_title" ( printf "%s..." ($.Scratch.Get "tempstring") | printf "%s" ) }}
43    {{ end }}
44  {{ end }}
45{{ end }}
46
47<blockquote>
48  <p>{{ .Inner | markdownify }}</p>
49  <footer style="text-align:right">
50    <strong>{{ with $.Scratch.Get "bl_author" }}{{ . }}{{ end }}</strong>
51    {{ with $.Scratch.Get "bl_source" }}
52      <cite>{{ . }}</cite>
53    {{ else }}
54      {{ with $.Scratch.Get "bl_link" }}
55        <cite>
56          <a href="{{ . }}" title="{{ . }}" rel="noopener noreferrer">{{ $.Scratch.Get "bl_title" }}</a> <!-- can't have new lines here -->
57        </cite>
58      {{ else }}
59        {{ with $.Scratch.Get "bl_title" }}
60          <cite>
61            {{ $.Scratch.Get "bl_title" }}</a>
62          </cite>
63        {{ end }}
64      {{ end }}
65    {{ end }}
66  </footer>
67</blockquote>

使用：

1{{< blockquote author="作者" link="#" title="作品名" >}}
2这里写引用内容
3{{< /blockquote >}}

评分样式

新建 rating.html，内容为：

 1<span class="star-rating">
 2    {{- if ge (.Get 0) (.Get 1) -}}
 3        {{- $star_outline := sub (int (.Get 0)) (int (.Get 1)) -}}
 4        {{- range $i, $sequence :=  (seq (.Get 1)) -}}
 5            <i class="star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"/></svg></i>
 6        {{- end -}}
 7        {{- range $i, $sequence :=  (seq $star_outline) -}}
 8            <i class="star-outline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"/></svg></i>
 9        {{- end -}}
10    {{- end -}}
11</span>

在 custom.scss 中添加：

 1//星星评级
 2i.star{
 3    color: hsl(61, 79%, 63%); /*星星的颜色*/
 4  }
 5  
 6  i.star-outline{
 7    color: hsl(211, 31%, 74%);/*空星星的颜色*/
 8  }
 9  
10  i.star svg, i.star-outline svg{
11    width: 20px;
12    fill: currentColor;
13}

使用：

1{{< rating 10 7 >}}

键盘样式

Ctrl+Alt+Del

在 custom.scss 中添加：

 1//键盘标签样式
 2nkbd {
 3  margin: 0 .1em;
 4  padding: .1em .6em;
 5  font-size: .8em;
 6  color: #242729;
 7  background: #fff;
 8  border: 1px solid #adb3b9;
 9  border-radius: 3px;
10  box-shadow: 0px 1px 0 rgba(12, 13, 14, 0.2), 0 0 0 2px #fff inset;
11  white-space: nowrap;
12  vertical-align: middle;
13  font-family: SourceHanSerifSC;
14}

使用：

1<nkbd>Ctrl</nkbd>+<nkbd>Alt</nkbd>+<nkbd>Del</nkbd>

卡片样式

新建 card.html，内容为：

1{{- $raw := (markdownify .Inner | chomp) -}} {{- $block := findRE
2    "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b"
3    $raw 1 -}}
4    <div class="mycard">
5      <div class="content">{{- if or $block (not $raw) }}{{ $raw }}{{ else }} {{ $raw }} {{ end -}}</div>
6    </div>

在 custom.scss 中添加：

 1// 卡片样式
 2.mycard {
 3    padding: 10px 20px;
 4    margin: 20px 0;
 5    border-radius: 4px;
 6    word-break: break-all;
 7    background: #d2e5eb14;
 8    box-shadow: 0 6px 10px 0 #00000033;
 9    .content {
10      line-height: 30px;
11    }
12}

使用：

1{{< card >}}卡片样式{{< /card >}}

仿Github样式

ifanticの小屋

鸳鸯帐里暖芙蓉此生何处不相逢

Hugo

新建 github.html，内容为：

 1<div class="github">
 2    <div class="logo">
 3        {{ replace $.Site.Data.SVG.repository "icon" "icon github-icon" | safeHTML }}
 4        <a class="name" href={{ .Get "link" }} target="_blank">{{ .Get "name" }}</a>
 5    </div>
 6    <div class="description">{{ .Get "description" }}</div>
 7    <div class="language">
 8        <span class="language-color" style="background-color: {{ .Get "color" }}"></span>
 9        <span class="language-name">{{ .Get "language" }}</span>
10    </div>
11</div>

在 custom.scss 中添加：

 1//github样式
 2.github {
 3    border: 1px solid var(--card-text-color-main);
 4    border-radius: 3px;
 5    margin: 0 auto;
 6    margin-bottom: 1em;
 7    padding: 1em;
 8    .github-icon {
 9      width: 1.2em;
10      height: 1.2em;
11      margin-right: 0.5em;
12      margin-bottom: 0.2em;
13      fill: var(--card-text-color-main);
14      transition: all 0.5s;
15    }
16    .name {
17      font-weight: bold;
18      color: #2e97d9;
19      text-decoration: underline;
20      margin-left: 0.5em;
21      position: relative;
22      top: -5px; //加这个属性是因为我的图标和名称无法对齐，实际使用的时候要根据自己的网站修改
23    }
24    .description {
25      margin-top: 0.5em;
26      margin-bottom: 0.5em;
27      color: var(--card-text-color-main);
28      text-align: justify;
29      font-size: 90%;
30      transition: all 0.5s;
31    }
32    .language-color {
33      position: relative;
34      top: 1px;
35      display: inline-block;
36      width: 0.75em;
37      height: 0.75em;
38      border-radius: 50%;
39    }
40    .language-name {
41      color: var(--card-text-color-main);
42      font-size: 90%;
43      margin-left: 0.5em;
44      transition: all 0.5s;
45    }
46}

在 data/SVG.toml 中加入图标（给出的代码是Github自己的图标，我已经换成了自定义的）：

1repository = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/></svg>'

使用：

1{{< github
2  name="链接标题"
3  link="#"
4  description="内容描述"
5  color="#F48201"
6  language="Go"
7>}}

标签块样式

Warning

info

note

tips

新建 notice.html，内容为：

 1<!-- 文件位置：~/layouts/shortcodes/notice.html -->
 2
 3<!--https://github.com/martignoni/hugo-notice-->
 4{{- $noticeType := .Get 0 -}}
 5
 6{{- $raw := (markdownify .Inner | chomp) -}}
 7
 8{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}
 9
10{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon notice-icon") }}
11<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
12    <div class="notice-title">{{ $icon | safeHTML }}</div>
13    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
14</div>

在 custom.scss 中添加：

 1//增加notice短代码
 2.notice {
 3  position:relative;
 4  padding: 1em 1em 1em 2.5em;
 5  margin-bottom: 1em;
 6  border-radius: 4px;
 7  p:last-child {
 8      margin-bottom: 0;
 9  }
10  .notice-title {
11      position: absolute;
12      left: 0.8em;
13      .notice-icon {
14          width: 1.2em;
15          height: 1.2em;
16      }
17  }
18  &.notice-warning {
19      background: hsla(0, 65%, 65%, 0.15);
20      border-left: 5px solid hsl(0, 65%, 65%);
21      .notice-title {
22          color: hsl(0, 65%, 65%);
23      }
24  }
25  &.notice-info {
26      background: hsla(30, 80%, 70%, 0.15);
27      border-left: 5px solid hsl(30, 80%, 70%);
28      .notice-title {
29          color: hsl(30, 80%, 70%);
30      }
31  }
32  &.notice-note {
33      background: hsla(200, 65%, 65%, 0.15);
34      border-left: 5px solid hsl(200, 65%, 65%);
35      .notice-title {
36          color: hsl(200, 65%, 65%);
37      }
38  }
39  &.notice-tip {
40      background: hsla(140, 65%, 65%, 0.15);
41      border-left: 5px solid hsl(140, 65%, 65%);
42      .notice-title {
43          color: hsl(140, 65%, 65%);
44      }
45  }
46}
47
48[data-theme="dark"] .notice {
49  &.notice-warning {
50      background: hsla(0, 25%, 35%, 0.15);
51      border-left: 5px solid hsl(0, 25%, 35%);
52      .notice-title {
53          color: rgba(224, 108, 108, 0.5);
54      }
55  }
56  &.notice-info {
57      background: hsla(30, 25%, 35%, 0.15);
58      border-left: 5px solid hsl(30, 25%, 35%);
59      .notice-title {
60          color: rgba(240, 178, 117, 0.5);
61      }
62  }
63  &.notice-note {
64      background: hsla(200, 25%, 35%, 0.15);
65      border-left: 5px solid hsl(200, 25%, 35%);
66      .notice-title {
67          color: rgba(108, 185, 224, 0.5);
68      }
69  }
70  &.notice-tip {
71      background: hsla(140, 25%, 35%, 0.15);
72      border-left: 5px solid hsl(140, 25%, 35%);
73      .notice-title {
74          color: rgba(108, 224, 147, 0.5);
75      }
76  }
77}

在 data/SVG.toml 中加入：

1# Notice Icon
2notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512" fill="hsl(0, 65%, 65%)"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>'
3notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(30, 80%, 70%)"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
4notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(200, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
5notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(140, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'

使用：

1{{< notice notice-warning >}}
2Warning
3{{< /notice >}}

时间轴

2024

我是萌新

2025

我还是萌新

新建 timeline.html，内容为：

  1{{- $date := .Get "date" -}} {{- $title := .Get "title" -}} {{- $description := .Get "description" -}} {{- $tags := .Get "tags" -}}
  2
  3<div class="timeline__row">
  4    <div class="timeline__time">
  5        <div class="timeline__time">{{ $date }}</div>
  6        <div class="timeline__split-line"></div>
  7    </div>
  8    <div class="timeline__content">
  9        <div class="timeline__tags">
 10            {{- with split $tags ", " -}} {{- range . }}{{- if eq . "样式" }}
 11            <span class="timeline__tag timeline__tag-style">{{ . }}</span> {{- else if eq . "文章" }}
 12            <span class="timeline__tag timeline__tag-article">{{ . }}</span> {{- else if eq . "页面" }}
 13            <span class="timeline__tag timeline__tag-page">{{ . }}</span> {{- else }}
 14            <span class="timeline__tag">{{ . }}</span> {{- end }} {{- end }} {{- end }}
 15        </div>
 16            <div class="timeline__title">{{ $title }}</div>
 17        <div class="timeline__description">
 18            {{ $description }}
 19        </div>
 20    </div>
 21</div>
 22
 23<style>
 24    .timeline {
 25        display: flex;
 26        flex-direction: column;
 27    }
 28    
 29    .timeline__row {
 30        display: flex;
 31        padding-left: 4%;
 32        height: 90px;
 33    }
 34    
 35    .timeline__time {
 36        flex: 0 0 110px;
 37        color: #5d5d5d;
 38        font-size: 17px;
 39        text-transform: uppercase;
 40        position: relative;
 41        display: flex;
 42        flex-direction: column;
 43        align-items: center;
 44        padding: 0.5rem 0;
 45    }
 46    
 47    .timeline__time-text {
 48        margin: 0;
 49    }
 50    
 51    .timeline__split-line {
 52        position: absolute;
 53        top: 0.5rem;
 54        right: -20px;
 55        height: 100%;
 56        width: 2px;
 57        background-color: #84c4e240;
 58        z-index: 0;
 59    }
 60    
 61    .timeline__split-line:before {
 62        content: "";
 63        position: absolute;
 64        top: 24%;
 65        right: -4px;
 66        transform: translateY(-50%);
 67        width: 10px;
 68        height: 10px;
 69        background-color: #c9e5f2;
 70        box-shadow: 0 0 0 4px var(--theme);
 71        border-radius: 50%;
 72        border: 0px solid #84c4e2;
 73        z-index: -1;
 74    }
 75    
 76    .timeline__content {
 77        flex: 1;
 78        margin-left: 4.5rem;
 79        padding: 0.5rem 0 1.2rem 0;
 80    }
 81    
 82    .timeline__title {
 83        margin: 0;
 84        margin-bottom: 2px;
 85        padding-top: 3px;
 86        margin-left: 0.5rem;
 87        color: var(--content);
 88        font-family: var(--font-family-teshu);
 89        font-size: 19px;
 90        font-weight: 600;
 91        width: fit-content;
 92        display: inline-block;
 93        vertical-align: middle;
 94        /* 垂直居中对齐 */
 95    }
 96    
 97    .timeline__tags {
 98        display: inline-block;
 99        padding: 0;
100        margin-left: 0.3rem;
101        align-items: center;
102        gap: 0.3rem;
103    }
104    
105    .timeline__tag {
106        display: inline-block;
107        color: var(--secondary);
108        background-color: #84c4e230;
109        border: 1.5px solid #84c4e230;
110        border-radius: 999px;
111        padding: 0rem 0.5rem;
112        font-size: 12px;
113        white-space: nowrap;
114        line-height: 1.4rem;
115        opacity: 0.8;
116        vertical-align: middle;
117        /* 垂直居中对齐 */
118    }
119    
120    .timeline__description {
121        font-size: 15px;
122        line-height: 1.6;
123        color: #5d5d5d;
124        overflow: hidden;
125        text-overflow: ellipsis;
126        margin: 0.5rem 0 0.4rem 1.5rem;
127        /* 添加 1.5rem 的左侧内边距 */
128    }
129    /* 为类名为 "timeline__tag-style" 的标签定义颜色 */
130    
131    .timeline__tag-style {
132        background-color: #c581da;
133        /* 替换为你希望的颜色 */
134        border-color: #c581da;
135        /* 与背景色相同或不同，根据需要自定义 */
136        color: #FFFFFF;
137        /* 根据需要选择文本颜色 */
138    }
139    /* 为类名为 "timeline__tag-article" 的标签定义颜色 */
140    
141    .timeline__tag-article {
142        background-color: #92d392;
143        /* 替换为你希望的颜色 */
144        border-color: #92d392;
145        /* 与背景色相同或不同，根据需要自定义 */
146        color: #000000;
147        /* 根据需要选择文本颜色 */
148    }
149    /* 为类名为 "timeline__tag-page" 的标签定义颜色 */
150    
151    .timeline__tag-page {
152        background-color: #707070;
153        /* 替换为你希望的颜色 */
154        border-color: #707070;
155        /* 与背景色相同或不同，根据需要自定义 */
156        color: #FFFFFF;
157        /* 根据需要选择文本颜色 */
158    }
159    
160    @media screen and (max-width: 768px) {
161        .timeline__time {
162            font-size: 14px;
163            /* 在小屏幕上使用较小的字体大小 */
164        }
165        .timeline__title {
166            font-size: 16px;
167            /* 在小屏幕上使用较小的字体大小 */
168        }
169        .timeline__description {
170            font-size: 14px;
171            /* 在小屏幕上使用较小的字体大小 */
172        }
173    }
174</style>

使用：

1{{< timeline date="2024" title="First Time" description="我是萌新" tags="past"  >}}{{< timeline date="2025" title="Second Time" description="我还是萌新" tags="now"  >}}

图片轮播

新建 imgloop.html，内容为：

 1{{ if .Site.Params.enableimgloop }}
 2    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
 3    <!-- Swiper -->
 4    <div class="swiper-container">
 5        <div class="swiper-wrapper">
 6            {{$itItems := split (.Get 0) ","}}
 7            {{range $itItems }}
 8            <div class="swiper-slide">
 9                <img src="{{.}}" alt="">
10            </div>
11            {{end}}
12        </div>
13        <!-- Add Pagination -->
14        <div class="swiper-pagination"></div>
15    </div>
16
17    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
18     <!-- Initialize Swiper -->
19     <script>
20        var swiper = new Swiper('.swiper-container', {
21            pagination: '.swiper-pagination',
22            paginationClickable: true,
23        //自动调节高度
24        autoHeight: true,
25        //键盘左右方向键控制
26        keyboardControl : true,
27        //鼠标滑轮控制
28        mousewheelControl : true,
29        //自动切换
30        //autoplay : 5000,
31        //懒加载
32        lazyLoading : true,
33		lazyLoadingInPrevNext : true,
34		//无限循环
35		loop : true,
36        });
37        </script>
38{{ end }}

在 custom.scss 中添加：

 1//图片轮播
 2.swiper-container {
 3    max-width: 820px;
 4    margin: 2em auto;
 5}
 6.swiper-slide {
 7    text-align: center;
 8    font-size: 18px;
 9    background-color: #fff;
10    /* Center slide text vertically */
11    display: flex;
12    justify-content: center;
13    align-items: center;
14    img {
15        margin: 0 !important;
16    }
17}

在 config.yaml 找到 params:，添加 enableimgloop: true。
使用：

1{{< imgloop "1.jpg,2.jpg,3.jpg" >}}

瀑布流相册

新建 gallery.html，内容为：

 1{{ $baseURL := .Site.BaseURL }}
 2{{- with (.Get 0) -}}
 3{{- $files := readDir (print "/static/" .) }}
 4<div class="gallery-photos">
 5  {{- range (sort $files "Name" "asc") -}}
 6    {{- if ( .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)") }}
 7    {{- $linkURL := print $baseURL "/" ($.Get 0) "/" .Name | absURL }}
 8    <div class="gallery-photo">
 9      <img class="photo-img" loading='lazy' decoding="async" src="{{  $linkURL  }}" alt="{{ .Name }}" />
10      <span class="photo-title">{{ .Name | replaceRE "\\..*" ""}}</span>
11    </div>
12    {{- end }}
13  {{- end }}
14</div>
15{{- end }}

在 layouts/partials/footer/custom.html 中插入：

 1<!-- 瀑布流相册 -->
 2<script src="https://immmmm.com/waterfall.min.js"></script>
 3<script src="https://immmmm.com/imgStatus.min.js"></script>
 4<script>
 5document.addEventListener('DOMContentLoaded', () => {
 6  //外链 gallery 标签相册瀑布流
 7  var photosAll = document.getElementsByTagName('gallery') || '';
 8  if(photosAll){
 9    for(var i=0;i < photosAll.length;i++){
10      photosAll[i].innerHTML = '<div class="gallery-photos">'+photosAll[i].innerHTML+'</div>'
11      var photosIMG = photosAll[i].getElementsByTagName('img')
12      for(var j=0;j < photosIMG.length;j++){
13        wrap(photosIMG[j], document.createElement('div'));
14      }
15    }
16  }
17  function wrap(el, wrapper) {
18    wrapper.className = "gallery-photo";
19    el.parentNode.insertBefore(wrapper, el);
20    wrapper.appendChild(el);
21  }
22  //相册瀑布流
23  let galleryPhotos = document.querySelectorAll('.gallery-photos') || ''
24  if(galleryPhotos){
25    imgStatus.watch('.gallery-photo img', function(imgs) {
26      if(imgs.isDone()){
27        for(var i=0;i < galleryPhotos.length;i++){
28          waterfall(galleryPhotos[i]);
29          let pagePhoto = galleryPhotos[i].querySelectorAll('.gallery-photo');
30          for(var j=0;j < pagePhoto.length;j++){pagePhoto[j].className += " visible"};
31        }
32      }
33    });
34    window.addEventListener('resize', function () {
35      for(var i=0;i < galleryPhotos.length;i++){
36        waterfall(galleryPhotos[i]);
37      }
38    });
39  }
40});
41</script>

在 layouts/partials/head/custom.html 中插入：

 1<style>
 2  .gallery-photos{width:100%;break-inside: avoid;margin-bottom: 10px;}
 3  .gallery-photo{width:33.3%;position: relative;padding:0px 4px 0px 4px;visibility: hidden;overflow: hidden;}
 4  .gallery-photo.visible{visibility: visible;}
 5  .gallery-photo img{width: 100%;height: 100%;object-fit: cover;border-radius: 5px;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);}
 6  @media screen and (min-width: 1200x) {
 7    .gallery-photo{
 8    width: 100%;
 9    columns: 3;
10    column-gap: 20px;
11    }
12  }
13  @media screen and (min-width: 860px) and (max-width: 1323.98px) {
14    .gallery-photo{    
15    width: 100%;
16    columns: 2;
17    column-gap: 20px;}
18  }
19  @media screen and (max-width: 860px) {
20    .gallery-photo{    
21    width: 100%;
22    columns: 1;}
23  }
24  @media (max-width: 767.98px){
25    .photo-time{display: none;}
26  }
27</style>

使用：

1<gallery>![](https://www.sleepymoon.cyou/2023/hugo-shortcodes/2.jpg)![](https://www.sleepymoon.cyou/2023/hugo-shortcodes/1.jpg)</gallery>

PDF/PPT插入

嵌入PDF

新建 pdf.html，内容为：

 1<div class="pdf" style="
 2    padding-bottom: 66%;
 3    position: relative;
 4    display: block;
 5    width: 100%;
 6    border-bottom: 5px solid;
 7">
 8    <iframe
 9        width="100%"
10        height="100%"
11        src="{{ .Get "src" }}"
12        frameborder="0"
13        allowfullscreen=""
14        style="
15            position: absolute;
16            top: 0;
17            left: 0" >
18    </iframe>
19</div>

使用：

1{{< pdf src="https://www.blatchingtonmill.org.uk/assets/Uploads/All-Of-Me-Sheet-Music-John-Legend-All-Of-Me-Piano-Sheet-Music-Medium-Vocals-Piano-Guitar.pdf" >}}

手动输入NeoDB条目

《八度空间》 [台] 周杰伦

< 9.2 >

歌曲可以拥有与电影媲美的叙事性吗？在短短四分钟左右的歌曲里，43 分钟的专辑《八度空间》中，周杰伦用旺盛的创作力和狂想尝试构建出这样的“空间”。“八度空间”意指西方的八度音阶，在看似局限的音乐空间中，周杰伦用他平时从电影和 MV 得来的灵感，给每首歌曲赋予了情节，打造没有维度限制的音乐异想世界。

Album

新建 book.html，内容为：

 1<div class="db-card">
 2    <div class="db-card-subject">
 3        <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ .Get "image" }}"></div>
 4        <div class="db-card-content">
 5            <div class="db-card-title"><a href="{{ .Get "url" }}" class="cute" target="_blank" rel="noreferrer">{{ .Get "title" }}</a></div>
 6            <div class="rating">
 7                <span class="rating_nums"></span><span class="allstardark"><span class="allstarlight" style="width:{{ .Get "rate" }}0%"></span></span><span class="rating_float"></span></span>
 8                <span class="rating_float">< {{ .Get "rate_float" }} ></span>
 9            </div>
10            <div class="db-card-abstract">{{ .Get "brief" }}</div>
11        </div>
12        <div class="db-card-cate">{{ .Get "tag" }}</div>
13    </div>
14</div>

在 custom.scss 中添加：

 1/* db-card -------- start*/
 2.db-card{margin:2.5rem 3rem;background:var(--card-background);border-radius: 7px;box-shadow: 0 6px 10px 0 #00000053;margin-left:auto;margin-right:auto;}
 3.db-card-subject{display: flex;align-items:flex-start;line-height:1.6;padding:12px;position:relative;}
 4.dark .db-card{background:var(--card-background);}
 5.db-card-content {flex:1 1 auto;}
 6.db-card-post {width: 100px;margin-right: 15px;display: flex;flex: 0 0 auto;}
 7.db-card-title {margin-bottom: 3px;font-size: 14px;color: var(--card-text-color-main);;}
 8.db-card-title a{text-decoration: none!important}
 9.db-card-abstract,.db-card-comment{font-size:13px;overflow: auto;max-height:10rem;color: var(--card-text-color-main);;}
10.db-card-cate{position: absolute;top:0;right:0;background:#f99b01;padding:1px 8px;font-size:small;font-style:italic;border-radius:0 8px 0 8px;text-transform:capitalize;}
11.db-card-post img{width: 100px!important;height: 150px!important;border-radius: 4px;-o-object-fit: cover;object-fit: cover;}
12.rating{margin: 0 0 5px;font-size:13px;line-height: 1;display: flex;align-items: center;}
13.rating .allstardark{position:relative;color: #f99b01;height: 16px;width: 80px;background-size: auto 100%;margin-right: 8px;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
14}
15.rating .allstarlight{position: absolute;left: 0;color: #f99b01;height:16px;overflow: hidden;background-size: auto 100%;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);}
16@media (max-width:550px) {
17	.db-card{margin:0.8rem 1rem;}
18	.db-card-comment{display: none;}
19}
20/* db-card -------- end */

使用：

1{{< book url="#" image="1.png" title="《JAY》 [台] 周杰倫" rate="9" rate_float="9.2" brief="text" tag="Album" >}}

居中引用

人生代代无穷已，江月年年望相似。
不知江月待何人，但见长江送流水。

新建 quote-center.html，内容为：

1<div class="quote-center">
2  {{- $content := .Inner | markdownify -}} 
3  {{- if not (strings.HasPrefix $content "<p>") }} 
4    {{ printf `</p><p>%s</p>` $content | safeHTML }} 
5  {{- else }} 
6    {{- $content }} 
7  {{- end -}}
8</div>

在 custom.scss 中添加：

 1.quote-center {
 2  background-color:#84c4e230!important;
 3  position: relative;
 4  border-left: none;
 5  padding-left: 0;
 6  padding: 20px!important;
 7  border-radius: 5px!important;
 8  border-top: 0px solid var(--color-markdown-blockquote-border);
 9  border-bottom: 0px solid var(--color-markdown-blockquote-border);
10  p {
11    text-align: center !important;
12    margin-top: 1.5em!important;
13    margin-bottom: 1.5em!important;
14    font-weight: bold;
15  }
16  &::before {
17    position: absolute;
18    left: 0;
19    content: '“---';
20    color: #8aa2d3;
21    font-size: 2.5em;
22    font-weight: normal;
23    margin-top: -5%;
24    margin-left: 1%;
25    height: 90%;
26  }
27  &::after {
28    position: absolute;
29    right: 0;
30    content: '---”';
31    color: #8aa2d3;
32    font-size: 2.5em;
33    font-weight: normal;
34    margin-top: -6%;
35    margin-right: 1%;
36    height: 90%;
37  }
38}

使用：

1{{< quote-center >}}
2人生代代无穷已，江月年年望相似。<br>不知江月待何人，但见长江送流水。
3{{< /quote-center >}}

古书排版

沧海一声笑
滔滔两岸潮
浮沉随浪
只记今朝
苍天笑
纷纷世上潮
谁负谁胜出
天知晓
江山笑
烟雨遥
涛浪淘尽红尘俗世
几多娇
清风笑
竟惹寂寥
豪情还剩了一襟晚照
苍生笑
不再寂寥
豪情仍在痴痴笑笑

新建 verticaltext.html，内容为：

 1<style>
 2.mainvlr {
 3  margin:20px;
 4  font-size: 20px;
 5  letter-spacing: 2px;
 6}
 7
 8.vlr{
 9  writing-mode: vertical-lr;
10}
11
12.vrl{
13  writing-mode: vertical-rl;
14  unicode-bidi: bidi-override;
15  border: 1px solid;
16  padding: 5px;
17  margin: 5px;
18  margin-right: 5px;
19  word-wrap: break-word;
20  overflow-y:auto;
21  height: {{ .Get "height" | default "500" }}px;
22  width: 100%;
23}
24</style>
25
26<div class="vrl" id="vrlmain">
27
28<div class="mainvlr">
29
30{{ .Inner | markdownify }}
31
32</div>
33
34</div>
35
36<script>
37window.scrollTo(document.body.scrollWidth - 500, 0);
38</script>

使用：（默认高度为500px，可以自定义）

1{{< verticaltext height="300px" >}}
2沧海一声笑
3滔滔两岸潮
4{{< /verticaltext >}}

对话样式

John Doe 2023-09-12 14:30

这是左边的消息内容。

2023-09-12 14:45 Alice

这是右边的消息内容。你好呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀

新建 chat.html，内容为：

  1{{ if eq (.Get "position") "left" }}
  2<div class="chat --other">
  3    <div class="chat__inner">
  4        <div class="chat__meta">{{ .Get "name" }}&nbsp;&nbsp;&nbsp;{{ .Get "timestamp" }}</div>
  5        <div class="chat__text">
  6            {{ .Inner }}
  7        </div>
  8    </div>
  9</div>
 10{{ else if eq (.Get "position") "right" }}
 11<div class="chat --self">
 12    <div class="chat__inner">
 13        <div class="chat__meta" style="text-align: right;">{{ .Get "timestamp" }}&nbsp;&nbsp;&nbsp;{{ .Get "name" }}</div>
 14        <div class="chat__text">
 15            {{ .Inner }}
 16        </div>
 17    </div>
 18</div>
 19{{ end }}
 20
 21<style>
 22    .chat {
 23        margin: 10px;
 24        padding: 10px;
 25        position: relative;
 26        /* 添加相对定位，以便定位尖角箭头 */
 27        transition: transform 0.2s;
 28        /* 添加过渡效果，使放大平滑 */
 29        max-width: 80%;
 30        min-width: 15%;
 31    }
 32    
 33    .chat:hover {
 34        transform: scale(1.05);
 35    }
 36    
 37    .chat.--self {
 38        text-align: left;
 39        background-color: #ecf5ff;
 40        color: #000000;
 41        border-radius: 15px;
 42        width: fit-content;
 43        margin-left: auto;
 44    }
 45    /* 尖角箭头 */
 46    
 47    .chat.--self::before {
 48        content: "";
 49        position: absolute;
 50        right: -18px;
 51        /* 调整箭头位置 */
 52        bottom: 5px;
 53        transform: translateY(-50%);
 54        border-width: 15px 0 0 20px;
 55        border-style: solid;
 56        border-color: transparent transparent transparent #ecf5ff;
 57        /* 箭头颜色与对话框背景颜色一致 */
 58    }
 59    /* 左边对话框样式 */
 60    
 61    .chat.--other {
 62        text-align: left;
 63        background-color: #ffecec;
 64        color: #333;
 65        border-radius: 15px;
 66        position: relative;
 67        width: fit-content;
 68    }
 69    /* 左边对话框的尖角箭头 */
 70    
 71    .chat.--other::before {
 72        content: "";
 73        position: absolute;
 74        left: -18px;
 75        bottom: 5px;
 76        transform: translateY(-50%);
 77        border-width: 15px 20px 0 0;
 78        border-style: solid;
 79        border-color: transparent #ffecec transparent transparent;
 80    }
 81    /* 消息元数据样式（名称和时间戳） */
 82    
 83    .chat__meta {
 84        font-weight: bold;
 85        font-size: 0.67em;
 86        color: #707070;
 87        margin-bottom: 5px;
 88    }
 89    /* 消息文本样式 */
 90    
 91    .chat__text {
 92        font-size: 0.9em;
 93        margin-left: 10px;
 94        word-break: break-all;
 95    }
 96    
 97    [data-scheme="dark"] {
 98        .chat.--self {
 99            color: #fefefe;
100            background-color: #253958;
101        }
102        .chat.--self::before {
103            border-color: transparent transparent transparent #253958;
104        }
105        .chat.--other {
106            color: #fefefe;
107            background-color: #1a1a1a;
108        }
109        .chat.--other::before {
110            border-color: transparent #1a1a1a transparent transparent;
111        }
112        .chat__meta {
113            color: #b1b1b1;
114        }
115    }
116</style>

使用：

1{{< chat position="left" name="John Doe" timestamp="2023-09-12 14:30" >}}这是左边的消息内容。{{< /chat >}}
2{{< chat position="right" name="Alice" timestamp="2023-09-12 14:45" >}}这是右边的消息内容。{{< /chat >}}

脚注

第一层引用¹

第二层引用²

第三层引用³

单独引用²

新建 layouts/shortcodes/inner.html，内容为：

1{{ .Inner }}

新建 layouts/shortcodes/outer.html，内容为：

1{{ .Inner }}

使用：（outer 是外层引用或用作单独脚注，inner仅用作内部嵌套的脚注）

 1{{% outer %}}
 2footnote[^1]
 3{{< inner >}}
 4footnote[^2]
 5{{< /inner >}}
 6{{% /outer %}}
 7
 8...
 9...
10
11[^1]: footnote 1
12[^2]: footnote 2

简化版引用

十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。

新建 simple-notice.html，内容为：

 1<!-- 文件位置：~/layouts/shortcodes/notice.html -->
 2
 3<!--https://github.com/martignoni/hugo-notice-->
 4{{- $noticeType := .Get 0 -}}
 5
 6{{- $raw := (markdownify .Inner | chomp) -}}
 7
 8{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}
 9
10{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon simple-notice-icon") }}
11<div class="simple-notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
12    <div class="simple-notice-title">{{ $icon | safeHTML }}</div>
13    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
14</div>

在 custom.scss 中添加：

  1// 文件位置：~/assets/scss/custom.scss
  2
  3.simple-notice {
  4    position:relative;
  5    padding: 1em 0 1em 2em;
  6    margin-bottom: 1em;
  7    transition: all .5s;
  8    p:last-child {
  9        margin-bottom: 0;
 10    }
 11    .simple-notice-title {
 12        position: absolute;
 13        left: 0.8em;
 14        .simple-notice-icon {
 15            width: 1em;
 16            height: 1em;
 17            margin-left: -0.8em;
 18        }
 19    }
 20    &.simple-notice-warning {
 21        border-top: 2px solid hsl(0, 100%, 35%);
 22        color: hsl(0, 100%, 35%);
 23        .simple-notice-title {
 24            color: hsl(0, 100%, 35%);
 25        }
 26        a {
 27            color: hsl(0, 100%, 35%);
 28            text-decoration-color: hsl(0, 100%, 35%);
 29        }
 30    }
 31    &.simple-notice-info {
 32        border-top: 2px solid hsl(40, 80%, 45%);
 33        color: hsl(40, 80%, 45%);
 34        .simple-notice-title {
 35            color: hsl(40, 80%, 45%);
 36        }
 37        a {
 38            color: hsl(40, 80%, 45%);
 39            text-decoration-color: hsl(40, 80%, 45%);
 40        }
 41    }
 42    &.simple-notice-note {
 43        border-top: 2px solid hsl(210, 100%, 25%);
 44        color: hsl(210, 100%, 25%);
 45        .simple-notice-title {
 46            color: hsl(210, 100%, 25%);
 47        }
 48        a {
 49            color: hsl(210, 100%, 25%);
 50            text-decoration-color: hsl(210, 100%, 25%);
 51        }
 52    }
 53    &.simple-notice-tip {
 54        border-top: 2px solid hsl(150, 100%, 25%);
 55        color: hsl(150, 100%, 25%);
 56        .simple-notice-title {
 57            color: hsl(150, 100%, 25%);
 58        }
 59        a {
 60            color: hsl(150, 100%, 25%);
 61            text-decoration-color: hsl(150, 100%, 25%);
 62        }
 63    }
 64}
 65
 66[data-theme="dark"] .simple-notice {
 67    &.simple-notice-warning {
 68        border-top: 2px solid hsl(0, 65%, 65%);
 69        color: hsl(0, 65%, 65%);
 70        .simple-notice-title {
 71            color: hsl(0, 65%, 65%);
 72        }
 73        a {
 74            color: hsl(0, 65%, 65%);
 75            text-decoration-color: hsl(0, 65%, 65%);
 76        }
 77    }
 78    &.simple-notice-info {
 79        border-top: 2px solid hsl(30, 80%, 70%);
 80        color: hsl(30, 80%, 70%);
 81        .simple-notice-title {
 82            color: hsl(30, 80%, 70%);
 83        }
 84        a {
 85            color: hsl(30, 80%, 70%);
 86            text-decoration-color: hsl(30, 80%, 70%);
 87        }
 88    }
 89    &.simple-notice-note {
 90        border-top: 2px solid hsl(200, 65%, 65%);
 91        color: hsl(200, 65%, 65%);
 92        .simple-notice-title {
 93            color: hsl(200, 65%, 65%);
 94        }
 95        a {
 96            color: hsl(200, 65%, 65%);
 97            text-decoration-color: hsl(200, 65%, 65%);
 98        }
 99    }
100    &.simple-notice-tip {
101        border-top: 2px solid hsl(140, 65%, 65%);
102        color: hsl(140, 65%, 65%);
103        .simple-notice-title {
104            color: hsl(140, 65%, 65%);
105        }
106        a {
107            color: hsl(140, 65%, 65%);
108            text-decoration-color: hsl(140, 65%, 65%);
109        }
110    }
111}

在 data/SVG.toml 中插入图标：

1# 文件位置：~/data/SVG.toml
2
3# Notice Icon
4simple-notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M114.57 76.07a45.71 45.71 0 00-67.51-6.41c-17.58 16.18-19 43.52-4.75 62.77l91.78 123-92.33 124.15c-14.23 19.25-13.11 46.59 4.74 62.77a45.71 45.71 0 0067.5-6.41L242.89 262.7a12.14 12.14 0 000-14.23zm355.67 303.51l-92.33-124.13 91.78-123c14.22-19.25 12.83-46.59-4.75-62.77a45.71 45.71 0 00-67.51 6.41l-128 172.12a12.14 12.14 0 000 14.23L398 435.94a45.71 45.71 0 0067.51 6.41c17.84-16.18 18.96-43.52 4.73-62.77z"/></svg>'
5simple-notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 192 512"><path d="M176 432c0 44.11-35.89 80-80 80s-80-35.89-80-80 35.89-80 80-80 80 35.89 80 80zM25.26 25.2l13.6 272A24 24 0 0062.83 320h66.34a24 24 0 0023.97-22.8l13.6-272A24 24 0 00142.77 0H49.23a24 24 0 00-23.97 25.2z"/></svg>'
6simple-notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 192 512"><path d="M20 424.23h20V279.77H20a20 20 0 01-20-20V212a20 20 0 0120-20h112a20 20 0 0120 20v212.23h20a20 20 0 0120 20V492a20 20 0 01-20 20H20a20 20 0 01-20-20v-47.77a20 20 0 0120-20zM96 0a72 72 0 100 144A72 72 0 0096 0z"/></svg>'
7simple-notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M173.9 439.4L7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.69l240.1-240.1c10-10 26.2-10 36.2 0l36.2 36.21c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0z"/></svg>'

使用：

1{{< simple-notice simple-notice-warning >}}
2十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
3{{< /simple-notice >}}

荧光标注

红色萤光笔橙色萤光笔黄色萤光笔绿色萤光笔蓝色萤光笔紫色萤光笔

新建 setSwlColor.html，内容为：

1{{ $color := default "mark_blue" (.Get "color") }}<span class='swl-marker {{ $color }}'>{{ .Inner }}</span>

在 custom.scss 中添加：

 1.swl-marker {
 2    display: inline;
 3    padding: 2px;
 4}
 5
 6.mark_blue {
 7    background: -webkit-linear-gradient(transparent 64%, #b7e3ff 0%);
 8    background: linear-gradient(transparent 64%, #b7e3ff 0%)
 9}
10
11.mark_green {
12    background: -webkit-linear-gradient(transparent 64%, #bdf9c3 0%);
13    background: linear-gradient(transparent 64%, #bdf9c3 0%);
14}
15
16.mark_yellow {
17    background: -webkit-linear-gradient(transparent 64%, #fcf69f 0%);
18    background: linear-gradient(transparent 64%, #fcf69f 0%)
19}
20
21.mark_orange {
22    background: -webkit-linear-gradient(transparent 64%, #ffddbc 0%);
23    background: linear-gradient(transparent 64%, #ffddbc 0%)
24}
25
26.mark_red {
27    background: -webkit-linear-gradient(transparent 64%, #dfa1a1 0%);
28    background: linear-gradient(transparent 64%, #dfa1a1 0%)
29}

使用：

1{{< setSwlColor color="mark_blue" >}}蓝色萤光笔{{< /setSwlColor >}}

警告框

标注

摘要

信息

提示

成功

疑问

警告

失败

危险

漏洞

范例

引用

新建 admonition.html，内容为：

 1{{- /* 使用方法 {{< admonition type=tip title="小标题" open=false >}}内容{{< /admonition >}}，其中type支持note, abstract, info, tip, success, question, warning, failure, danger, bug, example, quote， open表示默认是否为展开状态 */ -}}
 2{{- $inner := .Inner | .Page.RenderString -}}
 3
 4{{- $iconMap := dict "note" "fas fa-pencil-alt fa-fw" -}}
 5{{- $iconMap  = dict "abstract" "fas fa-list-ul fa-fw" | merge $iconMap -}}
 6{{- $iconMap  = dict "info" "fas fa-info-circle fa-fw" | merge $iconMap -}}
 7{{- $iconMap  = dict "tip" "fas fa-lightbulb fa-fw" | merge $iconMap -}}
 8{{- $iconMap  = dict "success" "fas fa-check-circle fa-fw" | merge $iconMap -}}
 9{{- $iconMap  = dict "question" "fas fa-question-circle fa-fw" | merge $iconMap -}}
10{{- $iconMap  = dict "warning" "fas fa-exclamation-triangle fa-fw" | merge $iconMap -}}
11{{- $iconMap  = dict "failure" "fas fa-times-circle fa-fw" | merge $iconMap -}}
12{{- $iconMap  = dict "danger" "fas fa-skull-crossbones fa-fw" | merge $iconMap -}}
13{{- $iconMap  = dict "bug" "fas fa-bug fa-fw" | merge $iconMap -}}
14{{- $iconMap  = dict "example" "fas fa-list-ol fa-fw" | merge $iconMap -}}
15{{- $iconMap  = dict "quote" "fas fa-quote-right fa-fw" | merge $iconMap -}}
16{{- $iconDetails := "fas fa-angle-right fa-fw" -}}
17
18{{- if .IsNamedParams -}}
19    {{- $type := .Get "type" | default "note" -}}
20    <div class="details admonition {{ $type }}{{ if .Get `open` | ne false }} open{{ end }}">
21        <div class="details-summary admonition-title">
22            <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
23        </div>
24        <div class="details-content">
25            <div class="admonition-content">
26                {{- $inner -}}
27            </div>
28        </div>
29    </div>
30{{- else -}}
31    {{- $type := .Get 0 | default "note" -}}
32    <div class="details admonition {{ $type }}{{ if .Get 2 | ne false }} open{{ end }}">
33        <div class="details-summary admonition-title">
34            <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
35        </div>
36        <div class="details-content">
37            <div class="admonition-content">
38                {{- $inner -}}
39            </div>
40        </div>
41    </div>
42{{- end -}}

在 custom.scss 中添加：

  1/*!
  2 * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
  3 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  4 */
  5 .fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-bacteria:before{content:"\e059"}.fa-bacterium:before{content:"\e05a"}.fa-bahai:before{content:"\f666"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-box-tissue:before{content:"\e05b"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudflare:before{content:"\e07d"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dailymotion:before{content:"\e052"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-deezer:before{content:"\e077"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-disease:before{content:"\f7fa"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edge-legacy:before{content:"\e078"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-faucet:before{content:"\e005"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\e007"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-pay:before{content:"\e079"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guilded:before{content:"\e07e"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-holding-water:before{content:"\f4c1"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-sparkles:before{content:"\e05d"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-hands-wash:before{content:"\e05e"}.fa-handshake:before{content:"\f2b5"}.fa-handshake-alt-slash:before{content:"\e05f"}.fa-handshake-slash:before{content:"\e060"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-hdd:before{content:"\f0a0"}.fa-head-side-cough:before{content:"\e061"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-head-side-mask:before{content:"\e063"}.fa-head-side-virus:before{content:"\e064"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hive:before{content:"\e07f"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hospital-user:before{content:"\f80d"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-house-user:before{content:"\e065"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-ideal:before{content:"\e013"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-innosoft:before{content:"\e080"}.fa-instagram:before{content:"\f16d"}.fa-instagram-square:before{content:"\e055"}.fa-instalod:before{content:"\e081"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-house:before{content:"\e066"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lungs:before{content:"\f604"}.fa-lungs-virus:before{content:"\e067"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microblog:before{content:"\e01a"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mixer:before{content:"\e056"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-octopus-deploy:before{content:"\e082"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-arrows:before{content:"\e068"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-perbyte:before{content:"\e083"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\e01e"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-plane-slash:before{content:"\e069"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pump-medical:before{content:"\e06a"}.fa-pump-soap:before{content:"\e06b"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-rust:before{content:"\e07a"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-shield-virus:before{content:"\e06c"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopify:before{content:"\e057"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sink:before{content:"\e06d"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-soap:before{content:"\e06e"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-stopwatch-20:before{content:"\e06f"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-store-alt-slash:before{content:"\e070"}.fa-store-slash:before{content:"\e071"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-tiktok:before{content:"\e07b"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\e041"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-uncharted:before{content:"\e084"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\e049"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-unsplash:before{content:"\e07c"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-users-slash:before{content:"\e073"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-vest:before{content:"\e085"}.fa-vest-patches:before{content:"\e086"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-virus:before{content:"\e074"}.fa-virus-slash:before{content:"\e075"}.fa-viruses:before{content:"\e076"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-watchman-monitoring:before{content:"\e087"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wodu:before{content:"\e088"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(/font/fa/fa-brands-400.eot);src:url(/font/fa/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(/font/fa/fa-brands-400.woff2) format("woff2"),url(/font/fa/fa-brands-400.woff) format("woff"),url(/font/fa/fa-brands-400.ttf) format("truetype"),url(/font/fa/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(/font/fa/fa-regular-400.eot);src:url(/font/fa/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(/font/fa/fa-regular-400.woff2) format("woff2"),url(/font/fa/fa-regular-400.woff) format("woff"),url(/font/fa/fa-regular-400.ttf) format("truetype"),url(/font/fa/fa-regular-400.svg#fontawesome) format("svg")}.fab,.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(/font/fa/fa-solid-900.eot);src:url(/font/fa/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(/font/fa/fa-solid-900.woff2) format("woff2"),url(/font/fa/fa-solid-900.woff) format("woff"),url(/font/fa/fa-solid-900.ttf) format("truetype"),url(/font/fa/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}
  6
  7.details .details-summary:hover {
  8  cursor: pointer;
  9}
 10.details i.details-icon {
 11color: var(--content);
 12-webkit-transition: transform 0.2s ease;
 13-moz-transition: transform 0.2s ease;
 14-o-transition: transform 0.2s ease;
 15transition: transform 0.2s ease;
 16}
 17[class=dark] .details i.details-icon {
 18color: var(--content);
 19}
 20.details .details-content {
 21max-height: 0;
 22overflow-y: hidden;
 23word-wrap: break-word;
 24overflow-x: hidden;
 25-webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) 0s;
 26-moz-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) 0s;
 27-o-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) 0s;
 28transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) 0s;
 29}
 30.details.open i.details-icon {
 31-webkit-transform: rotate(90deg);
 32-moz-transform: rotate(90deg);
 33-ms-transform: rotate(90deg);
 34-o-transform: rotate(90deg);
 35transform: rotate(90deg);
 36}
 37.details.open .details-content {
 38max-height: 12000px;
 39-webkit-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
 40-moz-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
 41-o-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
 42transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
 43overflow-x: hidden;
 44}
 45
 46.admonition {
 47  position: relative;
 48  margin: 1rem 0;
 49  padding: 0 0.75rem;
 50  background-color: rgba(68, 138, 255, 0.1);
 51  border-left: 0.25rem solid #448aff;
 52  border-radius: 8px;
 53  overflow: auto;
 54}
 55.admonition .admonition-title {
 56  font-weight: bold;
 57  margin: 0 -0.75rem;
 58  padding: 0.25rem 3rem;
 59  border-radius: 7px;
 60  border-bottom: 1px solid rgba(68, 138, 255, 0.1);
 61  background-color: rgba(68, 138, 255, 0.25);
 62}
 63.admonition.open .admonition-title {
 64  background-color: rgba(68, 138, 255, 0.1);
 65}
 66.admonition .admonition-content {
 67  padding: 0.5rem 0;
 68}
 69.admonition i.icon {
 70  font-size: 1.45rem;
 71  color: #448aff;
 72  position: absolute;
 73  top: 1.25rem;
 74  left: 0.65rem;
 75}
 76.admonition i.details-icon {
 77  position: absolute;
 78  top: 0.9rem;
 79  right: 0.5rem;
 80}
 81.admonition.note {
 82  border-left-color: #448aff;
 83}
 84.admonition.note i.icon {
 85  color: #448aff;
 86}
 87.admonition.abstract {
 88  border-left-color: #00b0ff;
 89}
 90.admonition.abstract i.icon {
 91  color: #00b0ff;
 92}
 93.admonition.info {
 94  border-left-color: #00b8d4;
 95}
 96.admonition.info i.icon {
 97  color: #00b8d4;
 98}
 99.admonition.tip {
100  border-left-color: #00bfa5;
101}
102.admonition.tip i.icon {
103  color: #00bfa5;
104}
105.admonition.success {
106  border-left-color: #00c853;
107}
108.admonition.success i.icon {
109  color: #00c853;
110}
111.admonition.question {
112  border-left-color: #64dd17;
113}
114.admonition.question i.icon {
115  color: #64dd17;
116}
117.admonition.warning {
118  border-left-color: #ff9100;
119}
120.admonition.warning i.icon {
121  color: #ff9100;
122}
123.admonition.failure {
124  border-left-color: #ff5252;
125}
126.admonition.failure i.icon {
127  color: #ff5252;
128}
129.admonition.danger {
130  border-left-color: #ff1744;
131}
132.admonition.danger i.icon {
133  color: #ff1744;
134}
135.admonition.bug {
136  border-left-color: #f50057;
137}
138.admonition.bug i.icon {
139  color: #f50057;
140}
141.admonition.example {
142  border-left-color: #651fff;
143}
144.admonition.example i.icon {
145  color: #651fff;
146}
147.admonition.quote {
148  border-left-color: #9e9e9e;
149}
150.admonition.quote i.icon {
151  color: #9e9e9e;
152}
153.admonition.note {
154  background-color: rgba(68, 138, 255, 0.1);
155}
156.admonition.note .admonition-title {
157  border-bottom-color: rgba(68, 138, 255, 0.1);
158  background-color: rgba(68, 138, 255, 0.25);
159}
160.admonition.note.open .admonition-title {
161  background-color: rgba(68, 138, 255, 0.1);
162}
163.admonition.abstract {
164  background-color: rgba(0, 176, 255, 0.1);
165}
166.admonition.abstract .admonition-title {
167  border-bottom-color: rgba(0, 176, 255, 0.1);
168  background-color: rgba(0, 176, 255, 0.25);
169}
170.admonition.abstract.open .admonition-title {
171  background-color: rgba(0, 176, 255, 0.1);
172}
173.admonition.info {
174  background-color: rgba(0, 184, 212, 0.1);
175}
176.admonition.info .admonition-title {
177  border-bottom-color: rgba(0, 184, 212, 0.1);
178  background-color: rgba(0, 184, 212, 0.25);
179}
180.admonition.info.open .admonition-title {
181  background-color: rgba(0, 184, 212, 0.1);
182}
183.admonition.tip {
184  background-color: rgba(0, 191, 165, 0.1);
185}
186.admonition.tip .admonition-title {
187  border-bottom-color: rgba(0, 191, 165, 0.1);
188  background-color: rgba(0, 191, 165, 0.25);
189}
190.admonition.tip.open .admonition-title {
191  background-color: rgba(0, 191, 165, 0.1);
192}
193.admonition.success {
194  background-color: rgba(0, 200, 83, 0.1);
195}
196.admonition.success .admonition-title {
197  border-bottom-color: rgba(0, 200, 83, 0.1);
198  background-color: rgba(0, 200, 83, 0.25);
199}
200.admonition.success.open .admonition-title {
201  background-color: rgba(0, 200, 83, 0.1);
202}
203.admonition.question {
204  background-color: rgba(100, 221, 23, 0.1);
205}
206.admonition.question .admonition-title {
207  border-bottom-color: rgba(100, 221, 23, 0.1);
208  background-color: rgba(100, 221, 23, 0.25);
209}
210.admonition.question.open .admonition-title {
211  background-color: rgba(100, 221, 23, 0.1);
212}
213.admonition.warning {
214  background-color: rgba(255, 145, 0, 0.1);
215}
216.admonition.warning .admonition-title {
217  border-bottom-color: rgba(255, 145, 0, 0.1);
218  background-color: rgba(255, 145, 0, 0.25);
219}
220.admonition.warning.open .admonition-title {
221  background-color: rgba(255, 145, 0, 0.1);
222}
223.admonition.failure {
224  background-color: rgba(255, 82, 82, 0.1);
225}
226.admonition.failure .admonition-title {
227  border-bottom-color: rgba(255, 82, 82, 0.1);
228  background-color: rgba(255, 82, 82, 0.25);
229}
230.admonition.failure.open .admonition-title {
231  background-color: rgba(255, 82, 82, 0.1);
232}
233.admonition.danger {
234  background-color: rgba(255, 23, 68, 0.1);
235}
236.admonition.danger .admonition-title {
237  border-bottom-color: rgba(255, 23, 68, 0.1);
238  background-color: rgba(255, 23, 68, 0.25);
239}
240.admonition.danger.open .admonition-title {
241  background-color: rgba(255, 23, 68, 0.1);
242}
243.admonition.bug {
244  background-color: rgba(245, 0, 87, 0.1);
245}
246.admonition.bug .admonition-title {
247  border-bottom-color: rgba(245, 0, 87, 0.1);
248  background-color: rgba(245, 0, 87, 0.25);
249}
250.admonition.bug.open .admonition-title {
251  background-color: rgba(245, 0, 87, 0.1);
252}
253.admonition.example {
254  background-color: rgba(101, 31, 255, 0.1);
255}
256.admonition.example .admonition-title {
257  border-bottom-color: rgba(101, 31, 255, 0.1);
258  background-color: rgba(101, 31, 255, 0.25);
259}
260.admonition.example.open .admonition-title {
261  background-color: rgba(101, 31, 255, 0.1);
262}
263.admonition.quote {
264  background-color: rgba(60,60,60,.1);
265}
266.admonition.quote .admonition-title {
267  border-bottom-color: rgba(60, 60, 60, 0.1);
268  background-color: rgba(60, 60, 60, 0.25);
269}
270.admonition.quote.open .admonition-title {
271  background-color: rgba(60, 60, 60, 0.1);
272}
273.admonition:last-child {
274  margin-bottom: 0.75rem;
275}
276.admonition.note.open .admonition-title:hover,
277.admonition.note .admonition-title:hover {
278  background-color: rgba(68, 138, 255, 0.5);
279  cursor: url('/img/link.png'), pointer !important;
280}
281
282.admonition.abstract.open .admonition-title:hover,
283.admonition.abstract .admonition-title:hover {
284  background-color: rgba(0, 176, 255, 0.5);
285  cursor: url('/img/link.png'), pointer !important;
286}
287
288.admonition.info.open .admonition-title:hover,
289.admonition.info .admonition-title:hover {
290  background-color: rgba(0, 184, 212, 0.5);
291  cursor: url('/img/link.png'), pointer !important;
292}
293
294.admonition.tip.open .admonition-title:hover,
295.admonition.tip .admonition-title:hover {
296  background-color: rgba(0, 191, 165, 0.5);
297  cursor: url('/img/link.png'), pointer !important;
298}
299
300.admonition.success.open .admonition-title:hover,
301.admonition.success .admonition-title:hover {
302  background-color: rgba(0, 200, 83, 0.5);
303  cursor: url('/img/link.png'), pointer !important;
304}
305
306.admonition.question.open .admonition-title:hover,
307.admonition.question .admonition-title:hover {
308  background-color: rgba(100, 221, 23, 0.5);
309  cursor: url('/img/link.png'), pointer !important;
310}
311
312.admonition.warning.open .admonition-title:hover,
313.admonition.warning .admonition-title:hover {
314  background-color: rgba(255, 145, 0, 0.5);
315  cursor: url('/img/link.png'), pointer !important;
316}
317
318.admonition.failure.open .admonition-title:hover,
319.admonition.failure .admonition-title:hover {
320  background-color: rgba(255, 82, 82, 0.5);
321  cursor: url('/img/link.png'), pointer !important;
322}
323
324.admonition.danger.open .admonition-title:hover,
325.admonition.danger .admonition-title:hover {
326  background-color: rgba(255, 23, 68, 0.5);
327  cursor: url('/img/link.png'), pointer !important;
328}
329
330.admonition.bug.open .admonition-title:hover,
331.admonition.bug .admonition-title:hover {
332  background-color: rgba(245, 0, 87, 0.5);
333  cursor: url('/img/link.png'), pointer !important;
334}
335
336.admonition.example.open .admonition-title:hover,
337.admonition.example .admonition-title:hover {
338  background-color: rgba(101, 31, 255, 0.5);
339  cursor: url('/img/link.png'), pointer !important;
340}
341
342.admonition.quote.open .admonition-title:hover,
343.admonition.quote .admonition-title:hover {
344  background-color: rgba(60, 60, 60, 0.5);
345  cursor: url('/img/link.png'), pointer !important;
346}
347[data-scheme="dark"] .admonition.quote.open .admonition-title:hover,
348[data-scheme="dark"] .admonition.quote .admonition-title:hover {
349  background-color: rgba(160, 160, 160, 0.5);
350}

在 layouts/partials/footer/custom.html 最后添加：

 1{{- /* admonition toggle */}}
 2<script>
 3    let details = document.getElementsByClassName('details')
 4    details = details || [];
 5    for (let i = 0; i < details.length; i++) {
 6        let element = details[i]
 7        const summary = element.getElementsByClassName('details-summary')[0];
 8        if (summary) {
 9            summary.addEventListener('click', () => {
10                element.classList.toggle('open');
11            }, false);
12        }
13    }
14</script>

复制字体文件

将字体文件复制到 static/font/fa/ 中。所有用到的文件目录结构如下：

 1tree hugo/
 2# hugo/
 3# ├─ assets
 4# │    └─ scss
 5# │           └─ custom.scss
 6# ├─ layouts
 7# │    ├─ partials
 8# │    │     └─ footer
 9# │    │            └─ custom.html
10# │    └─ shortcodes
11# │           └─ admonition.html
12# └─ static
13#        └─ font
14#               └─ fa
15#                      ├─ fa-brands-400.eot
16#                      ├─ fa-brands-400.svg
17#                      ├─ fa-brands-400.ttf
18#                      ├─ fa-brands-400.woff
19#                      ├─ fa-brands-400.woff2
20#                      ├─ fa-regular-400.eot
21#                      ├─ fa-regular-400.svg
22#                      ├─ fa-regular-400.ttf
23#                      ├─ fa-regular-400.woff
24#                      ├─ fa-regular-400.woff2
25#                      ├─ fa-solid-900.eot
26#                      ├─ fa-solid-900.svg
27#                      ├─ fa-solid-900.ttf
28#                      ├─ fa-solid-900.woff
29#                      └─ fa-solid-900.woff2

使用：

1{{< admonition type=note title="标注" open=false >}}标注{{< /admonition >}}

小记

参考

‫ ‫ ‫

忙忙忙，只能又水一篇了

脚注参考链接 1 : 续・深入探究 Hugo 短代码：我今天还就非得把这个脚注写出来不可 ↩︎
脚注参考链接 2 : Footnotes are not rendered as expected in nested shortcodes ↩︎ ↩︎
footnote 3 ：点返回试试 → ↩︎

Shortcodes on ifanticの小屋

Hugo 短代码

重点标记

指定颜色文本

文本缩写

文本折叠

高斯模糊

文本黑幕

文字抖动

文字渐变

文本位置

摘录引用

评分样式

键盘样式

卡片样式

仿Github样式

标签块样式

时间轴

图片轮播

瀑布流相册

PDF/PPT插入

手动输入NeoDB条目

居中引用

古书排版

对话样式

脚注

简化版引用

荧光标注

警告框

小记

参考

‫ ‫ ‫