forked from
joebasser.com/atmosphere-account
this repo has no description
Align feature card icons with titles on one row
Use feature-card-title-row for Built different and Your account tiles so
icons sit beside headings like provider cards; shrink icons and add
mod-algo-icon--inline styles plus dark-phase updates.
Made-with: Cursor
+50
-13
+35
-7
assets/styles.css
+35
-7
assets/styles.css
···
657
657
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
658
658
}
659
659
660
+
/* Icon + title on one row (matches provider card pattern) */
661
+
.feature-card-title-row {
662
+
display: flex;
663
+
flex-direction: row;
664
+
align-items: flex-start;
665
+
gap: 0.65rem;
666
+
margin-bottom: 0.75rem;
667
+
}
668
+
669
+
.feature-card-title-row .text-subsection {
670
+
margin: 0;
671
+
flex: 1;
672
+
min-width: 0;
673
+
}
674
+
660
675
.feature-icon {
661
-
width: 48px;
662
-
height: 48px;
663
-
margin-bottom: 1rem;
664
-
border-radius: 14px;
676
+
width: 2.25rem;
677
+
height: 2.25rem;
678
+
min-width: 2.25rem;
679
+
border-radius: 10px;
665
680
background: rgba(42, 90, 168, 0.1);
666
681
display: flex;
667
682
align-items: center;
668
683
justify-content: center;
669
684
color: #254a9e;
685
+
flex-shrink: 0;
686
+
margin-top: 0.1em;
670
687
}
671
688
672
689
/* ================================
···
1241
1258
gap: 0.5rem;
1242
1259
}
1243
1260
1244
-
.mod-algo-icon {
1261
+
.mod-algo-icon--inline {
1262
+
display: inline-flex;
1263
+
align-items: center;
1264
+
justify-content: center;
1265
+
flex-shrink: 0;
1266
+
margin: 0;
1267
+
margin-top: 0.1em;
1245
1268
color: #1f4f96;
1246
-
margin-bottom: 0.25rem;
1269
+
}
1270
+
1271
+
.mod-algo-icon--inline svg {
1272
+
width: 22px;
1273
+
height: 22px;
1274
+
display: block;
1247
1275
}
1248
1276
1249
1277
/* ================================
···
1588
1616
outline-color: rgba(142, 200, 255, 0.55);
1589
1617
}
1590
1618
1591
-
.dark-phase .mod-algo-icon {
1619
+
.dark-phase .mod-algo-icon--inline {
1592
1620
color: #9ec8f0;
1593
1621
}
1594
1622
+6
-4
components/Features.tsx
+6
-4
components/Features.tsx
···
2
2
return (
3
3
<div class="feature-icon">
4
4
<svg
5
-
width="24"
6
-
height="24"
5
+
width="20"
6
+
height="20"
7
7
viewBox="0 0 24 24"
8
8
fill="none"
9
9
stroke="currentColor"
···
85
85
<div class="feature-grid">
86
86
{features.map((f) => (
87
87
<div key={f.title} class="glass feature-card">
88
-
{f.icon}
89
-
<h3 class="text-subsection mb-1">{f.title}</h3>
88
+
<div class="feature-card-title-row">
89
+
{f.icon}
90
+
<h3 class="text-subsection">{f.title}</h3>
91
+
</div>
90
92
<p class="text-body-sm">{f.description}</p>
91
93
</div>
92
94
))}
+9
-2
components/ModerationAndAlgorithms.tsx
+9
-2
components/ModerationAndAlgorithms.tsx
···
88
88
<div class="your-choice-grid">
89
89
{cards.map((c) => (
90
90
<div key={c.title} class="glass feature-card">
91
-
<div class="mod-algo-icon" aria-hidden="true">{c.icon}</div>
92
-
<h3 class="text-subsection mb-1">{c.title}</h3>
91
+
<div class="feature-card-title-row">
92
+
<span
93
+
class="mod-algo-icon mod-algo-icon--inline"
94
+
aria-hidden="true"
95
+
>
96
+
{c.icon}
97
+
</span>
98
+
<h3 class="text-subsection">{c.title}</h3>
99
+
</div>
93
100
<p class="text-body-sm">{c.body}</p>
94
101
</div>
95
102
))}