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:
LIABEUF, Stephane (External) 2026-05-18 09:45:46 +02:00
parent 3d8087dd5a
commit b06dfedca2

View file

@ -403,14 +403,21 @@
.service-card {
min-height: 102px;
display: grid;
grid-template-columns: 74px 1fr 28px;
grid-template-columns: 74px 1fr;
align-items: center;
gap: 0 8px;
padding: 14px 14px;
padding: 14px 36px 14px 14px;
}
.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 {
@ -649,9 +656,9 @@
DevOps & code
</div>
<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 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>
</div>
</div>