| 1 | @import url("https://unpkg.com/@creativecommons/fonts@2020.8.1/css/fonts.css");
|
| 2 |
|
| 3 |
|
| 4 | $family-roboto-condensed: 'Roboto Condensed', sans-serif;
|
| 5 | $family-source-sans-pro: 'Source Sans Pro', sans-serif;
|
| 6 | $family-jetbrains-mono: 'JetBrains Mono', monospace;
|
| 7 | $family-vocabulary-icons: 'Vocabulary Icons';
|
| 8 | $family-system: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto',
|
| 9 | 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
| 10 | 'Helvetica', 'Arial', sans-serif;
|
| 11 |
|
| 12 | $family-heading: $family-roboto-condensed;
|
| 13 | $family-body: $family-source-sans-pro;
|
| 14 | $family-code: $family-jetbrains-mono;
|
| 15 | $family-icons: $family-vocabulary-icons;
|
| 16 |
|
| 17 |
|
| 18 | $font-size-h1: 3.56rem;
|
| 19 | $font-size-h2: 2.25rem;
|
| 20 | $font-size-h3: 1.75rem;
|
| 21 | $font-size-h4: 1.43rem;
|
| 22 | $font-size-h5: 1.25rem;
|
| 23 | $font-size-h6: 1.15rem;
|
| 24 |
|
| 25 | $font-size-value: 4.37rem;
|
| 26 |
|
| 27 | $font-size-body-bigger: 1.43rem;
|
| 28 | $font-size-body-big: 1.12rem;
|
| 29 | $font-size-body-normal: 1rem;
|
| 30 | $font-size-body-list: 1rem;
|
| 31 |
|
| 32 | $font-size-caption: 0.8rem;
|
| 33 |
|
| 34 |
|
| 35 | $body-font-sizes: (
|
| 36 | "-bigger": $font-size-body-bigger,
|
| 37 | "-big": $font-size-body-big,
|
| 38 | "-normal": $font-size-body-normal,
|
| 39 | "-list": $font-size-body-list,
|
| 40 | );
|
| 41 |
|
| 42 | @mixin body-typography($body-name, $body-font-size) {
|
| 43 | .body#{$body-name} {
|
| 44 | line-height: 1.6;
|
| 45 | font-size: $body-font-size;
|
| 46 | }
|
| 47 | }
|
| 48 |
|
| 49 | @each $body-name, $body-font-size in $body-font-sizes {
|
| 50 | @include body-typography($body-name, $body-font-size);
|
| 51 | }
|
| 52 |
|
| 53 | .caption {
|
| 54 | font-size: $font-size-caption;
|
| 55 | }
|
| 56 |
|
| 57 | .value {
|
| 58 | font-family: $family-heading;
|
| 59 | font-size: $font-size-value;
|
| 60 | font-weight: bold;
|
| 61 |
|
| 62 | line-height: 1.3;
|
| 63 | letter-spacing: 0.02em;
|
| 64 | }
|
| 65 |
|
| 66 | .monospace {
|
| 67 | font-family: $family-code;
|
| 68 | font-size: 0.875em;
|
| 69 | }
|
| 70 |
|
| 71 |
|
| 72 | h1, h2, h3, h4, h5, h6, .title {
|
| 73 | color: $color-dark-slate-gray;
|
| 74 |
|
| 75 | font-family: $family-heading;
|
| 76 | font-weight: bold;
|
| 77 |
|
| 78 | text-transform: uppercase;
|
| 79 | line-height: 1.3;
|
| 80 | letter-spacing: 0.02rem;
|
| 81 | }
|
| 82 |
|
| 83 | .b-header, .subtitle {
|
| 84 | color: $color-dark-slate-gray;
|
| 85 |
|
| 86 | font-family: $family-body;
|
| 87 | font-weight: bold;
|
| 88 |
|
| 89 | text-transform: none;
|
| 90 | line-height: 1.3;
|
| 91 | letter-spacing: 0.02rem;
|
| 92 | }
|
| 93 |
|
| 94 |
|
| 95 | $header-font-sizes: (
|
| 96 | "1": $font-size-h1,
|
| 97 | "2": $font-size-h2,
|
| 98 | "3": $font-size-h3,
|
| 99 | "4": $font-size-h4,
|
| 100 | "5": $font-size-h5,
|
| 101 | "6": $font-size-h6,
|
| 102 | );
|
| 103 |
|
| 104 | @mixin header-typography($header-level, $header-font-size) {
|
| 105 | h#{$header-level}, .title.is-#{$header-level} {
|
| 106 | font-size: $header-font-size;
|
| 107 | }
|
| 108 | }
|
| 109 |
|
| 110 | @each $header-level, $header-font-size in $header-font-sizes {
|
| 111 | @include header-typography($header-level, $header-font-size);
|
| 112 | }
|
| 113 |
|
| 114 | body {
|
| 115 | font-family: $family-body;
|
| 116 | font-size: $font-size-body-normal;
|
| 117 | }
|
| 118 |
|
| 119 | a:hover {
|
| 120 | text-decoration: underline;
|
| 121 | }
|