_assets/stylesheets/_redbat/_type.scss
// -------------------------------
// TYPE
// -------------------------------
// BASE TYPE ---------------------
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
@media #{$medium-up} {
font-size: 18px;
}
}
body {
@extend %sans;
color: $body-color;
-webkit-hyphens: auto;
hyphens: auto;
line-height: 140%;
}
// FONTS -------------------------
%sans {
font-family: 'Whitney SSm A', 'Whitney SSm B', system, -apple-system, BlinkMacSystemFont, Avenir, sans-serif;
}
%sans-small {
font-family: 'Whitney SSm Small A', 'Whitney SSm Small B', system, -apple-system, BlinkMacSystemFont, Avenir, sans-serif;
}
%sans-con {
font-family: 'Whitney Cond A', 'Whitney Cond B', system, -apple-system, BlinkMacSystemFont, Avenir, sans-serif;
}
// HEADINGS ----------------------
h1,
h2,
h3,
h4,
h5,
h6 {
@extend %sans-con;
line-height: 130%;
}
h1,
h2,
h5 {
color: $dark-color;
}
// TEXT --------------------------
p {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: .9375rem;
&:last-child {
margin-bottom: 0;
}
@media #{$medium-up} {
font-size: 1rem;
}
}
h1 {
line-height: 110%;
}
h2 {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
margin: 2.3rem 0 0;
+ h3 {
margin-top: .3rem;
}
}
h3 {
color: lighten($dark-color, 20%);
font-size: 1.3rem;
font-weight: 600;
margin: 2.3rem 0 0;
}
h4 {
color: lighten($dark-color, 30%);
font-size: 1.2rem;
font-weight: bold;
margin: 2.5rem 0 .1875rem;
text-transform: uppercase;
}
h5 {
font-size: 1.1rem;
font-weight: bold;
margin: 3rem 0 .1875rem;
text-transform: uppercase;
&:before {
background: $border-color;
content: '';
display: block;
height: 1px;
margin-bottom: 5px;
width: 90px;
}
}
h6 {
color: lighten($body-color, 20%);
font-size: .9rem;
font-weight: 600;
text-transform: uppercase;
}
ul {
list-style-type: disc;
margin-bottom: 1.5625rem;
@media #{$medium-up} {
margin-bottom: 1.5625rem;
margin-left: 2.5rem;
}
li {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: .5rem;
margin-left: 2.3rem;
padding: .1875rem 0 0;
@media #{$medium-up} {
font-size: 1rem;
}
ul {
list-style-type: circle;
margin-bottom: 0;
width: 100%;
li {
font-size: inherit;
}
}
p {
font-size: inherit;
margin: 0 0 .625rem;
}
&:last-child {
padding: 1.25% 0 0;
}
}
}
ol {
list-style-type: decimal;
margin-bottom: 1.5625rem;
text-align: left;
li {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: .1875rem;
margin-left: 2.3rem;
@media #{$medium-up} {
font-size: 1rem;
}
ol {
list-style-type: lower-roman;
margin-bottom: 0;
width: 100%;
}
p {
font-size: inherit;
margin: 0 0 1.5625rem;
&:last-child {
margin-bottom: .9375rem;
}
}
}
}
.page__title {
color: $dark-color;
font-size: 2.6rem;
font-weight: 300;
margin-bottom: 2rem;
}
.subheader {
color: lighten($body-color, 30%);
font-weight: normal;
}
.light-text {
color: lighten($body-color, 30%);
}
// INLINE TYPE -------------------
strong {
font-weight: 700;
em {
font-style: italic;
font-weight: 700;
}
}
em,
cite {
font-style: italic;
font-weight: inherit;
}
sup {
font-size: .7rem;
a {
background: lighten($link-color, 35%);
border-radius: 50%;
font-weight: 600;
padding: 1px 6px;
text-decoration: none;
&:hover {
background: lighten($link-color, 40%);
}
}
}
.caps {
@extend %sans-small;
}
// BLOCKQUOTE --------------------
blockquote {
border-left: 4px solid #EEE;
color: lighten($body-color, 20%);
margin: 0 auto 1.5625rem;
padding-left: .75rem;
width: 90%;
@media #{$medium-up} {
width: 85%;
}
@media #{$large-up} {
width: 60%;
}
small {
display: block;
font-size: .80rem;
margin: .625rem 0 0;
&:before {
color: $border-color;
content: '—';
}
}
blockquote,
ol,
ul {
width: 100%;
}
li {
margin-left: 1rem;
}
}
// HR ----------------------------
hr {
border: solid $border-color;
border-width: 1px 0 0;
display: block;
height: 0;
margin: 1.25rem auto;
padding: 0;
}
// LINKS -------------------------
a {
color: $link-color;
text-decoration: underline;
text-decoration-skip: ink;
transition: color .2s ease-in-out;
&:hover,
&:focus {
color: lighten($link-color, 10%);
}
.site__header &,
&.footer__logo {
text-decoration: none;
}
}