@press2ai/theme-specialist-glossy 0.11.1 → 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.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/package.json +2 -2
  3. package/src/ai.ts +1 -1
  4. package/src/styles/base.ts +4 -0
  5. package/src/styles/glossy.css +35 -30
  6. package/src/styles/profile-article.ts +16 -15
  7. package/src/styles/profile-card.ts +16 -15
  8. 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 (stripe.css) ← classless, styles by semantic tags
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.1",
4
- "description": "Classless, AI-first theme inspired by Stripe. Framework-agnostic templates (Hono, Astro, raw HTML). Semantic HTML, Schema.org microdata, JSON-LD — built for LLM crawlers.",
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",
package/src/ai.ts CHANGED
@@ -59,7 +59,7 @@ export function getAiManifest(opts: {
59
59
 
60
60
  powered_by: {
61
61
  name: '@press2ai/theme-specialist-glossy',
62
- version: '0.11.0',
62
+ version: '0.11.2',
63
63
  homepage: 'https://github.com/press2ai/theme-specialist-glossy',
64
64
  },
65
65
 
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; background: var(--card);
270
- border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--g5); box-shadow: var(--shadow-md);
273
+ max-width: var(--w-8); margin-inline: auto;
274
+ padding: var(--g5) 0;
271
275
  }
272
- main > article > header { border-bottom: 1px solid var(--line); padding-bottom: var(--g3); margin-bottom: var(--g4); }
273
- main > article > header h1 { margin-bottom: var(--g2); }
274
- main > article > header p { font-size: var(--t-md); color: var(--ink-3); margin: 0; }
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; display: inline-block; background: var(--bg);
277
- padding: var(--g1) var(--g2); border-radius: var(--r); margin-bottom: var(--g3);
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: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 var(--g2); }
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
- background: var(--violet-s); color: var(--violet);
285
- padding: calc(var(--g1) / 2) var(--g2); border-radius: var(--pill); font-size: var(--t-xs); font-weight: 500;
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 dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--g1) var(--g3); }
288
- main > article dt { font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; }
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
 
package/src/styles/profile-article.ts CHANGED
@@ -1,27 +1,28 @@
1
1
  export const css = `main > article {
2
- max-width: var(--w-8); margin-inline: auto; background: var(--card);
3
- border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--g5); box-shadow: var(--shadow-md);
2
+ max-width: var(--w-8); margin-inline: auto;
3
+ padding: var(--g5) 0;
4
4
  }
5
- main > article > header { border-bottom: 1px solid var(--line); padding-bottom: var(--g3); margin-bottom: var(--g4); }
6
- main > article > header h1 { margin-bottom: var(--g2); }
7
- main > article > header p { font-size: var(--t-md); color: var(--ink-3); margin: 0; }
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; display: inline-block; background: var(--bg);
10
- padding: var(--g1) var(--g2); border-radius: var(--r); margin-bottom: var(--g3);
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: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 var(--g2); }
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
- background: var(--violet-s); color: var(--violet);
18
- padding: calc(var(--g1) / 2) var(--g2); border-radius: var(--pill); font-size: var(--t-xs); font-weight: 500;
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 dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--g1) var(--g3); }
21
- main > article dt { font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; }
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
  }`;
package/src/styles/profile-card.ts CHANGED
@@ -1,35 +1,36 @@
1
- export const css = `article[itemscope] {
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
- article[itemscope]:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--line-h); }
8
- article[itemscope] > div[aria-hidden] {
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
- article[itemscope] header { margin-bottom: var(--g1); }
15
- article[itemscope] h2 { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
16
- article[itemscope] h2 a { color: var(--ink); }
17
- article[itemscope] h2 a:hover { color: var(--violet); }
18
- article[itemscope] header p { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); margin: 0; }
19
- article[itemscope] header p:has([itemprop="address"]) {
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
- article[itemscope] header p:has([itemprop="address"])::before {
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
- article[itemscope] [itemprop="description"] { font-size: var(--t-xs); line-height: 1.5; margin: var(--g1) 0 0; color: var(--ink-2); }
26
- article[itemscope] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--g1); }
27
- article[itemscope] ul li {
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
- article[itemscope] > a:last-child {
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
- article[itemscope] > a:last-child:hover { color: var(--ink); gap: 4px; }`;
36
+ ${S} > a:last-child:hover { color: var(--ink); gap: 4px; }`;
package/src/templates/layout.ts CHANGED
@@ -12,7 +12,7 @@ export interface LayoutProps {
12
12
  footerContent?: string;
13
13
  }
14
14
 
15
- const THEME_VERSION = '0.11.1';
15
+ const THEME_VERSION = '0.11.2';
16
16
 
17
17
  export function layout(props: LayoutProps, body: string): string {
18
18
  const {