1.article__content { 2 line-height: map-get($base, line-height-lg); 3 word-wrap: break-word; 4 @media print { 5 line-height: map-get($base, line-height); 6 } 7 @include block-elements() { 8 margin: map-get($spacers, 3) 0; 9 @media print { 10 margin: map-get($spacers, 2) 0; 11 } 12 } 13 @include heading-elements() { 14 position: relative; 15 margin-top: map-get($spacers, 4); 16 @media print { 17 margin-top: map-get($spacers, 3); 18 } 19 & > .anchor { 20 @include link-colors($border-color, $main-color-1); 21 margin-left: map-get($spacers, 1); 22 text-decoration: none; 23 visibility: hidden; 24 opacity: 0; 25 & > i { 26 font-size: map-get($base, font-size-sm); 27 } 28 } 29 @include hover() { 30 & > .anchor { 31 cursor: pointer; 32 visibility: visible; 33 opacity: 1; 34 } 35 } 36 } 37 h1, 38 h2 { 39 @include split-line(bottom); 40 } 41 hr { 42 border: none; 43 @include horizontal-rules(); 44 } 45 blockquote { 46 padding-left: map-get($spacers, 3); 47 font-size: map-get($base, font-size-sm); 48 color: $text-color-l; 49 @include split-line(left, 4px, $border-color); 50 p { 51 margin: map-get($spacers, 2) 0; 52 } 53 & > :last-child { 54 margin-bottom: 0; 55 } 56 } 57 img:not(.emoji) { 58 max-width: 100%; 59 vertical-align: middle; 60 } 61 .emoji { 62 display: inline-block; 63 width: map-get($base, line-height-lg) * .7rem; 64 height: map-get($base, line-height-lg) * .7rem; 65 vertical-align: text-bottom; 66 } 67 .footnotes { 68 @include split-line(); 69 margin-top: map-get($spacers, 5); 70 @media print { 71 margin-top: map-get($spacers, 2) * 2; 72 } 73 } 74 code { 75 padding: map-get($spacers, 1) map-get($spacers, 2); 76 background-color: $text-background-color; 77 border-radius: map-get($base, border-radius); 78 span { 79 padding: 0; 80 margin: 0; 81 } 82 } 83 pre { 84 @include overflow(auto); 85 & > code { 86 padding: 0; 87 word-wrap: normal; 88 background-color: transparent; 89 &.language-mermaid, &.language-chart { 90 svg { 91 width: 100%; 92 } 93 display: none; 94 &[data-processed] { 95 display: block; 96 } 97 } 98 } 99 } 100 .highlighter-rouge > .highlight, figure.highlight { 101 & > pre { 102 padding: map-get($spacers, 3) 0 map-get($spacers, 3) map-get($spacers, 3); 103 margin: 0; 104 background-color: $text-background-color; 105 border-radius: map-get($base, border-radius); 106 & > code { 107 display: block; 108 } 109 } 110 } 111 figure.highlight { 112 &::before { 113 display: block; 114 padding: map-get($spacers, 2) map-get($spacers, 3) map-get($spacers, 2) 0; 115 font-weight: map-get($base, font-weight-bold); 116 color: $decorate-color; 117 text-align: right; 118 text-transform: uppercase; 119 content: attr(data-lang); 120 background-color: $text-background-color; 121 border-top-left-radius: map-get($base, border-radius); 122 border-top-right-radius: map-get($base, border-radius); 123 } 124 & > pre { 125 padding-top: 0; 126 border-top-left-radius: 0; 127 border-top-right-radius: 0; 128 & > code { 129 & > .rouge-table { 130 width: auto; 131 margin: 0 0 #{- map-get($spacers, 3)} #{- map-get($spacers, 3)}; 132 tbody, tr, td { 133 padding-top: 0; 134 padding-bottom: 0; 135 border: none; 136 } 137 & > tbody { 138 @include flexbox; 139 & > tr { 140 width: 100%; 141 @include flexbox; 142 & > .code { 143 padding: 0 0 map-get($spacers, 3) map-get($spacers, 2); 144 @include overflow(auto); 145 } 146 } 147 } 148 tbody td { 149 &.gl { 150 padding-left: map-get($spacers, 3); 151 } 152 & > pre { 153 display: block; 154 margin: 0; 155 border-radius: 0; 156 @include overflow(auto); 157 &.lineno { 158 color: $text-color-l; 159 @include user-select(none); 160 } 161 } 162 } 163 } 164 } 165 } 166 } 167 ul, ol { 168 margin-left: map-get($spacers, 4); 169 ul, ol { 170 margin-top: 0; 171 margin-bottom: 0; 172 } 173 li { 174 p { 175 margin: map-get($spacers, 2); 176 @media print { 177 margin: map-get($spacers, 1); 178 } 179 } 180 } 181 } 182 dl { 183 dt, dd { 184 p { 185 margin: map-get($spacers, 2); 186 @media print { 187 margin: map-get($spacers, 1); 188 } 189 } 190 } 191 dt { 192 font-weight: map-get($base, font-weight-bold); 193 } 194 dd { 195 margin-left: 2rem; 196 } 197 } 198 ul.task-list { 199 margin-left: 0; 200 list-style-type: none; 201 ul, ol { 202 margin-left: map-get($spacers, 4); 203 } 204 } 205 table { 206 display: block; 207 width: 100%; 208 border-collapse: collapse; 209 @include overflow(auto); 210 thead, tfoot { 211 background-color: $text-background-color; 212 } 213 th, td { 214 padding: map-get($spacers, 2); 215 border: 1px solid $border-color-l; 216 } 217 th { 218 font-weight: map-get($base, font-weight-bold); 219 } 220 } 221} 222