From a24136aa5f99df546fe6e0121b1c928ddfd4a324 Mon Sep 17 00:00:00 2001 From: Alexander Zaytsev Date: Tue, 16 Dec 2025 08:43:57 +0100 Subject: [PATCH 1/3] Fix icon clipping --- app/assets/stylesheets/steps.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/steps.css b/app/assets/stylesheets/steps.css index f106859ac..cb0bc6f78 100644 --- a/app/assets/stylesheets/steps.css +++ b/app/assets/stylesheets/steps.css @@ -102,8 +102,9 @@ .icon { background-color: var(--color-ink-inverted); - block-size: 0.8em; - inline-size: 0.8em; + block-size: 0.875em; + inline-size: 0.875em; + mask-size: cover; } } } \ No newline at end of file From 3e4f1451c988c6187510c6f6b0725eabede646d6 Mon Sep 17 00:00:00 2001 From: Alexander Zaytsev Date: Tue, 16 Dec 2025 08:44:28 +0100 Subject: [PATCH 2/3] Adjust spacing between icon and text --- app/assets/stylesheets/card-columns.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index c239e1b9d..f007ee8ea 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -463,6 +463,7 @@ .card__steps { display: flex; + --column-gap: 0.8ch; } .card__tags { From f7d1e13ce3fb90efedbb076a66c42f104a1c010a Mon Sep 17 00:00:00 2001 From: Alexander Zaytsev Date: Wed, 17 Dec 2025 20:09:14 +0100 Subject: [PATCH 3/3] Simplify CSS /thx @andyra --- app/assets/stylesheets/steps.css | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/steps.css b/app/assets/stylesheets/steps.css index cb0bc6f78..c339118ae 100644 --- a/app/assets/stylesheets/steps.css +++ b/app/assets/stylesheets/steps.css @@ -93,18 +93,13 @@ } .steps__icon { + --icon-size: 0.875em; background-color: var(--card-color); block-size: 1.3em; border-radius: 50%; + color: var(--color-ink-inverted); display: grid; inline-size: 1.3em; place-content: center; - - .icon { - background-color: var(--color-ink-inverted); - block-size: 0.875em; - inline-size: 0.875em; - mask-size: cover; - } } -} \ No newline at end of file +}