typography.css (4662B)
1 /* Fonts */ 2 :root { 3 --font-monospace: "Fira Mono", monospace; 4 --font-serif: "Atkinson Hyperlegible", "Times New Roman", "Georgia", "Garamond", serif; 5 --font-sansSerif: "Atkinson Hyperlegible", "Arial", sansSerif; 6 } 7 8 body { 9 /* font-family: var(--font-serif); */ 10 font-family: var(--font-sansSerif); 11 font-size: 18px; 12 line-height: 1.5rem; 13 } 14 15 /* Headings */ 16 17 h1, 18 h2, 19 h3, 20 h4, 21 h5, 22 h6 { 23 font-size: 18px; 24 margin: 1.5rem 0 1rem 0; 25 font-weight: 600; 26 } 27 28 h1+h2, 29 h1+h3, 30 h1+h4, 31 h1+h5, 32 h1+h6, 33 h2+h3, 34 h2+h4, 35 h2+h5, 36 h2+h6, 37 h3+h4, 38 h3+h5, 39 h3+h6, 40 h4+h5, 41 h4+h6, 42 h5+h6 { 43 margin: 0rem; 44 margin-top: 0.3rem; 45 } 46 47 /* h1:before { content: "# "; } */ 48 h2:before { content: "# "; } 49 h3:before { content: "2# "; } 50 h4:before { content: "3# "; } 51 h5:before { content: "4# "; } 52 h6:before { content: "5# "; } 53 54 h1:before, 55 h2:before, 56 h3:before, 57 h4:before, 58 h5:before, 59 h6:before { 60 color: var(--muted); 61 } 62 63 h1 { 64 margin-top: 0; 65 margin-bottom: 1rem; 66 font-size: 1.6rem; 67 } 68 69 h2 { 70 font-size: 1.3rem; 71 } 72 73 /* Paragraphs */ 74 p { 75 margin: 0 0 1.5rem 0; 76 } 77 78 /* Links */ 79 80 a:link, a:visited { 81 color: var(--link); 82 } 83 84 a:hover, a:active, a.active { 85 color: var(--hover); 86 } 87 88 /* Lists */ 89 ul { 90 margin: 0 0 1.5rem 0; 91 padding-left: 1.25rem; 92 } 93 94 ol { 95 margin: 0 0 1.5rem 0; 96 padding-left: 1.75rem; 97 } 98 99 ul ul, 100 ul ol, 101 ol ul, 102 ol ol { 103 margin: 0; 104 } 105 106 ul li::marker { 107 content: '∗\00A0'; 108 color: var(--muted); 109 } 110 111 ol li::marker { 112 color: var(--muted); 113 } 114 115 li.nomarker { 116 display: block; 117 } 118 119 dt { 120 margin: 0; 121 font-weight: bold; 122 } 123 124 dd { 125 margin: 0 0 0 1.5rem; 126 font-style: italic; 127 } 128 129 dd + dt { 130 margin-top: 1.5rem; 131 } 132 133 dl { 134 margin: 0 0 1.5rem 0; 135 } 136 137 /* Blockquotes */ 138 blockquote { 139 position: relative; 140 margin: 0 0 1.5rem 1.5rem; 141 } 142 143 blockquote::before { 144 position: absolute; 145 left: -1.5rem; 146 content: ">"; 147 color: var(--muted); 148 } 149 150 .twitter-tweet::before { 151 content: "\f099"; 152 font-family: "Font Awesome 5 Brands"; 153 font-weight: 400; 154 } 155 156 /* Code */ 157 pre, 158 code, 159 kbd, 160 samp { 161 background: var(--inner-bg) !important; 162 font-family: var(--font-monospace); 163 color: var(--off-fg); 164 } 165 166 pre { 167 overflow-x: auto; 168 padding: 1.5rem; 169 margin: 0 0 1.5rem 0; 170 } 171 172 /* Fix overflow when config markup.highlight.lineNos is true */ 173 /* See https://github.com/joeroe/risotto/issues/41 */ 174 .highlight div { 175 overflow-x: auto; 176 } 177 178 /* Emphasis */ 179 b, 180 strong { 181 font-weight: 600; 182 } 183 184 /* Highlighting */ 185 ::selection, 186 mark { 187 background-color: var(--highlight); 188 color: var(--bg); 189 } 190 191 /* Other typographic elements */ 192 hr { 193 color: var(--muted); 194 box-shadow: none; 195 } 196 197 /* hr:after { */ 198 /* content: '---'; */ 199 /* color: var(--muted); */ 200 /* } */ 201 202 203 /* Prevent super/sub from affecting line height */ 204 sup, sub { 205 vertical-align: baseline; 206 position: relative; 207 top: -0.25rem; 208 font-size: unset; 209 } 210 sub { 211 top: 0.25rem; 212 } 213 214 /* Table of Content */ 215 #TableOfContents ul li { 216 padding: 0.2rem; 217 } 218 219 /* Tables */ 220 table { 221 border-spacing: 0; 222 margin: 0 0 1.5rem 0; 223 overflow-wrap: anywhere; 224 } 225 th, td { 226 padding: 0 .75rem; 227 vertical-align: top; 228 } 229 th:first-child, td:first-child { 230 padding-left: 0; 231 } 232 th { 233 text-align: inherit; 234 } 235 236 /* Figures */ 237 img { 238 max-width: 80%; 239 height: auto; 240 } 241 242 .content__body { 243 line-height: 1.8rem; 244 } 245 246 247 /* Colour classes */ 248 .base00 { color: var(--base00); } 249 .base01 { color: var(--base01); } 250 .base02 { color: var(--base02); } 251 .base03 { color: var(--base03); } 252 .base04 { color: var(--base04); } 253 .base05 { color: var(--base05); } 254 .base06 { color: var(--base06); } 255 .base07 { color: var(--base07); } 256 .base08 { color: var(--base08); } 257 .base09 { color: var(--base09); } 258 .base0A { color: var(--base0A); } 259 .base0B { color: var(--base0B); } 260 .base0C { color: var(--base0C); } 261 .base0D { color: var(--base0D); } 262 .base0E { color: var(--base0E); } 263 .base0F { color: var(--base0F); } 264 265 .bg-base00 { background-color: var(--base00); } 266 .bg-base01 { background-color: var(--base01); } 267 .bg-base02 { background-color: var(--base02); } 268 .bg-base03 { background-color: var(--base03); } 269 .bg-base04 { background-color: var(--base04); } 270 .bg-base05 { background-color: var(--base05); } 271 .bg-base06 { background-color: var(--base06); } 272 .bg-base07 { background-color: var(--base07); } 273 .bg-base08 { background-color: var(--base08); } 274 .bg-base09 { background-color: var(--base09); } 275 .bg-base0A { background-color: var(--base0A); } 276 .bg-base0B { background-color: var(--base0B); } 277 .bg-base0C { background-color: var(--base0C); } 278 .bg-base0D { background-color: var(--base0D); } 279 .bg-base0E { background-color: var(--base0E); } 280 .bg-base0F { background-color: var(--base0F); }