sass-site/source/assets/css/components/_alerts.scss
Natalie Weizenbaum ce9244b504
Tweak typography to improve legibility (#318)
* Add more margin above headers to visually associate them with the
  prose below, rather than above.

* Reduce the margin around normal block elements to more clearly
  associate them with one another.

* Increase the size of prose and medium/large headers to make them
  easier to see.

* Reduce the font weight of intro paragraphs to make them more
  visually distinct from the rest of the documentation.

Based on @slimekat's suggestions.

Closes #313
2019-04-11 15:30:17 -07:00

40 lines
748 B
SCSS

.sl-c-alert {
padding: {
top: sl-px-to-rem(12px);
bottom: sl-px-to-rem(12px);
};
text-align: center;
background: darken($sl-color--hopbush, 10%);
color: rgba($sl-color--white, .875);
font-size: $sl-font-size--small;
p,
ul,
dl {
&:first-child { margin-top: 0; }
&:last-child { margin-bottom: 0; }
}
p,
li,
dd { max-width: none; }
a {
border-bottom-color: rgba($sl-color--white, .5);
font-weight: $sl-font-weight--bold;
color: $sl-color--white;
&:hover,
&:focus {
border-bottom-color: rgba($sl-color--white, .75);
background: rgba(black, .0625);
}
&:active { border-bottom-color: $sl-color--white; }
}
&--info { background: $sl-color--midnight-blue; }
}