@press2ai/theme-specialist-glossy 0.13.0 → 1.0.0
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/package.json +1 -1
- package/src/ai.ts +1 -1
- package/src/styles/base.ts +15 -30
- package/src/styles/catalog-grid.ts +2 -5
- package/src/styles/category-nav.ts +3 -3
- package/src/styles/footer.ts +5 -11
- package/src/styles/header.ts +2 -3
- package/src/styles/hero.ts +4 -22
- package/src/styles/pagination.ts +3 -3
- package/src/styles/profile-article.ts +17 -37
- package/src/styles/profile-card.ts +9 -14
- package/src/styles/stat-bar.ts +4 -11
- package/src/styles/steps.ts +7 -9
- package/src/templates/layout.ts +1 -1
- package/src/templates/profile-article.ts +1 -15
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@press2ai/theme-specialist-glossy",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
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",
|
package/src/ai.ts
CHANGED
package/src/styles/base.ts
CHANGED
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
export const css = `@import url('https://rsms.me/inter/inter.css');
|
|
2
|
-
|
|
3
2
|
:root {
|
|
4
3
|
--font: 'Inter', system-ui, sans-serif;
|
|
5
|
-
--g1:
|
|
6
|
-
--t-xs:
|
|
7
|
-
--container: 1080px; --pad: var(--g4);
|
|
8
|
-
--
|
|
9
|
-
--white: #
|
|
4
|
+
--g1: .5rem; --g2: .8125rem; --g3: 1.3125rem; --g4: 2.125rem; --g5: 3.4375rem; --g6: 5.5625rem;
|
|
5
|
+
--t-xs: .8rem; --t-sm: 1rem; --t-md: 1.25rem; --t-lg: 1.563rem; --t-xl: 1.953rem; --t-2xl: 2.441rem;
|
|
6
|
+
--container: 1080px; --pad: var(--g4); --gap: var(--g4);
|
|
7
|
+
--measure: 38rem;
|
|
8
|
+
--white: #fff; --bg: #f8f9fb; --card: #fff;
|
|
10
9
|
--ink: #1a1a2e; --ink-2: #4a4a68; --ink-3: #8b8ba3;
|
|
11
10
|
--line: #e8e8ef; --line-h: #d0d0de;
|
|
12
11
|
--violet: #7c5cfc; --violet-s: #f3f0ff; --violet-glow: rgba(124,92,252,.18);
|
|
13
12
|
--teal: #0d9488; --teal-s: #ecfdf5;
|
|
14
|
-
--rose: #e11d63; --
|
|
15
|
-
--amber: #d97706; --amber-s: #fffbeb;
|
|
16
|
-
--sky: #0284c7; --sky-s: #f0f9ff;
|
|
13
|
+
--rose: #e11d63; --amber: #d97706; --sky: #0284c7;
|
|
17
14
|
--r: 16px; --r-lg: 20px; --pill: 999px;
|
|
18
15
|
--shadow: 0 1px 3px rgba(0,0,0,.04);
|
|
19
16
|
--shadow-md: 0 4px 16px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
|
|
@@ -22,28 +19,16 @@ export const css = `@import url('https://rsms.me/inter/inter.css');
|
|
|
22
19
|
}
|
|
23
20
|
*, *::before, *::after { box-sizing: border-box; margin: 0; }
|
|
24
21
|
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
|
|
25
|
-
body {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; margin-bottom: var(--g2); }
|
|
32
|
-
h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.35; margin-bottom: var(--g2); }
|
|
33
|
-
p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); margin-bottom: var(--g2); max-width: var(--measure); }
|
|
22
|
+
body { font-family: var(--font); font-feature-settings: 'cv11', 'ss01'; color: var(--ink); background: var(--bg); line-height: 1.6; overflow-x: clip; }
|
|
23
|
+
h1, h2, h3 { color: var(--ink); letter-spacing: -.02em; }
|
|
24
|
+
h1 { font-size: clamp(var(--t-xl), 5vw, var(--t-2xl)); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
|
|
25
|
+
h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; }
|
|
26
|
+
h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.35; }
|
|
27
|
+
p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
|
|
34
28
|
a { color: var(--violet); text-decoration: none; transition: color var(--ease); }
|
|
35
29
|
a:hover { color: var(--ink); }
|
|
36
30
|
small { font-size: var(--t-xs); color: var(--ink-3); }
|
|
37
31
|
strong { color: var(--ink); font-weight: 600; }
|
|
38
|
-
main {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
main:not(:has(> section, > article, > div, > nav)) {
|
|
43
|
-
padding-top: var(--g5); padding-bottom: var(--g5);
|
|
44
|
-
}
|
|
45
|
-
main > * + * { margin-top: var(--g5); }
|
|
46
|
-
@media (max-width: 640px) {
|
|
47
|
-
:root { --pad: var(--g3); }
|
|
48
|
-
main { padding: 0 var(--pad) var(--g4); }
|
|
49
|
-
}`;
|
|
32
|
+
main { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
|
|
33
|
+
main > * + * { margin-top: var(--gap); }
|
|
34
|
+
@media (max-width: 640px) { :root { --pad: var(--g3); --gap: var(--g3); } }`;
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
export const css = `section:has(> article[itemscope]) {
|
|
2
2
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--g3);
|
|
3
3
|
}
|
|
4
|
-
section:has(> article[itemscope]) > h2 { grid-column: 1 / -1; margin-bottom:
|
|
5
|
-
section:has(> article[itemscope])
|
|
6
|
-
@media (max-width: 640px) {
|
|
7
|
-
section:has(> article[itemscope]) { grid-template-columns: 1fr; }
|
|
8
|
-
}`;
|
|
4
|
+
section:has(> article[itemscope]) > h2 { grid-column: 1 / -1; margin-bottom: 0; }
|
|
5
|
+
@media (max-width: 640px) { section:has(> article[itemscope]) { grid-template-columns: 1fr; } }`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export const css = `nav[aria-label] { display: flex; flex-wrap: wrap; gap: var(--g1); }
|
|
2
|
-
nav[aria-label] a {
|
|
1
|
+
export const css = `main > nav[aria-label] { display: flex; flex-wrap: wrap; gap: var(--g1); }
|
|
2
|
+
main > nav[aria-label] a {
|
|
3
3
|
display: inline-flex; align-items: center; height: 32px; padding: 0 var(--g2);
|
|
4
4
|
border-radius: var(--pill); font-size: var(--t-xs); font-weight: 500;
|
|
5
5
|
background: var(--white); border: 1px solid var(--line); color: var(--ink-2); transition: all var(--ease);
|
|
6
6
|
}
|
|
7
|
-
nav[aria-label] a:hover { border-color: var(--violet); color: var(--violet); background: var(--violet-s); }`;
|
|
7
|
+
main > nav[aria-label] a:hover { border-color: var(--violet); color: var(--violet); background: var(--violet-s); }`;
|
package/src/styles/footer.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
export const css = `body > footer {
|
|
2
|
-
border-top: 1px solid var(--line); background: var(--white);
|
|
3
|
-
padding: var(--g5) 0 var(--g4);
|
|
2
|
+
border-top: 1px solid var(--line); background: var(--white); padding: var(--g5) 0 var(--g4);
|
|
4
3
|
}
|
|
5
4
|
body > footer > small {
|
|
6
5
|
display: block; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
|
|
@@ -9,21 +8,16 @@ body > footer > small {
|
|
|
9
8
|
body > footer a { color: var(--ink-2); transition: color var(--ease); }
|
|
10
9
|
body > footer a:hover { color: var(--violet); }
|
|
11
10
|
body > footer > small > nav {
|
|
12
|
-
display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g4);
|
|
13
|
-
margin-bottom: var(--g4);
|
|
11
|
+
display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g4); margin-bottom: var(--g4);
|
|
14
12
|
}
|
|
15
13
|
body > footer > small > nav section { all: unset; display: block; }
|
|
16
14
|
body > footer > small > nav strong {
|
|
17
15
|
display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink);
|
|
18
|
-
text-transform: uppercase; letter-spacing:
|
|
16
|
+
text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--g2);
|
|
19
17
|
}
|
|
20
18
|
body > footer > small > nav p { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 36ch; }
|
|
21
|
-
body > footer > small > nav a { display: block; font-size: var(--t-xs); line-height: 2;
|
|
22
|
-
body > footer > small >
|
|
23
|
-
body > footer > small > p {
|
|
24
|
-
padding-top: var(--g3); border-top: 1px solid var(--line);
|
|
25
|
-
font-size: var(--t-xs); color: var(--ink-3); text-align: left;
|
|
26
|
-
}
|
|
19
|
+
body > footer > small > nav a { display: block; font-size: var(--t-xs); line-height: 2; }
|
|
20
|
+
body > footer > small > p { padding-top: var(--g3); border-top: 1px solid var(--line); }
|
|
27
21
|
@media (max-width: 640px) {
|
|
28
22
|
body > footer > small > nav { grid-template-columns: 1fr; gap: var(--g3); }
|
|
29
23
|
}`;
|
package/src/styles/header.ts
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
export const css = `body > header {
|
|
2
2
|
position: sticky; top: 0; z-index: 50;
|
|
3
|
-
background: rgba(255,255,255,.82);
|
|
4
|
-
backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
|
|
3
|
+
background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px);
|
|
5
4
|
border-bottom: 1px solid var(--line);
|
|
6
5
|
}
|
|
7
6
|
body > header nav {
|
|
8
7
|
max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
|
|
9
8
|
height: 48px; display: flex; align-items: center; justify-content: space-between;
|
|
10
9
|
}
|
|
11
|
-
body > header nav a { color: var(--ink-2);
|
|
10
|
+
body > header nav a { color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; }
|
|
12
11
|
body > header nav a strong { font-size: var(--t-md); font-weight: 700; color: var(--ink); }`;
|
package/src/styles/hero.ts
CHANGED
|
@@ -16,38 +16,21 @@ hgroup::before {
|
|
|
16
16
|
linear-gradient(90deg, rgba(124,92,252,.04) 1px, transparent 1px);
|
|
17
17
|
background-size: 48px 48px;
|
|
18
18
|
mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 70%);
|
|
19
|
-
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 70%);
|
|
20
19
|
z-index: -1;
|
|
21
20
|
}
|
|
22
21
|
hgroup > * { position: relative; }
|
|
23
|
-
hgroup > p:first-child { display: inline-flex; margin-bottom: var(--g4);
|
|
22
|
+
hgroup > p:first-child { display: inline-flex; margin-bottom: var(--g4); }
|
|
24
23
|
hgroup > p:first-child small {
|
|
25
24
|
display: inline-flex; align-items: center; gap: var(--g1);
|
|
26
25
|
background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
|
|
27
26
|
padding: var(--g1) var(--g2); border: 1px solid var(--line);
|
|
28
|
-
border-radius: var(--pill); font-
|
|
29
|
-
box-shadow: var(--shadow);
|
|
27
|
+
border-radius: var(--pill); font-weight: 600; color: var(--teal); box-shadow: var(--shadow);
|
|
30
28
|
}
|
|
31
29
|
hgroup > p:first-child small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00d24a; box-shadow: 0 0 0 3px rgba(0,210,74,.2); }
|
|
32
|
-
hgroup h1 { max-width: 18ch; margin: 0 auto var(--g4);
|
|
30
|
+
hgroup h1 { max-width: 18ch; margin: 0 auto var(--g4); }
|
|
33
31
|
hgroup p { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); margin: 0 auto var(--g4); }
|
|
34
|
-
hgroup > nav {
|
|
35
|
-
display: flex; gap: var(--g2); flex-wrap: wrap; justify-content: center;
|
|
36
|
-
margin-top: var(--g4); margin-bottom: 0;
|
|
37
|
-
}
|
|
38
|
-
hgroup > nav > a {
|
|
39
|
-
display: inline-flex; align-items: center; height: 44px; padding: 0 var(--g4);
|
|
40
|
-
border-radius: var(--pill); font-weight: 600; font-size: var(--t-sm); transition: all var(--ease);
|
|
41
|
-
background: var(--white); color: var(--ink); border: 1px solid var(--line);
|
|
42
|
-
}
|
|
43
|
-
hgroup > nav > a:first-child {
|
|
44
|
-
background: var(--violet); color: var(--white); border-color: transparent;
|
|
45
|
-
box-shadow: 0 4px 14px var(--violet-glow);
|
|
46
|
-
}
|
|
47
|
-
hgroup > nav > a:first-child:hover { background: var(--ink); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,26,46,.2); }
|
|
48
|
-
hgroup > nav > a:not(:first-child):hover { border-color: var(--line-h); background: var(--bg); }
|
|
49
32
|
form[role="search"] {
|
|
50
|
-
display: flex; max-width:
|
|
33
|
+
display: flex; max-width: 495px; height: 48px;
|
|
51
34
|
margin: var(--g4) auto 0; background: var(--white);
|
|
52
35
|
border: 1px solid var(--line); border-radius: var(--pill);
|
|
53
36
|
overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--ease);
|
|
@@ -56,7 +39,6 @@ form[role="search"]:focus-within { border-color: var(--violet); box-shadow: 0 4p
|
|
|
56
39
|
form[role="search"] input {
|
|
57
40
|
flex: 1; min-width: 0; border: none; background: transparent; color: var(--ink);
|
|
58
41
|
padding: 0 var(--g3); font-size: var(--t-sm); font-family: var(--font); outline: none;
|
|
59
|
-
-webkit-appearance: none; appearance: none;
|
|
60
42
|
}
|
|
61
43
|
form[role="search"] input::placeholder { color: var(--ink-3); }
|
|
62
44
|
form[role="search"] button {
|
package/src/styles/pagination.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export const css = `main > nav p { display: flex; align-items: center; justify-content: center; gap: var(--g3); font-size: var(--t-sm); color: var(--ink-3); }
|
|
2
|
-
main > nav a {
|
|
1
|
+
export const css = `main > nav:has(> p) p { display: flex; align-items: center; justify-content: center; gap: var(--g3); font-size: var(--t-sm); color: var(--ink-3); }
|
|
2
|
+
main > nav:has(> p) a {
|
|
3
3
|
height: 32px; display: inline-flex; align-items: center; padding: 0 var(--g2);
|
|
4
4
|
border-radius: var(--pill); background: var(--white); border: 1px solid var(--line);
|
|
5
5
|
font-size: var(--t-xs); font-weight: 500; transition: all var(--ease);
|
|
6
6
|
}
|
|
7
|
-
main > nav a:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-1px); }`;
|
|
7
|
+
main > nav:has(> p) a:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-1px); }`;
|
|
@@ -1,38 +1,18 @@
|
|
|
1
|
-
export const css = `main > article {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
main > article > header {
|
|
6
|
-
main > article
|
|
7
|
-
main > article
|
|
8
|
-
main > article
|
|
9
|
-
main > article
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
main > article
|
|
14
|
-
main > article
|
|
15
|
-
main > article ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1); }
|
|
16
|
-
main > article ul li {
|
|
17
|
-
font-size: var(--t-xs); font-weight: 500; color: var(--ink-2);
|
|
18
|
-
padding: calc(var(--g1) / 2) 0;
|
|
19
|
-
}
|
|
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; }
|
|
23
|
-
main > article dd { margin: 0; font-size: var(--t-sm); }
|
|
1
|
+
export const css = `main > article[itemscope] { max-width: 667px; }
|
|
2
|
+
main > article[itemscope] > header { padding-bottom: var(--g4); margin-bottom: var(--g4); border-bottom: 2px solid var(--ink); }
|
|
3
|
+
main > article[itemscope] > header h1 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-bottom: var(--g1); }
|
|
4
|
+
main > article[itemscope] > header p { font-size: var(--t-md); color: var(--ink-2); margin: 0; }
|
|
5
|
+
main > article[itemscope] > header small { display: block; margin-top: var(--g1); font-size: var(--t-xs); color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
|
|
6
|
+
main > article[itemscope] address { font-style: normal; font-size: var(--t-sm); color: var(--ink-2); padding: var(--g2) 0; margin-bottom: var(--g3); border-bottom: 1px solid var(--line); }
|
|
7
|
+
main > article[itemscope] section { margin: var(--g4) 0; padding-top: var(--g3); border-top: 1px solid var(--line); }
|
|
8
|
+
main > article[itemscope] section h2 { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--g2); }
|
|
9
|
+
main > article[itemscope] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1); }
|
|
10
|
+
main > article[itemscope] ul li { font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); padding: calc(var(--g1)/2) 0; }
|
|
11
|
+
main > article[itemscope] ul li:not(:last-child)::after { content: ','; }
|
|
12
|
+
main > article[itemscope] dl { display: grid; grid-template-columns: 8rem 1fr; gap: var(--g1) var(--g3); }
|
|
13
|
+
main > article[itemscope] dt { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
|
|
14
|
+
main > article[itemscope] dd { margin: 0; font-size: var(--t-sm); }
|
|
24
15
|
@media (max-width: 640px) {
|
|
25
|
-
main > article {
|
|
26
|
-
main > article
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
main > article > footer[aria-label="opt-out"] {
|
|
30
|
-
margin-top: var(--g5); padding-top: var(--g3); border-top: 1px solid var(--line);
|
|
31
|
-
}
|
|
32
|
-
main > article > footer[aria-label="opt-out"] p { margin-bottom: var(--g2); }
|
|
33
|
-
main > article > footer[aria-label="opt-out"] button {
|
|
34
|
-
height: 36px; padding: 0 var(--g3); border: 1px solid var(--rose); border-radius: var(--pill);
|
|
35
|
-
background: var(--white); color: var(--rose); font-size: var(--t-xs); font-weight: 600;
|
|
36
|
-
font-family: var(--font); cursor: pointer; transition: all var(--ease);
|
|
37
|
-
}
|
|
38
|
-
main > article > footer[aria-label="opt-out"] button:hover { background: var(--rose); color: var(--white); }`;
|
|
16
|
+
main > article[itemscope] dl { grid-template-columns: 1fr; gap: calc(var(--g1)/2) 0; }
|
|
17
|
+
main > article[itemscope] dt { margin-top: var(--g2); }
|
|
18
|
+
}`;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
const S = 'section:has(> article[itemscope]) > article[itemscope]';
|
|
2
2
|
export const css = `${S} {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
display: flex; flex-direction: column;
|
|
3
|
+
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
|
|
4
|
+
padding: var(--g3); display: flex; flex-direction: column;
|
|
6
5
|
box-shadow: var(--shadow); transition: all var(--ease);
|
|
7
6
|
}
|
|
8
7
|
${S}:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--line-h); }
|
|
@@ -10,27 +9,23 @@ ${S} > div[aria-hidden] {
|
|
|
10
9
|
width: 40px; height: 40px; border-radius: 50%;
|
|
11
10
|
display: flex; align-items: center; justify-content: center;
|
|
12
11
|
font-size: var(--t-xs); font-weight: 700; color: var(--white);
|
|
13
|
-
margin-bottom: var(--g2);
|
|
12
|
+
margin-bottom: var(--g2); background: var(--violet);
|
|
14
13
|
}
|
|
15
14
|
${S} header { margin-bottom: var(--g1); }
|
|
16
15
|
${S} h2 { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
|
|
17
16
|
${S} h2 a { color: var(--ink); }
|
|
18
17
|
${S} h2 a:hover { color: var(--violet); }
|
|
19
|
-
${S} header p { font-size: var(--t-xs);
|
|
20
|
-
${S} header p:has([itemprop="address"]) {
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
${S} header p:has([itemprop="address"])::before {
|
|
24
|
-
content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3);
|
|
25
|
-
}
|
|
18
|
+
${S} header p { font-size: var(--t-xs); color: var(--ink-3); margin: 0; }
|
|
19
|
+
${S} header p:has([itemprop="address"]) { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
|
|
20
|
+
${S} header p:has([itemprop="address"])::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
|
|
26
21
|
${S} [itemprop="description"] { font-size: var(--t-xs); line-height: 1.5; margin: var(--g1) 0 0; color: var(--ink-2); }
|
|
27
22
|
${S} ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--g1); }
|
|
28
23
|
${S} ul li {
|
|
29
24
|
background: var(--violet-s); color: var(--violet);
|
|
30
|
-
padding: 1px var(--g1); border-radius: var(--pill); font-size:
|
|
25
|
+
padding: 1px var(--g1); border-radius: var(--pill); font-size: .7rem; font-weight: 500;
|
|
31
26
|
}
|
|
32
27
|
${S} > a:last-child {
|
|
33
|
-
display: inline-flex;
|
|
28
|
+
display: inline-flex; margin-top: auto; padding-top: var(--g2);
|
|
34
29
|
font-size: var(--t-xs); font-weight: 600; color: var(--violet); transition: all var(--ease);
|
|
35
30
|
}
|
|
36
|
-
${S} > a:last-child:hover { color: var(--ink);
|
|
31
|
+
${S} > a:last-child:hover { color: var(--ink); }`;
|
package/src/styles/stat-bar.ts
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
export const css = `section:has(> dl) >
|
|
2
|
-
|
|
3
|
-
color: var(--ink); margin: 0 auto var(--g4); max-width: var(--measure);
|
|
4
|
-
}
|
|
5
|
-
section:has(> dl) > dl {
|
|
6
|
-
display: flex; justify-content: center; gap: var(--g5); margin: 0 auto; padding: 0;
|
|
7
|
-
border: none; background: none; box-shadow: none;
|
|
1
|
+
export const css = `section:has(> dl) > dl {
|
|
2
|
+
display: flex; justify-content: center; gap: var(--g5); padding: 0;
|
|
8
3
|
}
|
|
9
4
|
section:has(> dl) > dl div { text-align: center; }
|
|
10
5
|
section:has(> dl) > dl div > span:has(> svg) {
|
|
@@ -13,7 +8,5 @@ section:has(> dl) > dl div > span:has(> svg) {
|
|
|
13
8
|
}
|
|
14
9
|
section:has(> dl) > dl div > span:has(> svg) > svg { width: 18px; height: 18px; }
|
|
15
10
|
section:has(> dl) > dl dt { font-size: var(--t-lg); font-weight: 800; line-height: 1.2; color: var(--violet); }
|
|
16
|
-
section:has(> dl) > dl dd { margin: 2px 0 0; font-size: var(--t-xs);
|
|
17
|
-
@media (max-width: 640px) {
|
|
18
|
-
section:has(> dl) > dl { gap: var(--g3); }
|
|
19
|
-
}`;
|
|
11
|
+
section:has(> dl) > dl dd { margin: 2px 0 0; font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
|
|
12
|
+
@media (max-width: 640px) { section:has(> dl) > dl { gap: var(--g3); } }`;
|
package/src/styles/steps.ts
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
export const css = `section:has(> ol) {
|
|
2
|
-
margin-inline: calc(50% - 50vw);
|
|
3
|
-
|
|
4
|
-
background: var(--white);
|
|
5
|
-
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
|
|
2
|
+
margin-inline: calc(50% - 50vw); padding: var(--g5) var(--pad);
|
|
3
|
+
background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
|
|
6
4
|
}
|
|
7
|
-
section:has(> ol)
|
|
8
|
-
section:has(> ol) > h2 { text-align: center; margin-bottom: var(--g4); }
|
|
5
|
+
section:has(> ol) h2 { text-align: center; margin-bottom: var(--g4); }
|
|
9
6
|
section > ol {
|
|
10
|
-
list-style: none; padding: 0;
|
|
11
|
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--g3);
|
|
7
|
+
list-style: none; padding: 0; margin: 0 auto; max-width: var(--container);
|
|
8
|
+
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--g3);
|
|
9
|
+
counter-reset: steps;
|
|
12
10
|
}
|
|
13
11
|
section > ol li {
|
|
14
12
|
counter-increment: steps; background: var(--bg); border: 1px solid var(--line);
|
|
@@ -21,7 +19,7 @@ section > ol li::before {
|
|
|
21
19
|
border-radius: 50%; font-size: var(--t-sm); font-weight: 700;
|
|
22
20
|
background: var(--violet-s); color: var(--violet);
|
|
23
21
|
}
|
|
24
|
-
section > ol li strong { display: block; font-size: var(--t-sm);
|
|
22
|
+
section > ol li strong { display: block; font-size: var(--t-sm); margin-bottom: 4px; color: var(--ink); }
|
|
25
23
|
section > ol li span { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
|
|
26
24
|
@media (max-width: 640px) {
|
|
27
25
|
section > ol { grid-template-columns: 1fr; }
|
package/src/templates/layout.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Profile } from '../schema.ts';
|
|
2
2
|
import { esc, fullName } from './helpers.ts';
|
|
3
3
|
|
|
4
|
-
export function profileArticle(p: Profile
|
|
4
|
+
export function profileArticle(p: Profile): string {
|
|
5
5
|
const name = fullName(p);
|
|
6
6
|
const socials = Object.entries(p.social ?? {}).filter(([, v]) => v);
|
|
7
7
|
|
|
@@ -78,19 +78,6 @@ ${(p.business.classification?.length ?? 0) > 0 ? `<dt>PKD</dt><dd>${p.business.c
|
|
|
78
78
|
</section>`
|
|
79
79
|
: '';
|
|
80
80
|
|
|
81
|
-
// Opt-out footer: one-click POST ze slug. Widoczne tylko dla nieclaimed
|
|
82
|
-
// (claimed właściciele mają edycję). Brak slug = brak footera (statyczne
|
|
83
|
-
// profile, np. custom data).
|
|
84
|
-
const optOut = slug && !p.verified
|
|
85
|
-
? `<footer aria-label="opt-out">
|
|
86
|
-
<p><small>Twój wpis? Pochodzi z publicznego rejestru CEIDG. Nie chcesz go tutaj?</small></p>
|
|
87
|
-
<form method="post" action="/opt-out">
|
|
88
|
-
<input type="hidden" name="slug" value="${esc(slug)}">
|
|
89
|
-
<button type="submit">Usuń ten wpis z katalogu</button>
|
|
90
|
-
</form>
|
|
91
|
-
</footer>`
|
|
92
|
-
: '';
|
|
93
|
-
|
|
94
81
|
return `<article itemscope itemtype="https://schema.org/Person">
|
|
95
82
|
<header>
|
|
96
83
|
<h1 itemprop="name">${esc(name)}</h1>
|
|
@@ -103,6 +90,5 @@ ${specialties}
|
|
|
103
90
|
${languages}
|
|
104
91
|
${contact}
|
|
105
92
|
${business}
|
|
106
|
-
${optOut}
|
|
107
93
|
</article>`;
|
|
108
94
|
}
|