stockholm.css (7429B)
1 /* Stockholm extension, https://github.com/annaesvensson/yellow-stockholm */ 2 3 /* Colors and fonts */ 4 5 :root { 6 --bg: #fff; 7 --code-bg: #f7f7f7; 8 --important-bg: #f0f8fe; 9 --heading: #111; 10 --text: #333; 11 --code: #666; 12 --link: #07d; 13 --link-active: #29f; 14 --blockquote-accent: #29f; 15 --important-accent: #08e; 16 --separator: #ddd; 17 --border: #bbb; 18 --font: "Open Sans", Helvetica, sans-serif; 19 --monospace-font: Consolas, Menlo, Courier, monospace; 20 } 21 @font-face { 22 font-family: "Open Sans"; 23 font-style: normal; 24 font-weight: 300; 25 font-display: swap; 26 src: url(stockholm-opensans-light.woff) format("woff"); 27 } 28 @font-face { 29 font-family: "Open Sans"; 30 font-style: normal; 31 font-weight: 400; 32 font-display: swap; 33 src: url(stockholm-opensans-regular.woff) format("woff"); 34 } 35 @font-face { 36 font-family: "Open Sans"; 37 font-style: normal; 38 font-weight: 700; 39 font-display: swap; 40 src: url(stockholm-opensans-bold.woff) format("woff"); 41 } 42 43 /* General */ 44 45 html, body, div, form, pre, span, tr, th, td, img { 46 margin: 0; 47 padding: 0; 48 border: 0; 49 vertical-align: baseline; 50 } 51 body { 52 margin: 1em; 53 background-color: var(--bg); 54 color: var(--text); 55 font-family: var(--font); 56 font-size: 1em; 57 font-weight: 300; 58 line-height: 1.5; 59 } 60 h1, h2, h3, h4, h5, h6 { 61 color: var(--heading); 62 font-weight: 400; 63 font-family: serif; 64 } 65 h1 { 66 font-size: 2em; 67 } 68 hr { 69 height: 1px; 70 background: var(--separator); 71 border: 0; 72 } 73 strong { 74 font-weight: bold; 75 } 76 code { 77 font-size: 1.1em; 78 } 79 a { 80 color: var(--link); 81 text-decoration: none; 82 } 83 a:hover { 84 color: var(--link); 85 text-decoration: underline; 86 } 87 88 /* Content */ 89 90 .content h1 { 91 margin: 1em 0; 92 } 93 .content h1 a { 94 color: var(--heading); 95 } 96 .content h1 a:hover { 97 color: var(--heading); 98 text-decoration: none; 99 } 100 .content img { 101 max-width: 100%; 102 height: auto; 103 } 104 .content form { 105 margin: 1em 0; 106 } 107 .content table { 108 border-spacing: 0; 109 border-collapse: collapse; 110 } 111 .content th:not([align]) { 112 text-align: left; 113 } 114 .content th, 115 .content td { 116 padding: 0.3em; 117 padding-left: 2em; 118 } 119 .content th:first-child, 120 .content td:first-child { 121 padding: 0.3em; 122 } 123 .content th { 124 border-bottom: 1px solid var(--separator); 125 } 126 .content code, 127 .content pre { 128 font-family: var(--monospace-font); 129 font-size: 90%; 130 } 131 .content code { 132 padding: 0.15em 0.4em; 133 margin: 0; 134 background-color: var(--code-bg); 135 color: var(--code); 136 border-radius: 3px; 137 } 138 .content pre > code { 139 padding: 0; 140 margin: 0; 141 white-space: pre; 142 background: transparent; 143 border: 0; 144 font-size: inherit; 145 } 146 .content pre { 147 padding: 1em; 148 overflow: auto; 149 line-height: 1.45; 150 background-color: var(--code-bg); 151 color: var(--code); 152 border-radius: 3px; 153 } 154 .content blockquote { 155 margin-left: 0; 156 padding-left: 1em; 157 font-weight: bold; 158 border-left: 3px solid var(--blockquote-accent); 159 } 160 .content details summary { 161 padding-left: inherit; 162 cursor: pointer; 163 } 164 .content details > * { 165 padding-left: 1em; 166 } 167 .content .important { 168 margin: 1em 0; 169 padding: 10px 1em; 170 background-color: var(--important-bg); 171 border-left: 10px solid var(--important-accent); 172 } 173 .content .flexible { 174 position: relative; 175 padding-top: 0; 176 padding-bottom: 56.25%; 177 } 178 .content .flexible iframe { 179 position: absolute; 180 top: 0; 181 left: 0; 182 width: 100%; 183 height: 100%; 184 } 185 .content .task-list-item { 186 list-style-type: none; 187 } 188 .content .task-list-item input { 189 margin: 0 0.2em 0.25em -1.75em; 190 vertical-align: middle; 191 } 192 .content .toc { 193 margin: 0; 194 padding: 0; 195 list-style: none; 196 } 197 .content .wikipages ul, 198 .content .wikitags ul, 199 .content .wikilinks ul { 200 padding: 0; 201 list-style: none; 202 column-width: 19em; 203 } 204 .content .previousnext .previous { 205 margin-right: 1em; 206 } 207 .content .pagination .previous { 208 margin-right: 1em; 209 } 210 .content .pagination { 211 margin: 1em 0; 212 } 213 .content .left { 214 float: left; 215 margin: 0 1em 0 0; 216 } 217 .content .center { 218 display: block; 219 margin: 0 auto; 220 } 221 .content .right { 222 float: right; 223 margin: 0 0 0 1em; 224 } 225 .content .rounded { 226 border-radius: 4px; 227 } 228 229 /* Header */ 230 231 .header { 232 margin: 2em 0; 233 } 234 .header .sitename { 235 display: block; 236 float: left; 237 } 238 .header .sitename h1 { 239 margin: 0; 240 font-size: 1em; 241 font-weight: 300; 242 } 243 .header .sitename h1 a { 244 color: var(--text); 245 border-bottom: solid 3px var(--bg); 246 text-decoration: none; 247 padding: 0.5em 0; 248 } 249 .header .sitename h1 a:hover { 250 color: var(--link); 251 border-bottom: solid 3px var(--link-active); 252 } 253 .header .sitename p { 254 margin-top: 0; 255 color: var(--text); 256 } 257 258 /* Navigation */ 259 260 .navigation { 261 display: block; 262 float: right; 263 margin-top: 0.5em; 264 font-size: 1em; 265 } 266 .navigation a { 267 color: var(--text); 268 border-bottom: solid 3px var(--bg); 269 text-decoration: none; 270 padding: 0.5em 0; 271 margin: 0 0.5em; 272 } 273 .navigation a:hover { 274 color: var(--link); 275 border-bottom: solid 3px var(--link-active); 276 } 277 .navigation ul { 278 margin: 0 -0.5em; 279 padding: 0; 280 list-style: none; 281 } 282 .navigation li { 283 display: inline; 284 } 285 .navigation li a.active { 286 border-bottom: solid 3px var(--link-active); 287 } 288 .navigation-banner { 289 clear: both; 290 } 291 292 /* Footer */ 293 294 .footer { 295 margin: 2em 0; 296 } 297 .footer .siteinfo a { 298 color: var(--link); 299 } 300 .footer .siteinfo a:hover { 301 color: var(--link); 302 text-decoration: underline; 303 } 304 305 /* Forms and buttons */ 306 307 .form-control { 308 margin: 0; 309 padding: 2px 4px; 310 display: inline-block; 311 min-width: 7em; 312 background-color: var(--bg); 313 color: var(--text); 314 background-image: linear-gradient(to bottom, var(--bg), var(--bg)); 315 border: 1px solid var(--border); 316 border-radius: 4px; 317 font-size: 0.9em; 318 font-family: inherit; 319 font-weight: normal; 320 line-height: normal; 321 } 322 .btn { 323 margin: 0; 324 padding: 4px 22px; 325 display: inline-block; 326 min-width: 7em; 327 background-color: #eaeaea; 328 color: #333333; 329 background-image: linear-gradient(to bottom, #f8f8f8, #e1e1e1); 330 border: 1px solid var(--border); 331 border-color: #c1c1c1 #c1c1c1 #aaaaaa; 332 border-radius: 4px; 333 outline-offset: -2px; 334 font-size: 0.9em; 335 font-family: inherit; 336 font-weight: normal; 337 line-height: 1; 338 text-align: center; 339 text-decoration: none; 340 box-sizing: border-box; 341 } 342 .btn:hover, 343 .btn:focus, 344 .btn:active { 345 color: #333333; 346 background-image: none; 347 text-decoration: none; 348 } 349 .btn:active { 350 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); 351 } 352 353 /* Responsive and print */ 354 355 .page { 356 margin: 0 auto; 357 max-width: 1000px; 358 } 359 360 @media screen and (min-width: 62em) { 361 body { 362 width: 60em; 363 margin: 1em auto; 364 } 365 .page { 366 margin: 0; 367 max-width: none; 368 } 369 } 370 @media screen and (max-width: 32em) { 371 body { 372 margin: 0.5em; 373 font-size: 0.9em; 374 } 375 .content h1, 376 .content h2 { 377 font-size: 1.5em; 378 } 379 } 380 @media print { 381 .page { 382 border: none !important; 383 } 384 } 385 386 /* Custom */ 387 .latex sub { 388 vertical-align: -0.6ex; 389 margin-left: -0.125em; 390 margin-right: -0.125em; 391 font-size: 1em; 392 } 393 394 .latex { 395 font-family: serif; 396 font-size: 1.5em; 397 } 398 399 .latex sup { 400 font-size: 0.7em; 401 vertical-align: 0.3em; 402 margin-left: -0.20em; 403 margin-right: -0.2em; 404 }