htmlpic/theme.css at main · sm-th/htmlpic · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/* theme.css — classless stylesheet for HTML→image cards.
   Fonts (Geist, Geist Mono) are provided by Nix via fontconfig and
   referenced by family name — no @font-face, no bundled files. */

:root {
  --bg:     #FCFCFD;  /* background            */
  --ink:    #12141C;  /* headings, code body   */
  --dim:    #4E5260;  /* primary body text     */
  --muted:  #80828C;  /* glosses, fine print   */
  --accent: #4F46E5;  /* identifiers, links    */
  --hair:   #DEDEE6;  /* dividers              */

  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  padding: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centring */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* content stays a comfortable column even on wide (OG) canvases */
body > * { max-width: 820px; }

/* default gap between top-level blocks */
body > * + * { margin-top: 64px; }

h1 {
  font-weight: 800;
  font-size: 76px;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

h2 {
  font-weight: 700;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

p {
  font-size: 33px;
  line-height: 1.45;
  color: var(--dim);
}

/* definition list = signature + what it does */
dl { margin-top: 96px; }
dt {
  font-family: var(--mono);
  font-size: 40px;
  line-height: 1.2;
  color: var(--ink);
}
dt code { color: var(--accent); }      /* the identifier only */
dd {
  margin-top: 8px;
  font-size: 27px;
  line-height: 1.3;
  color: var(--muted);
}
dd + dt { margin-top: 56px; }          /* gap between rows */

ul, ol { margin-top: 64px; padding-left: 1.4em; }
li { font-size: 31px; line-height: 1.5; color: var(--dim); }
li + li { margin-top: 10px; }

blockquote {
  font-size: 40px;
  line-height: 1.3;
  color: var(--ink);
  border-left: 6px solid var(--accent);
  padding-left: 28px;
}

small {
  margin-top: 96px;
  display: block;
  font-size: 30px;
  line-height: 1.45;
  color: var(--muted);
}

code { font-family: var(--mono); }
strong { font-weight: 700; color: var(--ink); }
em { font-style: italic; }
a { color: var(--accent); text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--hair); margin: 56px 0; }
footer { margin-top: 96px; font-family: var(--mono); font-size: 26px; color: var(--muted); }

/* Wide + short formats (OG / link preview): compress the vertical rhythm so
   content fits the short canvas. Pair with a trimmed HTML (title + core). */
@media (min-aspect-ratio: 3/2) {
  body { padding: 64px 88px; }
  body > * + * { margin-top: 32px; }
  h1 { font-size: 66px; }
  p  { font-size: 31px; }
  dl { margin-top: 48px; }
  dt { font-size: 36px; }
  dd { font-size: 25px; }
  dd + dt { margin-top: 34px; }
  small { margin-top: 48px; font-size: 26px; }
}