Summary Files Commits Branches @commit @diff @stats
path: root / src / _typography.scss
diff options
context:
space:
mode:
1 files changed, 129 insertions, 0 deletions
-rw-r--r--src/_typography.scss129
diff --git a/src/_typography.scss b/src/_typography.scss
new file mode 100644
index 0000000..17b7f7c
--- /dev/null
+++ b/src/_typography.scss
@@ -0,0 +1,129 @@
+// Typography
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: inherit;
+ font-weight: 500;
+ line-height: 1.2;
+ margin-bottom: .25em;
+ margin-top: 0;
+}
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+ font-weight: 500;
+}
+h1,
+.h1 {
+ font-size: 2rem;
+}
+h2,
+.h2 {
+ font-size: 1.6rem;
+}
+h3,
+.h3 {
+ font-size: 1.4rem;
+}
+h4,
+.h4 {
+ font-size: 1.2rem;
+}
+h5,
+.h5 {
+ font-size: 1rem;
+}
+h6,
+.h6 {
+ font-size: .8rem;
+}
+
+// Paragraphs
+p {
+ line-height: 1.2 * $line-height;
+ margin: 0 0 $unit-4;
+}
+
+// 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: .65rem;
+}
+
+mark {
+ @include label-variant($body-font-color, $highlight-color);
+ border-radius: $border-radius;
+ padding: .05rem;
+}
+
+// Blockquote
+blockquote {
+ border-left: $border-width-lg solid $border-color;
+ margin-left: 0;
+ padding: $unit-2 $unit-4;
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+}
+
+// Lists
+ul,
+ol {
+ margin: $unit-4 0 $unit-4 $unit-4;
+ padding: 0;
+
+ ul,
+ ol {
+ margin: $unit-4 0 $unit-4 $unit-4;
+ }
+
+ li {
+ margin-top: $unit-2;
+ }
+}
+
+ul {
+ list-style: disc inside;
+
+ ul {
+ list-style-type: circle;
+ }
+}
+
+ol {
+ list-style: decimal inside;
+
+ ol {
+ list-style-type: lower-alpha;
+ }
+}
+
+dl {
+ dt {
+ font-weight: bold;
+ }
+ dd {
+ margin: $unit-2 0 $unit-4 0;
+ }
+}