| 1 | .md-content h3, |
| 2 | .md-content h4, |
| 3 | .md-content h5, |
| 4 | .md-content h6 { |
| 5 | margin: 24px 0 16px; |
| 6 | } |
| 7 | |
| 8 | .md-content h1 { |
| 9 | margin: var(--space-6) auto var(--space-5); |
| 10 | font-size: var(--text-3xl); |
| 11 | line-height: var(--leading-tight); |
| 12 | font-weight: 700; |
| 13 | } |
| 14 | |
| 15 | .md-content h2 { |
| 16 | margin: var(--space-5) auto var(--space-4); |
| 17 | font-size: var(--text-2xl); |
| 18 | line-height: 1.25; |
| 19 | font-weight: 600; |
| 20 | } |
| 21 | |
| 22 | .md-content h3 { |
| 23 | font-size: var(--text-xl); |
| 24 | line-height: 1.3; |
| 25 | font-weight: 600; |
| 26 | } |
| 27 | |
| 28 | .md-content h4 { |
| 29 | font-size: var(--text-lg); |
| 30 | line-height: 1.35; |
| 31 | font-weight: 600; |
| 32 | } |
| 33 | |
| 34 | .md-content h5 { |
| 35 | font-size: var(--text-sm); |
| 36 | line-height: var(--leading-normal); |
| 37 | font-weight: 600; |
| 38 | } |
| 39 | |
| 40 | .md-content h6 { |
| 41 | font-size: var(--text-xs); |
| 42 | line-height: 1.4; |
| 43 | font-weight: 500; |
| 44 | } |
| 45 | |
| 46 | .md-content a:not(.anchor) { |
| 47 | text-underline-offset: 0.3rem; |
| 48 | text-decoration: underline; |
| 49 | } |
| 50 | |
| 51 | .md-content del { |
| 52 | text-decoration: line-through; |
| 53 | } |
| 54 | |
| 55 | .md-content dl:not(:last-child), |
| 56 | .md-content ol:not(:last-child), |
| 57 | .md-content p:not(:last-child), |
| 58 | .md-content figure:not(:last-child), |
| 59 | .md-content ul:not(:last-child) { |
| 60 | margin-bottom: var(--content-gap); |
| 61 | } |
| 62 | |
| 63 | .md-content ol, |
| 64 | .md-content ul { |
| 65 | padding-inline-start: 1.25rem; |
| 66 | } |
| 67 | |
| 68 | .md-content li { |
| 69 | margin-top: 0.3rem; |
| 70 | } |
| 71 | |
| 72 | .md-content li p { |
| 73 | margin-bottom: 0; |
| 74 | } |
| 75 | |
| 76 | .md-content dl { |
| 77 | display: flex; |
| 78 | flex-wrap: wrap; |
| 79 | margin: 0; |
| 80 | } |
| 81 | |
| 82 | .md-content dt { |
| 83 | width: 25%; |
| 84 | font-weight: 700; |
| 85 | } |
| 86 | |
| 87 | .md-content dd { |
| 88 | width: 75%; |
| 89 | margin-inline-start: 0; |
| 90 | padding-inline-start: 10px; |
| 91 | } |
| 92 | |
| 93 | .md-content dd~dd, |
| 94 | .md-content dt~dt { |
| 95 | margin-top: 10px; |
| 96 | } |
| 97 | |
| 98 | .md-content table { |
| 99 | margin-bottom: var(--content-gap); |
| 100 | } |
| 101 | |
| 102 | .md-content table th, |
| 103 | .md-content table:not(.highlighttable, .highlight table, .gist .highlight) td { |
| 104 | min-width: 80px; |
| 105 | padding: 6px 13px; |
| 106 | line-height: 1.5; |
| 107 | border: 1px solid var(--border); |
| 108 | } |
| 109 | |
| 110 | .md-content table th { |
| 111 | text-align: start; |
| 112 | } |
| 113 | |
| 114 | .md-content table:not(.highlighttable) td code:only-child { |
| 115 | margin: auto 0; |
| 116 | } |
| 117 | |
| 118 | .md-content .highlight table { |
| 119 | border-radius: var(--radius); |
| 120 | } |
| 121 | |
| 122 | .md-content .highlight:not(table) { |
| 123 | margin-bottom: var(--content-gap); |
| 124 | background: var(--code-block-bg) !important; |
| 125 | border-radius: var(--radius); |
| 126 | direction: ltr; |
| 127 | } |
| 128 | |
| 129 | .md-content li>.highlight { |
| 130 | margin-inline-end: 0; |
| 131 | } |
| 132 | |
| 133 | .md-content ul pre { |
| 134 | margin-inline-start: calc(var(--gap) * -2); |
| 135 | } |
| 136 | |
| 137 | .md-content .highlight pre { |
| 138 | margin: 0; |
| 139 | } |
| 140 | |
| 141 | .md-content .highlighttable { |
| 142 | table-layout: fixed; |
| 143 | } |
| 144 | |
| 145 | .md-content .highlighttable td:first-child { |
| 146 | width: 40px; |
| 147 | } |
| 148 | |
| 149 | .md-content .highlighttable td .linenodiv { |
| 150 | padding-inline-end: 0 !important; |
| 151 | } |
| 152 | |
| 153 | .md-content .highlighttable td .highlight, |
| 154 | .md-content .highlighttable td .linenodiv pre { |
| 155 | margin-bottom: 0; |
| 156 | } |
| 157 | |
| 158 | .post-content code { |
| 159 | padding: 0.2rem 0.3rem; |
| 160 | font-size: 0.78em; |
| 161 | line-height: 1.5; |
| 162 | background: var(--code-bg); |
| 163 | border-radius: 0.2rem; |
| 164 | } |
| 165 | |
| 166 | .md-content pre code { |
| 167 | display: grid; |
| 168 | margin: auto 0; |
| 169 | padding: var(--space-3); |
| 170 | color: var(--color-code-text); |
| 171 | background: var(--color-code-block-bg) !important; |
| 172 | border-radius: var(--radius-md); |
| 173 | overflow-x: auto; |
| 174 | word-break: break-all; |
| 175 | } |
| 176 | |
| 177 | .md-content blockquote { |
| 178 | margin: var(--space-3) 0; |
| 179 | padding-inline-start: var(--space-3); |
| 180 | border-inline-start: 0.3rem solid var(--color-text); |
| 181 | } |
| 182 | |
| 183 | .md-content hr { |
| 184 | margin: 30px 0; |
| 185 | height: 2px; |
| 186 | background: var(--tertiary); |
| 187 | border: 0; |
| 188 | } |
| 189 | |
| 190 | .md-content iframe { |
| 191 | max-width: 100%; |
| 192 | } |
| 193 | |
| 194 | .md-content img { |
| 195 | border-radius: var(--radius); |
| 196 | margin: 1rem 0; |
| 197 | } |
| 198 | |
| 199 | .md-content img[src*="#center"] { |
| 200 | margin: 1rem auto; |
| 201 | } |
| 202 | |
| 203 | .md-content figure.align-center { |
| 204 | text-align: center; |
| 205 | } |
| 206 | |
| 207 | .md-content figure>figcaption { |
| 208 | color: var(--color-text); |
| 209 | font-size: var(--text-base); |
| 210 | font-weight: 600; |
| 211 | margin: var(--space-2) 0 var(--space-3); |
| 212 | } |
| 213 | |
| 214 | .md-content figure>figcaption>p { |
| 215 | color: var(--color-text-muted); |
| 216 | font-size: var(--text-sm); |
| 217 | font-weight: 400; |
| 218 | } |
| 219 | |
| 220 | .md-content h1:hover .anchor, |
| 221 | .md-content h2:hover .anchor, |
| 222 | .md-content h3:hover .anchor, |
| 223 | .md-content h4:hover .anchor, |
| 224 | .md-content h5:hover .anchor, |
| 225 | .md-content h6:hover .anchor { |
| 226 | display: inline-flex; |
| 227 | color: var(--secondary); |
| 228 | margin-inline-start: 0.5em; |
| 229 | font-weight: 500; |
| 230 | user-select: none; |
| 231 | } |
| 232 | |
| 233 | .anchor:hover { |
| 234 | color: var(--content) !important; |
| 235 | } |
| 236 | |
| 237 | .md-content img.in-text { |
| 238 | display: inline; |
| 239 | margin: auto; |
| 240 | } |
| 241 | |
| 242 | mark { |
| 243 | border-radius: 2px; |
| 244 | padding: 0 2px; |
| 245 | } |
| 246 | |
| 247 | audio { |
| 248 | display: block; |
| 249 | width: 100%; |
| 250 | border: 1px solid var(--border); |
| 251 | border-radius: var(--radius); |
| 252 | overflow: hidden; |
| 253 | height: 2.5rem; |
| 254 | margin-bottom: var(--content-gap); |
| 255 | } |
| 256 | |
| 257 | audio::-webkit-media-controls-enclosure { |
| 258 | border-radius: 0; |
| 259 | } |
| 260 | |
| 261 | video { |
| 262 | border: 1px solid var(--code-bg); |
| 263 | border-radius: var(--radius); |
| 264 | max-width: 100%; |
| 265 | } |