fix: anchor green checkmarks inside service cards with absolute positioning
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
3d8087dd5a
commit
b06dfedca2
1 changed files with 12 additions and 5 deletions
|
|
@ -403,14 +403,21 @@
|
||||||
.service-card {
|
.service-card {
|
||||||
min-height: 102px;
|
min-height: 102px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 74px 1fr 28px;
|
grid-template-columns: 74px 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0 8px;
|
gap: 0 8px;
|
||||||
padding: 14px 14px;
|
padding: 14px 36px 14px 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.productivity .service-card {
|
.productivity .service-card {
|
||||||
grid-template-columns: 62px 1fr 24px;
|
grid-template-columns: 62px 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card .green-dot {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 12px;
|
||||||
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card h4 {
|
.service-card h4 {
|
||||||
|
|
@ -649,9 +656,9 @@
|
||||||
DevOps & code
|
DevOps & code
|
||||||
</div>
|
</div>
|
||||||
<div class="service-grid">
|
<div class="service-grid">
|
||||||
<article class="service-card"><div class="mini-icon green-icon"><svg width="35" height="35" viewBox="0 0 48 48" fill="none" stroke-width="2.3"><path d="M12 10h24v15c0 9-6 15-12 17-6-2-12-8-12-17z"/><path d="M22 17v12l8 4V13"/></svg></div><h4>Forgejo +<br>PostgreSQL</h4><span class="green-dot">✓</span></article>
|
<article class="service-card"><div class="mini-icon green-icon"><svg width="35" height="35" viewBox="0 0 48 48" fill="none" stroke-width="2.3"><path d="M12 10h24v15c0 9-6 15-12 17-6-2-12-8-12-17z"/><path d="M22 17v12l8 4V13"/></svg></div><h4>Forgejo + PostgreSQL</h4><span class="green-dot">✓</span></article>
|
||||||
<article class="service-card"><div class="mini-icon blue-icon"><svg width="36" height="36" viewBox="0 0 48 48" fill="none" stroke-width="2.4"><path d="M9 24 24 12l15 12v17H9z"/><path d="M19 41V29h10v12"/></svg></div><h4>Homebox</h4><span class="green-dot">✓</span></article>
|
<article class="service-card"><div class="mini-icon blue-icon"><svg width="36" height="36" viewBox="0 0 48 48" fill="none" stroke-width="2.4"><path d="M9 24 24 12l15 12v17H9z"/><path d="M19 41V29h10v12"/></svg></div><h4>Homebox</h4><span class="green-dot">✓</span></article>
|
||||||
<article class="service-card"><div class="mini-icon green-icon"><svg width="36" height="36" viewBox="0 0 48 48" fill="none" stroke-width="2.4"><circle cx="12" cy="24" r="4"/><circle cx="36" cy="12" r="4"/><circle cx="36" cy="36" r="4"/><path d="M16 22 32 14M16 26l16 8"/></svg></div><h4>n8n + Postgres<br>+ Worker</h4><span class="green-dot">✓</span></article>
|
<article class="service-card"><div class="mini-icon green-icon"><svg width="36" height="36" viewBox="0 0 48 48" fill="none" stroke-width="2.4"><circle cx="12" cy="24" r="4"/><circle cx="36" cy="12" r="4"/><circle cx="36" cy="36" r="4"/><path d="M16 22 32 14M16 26l16 8"/></svg></div><h4>n8n + Postgres + Worker</h4><span class="green-dot">✓</span></article>
|
||||||
<article class="service-card"><div class="mini-icon blue-icon"><svg width="36" height="36" viewBox="0 0 48 48" fill="none" stroke-width="2.4"><ellipse cx="24" cy="12" rx="14" ry="6"/><path d="M10 12v12c0 3.3 6.3 6 14 6s14-2.7 14-6V12"/><path d="M10 24v12c0 3.3 6.3 6 14 6s14-2.7 14-6V24"/></svg></div><h4>NocoDB</h4><span class="green-dot">✓</span></article>
|
<article class="service-card"><div class="mini-icon blue-icon"><svg width="36" height="36" viewBox="0 0 48 48" fill="none" stroke-width="2.4"><ellipse cx="24" cy="12" rx="14" ry="6"/><path d="M10 12v12c0 3.3 6.3 6 14 6s14-2.7 14-6V12"/><path d="M10 24v12c0 3.3 6.3 6 14 6s14-2.7 14-6V24"/></svg></div><h4>NocoDB</h4><span class="green-dot">✓</span></article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue