Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
/* ==========================================================================
Typography
========================================================================== */
/* Prose
========================================================================== */
.prose {
font-size: $base-font-size; // 16px
line-height: $base-line-height; // 24px
> * {
margin-bottom: $base-font-size * $base-line-height; // same as line-height
}
}
.prose--responsive {
$prose-resp-font-size: 1.25rem; // 20px
$prose-resp-line-height: 1.6; // 32px
@include media(medium-up) {
font-size: $prose-resp-font-size;
line-height: $prose-resp-line-height;
> * {
margin-bottom: $prose-resp-font-size * $prose-resp-line-height; // same as line-height
}
}
}
/* Common elements
========================================================================== */
p, ul, ol, dl, pre, blockquote {
margin: 0 0 $global-spacing 0;
}
/* Lead
========================================================================== */
.lead {
font-size: 1.25rem;
line-height: 1.6;
opacity: 0.64;
}
/* Prose specific */
.prose--responsive {
> .lead {
@include media(medium-up) {
font-size: 1.5rem;
line-height: 1.6666667;
}
}
}
/* Lists
========================================================================== */
ol ol, ol ul, ul ol, ul ul {
margin-bottom: 0;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
dt {
font-size: 0.875rem;
line-height: 1.25rem;
}
dd {
margin: 0 0 ($global-spacing / 2) 0;
&:last-child {
margin-bottom: 0;
}
}
.dl-horizontal {
@extend .clearfix;
dt, dd {
float: left;
}
dt {
width: 32%;
clear: left;
padding-top: $global-spacing / 8;
padding-bottom: $global-spacing / 8;
padding-right: $global-spacing / 2;
}
dd {
width: 68%;
padding-left: $global-spacing / 2;
}
dd + dd {
margin-left: 32%;
}
}
/* Prose specific */
.prose--responsive {
> dl dt {
@include media(medium-up) {
padding-top: $global-spacing / 4;
padding-bottom: $global-spacing / 4;
font-size: 1rem;
line-height: 1.5;
}
}
}
/* Blockquote
========================================================================== */
blockquote {
box-shadow: inset 1px 0 0 0 $base-alpha-color;
padding: ($global-spacing / 2) $global-spacing;
*:last-child {
margin-bottom: 0;
}
footer {
color: rgba($base-font-color, 0.64);
margin-top: -0.5rem;
&:before {
content: '';
}
}
}
/* Dividers
========================================================================== */
hr, .hr {
border: 0;
height: 2px;
background: $base-alpha-color;
width: 80%;
max-width: 16rem;
margin: ($global-spacing * 2) auto;
}
/* Prose specific */
.prose {
> hr,
>.hr {
margin: ($global-spacing * 3) auto;
}
}
.prose--responsive {
> hr,
> .hr {
@include media(medium-up) {
margin: ($global-spacing * 4) auto;
}
}
}
/* Emphasis
========================================================================== */
b, strong {
font-weight: $base-font-bold;
}
small, .small {
font-size: 75%;
font-weight: normal;
}
mark, .mark {
padding: 0 0.25rem;
background: rgba($primary-color, 0.16);
border-radius: $base-border-radius;
}
/* Abbreviation
========================================================================== */
abbr[title] {
cursor: help;
border-bottom: 1px dashed $base-alpha-color;
text-decoration: none;
text-transform: initial;
}
/* Headings
========================================================================== */
.heading, h1, h2, h3, h4, h5, h6 {
font-family: $heading-font-family;
font-weight: $heading-font-weight;
margin-top: 0;
margin-bottom: $global-spacing;
color: $heading-font-color;
}
.heading--xlarge {
@include heading(1.75rem, xlarge-up); // 28, 32, 36, 40
}
.heading--large {
@include heading(1.5rem, xlarge-up); // 24, 28, 32, 36
}
.heading--medium {
@include heading(1.25rem, xlarge-up); // 20, 24, 28, 32
}
.heading--small,
.heading--xsmall,
.heading--xxsmall {
@include heading(1rem, xlarge-up); // 16, 20, 24, 28
}
.heading-alt {
font-family: $heading-font-family;
font-weight: 700;
font-size: 0.75rem;
line-height: 1rem;
letter-spacing: 0.125em;
text-transform: uppercase;
}
.heading-deco {
position: relative;
text-transform: uppercase;
padding-bottom: 0.5rem;
&::after {
position: absolute;
top: calc(100% - 2px);
left: 0;
width: 2.5rem;
height: 2px;
content: "";
background: rgba($base-font-color, 0.32);
}
}
h1 {
@include heading(1.75rem); // 28
}
h2 {
@include heading(1.5rem); // 24
}
h3 {
@include heading(1.25rem); // 20
}
h4, h5, h6 {
@include heading(1rem); // 16
}
/* Prose specific */
.prose {
> h1:not(:first-child),
> h2:not(:first-child),
> h3:not(:first-child),
> h4:not(:first-child),
> h5:not(:first-child),
> h6:not(:first-child) {
margin-top: $global-spacing * 2.5;
}
> h1 + h2:not(:first-child),
> h2 + h3:not(:first-child),
> h3 + h4:not(:first-child),
> h4 + h5:not(:first-child),
> h5 + h6:not(:first-child) {
margin-top: 0;
}
}
.prose--responsive {
> h1 { @include heading(1.75rem, xlarge-up); } // 28, 32, 36, 40
> h2 { @include heading(1.5rem, xlarge-up); } // 24, 28, 32, 36
> h3 { @include heading(1.25rem, xlarge-up); } // 20, 24, 28, 32
> h4,
> h5,
> h6 { @include heading(1rem, xlarge-up); } // 16, 20, 24, 28
@include media(medium-up) {
> h1:not(:first-child),
> h2:not(:first-child),
> h3:not(:first-child),
> h4:not(:first-child),
> h5:not(:first-child),
> h6:not(:first-child) {
margin-top: $global-spacing * 4;
}
}
}