@press2ai/theme-specialist-glossy 0.11.0 → 0.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/package.json +2 -3
- package/src/ai.ts +1 -1
- package/src/styles/base.ts +4 -0
- package/src/styles/glossy.css +35 -32
- package/src/styles/profile-article.ts +16 -15
- package/src/styles/profile-card.ts +16 -15
- package/src/templates/catalog.ts +0 -7
- package/src/templates/index.ts +1 -1
- package/src/templates/layout.ts +1 -1
package/README.md
CHANGED
|
@@ -42,7 +42,7 @@ import '@press2ai/theme-specialist-glossy/styles/glossy.css';
|
|
|
42
42
|
## Architecture
|
|
43
43
|
|
|
44
44
|
```
|
|
45
|
-
CSS (
|
|
45
|
+
CSS (glossy.css) ← classless, styles by semantic tags
|
|
46
46
|
↑
|
|
47
47
|
templates/*.ts ← pure functions → HTML strings (single source of truth)
|
|
48
48
|
↑
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@press2ai/theme-specialist-glossy",
|
|
3
|
-
"version": "0.11.
|
|
4
|
-
"description": "Classless, AI-first theme
|
|
3
|
+
"version": "0.11.2",
|
|
4
|
+
"description": "Classless, AI-first glossy theme. Framework-agnostic templates (Hono, Astro, raw HTML). Semantic HTML, Schema.org microdata, JSON-LD — built for LLM crawlers.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"homepage": "https://github.com/press2ai/theme-specialist-glossy",
|
|
@@ -49,7 +49,6 @@
|
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@press2ai/theme-specialist-glossy": "^0.7.2",
|
|
53
52
|
"zod": "^3.23.0",
|
|
54
53
|
"zod-to-json-schema": "^3.25.2"
|
|
55
54
|
}
|
package/src/ai.ts
CHANGED
package/src/styles/base.ts
CHANGED
|
@@ -39,6 +39,10 @@ main {
|
|
|
39
39
|
max-width: var(--container); margin-inline: auto;
|
|
40
40
|
padding-inline: var(--pad); padding-top: 0; padding-bottom: 0;
|
|
41
41
|
}
|
|
42
|
+
main:not(:has(> section, > article, > div, > nav)) {
|
|
43
|
+
padding-top: var(--g5); padding-bottom: var(--g5);
|
|
44
|
+
max-width: var(--measure); margin-inline: auto;
|
|
45
|
+
}
|
|
42
46
|
main > * + * { margin-top: var(--g5); }
|
|
43
47
|
@media (max-width: 640px) {
|
|
44
48
|
:root { --pad: var(--g3); }
|
package/src/styles/glossy.css
CHANGED
|
@@ -62,6 +62,10 @@ main {
|
|
|
62
62
|
max-width: var(--container); margin-inline: auto;
|
|
63
63
|
padding-inline: var(--pad); padding-top: 0; padding-bottom: 0;
|
|
64
64
|
}
|
|
65
|
+
main:not(:has(> section, > article, > div, > nav)) {
|
|
66
|
+
padding-top: var(--g5); padding-bottom: var(--g5);
|
|
67
|
+
max-width: var(--measure); margin-inline: auto;
|
|
68
|
+
}
|
|
65
69
|
main > * + * { margin-top: var(--g5); }
|
|
66
70
|
|
|
67
71
|
/* Footer */
|
|
@@ -225,67 +229,68 @@ section:has(> article[itemscope]) {
|
|
|
225
229
|
}
|
|
226
230
|
section:has(> article[itemscope]) > h2 { grid-column: 1 / -1; margin-bottom: var(--g2); }
|
|
227
231
|
section:has(> article[itemscope]) > nav[aria-label] { grid-column: 1 / -1; margin-bottom: var(--g2); }
|
|
228
|
-
article[itemscope] {
|
|
232
|
+
section:has(> article[itemscope]) > article[itemscope] {
|
|
229
233
|
position: relative; background: var(--card); border: 1px solid var(--line);
|
|
230
234
|
border-radius: var(--r-lg); padding: var(--g3);
|
|
231
235
|
display: flex; flex-direction: column;
|
|
232
236
|
box-shadow: var(--shadow); transition: all var(--ease);
|
|
233
237
|
}
|
|
234
|
-
article[itemscope]:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--line-h); }
|
|
238
|
+
section:has(> article[itemscope]) > article[itemscope]:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--line-h); }
|
|
235
239
|
|
|
236
240
|
/* Card avatar — single accent color, position-independent */
|
|
237
|
-
article[itemscope] > div[aria-hidden] {
|
|
241
|
+
section:has(> article[itemscope]) > article[itemscope] > div[aria-hidden] {
|
|
238
242
|
width: 40px; height: 40px; border-radius: 50%;
|
|
239
243
|
display: flex; align-items: center; justify-content: center;
|
|
240
244
|
font-size: var(--t-xs); font-weight: 700; color: var(--white);
|
|
241
245
|
margin-bottom: var(--g2); flex-shrink: 0;
|
|
242
246
|
background: var(--violet);
|
|
243
247
|
}
|
|
244
|
-
article[itemscope] header { margin-bottom: var(--g1); }
|
|
245
|
-
article[itemscope] h2 { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
|
|
246
|
-
article[itemscope] h2 a { color: var(--ink); }
|
|
247
|
-
article[itemscope] h2 a:hover { color: var(--violet); }
|
|
248
|
-
article[itemscope] header p { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); margin: 0; }
|
|
249
|
-
article[itemscope] header p:has([itemprop="address"]) {
|
|
248
|
+
section:has(> article[itemscope]) > article[itemscope] header { margin-bottom: var(--g1); }
|
|
249
|
+
section:has(> article[itemscope]) > article[itemscope] h2 { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
|
|
250
|
+
section:has(> article[itemscope]) > article[itemscope] h2 a { color: var(--ink); }
|
|
251
|
+
section:has(> article[itemscope]) > article[itemscope] h2 a:hover { color: var(--violet); }
|
|
252
|
+
section:has(> article[itemscope]) > article[itemscope] header p { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); margin: 0; }
|
|
253
|
+
section:has(> article[itemscope]) > article[itemscope] header p:has([itemprop="address"]) {
|
|
250
254
|
display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
|
|
251
255
|
}
|
|
252
|
-
article[itemscope] header p:has([itemprop="address"])::before {
|
|
256
|
+
section:has(> article[itemscope]) > article[itemscope] header p:has([itemprop="address"])::before {
|
|
253
257
|
content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3);
|
|
254
258
|
}
|
|
255
|
-
article[itemscope] [itemprop="description"] { font-size: var(--t-xs); line-height: 1.5; margin: var(--g1) 0 0; color: var(--ink-2); }
|
|
256
|
-
article[itemscope] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--g1); }
|
|
257
|
-
article[itemscope] ul li {
|
|
259
|
+
section:has(> article[itemscope]) > article[itemscope] [itemprop="description"] { font-size: var(--t-xs); line-height: 1.5; margin: var(--g1) 0 0; color: var(--ink-2); }
|
|
260
|
+
section:has(> article[itemscope]) > article[itemscope] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--g1); }
|
|
261
|
+
section:has(> article[itemscope]) > article[itemscope] ul li {
|
|
258
262
|
background: var(--violet-s); color: var(--violet);
|
|
259
263
|
padding: 1px var(--g1); border-radius: var(--pill); font-size: 0.7rem; font-weight: 500;
|
|
260
264
|
}
|
|
261
|
-
article[itemscope] > a:last-child {
|
|
265
|
+
section:has(> article[itemscope]) > article[itemscope] > a:last-child {
|
|
262
266
|
display: inline-flex; align-items: center; margin-top: auto; padding-top: var(--g2);
|
|
263
267
|
font-size: var(--t-xs); font-weight: 600; color: var(--violet); transition: all var(--ease);
|
|
264
268
|
}
|
|
265
|
-
article[itemscope] > a:last-child:hover { color: var(--ink); gap: 4px; }
|
|
269
|
+
section:has(> article[itemscope]) > article[itemscope] > a:last-child:hover { color: var(--ink); gap: 4px; }
|
|
266
270
|
|
|
267
|
-
/* Single trainer */
|
|
271
|
+
/* Single trainer — Swiss design */
|
|
268
272
|
main > article {
|
|
269
|
-
max-width: var(--w-8); margin-inline: auto;
|
|
270
|
-
|
|
273
|
+
max-width: var(--w-8); margin-inline: auto;
|
|
274
|
+
padding: var(--g5) 0;
|
|
271
275
|
}
|
|
272
|
-
main > article > header {
|
|
273
|
-
main > article > header h1 { margin-bottom: var(--
|
|
274
|
-
main > article > header p { font-size: var(--t-md); color: var(--ink-
|
|
276
|
+
main > article > header { padding-bottom: var(--g4); margin-bottom: var(--g4); border-bottom: 2px solid var(--ink); }
|
|
277
|
+
main > article > header h1 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: var(--g1); }
|
|
278
|
+
main > article > header p { font-size: var(--t-md); color: var(--ink-2); margin: 0; font-weight: 400; }
|
|
279
|
+
main > article > header small { display: block; margin-top: var(--g1); font-size: var(--t-xs); color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
|
|
275
280
|
main > article address {
|
|
276
|
-
font-style: normal;
|
|
277
|
-
padding: var(--
|
|
278
|
-
color: var(--ink-2); border: 1px solid var(--line); font-size: var(--t-sm);
|
|
281
|
+
font-style: normal; font-size: var(--t-sm); color: var(--ink-2);
|
|
282
|
+
padding: var(--g2) 0; margin-bottom: var(--g3); border-bottom: 1px solid var(--line);
|
|
279
283
|
}
|
|
280
|
-
main > article section { margin: var(--g4) 0; }
|
|
281
|
-
main > article section h2 { font-size: var(--t-xs); font-weight:
|
|
284
|
+
main > article section { margin: var(--g4) 0; padding-top: var(--g3); border-top: 1px solid var(--line); }
|
|
285
|
+
main > article section h2 { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin: 0 0 var(--g2); }
|
|
282
286
|
main > article ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1); }
|
|
283
287
|
main > article ul li {
|
|
284
|
-
|
|
285
|
-
padding: calc(var(--g1) / 2)
|
|
288
|
+
font-size: var(--t-xs); font-weight: 500; color: var(--ink-2);
|
|
289
|
+
padding: calc(var(--g1) / 2) 0;
|
|
286
290
|
}
|
|
287
|
-
main > article
|
|
288
|
-
main > article
|
|
291
|
+
main > article ul li:not(:last-child)::after { content: ','; }
|
|
292
|
+
main > article dl { display: grid; grid-template-columns: 8rem 1fr; gap: var(--g1) var(--g3); }
|
|
293
|
+
main > article dt { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
|
|
289
294
|
main > article dd { margin: 0; font-size: var(--t-sm); }
|
|
290
295
|
|
|
291
296
|
|
|
@@ -315,8 +320,6 @@ form:not([role="search"]) button[type="submit"] {
|
|
|
315
320
|
}
|
|
316
321
|
form:not([role="search"]) button[type="submit"]:hover { background: var(--ink); transform: translateY(-1px); }
|
|
317
322
|
|
|
318
|
-
/* Trust block */
|
|
319
|
-
|
|
320
323
|
/* Responsive */
|
|
321
324
|
@media (max-width: 640px) {
|
|
322
325
|
:root { --pad: var(--g3); }
|
|
@@ -1,27 +1,28 @@
|
|
|
1
1
|
export const css = `main > article {
|
|
2
|
-
max-width: var(--w-8); margin-inline: auto;
|
|
3
|
-
|
|
2
|
+
max-width: var(--w-8); margin-inline: auto;
|
|
3
|
+
padding: var(--g5) 0;
|
|
4
4
|
}
|
|
5
|
-
main > article > header {
|
|
6
|
-
main > article > header h1 { margin-bottom: var(--
|
|
7
|
-
main > article > header p { font-size: var(--t-md); color: var(--ink-
|
|
5
|
+
main > article > header { padding-bottom: var(--g4); margin-bottom: var(--g4); border-bottom: 2px solid var(--ink); }
|
|
6
|
+
main > article > header h1 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: var(--g1); }
|
|
7
|
+
main > article > header p { font-size: var(--t-md); color: var(--ink-2); margin: 0; font-weight: 400; }
|
|
8
|
+
main > article > header small { display: block; margin-top: var(--g1); font-size: var(--t-xs); color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
|
|
8
9
|
main > article address {
|
|
9
|
-
font-style: normal;
|
|
10
|
-
padding: var(--
|
|
11
|
-
color: var(--ink-2); border: 1px solid var(--line); font-size: var(--t-sm);
|
|
10
|
+
font-style: normal; font-size: var(--t-sm); color: var(--ink-2);
|
|
11
|
+
padding: var(--g2) 0; margin-bottom: var(--g3); border-bottom: 1px solid var(--line);
|
|
12
12
|
}
|
|
13
|
-
main > article section { margin: var(--g4) 0; }
|
|
14
|
-
main > article section h2 { font-size: var(--t-xs); font-weight:
|
|
13
|
+
main > article section { margin: var(--g4) 0; padding-top: var(--g3); border-top: 1px solid var(--line); }
|
|
14
|
+
main > article section h2 { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin: 0 0 var(--g2); }
|
|
15
15
|
main > article ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1); }
|
|
16
16
|
main > article ul li {
|
|
17
|
-
|
|
18
|
-
padding: calc(var(--g1) / 2)
|
|
17
|
+
font-size: var(--t-xs); font-weight: 500; color: var(--ink-2);
|
|
18
|
+
padding: calc(var(--g1) / 2) 0;
|
|
19
19
|
}
|
|
20
|
-
main > article
|
|
21
|
-
main > article
|
|
20
|
+
main > article ul li:not(:last-child)::after { content: ','; }
|
|
21
|
+
main > article dl { display: grid; grid-template-columns: 8rem 1fr; gap: var(--g1) var(--g3); }
|
|
22
|
+
main > article dt { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
|
|
22
23
|
main > article dd { margin: 0; font-size: var(--t-sm); }
|
|
23
24
|
@media (max-width: 640px) {
|
|
24
|
-
main > article { padding: var(--g3); }
|
|
25
|
+
main > article { padding: var(--g3) 0; }
|
|
25
26
|
main > article dl { grid-template-columns: 1fr; gap: calc(var(--g1) / 2) 0; }
|
|
26
27
|
main > article dt { margin-top: var(--g2); }
|
|
27
28
|
}`;
|
|
@@ -1,35 +1,36 @@
|
|
|
1
|
-
|
|
1
|
+
const S = 'section:has(> article[itemscope]) > article[itemscope]';
|
|
2
|
+
export const css = `${S} {
|
|
2
3
|
position: relative; background: var(--card); border: 1px solid var(--line);
|
|
3
4
|
border-radius: var(--r-lg); padding: var(--g3);
|
|
4
5
|
display: flex; flex-direction: column;
|
|
5
6
|
box-shadow: var(--shadow); transition: all var(--ease);
|
|
6
7
|
}
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
${S}:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--line-h); }
|
|
9
|
+
${S} > div[aria-hidden] {
|
|
9
10
|
width: 40px; height: 40px; border-radius: 50%;
|
|
10
11
|
display: flex; align-items: center; justify-content: center;
|
|
11
12
|
font-size: var(--t-xs); font-weight: 700; color: var(--white);
|
|
12
13
|
margin-bottom: var(--g2); flex-shrink: 0; background: var(--violet);
|
|
13
14
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
${S} header { margin-bottom: var(--g1); }
|
|
16
|
+
${S} h2 { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
|
|
17
|
+
${S} h2 a { color: var(--ink); }
|
|
18
|
+
${S} h2 a:hover { color: var(--violet); }
|
|
19
|
+
${S} header p { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); margin: 0; }
|
|
20
|
+
${S} header p:has([itemprop="address"]) {
|
|
20
21
|
display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
|
|
21
22
|
}
|
|
22
|
-
|
|
23
|
+
${S} header p:has([itemprop="address"])::before {
|
|
23
24
|
content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3);
|
|
24
25
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
${S} [itemprop="description"] { font-size: var(--t-xs); line-height: 1.5; margin: var(--g1) 0 0; color: var(--ink-2); }
|
|
27
|
+
${S} ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--g1); }
|
|
28
|
+
${S} ul li {
|
|
28
29
|
background: var(--violet-s); color: var(--violet);
|
|
29
30
|
padding: 1px var(--g1); border-radius: var(--pill); font-size: 0.7rem; font-weight: 500;
|
|
30
31
|
}
|
|
31
|
-
|
|
32
|
+
${S} > a:last-child {
|
|
32
33
|
display: inline-flex; align-items: center; margin-top: auto; padding-top: var(--g2);
|
|
33
34
|
font-size: var(--t-xs); font-weight: 600; color: var(--violet); transition: all var(--ease);
|
|
34
35
|
}
|
|
35
|
-
|
|
36
|
+
${S} > a:last-child:hover { color: var(--ink); gap: 4px; }`;
|
package/src/templates/catalog.ts
CHANGED
|
@@ -63,13 +63,6 @@ ${p.cards}
|
|
|
63
63
|
</section>`;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
export function trustBlock(title: string, points: string[]): string {
|
|
67
|
-
const items = points.map(p => `<li>${esc(p)}</li>`).join('\n');
|
|
68
|
-
return `<aside>
|
|
69
|
-
<strong>${esc(title)}</strong>
|
|
70
|
-
<ul>${items}</ul>
|
|
71
|
-
</aside>`;
|
|
72
|
-
}
|
|
73
66
|
|
|
74
67
|
export interface PaginationProps {
|
|
75
68
|
current: number;
|
package/src/templates/index.ts
CHANGED
|
@@ -2,5 +2,5 @@ export { layout, type LayoutProps } from './layout.ts';
|
|
|
2
2
|
export { hero } from './hero.ts';
|
|
3
3
|
export { profileCard } from './profile-card.ts';
|
|
4
4
|
export { profileArticle } from './profile-article.ts';
|
|
5
|
-
export { catalogHero, catalogGrid, statBar, categoryNav, steps,
|
|
5
|
+
export { catalogHero, catalogGrid, statBar, categoryNav, steps, pagination, type CatalogHeroProps, type PaginationProps } from './catalog.ts';
|
|
6
6
|
export { esc, fullName } from './helpers.ts';
|