mCSS/src/styles/framework/global.prose.css at main · minimaldesign/mCSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/* PROSE - Default style for text content */

@scope (.prose) to (.not-prose) {
  /* Component blocks mirror this heading-adjacent margin themselves in their
     own files (.notice in component.notice.css; site-only .expressive-code,
     .canIUse in their unlayered site CSS files): prose never reaches into
     another component's classes. */
  :is(p, ul, ol, blockquote, table):has(+ :is(h1, h2, h3, h4)) {
    margin-bottom: calc(var(--prose-spacing) * 2);
  }

  p,
  ul,
  ol,
  dl {
    margin-bottom: var(--prose-spacing);
    p,
    ul,
    ol,
    dl {
      margin-bottom: 0;
    }
  }

  ul,
  ol {
    ul,
    ol {
      margin-inline-start: 0;
      padding-inline-start: var(--sm2);
    }
    li {
      margin-bottom: 0.5em;
      &::marker {
        color: light-dark(var(--base-300), var(--base-600));
      }
    }
  }

  ul {
    margin-inline-start: var(--sm2);
    list-style-type: "→ ";
  }

  ol {
    margin-inline-start: var(--md2);
    list-style-type: decimal-leading-zero;
    li::marker {
      font-size: var(--text-sm);
    }
  }

  table {
    margin-top: var(--md1);
    margin-bottom: var(--md1);
  }
}