nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-18 10:50: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 */%}}
A notice disclaimer
With multiple paragraphs
{{%/* /notice */%}}
```
@ -17,6 +19,8 @@ renders as
{{% notice note %}}
A notice disclaimer
With multiple paragraphs
{{% /notice %}}
### Info

5
layouts/shortcodes/notice.html
View file

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