|
681 | 681 | align-items: stretch; |
682 | 682 | } |
683 | 683 | } |
| 684 | + |
| 685 | +/* ============================================ |
| 686 | + Code Blocks & Syntax Highlighting |
| 687 | + ============================================ */ |
| 688 | + |
| 689 | +/* Details/Summary for collapsible code */ |
| 690 | +#observablehq-main details { |
| 691 | + margin: 1.5rem 0; |
| 692 | + border: 1px solid var(--border-color); |
| 693 | + border-radius: 4px; |
| 694 | + background: var(--bg-light); |
| 695 | +} |
| 696 | + |
| 697 | +#observablehq-main details summary { |
| 698 | + padding: 0.75rem 1rem; |
| 699 | + font-weight: 600; |
| 700 | + font-size: 0.875rem; |
| 701 | + cursor: pointer; |
| 702 | + color: var(--text-secondary); |
| 703 | +} |
| 704 | + |
| 705 | +#observablehq-main details summary:hover { |
| 706 | + color: var(--statcan-red); |
| 707 | +} |
| 708 | + |
| 709 | +#observablehq-main details[open] summary { |
| 710 | + border-bottom: 1px solid var(--border-color); |
| 711 | +} |
| 712 | + |
| 713 | +/* Code blocks inside details */ |
| 714 | +#observablehq-main details pre { |
| 715 | + margin: 0; |
| 716 | + border-radius: 0 0 4px 4px; |
| 717 | + background: #1e1e1e; |
| 718 | + overflow-x: auto; |
| 719 | +} |
| 720 | + |
| 721 | +#observablehq-main details pre code { |
| 722 | + display: block; |
| 723 | + padding: 1rem; |
| 724 | + font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace; |
| 725 | + font-size: 0.8125rem; |
| 726 | + line-height: 1.5; |
| 727 | + color: #d4d4d4; |
| 728 | +} |
| 729 | + |
| 730 | +/* Syntax highlighting - VS Code Dark+ inspired */ |
| 731 | +.hljs-comment { color: #6a9955; } |
| 732 | +.hljs-string { color: #ce9178; } |
| 733 | +.hljs-number { color: #b5cea8; } |
| 734 | +.hljs-keyword { color: #569cd6; } |
| 735 | +.hljs-operator { color: #d4d4d4; } |
| 736 | +.hljs-punctuation { color: #d4d4d4; } |
| 737 | +.hljs-function { color: #dcdcaa; } |
| 738 | +.hljs-built_in { color: #4ec9b0; } |
| 739 | +.hljs-variable { color: #9cdcfe; } |
| 740 | +.hljs-title { color: #dcdcaa; } |
| 741 | +.hljs-params { color: #9cdcfe; } |
| 742 | +.hljs-attr { color: #9cdcfe; } |
| 743 | +.hljs-type { color: #4ec9b0; } |
| 744 | +.hljs-meta { color: #c586c0; } |
| 745 | +.hljs-tag { color: #569cd6; } |
| 746 | +.hljs-name { color: #4ec9b0; } |
| 747 | +.hljs-attribute { color: #9cdcfe; } |
| 748 | +.hljs-selector-tag { color: #d7ba7d; } |
| 749 | +.hljs-selector-class { color: #d7ba7d; } |
| 750 | +.hljs-selector-id { color: #d7ba7d; } |
0 commit comments