You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
2.2 KiB
166 lines
2.2 KiB
4 years ago
|
// Typography
|
||
|
// Headings
|
||
|
h1,
|
||
|
h2,
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h6 {
|
||
|
font-weight: 700;
|
||
|
margin-bottom: .5em;
|
||
|
margin-top: 0;
|
||
|
font-family: "Arial Black";
|
||
|
|
||
|
a {
|
||
|
text-decoration: none !important;
|
||
|
color: $primary-color !important;
|
||
|
}
|
||
|
}
|
||
|
.h1,
|
||
|
.h2,
|
||
|
.h3,
|
||
|
.h4,
|
||
|
.h5,
|
||
|
.h6 {
|
||
|
font-weight: 700;
|
||
|
font-family: "Arial Black";
|
||
|
|
||
|
a {
|
||
|
text-decoration: none !important;
|
||
|
color: $primary-color !important;
|
||
|
}
|
||
|
}
|
||
|
h1,
|
||
|
.h1 {
|
||
|
font-size: 58px;
|
||
|
line-height: 87px;
|
||
|
}
|
||
|
h2,
|
||
|
.h2 {
|
||
|
font-size: 45px;
|
||
|
line-height: 69px;
|
||
|
}
|
||
|
h3,
|
||
|
.h3 {
|
||
|
font-size: 36px;
|
||
|
line-height: 56px;
|
||
|
}
|
||
|
h4,
|
||
|
.h4 {
|
||
|
font-size: 28px;
|
||
|
line-height: 44px;
|
||
|
}
|
||
|
h5,
|
||
|
.h5 {
|
||
|
font-size: 22px;
|
||
|
line-height: 35px;
|
||
|
}
|
||
|
h6,
|
||
|
.h6 {
|
||
|
font-size: 17px;
|
||
|
line-height: 18px;
|
||
|
}
|
||
|
|
||
|
|
||
|
// Paragraphs
|
||
|
p {
|
||
|
margin: 0 0 $line-height;
|
||
|
color: $black;
|
||
|
}
|
||
|
|
||
|
// Semantic text elements
|
||
|
a,
|
||
|
ins,
|
||
|
u {
|
||
|
text-decoration-skip: ink edges;
|
||
|
}
|
||
|
|
||
|
abbr[title] {
|
||
|
border-bottom: $border-width dotted;
|
||
|
cursor: help;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
kbd {
|
||
|
@include label-base();
|
||
|
@include label-variant($light-color, $dark-color);
|
||
|
font-size: $font-size-sm;
|
||
|
}
|
||
|
|
||
|
mark {
|
||
|
@include label-variant($body-font-color, $highlight-color);
|
||
|
border-bottom: $unit-o solid darken($highlight-color, 15%);
|
||
|
border-radius: $border-radius;
|
||
|
padding: $unit-o $unit-h 0;
|
||
|
}
|
||
|
|
||
|
// Blockquote
|
||
|
blockquote {
|
||
|
border-left: $border-width-lg solid $border-color;
|
||
|
background-color: lighten($gray-color-light, 3%);
|
||
|
margin-left: 0;
|
||
|
padding: $unit-2 $unit-4;
|
||
|
|
||
|
p:last-child {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Lists
|
||
|
ul,
|
||
|
ol {
|
||
|
margin: $unit-4 $unit-4 $unit-4 $unit-4;
|
||
|
background-color: lighten($gray-color-light, 3%);
|
||
|
padding: 0.5em;
|
||
|
|
||
|
|
||
|
ul,
|
||
|
ol {
|
||
|
margin: $unit-4 $unit-4 $unit-4 $unit-4;
|
||
|
}
|
||
|
|
||
|
li {
|
||
|
margin-top: $unit-2;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
ul {
|
||
|
list-style: disc inside;
|
||
|
|
||
|
ul {
|
||
|
list-style-type: circle;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
ol {
|
||
|
list-style: none;
|
||
|
counter-reset: high-contrast-counter;
|
||
|
|
||
|
ol {
|
||
|
list-style-type: lower-alpha;
|
||
|
}
|
||
|
|
||
|
li {
|
||
|
counter-increment: high-contrast-counter;
|
||
|
}
|
||
|
|
||
|
li::before {
|
||
|
content: "0" counter(high-contrast-counter) ".";
|
||
|
border-radius: $border-radius;
|
||
|
background-color: $black;
|
||
|
color: $snow;
|
||
|
padding: 3px;
|
||
|
margin-right: 0.3em;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
dl {
|
||
|
dt {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
dd {
|
||
|
margin: $unit-2 0 $unit-4 0;
|
||
|
}
|
||
|
}
|
||
|
|