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

Style links in notices

Browse source
This commit is contained in:
Michael Rose 2016-04-05 21:30:25 -04:00
parent 234368718f
commit 20fe00d058
3 changed files with 14 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,22 +11,22 @@ A notice displays information that explains nearby content. Often used to call a
When using Kramdown `{: .notice}` can be added after a sentence to assign the `.notice` to the `<p></p>` element. When using Kramdown `{: .notice}` can be added after a sentence to assign the `.notice` to the `<p></p>` element.
**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}
**Primary 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. **Primary 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--primary} {: .notice--primary}
**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. **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} {: .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. **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} {: .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. **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} {: .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. **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} {: .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.

4
assets/_scss/_base.scss
View file

@ -93,10 +93,6 @@ blockquote {
font-style: italic; font-style: italic;
border-left: 0.25em solid $primary-color; border-left: 0.25em solid $primary-color;
a {
color: inherit;
}
cite { cite {
font-style: italic; font-style: italic;

21
assets/_scss/_notices.scss
View file

@ -31,23 +31,10 @@
font-size: 1em; font-size: 1em;
} }
@at-root .page__content #{&} a {
border-bottom-width: 2px;
box-shadow: none !important; // override
&:hover {
background-color: transparent !important; // override
}
}
p { p {
&:last-child { &:last-child {
margin-bottom: 0 !important; // override margin-bottom: 0 !important; // override
} }
a {
border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override
}
} }
h4 + p { h4 + p {
@ -56,6 +43,14 @@
padding-top: 0; padding-top: 0;
} }
a {
color: $notice-color;
&:hover {
color: mix(#000, $notice-color, 40%);
}
}
code { code {
background-color: mix(#fff, $notice-color, 95%) background-color: mix(#fff, $notice-color, 95%)
} }