mirror of https://gitlab.com/octtspacc/sitoctt
142 lines
3.8 KiB
HTML
142 lines
3.8 KiB
HTML
{{/* Available notice types: danger, warning, caution, info, note, tip */}}
|
|
{{- $noticeType := "note" -}}
|
|
{{- if len .Params | eq 0 -}}
|
|
{{- $noticeType = .noticeType | default "note" -}}
|
|
{{- else -}}
|
|
{{- $noticeType = .Get 0 | default "note" -}}
|
|
{{- end -}}
|
|
|
|
{{/* Workaround markdownify inconsistency for single/multiple paragraphs */}}
|
|
{{- $raw := (markdownify .Inner | chomp) -}}
|
|
{{- $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 -}}
|
|
|
|
{{/* Load the css if it's the first time */}}
|
|
{{- if not ($.Page.Scratch.Get "notice-style-loaded-flag") -}}
|
|
<style type="text/css">
|
|
/* Light theme */
|
|
.notice {
|
|
--title-color: #fff;
|
|
--title-background-color: #6be;
|
|
--content-color: #444;
|
|
--content-background-color: #e7f2fa;
|
|
}
|
|
|
|
.notice.info, .notice.caution {
|
|
--title-background-color: #fb7;
|
|
--content-background-color: #fec;
|
|
}
|
|
|
|
.notice.tip {
|
|
--title-background-color: #5a5;
|
|
--content-background-color: #efe;
|
|
}
|
|
|
|
.notice.danger, .notice.warning {
|
|
--title-background-color: #c33;
|
|
--content-background-color: #fee;
|
|
}
|
|
|
|
/* Dark theme */
|
|
@media (prefers-color-scheme:dark) {
|
|
.notice {
|
|
--title-color: #fff;
|
|
--title-background-color: #069;
|
|
--content-color: #ddd;
|
|
--content-background-color: #023;
|
|
}
|
|
|
|
.notice.info, .notice.caution {
|
|
--title-background-color: #a50;
|
|
--content-background-color: #420;
|
|
}
|
|
|
|
.notice.tip {
|
|
--title-background-color: #363;
|
|
--content-background-color: #121;
|
|
}
|
|
|
|
.notice.danger, .notice.warning {
|
|
--title-background-color: #800;
|
|
--content-background-color: #400;
|
|
}
|
|
}
|
|
|
|
body.dark .notice {
|
|
--title-color: #fff;
|
|
--title-background-color: #069;
|
|
--content-color: #ddd;
|
|
--content-background-color: #023;
|
|
}
|
|
|
|
body.dark .notice.info, body.dark .notice.caution {
|
|
--title-background-color: #a50;
|
|
--content-background-color: #420;
|
|
}
|
|
|
|
body.dark .notice.tip {
|
|
--title-background-color: #363;
|
|
--content-background-color: #121;
|
|
}
|
|
|
|
body.dark .notice.danger, body.dark .notice.danger {
|
|
--title-background-color: #800;
|
|
--content-background-color: #400;
|
|
}
|
|
|
|
/* Content */
|
|
.notice {
|
|
padding: 18px;
|
|
line-height: 24px;
|
|
margin-bottom: 24px;
|
|
border-radius: 4px;
|
|
color: var(--content-color);
|
|
background: var(--content-background-color);
|
|
}
|
|
|
|
.notice p:last-child {
|
|
margin-bottom: 0
|
|
}
|
|
|
|
/* Title */
|
|
.notice-title {
|
|
margin: -18px -18px 12px;
|
|
padding: 4px 18px;
|
|
border-radius: 4px 4px 0 0;
|
|
font-weight: 700;
|
|
color: var(--title-color);
|
|
background: var(--title-background-color);
|
|
}
|
|
|
|
/* Icon */
|
|
.icon-notice {
|
|
display: inline-flex;
|
|
align-self: center;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.icon-notice img,
|
|
.icon-notice svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.icon-notice img,
|
|
.icon-notice.baseline svg {
|
|
top: .125em;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
{{- $.Page.Scratch.Set "notice-style-loaded-flag" true -}}
|
|
{{- end -}}
|
|
|
|
<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
|
|
<p class="notice-title">
|
|
<span class="icon-notice baseline">
|
|
{{ printf "icons/%s.svg" $noticeType | readFile | safeHTML }}
|
|
</span>
|
|
{{- i18n $noticeType -}}
|
|
</p>
|
|
{{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
|
|
</div>
|