anentrypoint-design 0.0.277 → 0.0.279
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/app-shell.css +39 -3
- package/dist/247420.css +39 -3
- package/dist/247420.js +15 -15
- package/package.json +1 -1
- package/src/components/content.js +15 -6
package/app-shell.css
CHANGED
|
@@ -720,13 +720,43 @@ a.row { text-decoration: none; }
|
|
|
720
720
|
padding: var(--space-9) 0 var(--space-8);
|
|
721
721
|
display: grid; gap: var(--space-5) var(--space-5);
|
|
722
722
|
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
|
|
723
|
-
grid-template-areas: 'title title' 'body
|
|
723
|
+
grid-template-areas: 'title title' 'body aside';
|
|
724
724
|
align-items: start;
|
|
725
725
|
max-width: var(--measure-wide);
|
|
726
726
|
}
|
|
727
727
|
.ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
|
|
728
728
|
.ds-hero-body { grid-area: body; }
|
|
729
|
-
|
|
729
|
+
/* The right column carries its own visual weight — a spined, halftone-
|
|
730
|
+
textured card holding the badge/stat cluster and the CTAs — so the
|
|
731
|
+
asymmetric grid reads as a deliberate composition, not leftover space
|
|
732
|
+
beside the narrow body copy. Stretches to the body column's height. */
|
|
733
|
+
.ds-hero-aside {
|
|
734
|
+
grid-area: aside; position: relative; isolation: isolate;
|
|
735
|
+
align-self: stretch; display: flex; flex-direction: column;
|
|
736
|
+
justify-content: space-between; gap: var(--space-5);
|
|
737
|
+
background: var(--bg-2);
|
|
738
|
+
border-radius: 0 var(--r-2) var(--r-2) 0;
|
|
739
|
+
padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-4) + var(--bw-chunk));
|
|
740
|
+
}
|
|
741
|
+
.ds-hero-aside::before {
|
|
742
|
+
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
|
|
743
|
+
width: var(--bw-chunk); background: var(--accent);
|
|
744
|
+
border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
|
|
745
|
+
}
|
|
746
|
+
.ds-hero-aside::after {
|
|
747
|
+
content: ''; position: absolute; inset: 0; z-index: -1;
|
|
748
|
+
pointer-events: none;
|
|
749
|
+
background-image: radial-gradient(currentColor 1px, transparent 1.2px);
|
|
750
|
+
background-size: var(--halftone-size) var(--halftone-size);
|
|
751
|
+
opacity: 0.1; border-radius: inherit;
|
|
752
|
+
}
|
|
753
|
+
.ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
754
|
+
.ds-hero-stat {
|
|
755
|
+
font-family: var(--ff-mono); font-size: var(--fs-sm);
|
|
756
|
+
color: var(--fg-2); letter-spacing: var(--tr-tight);
|
|
757
|
+
padding-bottom: var(--space-2); border-bottom: var(--bw-hair) solid var(--bg-3);
|
|
758
|
+
}
|
|
759
|
+
.ds-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
|
|
730
760
|
.ds-hero-title {
|
|
731
761
|
font-family: var(--ff-display); font-weight: 700;
|
|
732
762
|
font-size: clamp(40px, 9cqi, 116px);
|
|
@@ -750,10 +780,16 @@ a.row { text-decoration: none; }
|
|
|
750
780
|
@container (max-width: 900px) {
|
|
751
781
|
.ds-hero {
|
|
752
782
|
grid-template-columns: minmax(0, 1fr);
|
|
753
|
-
grid-template-areas: 'title' 'body' '
|
|
783
|
+
grid-template-areas: 'title' 'body' 'aside';
|
|
754
784
|
align-items: start;
|
|
755
785
|
padding: var(--space-7) 0 var(--space-6);
|
|
756
786
|
}
|
|
787
|
+
.ds-hero-aside {
|
|
788
|
+
border-radius: var(--r-2); flex-direction: row; flex-wrap: wrap;
|
|
789
|
+
justify-content: flex-start; align-items: center;
|
|
790
|
+
}
|
|
791
|
+
.ds-hero-stats { flex-direction: row; flex-wrap: wrap; }
|
|
792
|
+
.ds-hero-stat { border-bottom: 0; padding-bottom: 0; }
|
|
757
793
|
}
|
|
758
794
|
.ds-chat-title { margin: 0; font-size: inherit; }
|
|
759
795
|
|
package/dist/247420.css
CHANGED
|
@@ -1236,13 +1236,43 @@
|
|
|
1236
1236
|
padding: var(--space-9) 0 var(--space-8);
|
|
1237
1237
|
display: grid; gap: var(--space-5) var(--space-5);
|
|
1238
1238
|
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
|
|
1239
|
-
grid-template-areas: 'title title' 'body
|
|
1239
|
+
grid-template-areas: 'title title' 'body aside';
|
|
1240
1240
|
align-items: start;
|
|
1241
1241
|
max-width: var(--measure-wide);
|
|
1242
1242
|
}
|
|
1243
1243
|
.ds-247420 .ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
|
|
1244
1244
|
.ds-247420 .ds-hero-body { grid-area: body; }
|
|
1245
|
-
|
|
1245
|
+
/* The right column carries its own visual weight — a spined, halftone-
|
|
1246
|
+
textured card holding the badge/stat cluster and the CTAs — so the
|
|
1247
|
+
asymmetric grid reads as a deliberate composition, not leftover space
|
|
1248
|
+
beside the narrow body copy. Stretches to the body column's height. */
|
|
1249
|
+
.ds-247420 .ds-hero-aside {
|
|
1250
|
+
grid-area: aside; position: relative; isolation: isolate;
|
|
1251
|
+
align-self: stretch; display: flex; flex-direction: column;
|
|
1252
|
+
justify-content: space-between; gap: var(--space-5);
|
|
1253
|
+
background: var(--bg-2);
|
|
1254
|
+
border-radius: 0 var(--r-2) var(--r-2) 0;
|
|
1255
|
+
padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-4) + var(--bw-chunk));
|
|
1256
|
+
}
|
|
1257
|
+
.ds-247420 .ds-hero-aside::before {
|
|
1258
|
+
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
|
|
1259
|
+
width: var(--bw-chunk); background: var(--accent);
|
|
1260
|
+
border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
|
|
1261
|
+
}
|
|
1262
|
+
.ds-247420 .ds-hero-aside::after {
|
|
1263
|
+
content: ''; position: absolute; inset: 0; z-index: -1;
|
|
1264
|
+
pointer-events: none;
|
|
1265
|
+
background-image: radial-gradient(currentColor 1px, transparent 1.2px);
|
|
1266
|
+
background-size: var(--halftone-size) var(--halftone-size);
|
|
1267
|
+
opacity: 0.1; border-radius: inherit;
|
|
1268
|
+
}
|
|
1269
|
+
.ds-247420 .ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
1270
|
+
.ds-247420 .ds-hero-stat {
|
|
1271
|
+
font-family: var(--ff-mono); font-size: var(--fs-sm);
|
|
1272
|
+
color: var(--fg-2); letter-spacing: var(--tr-tight);
|
|
1273
|
+
padding-bottom: var(--space-2); border-bottom: var(--bw-hair) solid var(--bg-3);
|
|
1274
|
+
}
|
|
1275
|
+
.ds-247420 .ds-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
|
|
1246
1276
|
.ds-247420 .ds-hero-title {
|
|
1247
1277
|
font-family: var(--ff-display); font-weight: 700;
|
|
1248
1278
|
font-size: clamp(40px, 9cqi, 116px);
|
|
@@ -1266,10 +1296,16 @@
|
|
|
1266
1296
|
@container (max-width: 900px) {
|
|
1267
1297
|
.ds-247420 .ds-hero {
|
|
1268
1298
|
grid-template-columns: minmax(0, 1fr);
|
|
1269
|
-
grid-template-areas: 'title' 'body' '
|
|
1299
|
+
grid-template-areas: 'title' 'body' 'aside';
|
|
1270
1300
|
align-items: start;
|
|
1271
1301
|
padding: var(--space-7) 0 var(--space-6);
|
|
1272
1302
|
}
|
|
1303
|
+
.ds-247420 .ds-hero-aside {
|
|
1304
|
+
border-radius: var(--r-2); flex-direction: row; flex-wrap: wrap;
|
|
1305
|
+
justify-content: flex-start; align-items: center;
|
|
1306
|
+
}
|
|
1307
|
+
.ds-247420 .ds-hero-stats { flex-direction: row; flex-wrap: wrap; }
|
|
1308
|
+
.ds-247420 .ds-hero-stat { border-bottom: 0; padding-bottom: 0; }
|
|
1273
1309
|
}
|
|
1274
1310
|
.ds-247420 .ds-chat-title { margin: 0; font-size: inherit; }
|
|
1275
1311
|
|