40-summary.css RawHistoryFolder

1@layer components {
2  .lede { max-width: var(--measure); color: var(--ink-dim); font-size: 16px; }
3
4  /* key/value facts */
5  .facts {
6    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: var(--s5);
7    & > div { display: grid; grid-template-columns: 120px 1fr; min-width: 0; }
8    & dt { color: var(--ink-mute); }
9    & dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
10  }
11
12  .tagged { color: var(--ink); font-weight: 700; white-space: nowrap; }
13  .list.commits .c-subject { overflow: hidden; text-overflow: ellipsis; }
14
15  .readme .prose { padding: var(--s5) var(--s6) var(--s6); }
16  /* .card-h.doc-tabs, not .doc-tabs: .card-h pushes its links to the right
17     with :is(.card-h, .rail h2) a, which weighs as .rail h2 a */
18  .card-h.doc-tabs {
19    display: flex; flex-wrap: wrap; gap: var(--s4);
20    & a { margin-left: 0; color: var(--ink-dim); }
21    & a[aria-current] { color: var(--teal); text-decoration: underline; text-underline-offset: 5px; }
22  }
23
24  /* rendered Markdown */
25  .prose {
26    max-width: var(--measure); line-height: 1.65; overflow-wrap: break-word;
27    & h1, & h2, & h3, & h4 { margin: 1.6em 0 0; }
28    & h1 { font-size: 26px; line-height: 34px; padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }
29    & h2 { font-size: 20px; line-height: 28px; padding-bottom: var(--s1); border-bottom: 1px solid var(--border); }
30    & h3 { font-size: 17px; }
31    & > :first-child { margin-top: 0; }
32    & p, & ul, & ol, & pre, & table, & blockquote { margin-top: var(--s4); }
33    & ul { list-style: disc; }
34    & ul, & ol { padding-left: var(--s5); }
35    & ol { list-style: decimal; }
36    & li + li { margin-top: var(--s1); }
37    & li::marker { color: var(--ink-mute); }
38    & a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
39    & a:hover { color: var(--accent); text-decoration-color: currentColor; }
40    & li > ul, & li > ol, & li > p { margin-top: var(--s1); }
41    & pre {
42      padding: var(--s3) var(--s4); overflow-x: auto;
43      background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-s);
44      font-size: var(--fs-code); line-height: var(--lh-code);
45    }
46    & :not(pre) > code {
47      padding: 1px 5px; font-size: .88em; overflow-wrap: anywhere;
48      background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px;
49    }
50    & blockquote { padding-left: var(--s4); border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--border-strong)); color: var(--ink-dim); }
51    & table { display: block; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-s); font-size: var(--fs-s); line-height: 20px; }
52    & th, & td { padding: 6px var(--s3); white-space: nowrap; vertical-align: top; border-top: 1px solid var(--border); }
53    & th { background: var(--bg-raised); border-top: 0; font-weight: 700; }
54    & td code { white-space: nowrap; }
55    & hr { margin: var(--s5) 0; }
56    & .alt { color: var(--ink-mute); }
57    & img { display: none; }
58    & video { display: block; max-width: 100%; margin-inline: auto; }
59  }
60}