N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Refine notices

Browse source
This commit is contained in:
Michael Rose 2016-03-30 21:52:58 -04:00
parent 66d6a70480
commit 4548f70ee5
2 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
_posts/2010-02-05-post-notice.md
View file

@ -14,11 +14,23 @@ When using Kramdown `{: .notice}` can be added after a sentence to assign the `.
**Changes in Service:** We just updated our privacy policy here to better service our customers. We recommend reviewing the changes. **Changes in Service:** We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
{: .notice} {: .notice}
**Info Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
{: .notice--info}
**Warning Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
{: .notice--warning}
**Danger Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
{: .notice--danger}
**Success Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
{: .notice--success}
Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with `markdownify` is a good way to go. Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with `markdownify` is a good way to go.
```html ```html
{% raw %}{% capture notice-2 %} {% raw %}{% capture notice-2 %}
### New Site Features #### New Site Features
* You can now have cover images on blog pages * You can now have cover images on blog pages
* Drafts will now auto-save while writing * Drafts will now auto-save while writing
@ -28,7 +40,7 @@ Want to wrap several paragraphs or other elements in a notice? Using Liquid to c
``` ```
{% capture notice-2 %} {% capture notice-2 %}
### New Site Features #### New Site Features
* You can now have cover images on blog pages * You can now have cover images on blog pages
* Drafts will now auto-save while writing * Drafts will now auto-save while writing
@ -42,12 +54,12 @@ Or you could skip the capture and stick with straight HTML.
```html ```html
<div class="notice"> <div class="notice">
<h3>Message</h3> <h4>Message</h4>
<p>A basic message.</p> <p>A basic message.</p>
</div> </div>
``` ```
<div class="notice"> <div class="notice">
<h3>Message</h3> <h4>Message</h4>
<p>A basic message.</p> <p>A basic message.</p>
</div> </div>

13
assets/_scss/_notices.scss
View file

@ -13,6 +13,8 @@
@mixin notice($notice-color) { @mixin notice($notice-color) {
margin: 2em 0 !important; // override margin: 2em 0 !important; // override
padding: 1em; padding: 1em;
font-family: $sans-serif;
font-size: $type-size-6 !important;
text-indent: initial; // override text-indent: initial; // override
background-color: mix(#fff, $notice-color, 90%); background-color: mix(#fff, $notice-color, 90%);
border-radius: $border-radius; border-radius: $border-radius;
@ -20,7 +22,6 @@
h4 { h4 {
margin-top: 0 !important; // override margin-top: 0 !important; // override
margin-bottom: 0.75em; margin-bottom: 0.75em;
line-height: 1 !important; // override
} }
@at-root .page__content #{&} h4 { @at-root .page__content #{&} h4 {
@ -39,7 +40,9 @@
} }
p { p {
margin-bottom: 0; &:last-child {
margin-bottom: 0 !important; // override
}
a { a {
border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override
@ -55,6 +58,12 @@
code { code {
background-color: mix(#fff, $notice-color, 95%) background-color: mix(#fff, $notice-color, 95%)
} }
ul {
&:last-child {
margin-bottom: 0; // override
}
}
} }
/* Default notice */ /* Default notice */