Fossil SCM
The careful selectors to cause indents to occur only in desired places prevent them from working in less obvious cases like /file URLs or for README files rendered under /dir. Solving this is easy in SCSS, but it creates a combinatorial explosion of selectors in CSS. Fortunately, we can generate the CSS with Inskinerator, then bake a cleaned-up static version of its ouptut into this file.
Commit
30a7c1e2c509294956cd9519eac40cb99b5df716597b96afb82fdf825a2a4f11
Parent
d5de647aa5a3812…
1 file changed
+89
-30
+89
-30
| --- skins/default/css.txt | ||
| +++ skins/default/css.txt | ||
| @@ -388,57 +388,116 @@ | ||
| 388 | 388 | padding: 8px 20px; |
| 389 | 389 | } |
| 390 | 390 | .mainmenu { |
| 391 | 391 | padding: 10px; |
| 392 | 392 | } |
| 393 | - .doc > .content > .markdown > blockquote { | |
| 394 | - /* Slight indent for MD blockquotes, since they're styled with extra | |
| 395 | - * whitespace above for both mobile and desktop. */ | |
| 396 | - margin-left: 60pt; | |
| 397 | - } | |
| 398 | - .doc > .content blockquote { | |
| 399 | - /* Apply extra indent relative to "p" for backwards compatibility | |
| 400 | - * in wiki docs since Fossil's generator misuses the blockquote | |
| 401 | - * tag against HTML and MD norms to mean "indented paragraph." */ | |
| 402 | - margin-left: 80pt; | |
| 403 | - } | |
| 404 | - .doc > .content dd { margin-left: 30pt; margin-bottom: 1em; } | |
| 405 | - .doc > .content dl { margin-left: 60pt; } | |
| 406 | - .doc > .content dt { margin-left: 10pt; } | |
| 407 | - .doc > .content h1 { margin-left: 10pt; } | |
| 408 | - .doc > .content h2 { margin-left: 20pt; } | |
| 409 | - .doc > .content h3 { margin-left: 30pt; } | |
| 410 | - .doc > .content h4 { margin-left: 40pt; } | |
| 411 | - .doc > .content h5 { margin-left: 50pt; } | |
| 412 | - .doc > .content hr { margin-left: 10pt; } | |
| 413 | - | |
| 414 | - /* Extra > in these relative to above is to ensure we indent top-level | |
| 415 | - * markup only to avoid double-indent of nested markup like p in li. */ | |
| 393 | + | |
| 394 | + /* This horror-show selector explosion lets us avoid applying indents | |
| 395 | + * to Fossil UI generated pages, nested formatting in forum posts, | |
| 396 | + * paragraphs within tables, etc. What this actually *says* is far | |
| 397 | + * simpler than it looks; the equivalent SCSS is merely: | |
| 398 | + * | |
| 399 | + * .artifact, .dir, .doc { | |
| 400 | + * > .content, // wiki docs have no inner container | |
| 401 | + * > .content > .fossil-doc, // container for HTML embedded docs | |
| 402 | + * > .content > markdown { // ditto for MD outside forum, tickets… | |
| 403 | + * > p, > ol, > ul, > table { | |
| 404 | + * margin-left: 50pt; margin-right: 50pt; | |
| 405 | + * } | |
| 406 | + * } | |
| 407 | + * } | |
| 408 | + * | |
| 409 | + * Generated by Inskinerator; see its override/modern/media.scss file. */ | |
| 410 | + .artifact > .content > p, | |
| 411 | + .artifact > .content > .markdown > p, | |
| 412 | + .artifact > .content > .fossil-doc > p, | |
| 413 | + .artifact > .content > ol, .artifact > .content > ul, | |
| 414 | + .artifact > .content > .markdown > ol, .artifact > .content > .markdown > ul, | |
| 415 | + .artifact > .content > .fossil-doc > ol, .artifact > .content > .fossil-doc > ul, | |
| 416 | + .artifact > .content > table, | |
| 417 | + .artifact > .content > .markdown > table, | |
| 418 | + .artifact > .content > .fossil-doc > table, | |
| 419 | + .dir > .content > p, | |
| 420 | + .dir > .content > .markdown > p, | |
| 421 | + .dir > .content > .fossil-doc > p, | |
| 422 | + .dir > .content > ol, .dir > .content > ul, | |
| 423 | + .dir > .content > .markdown > ol, .dir > .content > .markdown > ul, | |
| 424 | + .dir > .content > .fossil-doc > ol, .dir > .content > .fossil-doc > ul, | |
| 425 | + .dir > .content > table, | |
| 426 | + .dir > .content > .markdown > table, | |
| 427 | + .dir > .content > .fossil-doc > table, | |
| 416 | 428 | .doc > .content > p, |
| 417 | 429 | .doc > .content > .markdown > p, |
| 418 | 430 | .doc > .content > .fossil-doc > p, |
| 419 | - .doc > .content > ol, .doc > .content > ul, | |
| 420 | - .doc > .content > .markdown > ol, .doc > .content > .markdown > ul, | |
| 431 | + .doc > .content > ol, .doc > .content > ul, | |
| 432 | + .doc > .content > .markdown > ol, .doc > .content > .markdown > ul, | |
| 421 | 433 | .doc > .content > .fossil-doc > ol, .doc > .content > .fossil-doc > ul, |
| 422 | - .doc > .content table { | |
| 423 | - margin-left: 50pt; | |
| 434 | + .doc > .content > table, | |
| 435 | + .doc > .content > .markdown > table, | |
| 436 | + .doc > .content > .fossil-doc > table { | |
| 437 | + margin-left: 50pt; | |
| 424 | 438 | margin-right: 50pt; |
| 425 | 439 | } |
| 440 | + | |
| 441 | + /* Code blocks and such get extra indent. We need a selector explosion | |
| 442 | + * equally powerful to the above because Fossil UI *does* use <pre>, | |
| 443 | + * and we want this to apply to user content only. | |
| 444 | + * | |
| 445 | + * It's easier to see what's going on here: three types of top-level | |
| 446 | + * body class for /file, /dir and /doc times three flavors of embedded | |
| 447 | + * doc type (plain HTML, wiki, and MD) require nine total selectors. */ | |
| 448 | + .artifact > .content > pre, | |
| 449 | + .artifact > .content > .markdown > pre, | |
| 450 | + .artifact > .content > .fossil-doc > pre, | |
| 451 | + .dir > .content > pre, | |
| 452 | + .dir > .content > .markdown > pre, | |
| 453 | + .dir > .content > .fossil-doc > pre, | |
| 426 | 454 | .doc > .content > pre, |
| 427 | 455 | .doc > .content > .markdown > pre, |
| 428 | 456 | .doc > .content > .fossil-doc > pre { |
| 429 | 457 | margin-left: 70pt; |
| 430 | 458 | margin-right: 50pt; |
| 431 | 459 | } |
| 432 | - .doc > .content .pikchr-wrapper { | |
| 433 | - margin-left: 70pt; | |
| 434 | - } | |
| 460 | + | |
| 461 | + /* Fossil UI uses these, but in sufficiently constrained ways that we | |
| 462 | + * don't have to be nearly as careful to avoid an overreach. */ | |
| 463 | + .doc > .content h1, .artifact h1, .dir h1 { margin-left: 10pt; } | |
| 464 | + .doc > .content h2, .artifact h2, .dir h2 { margin-left: 20pt; } | |
| 465 | + .doc > .content h3, .artifact h3, .dir h3 { margin-left: 30pt; } | |
| 466 | + .doc > .content h4, .artifact h4, .dir h4 { margin-left: 40pt; } | |
| 467 | + .doc > .content h5, .artifact h5, .dir h5 { margin-left: 50pt; } | |
| 468 | + .doc > .content hr, .artifact hr, .dir hr { margin-left: 10pt; } | |
| 469 | + | |
| 470 | + /* Don't need to be nearly as careful with tags Fossil UI doesn't use. */ | |
| 471 | + .doc dd, .artifact dd, .dir dd { margin-left: 30pt; margin-bottom: 1em; } | |
| 472 | + .doc dl, .artifact dl, .dir dl { margin-left: 60pt; } | |
| 473 | + .doc dt, .artifact dt, .dir dt { margin-left: 10pt; } | |
| 474 | + | |
| 475 | + /* Fossil UI doesn't use Pikchr at all (yet?) so we can be quite loose | |
| 476 | + * with these selectors. */ | |
| 477 | + .content .pikchr-wrapper { margin-left: 70pt; } | |
| 435 | 478 | div.pikchr-wrapper.indent:not(.source) { |
| 436 | 479 | /* Selector naming scheme mismatch is intentional: it must match the |
| 437 | 480 | * way it's given in default.css exactly if it is to override it. */ |
| 438 | 481 | margin-left: 70pt; |
| 439 | 482 | margin-right: 50pt; |
| 440 | 483 | } |
| 441 | 484 | div.pikchr-wrapper.center:not(.source) { |
| 442 | 485 | margin-left: 0; |
| 443 | 486 | } |
| 487 | + | |
| 488 | + /* Special treatment for backward compatibility. */ | |
| 489 | + .content blockquote { | |
| 490 | + /* We must apply extra indent relative to "p" since Fossil's wiki | |
| 491 | + * generator misuses the blockquote tag against HTML and MD norms | |
| 492 | + * to mean "indented paragraph." */ | |
| 493 | + margin-left: 80pt; | |
| 494 | + } | |
| 495 | + .artifact > .content > .markdown > blockquote, | |
| 496 | + .dir > .content > .markdown > blockquote, | |
| 497 | + .doc > .content > .markdown > blockquote { | |
| 498 | + /* Fossil MD didn't inherit that bug; its HTML generator emits | |
| 499 | + * blockquote tags only for _block quotes_! A moderate indent | |
| 500 | + * suffices due to the visual styling applied above. */ | |
| 501 | + margin-left: 60pt; | |
| 502 | + } | |
| 444 | 503 | } |
| 445 | 504 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -388,57 +388,116 @@ | |
| 388 | padding: 8px 20px; |
| 389 | } |
| 390 | .mainmenu { |
| 391 | padding: 10px; |
| 392 | } |
| 393 | .doc > .content > .markdown > blockquote { |
| 394 | /* Slight indent for MD blockquotes, since they're styled with extra |
| 395 | * whitespace above for both mobile and desktop. */ |
| 396 | margin-left: 60pt; |
| 397 | } |
| 398 | .doc > .content blockquote { |
| 399 | /* Apply extra indent relative to "p" for backwards compatibility |
| 400 | * in wiki docs since Fossil's generator misuses the blockquote |
| 401 | * tag against HTML and MD norms to mean "indented paragraph." */ |
| 402 | margin-left: 80pt; |
| 403 | } |
| 404 | .doc > .content dd { margin-left: 30pt; margin-bottom: 1em; } |
| 405 | .doc > .content dl { margin-left: 60pt; } |
| 406 | .doc > .content dt { margin-left: 10pt; } |
| 407 | .doc > .content h1 { margin-left: 10pt; } |
| 408 | .doc > .content h2 { margin-left: 20pt; } |
| 409 | .doc > .content h3 { margin-left: 30pt; } |
| 410 | .doc > .content h4 { margin-left: 40pt; } |
| 411 | .doc > .content h5 { margin-left: 50pt; } |
| 412 | .doc > .content hr { margin-left: 10pt; } |
| 413 | |
| 414 | /* Extra > in these relative to above is to ensure we indent top-level |
| 415 | * markup only to avoid double-indent of nested markup like p in li. */ |
| 416 | .doc > .content > p, |
| 417 | .doc > .content > .markdown > p, |
| 418 | .doc > .content > .fossil-doc > p, |
| 419 | .doc > .content > ol, .doc > .content > ul, |
| 420 | .doc > .content > .markdown > ol, .doc > .content > .markdown > ul, |
| 421 | .doc > .content > .fossil-doc > ol, .doc > .content > .fossil-doc > ul, |
| 422 | .doc > .content table { |
| 423 | margin-left: 50pt; |
| 424 | margin-right: 50pt; |
| 425 | } |
| 426 | .doc > .content > pre, |
| 427 | .doc > .content > .markdown > pre, |
| 428 | .doc > .content > .fossil-doc > pre { |
| 429 | margin-left: 70pt; |
| 430 | margin-right: 50pt; |
| 431 | } |
| 432 | .doc > .content .pikchr-wrapper { |
| 433 | margin-left: 70pt; |
| 434 | } |
| 435 | div.pikchr-wrapper.indent:not(.source) { |
| 436 | /* Selector naming scheme mismatch is intentional: it must match the |
| 437 | * way it's given in default.css exactly if it is to override it. */ |
| 438 | margin-left: 70pt; |
| 439 | margin-right: 50pt; |
| 440 | } |
| 441 | div.pikchr-wrapper.center:not(.source) { |
| 442 | margin-left: 0; |
| 443 | } |
| 444 | } |
| 445 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -388,57 +388,116 @@ | |
| 388 | padding: 8px 20px; |
| 389 | } |
| 390 | .mainmenu { |
| 391 | padding: 10px; |
| 392 | } |
| 393 | |
| 394 | /* This horror-show selector explosion lets us avoid applying indents |
| 395 | * to Fossil UI generated pages, nested formatting in forum posts, |
| 396 | * paragraphs within tables, etc. What this actually *says* is far |
| 397 | * simpler than it looks; the equivalent SCSS is merely: |
| 398 | * |
| 399 | * .artifact, .dir, .doc { |
| 400 | * > .content, // wiki docs have no inner container |
| 401 | * > .content > .fossil-doc, // container for HTML embedded docs |
| 402 | * > .content > markdown { // ditto for MD outside forum, tickets… |
| 403 | * > p, > ol, > ul, > table { |
| 404 | * margin-left: 50pt; margin-right: 50pt; |
| 405 | * } |
| 406 | * } |
| 407 | * } |
| 408 | * |
| 409 | * Generated by Inskinerator; see its override/modern/media.scss file. */ |
| 410 | .artifact > .content > p, |
| 411 | .artifact > .content > .markdown > p, |
| 412 | .artifact > .content > .fossil-doc > p, |
| 413 | .artifact > .content > ol, .artifact > .content > ul, |
| 414 | .artifact > .content > .markdown > ol, .artifact > .content > .markdown > ul, |
| 415 | .artifact > .content > .fossil-doc > ol, .artifact > .content > .fossil-doc > ul, |
| 416 | .artifact > .content > table, |
| 417 | .artifact > .content > .markdown > table, |
| 418 | .artifact > .content > .fossil-doc > table, |
| 419 | .dir > .content > p, |
| 420 | .dir > .content > .markdown > p, |
| 421 | .dir > .content > .fossil-doc > p, |
| 422 | .dir > .content > ol, .dir > .content > ul, |
| 423 | .dir > .content > .markdown > ol, .dir > .content > .markdown > ul, |
| 424 | .dir > .content > .fossil-doc > ol, .dir > .content > .fossil-doc > ul, |
| 425 | .dir > .content > table, |
| 426 | .dir > .content > .markdown > table, |
| 427 | .dir > .content > .fossil-doc > table, |
| 428 | .doc > .content > p, |
| 429 | .doc > .content > .markdown > p, |
| 430 | .doc > .content > .fossil-doc > p, |
| 431 | .doc > .content > ol, .doc > .content > ul, |
| 432 | .doc > .content > .markdown > ol, .doc > .content > .markdown > ul, |
| 433 | .doc > .content > .fossil-doc > ol, .doc > .content > .fossil-doc > ul, |
| 434 | .doc > .content > table, |
| 435 | .doc > .content > .markdown > table, |
| 436 | .doc > .content > .fossil-doc > table { |
| 437 | margin-left: 50pt; |
| 438 | margin-right: 50pt; |
| 439 | } |
| 440 | |
| 441 | /* Code blocks and such get extra indent. We need a selector explosion |
| 442 | * equally powerful to the above because Fossil UI *does* use <pre>, |
| 443 | * and we want this to apply to user content only. |
| 444 | * |
| 445 | * It's easier to see what's going on here: three types of top-level |
| 446 | * body class for /file, /dir and /doc times three flavors of embedded |
| 447 | * doc type (plain HTML, wiki, and MD) require nine total selectors. */ |
| 448 | .artifact > .content > pre, |
| 449 | .artifact > .content > .markdown > pre, |
| 450 | .artifact > .content > .fossil-doc > pre, |
| 451 | .dir > .content > pre, |
| 452 | .dir > .content > .markdown > pre, |
| 453 | .dir > .content > .fossil-doc > pre, |
| 454 | .doc > .content > pre, |
| 455 | .doc > .content > .markdown > pre, |
| 456 | .doc > .content > .fossil-doc > pre { |
| 457 | margin-left: 70pt; |
| 458 | margin-right: 50pt; |
| 459 | } |
| 460 | |
| 461 | /* Fossil UI uses these, but in sufficiently constrained ways that we |
| 462 | * don't have to be nearly as careful to avoid an overreach. */ |
| 463 | .doc > .content h1, .artifact h1, .dir h1 { margin-left: 10pt; } |
| 464 | .doc > .content h2, .artifact h2, .dir h2 { margin-left: 20pt; } |
| 465 | .doc > .content h3, .artifact h3, .dir h3 { margin-left: 30pt; } |
| 466 | .doc > .content h4, .artifact h4, .dir h4 { margin-left: 40pt; } |
| 467 | .doc > .content h5, .artifact h5, .dir h5 { margin-left: 50pt; } |
| 468 | .doc > .content hr, .artifact hr, .dir hr { margin-left: 10pt; } |
| 469 | |
| 470 | /* Don't need to be nearly as careful with tags Fossil UI doesn't use. */ |
| 471 | .doc dd, .artifact dd, .dir dd { margin-left: 30pt; margin-bottom: 1em; } |
| 472 | .doc dl, .artifact dl, .dir dl { margin-left: 60pt; } |
| 473 | .doc dt, .artifact dt, .dir dt { margin-left: 10pt; } |
| 474 | |
| 475 | /* Fossil UI doesn't use Pikchr at all (yet?) so we can be quite loose |
| 476 | * with these selectors. */ |
| 477 | .content .pikchr-wrapper { margin-left: 70pt; } |
| 478 | div.pikchr-wrapper.indent:not(.source) { |
| 479 | /* Selector naming scheme mismatch is intentional: it must match the |
| 480 | * way it's given in default.css exactly if it is to override it. */ |
| 481 | margin-left: 70pt; |
| 482 | margin-right: 50pt; |
| 483 | } |
| 484 | div.pikchr-wrapper.center:not(.source) { |
| 485 | margin-left: 0; |
| 486 | } |
| 487 | |
| 488 | /* Special treatment for backward compatibility. */ |
| 489 | .content blockquote { |
| 490 | /* We must apply extra indent relative to "p" since Fossil's wiki |
| 491 | * generator misuses the blockquote tag against HTML and MD norms |
| 492 | * to mean "indented paragraph." */ |
| 493 | margin-left: 80pt; |
| 494 | } |
| 495 | .artifact > .content > .markdown > blockquote, |
| 496 | .dir > .content > .markdown > blockquote, |
| 497 | .doc > .content > .markdown > blockquote { |
| 498 | /* Fossil MD didn't inherit that bug; its HTML generator emits |
| 499 | * blockquote tags only for _block quotes_! A moderate indent |
| 500 | * suffices due to the visual styling applied above. */ |
| 501 | margin-left: 60pt; |
| 502 | } |
| 503 | } |
| 504 |