Skip to content

Commit 6cc4e38

Browse files
pearminipearmini
authored
Optimize pretext demos (#413)
* Optimize pretext demos * Update index.html * Increase top
1 parent 5f1bedd commit 6cc4e38

22 files changed

Lines changed: 219 additions & 29 deletions

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
node_modules
33
yarn.lock
44
package-lock.json
5-
demo/pnpm-lock.yaml
5+
demo/pretext/pnpm-lock.yaml
66
dist
77
cache
88
docs/.vitepress/lib

‎demo/index.html‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

demo/air-text/content.js renamed to demo/pretext/air-text/content.js

File renamed without changes.

demo/air-text/helpers.js renamed to demo/pretext/air-text/helpers.js

File renamed without changes.

demo/air-text/index.css renamed to demo/pretext/air-text/index.css

File renamed without changes.

demo/air-text/index.html renamed to demo/pretext/air-text/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Air text</title>
7+
<link rel="icon" href="../logo.svg" type="image/svg+xml" sizes="any" />
78
<link rel="stylesheet" href="index.css" />
89
</head>
910
<body>

demo/air-text/index.js renamed to demo/pretext/air-text/index.js

File renamed without changes.

‎demo/pretext/index.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta
7+
name="description"
8+
content="Charming Pretext Demos: prepare type once, then flow it along SVG paths or wrap to a width—map labels, yin–yang fills, and masked air-text."
9+
/>
10+
<meta name="color-scheme" content="light dark" />
11+
<meta name="theme-color" content="#0f1419" />
12+
<title>Charming Pretext Demos</title>
13+
<link rel="icon" href="logo.svg" type="image/svg+xml" sizes="any" />
14+
<style>
15+
:root {
16+
color-scheme: light dark;
17+
--bg: canvas;
18+
--fg: canvastext;
19+
--muted: color-mix(in oklab, canvastext 68%, canvas);
20+
/* Match docs/.vitepress/theme/custom.css --vp-c-indigo-3 */
21+
--docs-brand: #00adb5;
22+
--focus: color-mix(in oklab, #2563eb 70%, canvastext);
23+
--pad: clamp(1.25rem, 4vw, 2.5rem);
24+
--pad-top: clamp(3rem, 10vw, 4.75rem);
25+
--max: 32rem;
26+
font-family:
27+
system-ui,
28+
-apple-system,
29+
"Segoe UI",
30+
Roboto,
31+
"Helvetica Neue",
32+
sans-serif;
33+
line-height: 1.5;
34+
}
35+
*,
36+
*::before,
37+
*::after {
38+
box-sizing: border-box;
39+
}
40+
body {
41+
margin: 0;
42+
min-height: 100dvh;
43+
background: var(--bg);
44+
color: var(--fg);
45+
}
46+
main {
47+
margin-inline: auto;
48+
padding: var(--pad-top) var(--pad) var(--pad);
49+
max-width: var(--max);
50+
}
51+
.brand {
52+
display: flex;
53+
align-items: center;
54+
gap: 0.75rem;
55+
margin-bottom: 0.5em;
56+
}
57+
.brand__logo-link {
58+
flex-shrink: 0;
59+
line-height: 0;
60+
border-radius: 4px;
61+
text-decoration: none;
62+
color: inherit;
63+
}
64+
.brand__logo-link:focus-visible {
65+
outline: 2px solid var(--docs-brand);
66+
outline-offset: 3px;
67+
}
68+
.brand__logo {
69+
width: 2.25rem;
70+
height: 2.25rem;
71+
display: block;
72+
}
73+
.brand h1 {
74+
margin: 0;
75+
font-size: clamp(1.35rem, 3vw, 1.6rem);
76+
font-weight: 650;
77+
letter-spacing: -0.02em;
78+
line-height: 1.2;
79+
}
80+
.brand__link {
81+
color: var(--docs-brand);
82+
text-decoration: underline;
83+
text-underline-offset: 0.12em;
84+
font-weight: inherit;
85+
}
86+
.brand__link:visited {
87+
color: var(--docs-brand);
88+
}
89+
.brand__link:focus-visible {
90+
outline: 2px solid var(--docs-brand);
91+
outline-offset: 3px;
92+
border-radius: 2px;
93+
}
94+
.intro {
95+
margin: 0 0 1.25em;
96+
max-width: 42em;
97+
color: var(--muted);
98+
font-size: 0.95rem;
99+
line-height: 1.55;
100+
}
101+
nav ul {
102+
margin: 0;
103+
padding: 0;
104+
list-style: none;
105+
display: grid;
106+
gap: 1rem;
107+
}
108+
.card {
109+
display: flex;
110+
flex-direction: column;
111+
gap: 0.35rem;
112+
padding: 0.75rem 0.9rem;
113+
border-radius: 0.5rem;
114+
text-decoration: none;
115+
color: inherit;
116+
border: 1px solid color-mix(in oklab, canvastext 12%, transparent);
117+
background: color-mix(in oklab, canvastext 4%, canvas);
118+
transition:
119+
background 0.12s ease,
120+
border-color 0.12s ease;
121+
}
122+
.card:hover {
123+
background: color-mix(in oklab, canvastext 8%, canvas);
124+
border-color: color-mix(in oklab, canvastext 18%, transparent);
125+
}
126+
.card:focus-visible {
127+
outline: 2px solid var(--focus);
128+
outline-offset: 2px;
129+
}
130+
.card__title {
131+
font-weight: 600;
132+
font-size: 1rem;
133+
line-height: 1.3;
134+
}
135+
.card__desc {
136+
margin: 0;
137+
font-size: 0.875rem;
138+
font-weight: 400;
139+
line-height: 1.45;
140+
color: var(--muted);
141+
}
142+
</style>
143+
</head>
144+
<body>
145+
<main>
146+
<div class="brand">
147+
<a class="brand__logo-link" href="https://charmingjs.org/" aria-label="Charming home">
148+
<img class="brand__logo" src="/logo.svg" width="36" height="36" alt="" decoding="async" />
149+
</a>
150+
<h1>Charming Pretext</h1>
151+
</div>
152+
<p class="intro">
153+
Demos built with
154+
<a class="brand__link" href="https://charmingjs.org/pretext">Charming Pretext</a>
155+
— pure-arithmetic text measurement for text-based data visualization and generative art. A fast, intuitive, and
156+
fixable API on top of
157+
<a class="brand__link" href="https://github.com/chenglou/pretext">Pretext</a>.
158+
</p>
159+
<nav aria-label="Charming Pretext demos">
160+
<ul>
161+
<li>
162+
<a class="card" href="./us-map-paper/">
163+
<span class="card__title">U.S. Map Paper</span>
164+
<p class="card__desc">An interactive U.S. map with notes for each state.</p>
165+
</a>
166+
</li>
167+
<li>
168+
<a class="card" href="./yin-yang/">
169+
<span class="card__title">Yin Yang</span>
170+
<p class="card__desc">An animated Yin Yang symbol filled with descriptions.</p>
171+
</a>
172+
</li>
173+
<li>
174+
<a class="card" href="./air-text/">
175+
<span class="card__title">Air Text</span>
176+
<p class="card__desc">Interact with a screen of text using your body.</p>
177+
</a>
178+
</li>
179+
</ul>
180+
</nav>
181+
</main>
182+
</body>
183+
</html>

demo/package.json renamed to demo/pretext/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
"us-atlas": "^3.0.1"
1414
},
1515
"scripts": {
16-
"dev": "vite"
16+
"dev": "vite",
17+
"build": "vite build",
18+
"preview": "vite preview"
1719
},
1820
"devDependencies": {
1921
"patch-package": "^8.0.1",

‎demo/pretext/public/logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)