nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-18 19:00:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

notice: support multiple blocks in one box #15

Browse source
This commit is contained in:
Sören Weber 2021-07-16 19:48:48 +02:00
parent 9921f9ae87
commit a0084ecf96
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
3 changed files with 29 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
exampleSite/content/shortcodes/notice.en.md
View file

@ -10,6 +10,8 @@ The notice shortcode shows 4 types of disclaimers to help you structure your pag
``` ```
{{%/* notice note */%}} {{%/* notice note */%}}
A notice disclaimer A notice disclaimer
With multiple paragraphs
{{%/* /notice */%}} {{%/* /notice */%}}
``` ```
@ -17,6 +19,8 @@ renders as
{{% notice note %}} {{% notice note %}}
A notice disclaimer A notice disclaimer
With multiple paragraphs
{{% /notice %}} {{% /notice %}}
### Info ### Info

5
layouts/shortcodes/notice.html
View file

@ -1,2 +1,5 @@
{{ $_hugo_config := `{ "version": 1 }` }} {{ $_hugo_config := `{ "version": 1 }` }}
<div class="notices {{ .Get 0 }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>{{ .Inner }}</div> <div class="notices {{ .Get 0 }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
<div class="label">{{ .Get 0 | T }}</div>
{{ .Inner }}
</div>

46
static/css/theme.css
View file

@ -476,57 +476,53 @@ blockquote cite {
} }
div.notices { div.notices {
margin: 2rem 0; margin: 2rem 0;
position: relative; padding-bottom: .1px;
padding-left: 1rem;
padding-right: 1rem;
} }
div.notices p { div.notices > * {
padding: 15px; margin-top: 1rem;
display: block; margin-bottom: 1rem;
font-size: 1rem;
margin-top: 0rem;
margin-bottom: 0rem;
color: #666; color: #666;
} }
div.notices p:first-child:before { div.notices > div.label {
position: absolute;
top: 2px;
color: #fff; color: #fff;
margin-bottom: 1rem;
margin-top: -1.75rem;
}
div.notices > div.label:first-child:before {
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 900; font-weight: 900;
content: "\f06a"; content: "\f06a";
left: 10px; margin-left: -.35rem;
margin-right: .35rem;
} }
div.notices p:first-child:after { div.notices.info {
position: absolute;
top: 2px;
color: #fff;
left: 2rem;
}
div.notices.info p {
border-top: 30px solid #F0B37E; border-top: 30px solid #F0B37E;
background: #FFF2DB; background: #FFF2DB;
} }
div.notices.info p:first-child:after { div.notices.info > div.label:first-child:after {
content: 'Info'; content: 'Info';
} }
div.notices.warning p { div.notices.warning {
border-top: 30px solid rgba(217, 83, 79, 0.8); border-top: 30px solid rgba(217, 83, 79, 0.8);
background: #FAE2E2; background: #FAE2E2;
} }
div.notices.warning p:first-child:after { div.notices.warning > div.label:first-child:after {
content: 'Warning'; content: 'Warning';
} }
div.notices.note p { div.notices.note {
border-top: 30px solid #6AB0DE; border-top: 30px solid #6AB0DE;
background: #E7F2FA; background: #E7F2FA;
} }
div.notices.note p:first-child:after { div.notices.note > div.label:first-child:after {
content: 'Note'; content: 'Note';
} }
div.notices.tip p { div.notices.tip {
border-top: 30px solid rgba(92, 184, 92, 0.8); border-top: 30px solid rgba(92, 184, 92, 0.8);
background: #E6F9E6; background: #E6F9E6;
} }
div.notices.tip p:first-child:after { div.notices.tip > div.label:first-child:after {
content: 'Tip'; content: 'Tip';
} }