// Typography // // // //
// // Spacing // h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
margin-bottom: .5em; &:last-child { margin-bottom: 0; }
}
p, span, b, ul, ol, blockquote {
&:last-child { margin-bottom: 0; }
}
// // Global // figure {
margin: 0;
}
strong, b {
color: $canalplus; font-weight: $font-weight-bold;
}
code {
display: inline-block; margin-bottom: 1rem;
}
p {
line-height: 1.75em; color: $gray-300;
}
small {
color: $gray-300;
}
a:hover {
text-decoration: none;
}
hr {
margin-top: 1.875rem; margin-bottom: 1.875rem;
}
blockquote {
p { color: $canalplus; }
}
// // Decorated // .text-decorated {
position: relative; &::after { content: ""; position: absolute; left: 0; top: .6em; width: 5rem; // 80px height: $border-width; background: $canalplus; @include translate(-140%,0); } &[class*="padding"] { padding-left: 6.875rem; &::after { @include translate(0,0); } }
}
%text-decorated-text-white {
&::after { background: $white; }
}
// // Text Shadow // %text-shadow {
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, p, span, b, i { @include text-shadow(); }
}
.text-shadow {
@include text-shadow();
}
// // Styled link // %link {
display: inline-block; position: relative; @include hover-focus { &::before { @include transition(); top: calc(100% + 2px); opacity: 1; } } &::before { @include transition(); content: ""; position: absolute; top: 100%; display: block; width: calc(100% - 2px); height: $border-width; background: currentColor; opacity: 0; }
}
.link {
@extend %link;
}
// Eyebrow %eyebrow {
display: inline-block; font-size: $font-size-sm; font-weight: 400; text-transform: uppercase; letter-spacing: $letter-spacing;
}
.eyebrow {
@extend %eyebrow;
}
// Error text .error-text {
font-size: 10rem; font-weight: 700; line-height: 10rem; margin-bottom: .25em;
}
.letter-spacing {
letter-spacing: $letter-spacing;
}
// Responsive // //
@include media-breakpoint-down(md) {
.display-1 { font-size: ($display1-size * .65) } .display-2 { font-size: ($display2-size * .65) } .display-3 { font-size: ($display3-size * .65) } .display-4 { font-size: ($display4-size * .65) } h1, .h1 { font-size: ($h1-font-size * .75) } h2, .h2 { font-size: ($h2-font-size * .75) } h3, .h3 { font-size: ($h3-font-size * .75) } h4, .h4 { font-size: ($h4-font-size * .75) } h5, .h5 { font-size: ($h5-font-size * .75) }
}