mirror of
https://github.com/ItsDrike/itsdrike.com.git
synced 2024-11-09 21:49:41 +00:00
Use custom notice style in favor of hugo-notice
This commit is contained in:
parent
6c2a21f37b
commit
eb0b427a79
3
.gitmodules
vendored
3
.gitmodules
vendored
|
|
@ -1,3 +0,0 @@
|
||||||
[submodule "themes/hugo-notice"]
|
|
||||||
path = themes/hugo-notice
|
|
||||||
url = https://github.com/martignoni/hugo-notice.git
|
|
||||||
|
|
@ -5,8 +5,6 @@ title: "ItsDrike"
|
||||||
staticDir: "static/build"
|
staticDir: "static/build"
|
||||||
assetDir: "static/build"
|
assetDir: "static/build"
|
||||||
|
|
||||||
theme: ["hugo-notice"]
|
|
||||||
|
|
||||||
buildFuture: true
|
buildFuture: true
|
||||||
MetaDataFormat: yaml
|
MetaDataFormat: yaml
|
||||||
markup:
|
markup:
|
||||||
|
|
|
||||||
45
layouts/shortcodes/notice.html
Normal file
45
layouts/shortcodes/notice.html
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
{{/* Available notice types: warning, info, note, tip */}}
|
||||||
|
{{- $noticeType := .Get 0 -}}
|
||||||
|
|
||||||
|
{{/* 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 -}}
|
||||||
|
|
||||||
|
{{/* Count how many times we've called this shortcode and load the SVGs if it's the first time */}}
|
||||||
|
{{- if not ($.Page.Scratch.Get "noticecount") -}}
|
||||||
|
<div>
|
||||||
|
<svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="tip-notice" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
|
||||||
|
<path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="note-notice" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
|
||||||
|
<path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="warning-notice" viewBox="0 0 576 512" preserveAspectRatio="xMidYMid meet">
|
||||||
|
<path d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="info-notice" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
|
||||||
|
<path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
{{- end -}}
|
||||||
|
|
||||||
|
{{- $.Page.Scratch.Add "noticecount" 1 -}}
|
||||||
|
<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
|
||||||
|
<p class="first notice-title">
|
||||||
|
<span class="icon-notice baseline">
|
||||||
|
<svg><use href="#{{- $noticeType -}}-notice"></use></svg>
|
||||||
|
</span>
|
||||||
|
{{- $noticeType | title -}}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{{- if or $block (not $raw) }}
|
||||||
|
{{ $raw }}
|
||||||
|
{{ else }}
|
||||||
|
<p>{{ $raw }}</p>
|
||||||
|
{{ end -}}
|
||||||
|
</div>
|
||||||
69
static/src/scss/_notice.scss
Normal file
69
static/src/scss/_notice.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
$notice-root: #FFF;
|
||||||
|
$notice-root-bg: #E7F2FA;
|
||||||
|
$notice-title: #FFF;
|
||||||
|
$notice-title-bg: #6AB0DE;
|
||||||
|
|
||||||
|
$notice-warning-title: rgba(130, 49, 47, 0.9);
|
||||||
|
$notice-warning: #341312;
|
||||||
|
$notice-info-title: #906B4B;
|
||||||
|
$notice-info: #392A1E;
|
||||||
|
$notice-note-title: #3F6985;
|
||||||
|
$notice-note: #192A35;
|
||||||
|
$notice-tip-title: rgba(46, 92, 46, 0.8);
|
||||||
|
$notice-tip: #122412;
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
padding: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: $notice-root;
|
||||||
|
background: $notice-root-bg;
|
||||||
|
|
||||||
|
p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice.warning {
|
||||||
|
background: $notice-warning;
|
||||||
|
.notice-title {background: $notice-warning-title;}
|
||||||
|
}
|
||||||
|
.notice.info {
|
||||||
|
background: $notice-info;
|
||||||
|
.notice-title {background: $notice-info-title;}
|
||||||
|
}
|
||||||
|
.notice.note {
|
||||||
|
background: $notice-note;
|
||||||
|
.notice-title {background: $notice-note-title;}
|
||||||
|
}
|
||||||
|
.notice.tip {
|
||||||
|
background: $notice-tip;
|
||||||
|
.notice-title{background: $notice-tip-title;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-title{
|
||||||
|
margin: -18px -18px 12px;
|
||||||
|
padding: 4px 18px;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $notice-title;
|
||||||
|
background: $notice-title-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-notice{
|
||||||
|
display: inline-flex;
|
||||||
|
align-self: center;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
img, svg {
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-notice img, .icon-notice.baseline svg{
|
||||||
|
top: 0.125em;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
@ -11,3 +11,4 @@
|
||||||
@import "anchors";
|
@import "anchors";
|
||||||
@import "code";
|
@import "code";
|
||||||
@import "code_copy";
|
@import "code_copy";
|
||||||
|
@import "notice";
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Subproject commit 2facc5d4d60dcda57a3f3bd10591937b7e6ae84e
|
|
||||||
Loading…
Reference in a new issue