From a90d787c4783f06c378a8d5bb81705fd226bb8d6 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 24 Jul 2025 14:04:55 -0500 Subject: [PATCH 1/2] Use light green color for stamp --- app/assets/stylesheets/card-columns.css | 2 +- app/assets/stylesheets/cards.css | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 79ef6dbc2..596d10a23 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -311,7 +311,7 @@ border-width: 0.5ch; font-size: 0.75em; inset: auto 0 var(--cards-gap) auto; - transform: none; + rotate: 0deg; } .card__header { diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 4866e83b0..3521252b3 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -289,10 +289,12 @@ } .card__closed { + --stamp-color: oklch(var(--lch-green-light)); + align-items: center; border-radius: 0.2em; - border: 0.75ch solid var(--card-color); - color: var(--card-color); + border: 0.5ch solid var(--stamp-color); + color: var(--stamp-color); display: flex; flex-direction: column; font-weight: bold; @@ -303,8 +305,8 @@ mix-blend-mode: multiply; padding: 1ch; position: absolute; - transform-origin: bottom left; - transform: rotate(-10deg); + rotate: 5deg; + transform-origin: top right; @media (prefers-color-scheme: dark) { mix-blend-mode: screen; From c664040c2deaae16444401eed324084840eaf026 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 28 Jul 2025 13:07:43 -0500 Subject: [PATCH 2/2] Update stamp style --- app/assets/stylesheets/cards.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 3521252b3..1c76497f1 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -289,12 +289,13 @@ } .card__closed { - --stamp-color: oklch(var(--lch-green-light)); + --stamp-color: oklch(var(--lch-green-medium) / 0.65); align-items: center; + background-color: color-mix(in srgb, var(--card-bg-color), transparent 10%); border-radius: 0.2em; border: 0.5ch solid var(--stamp-color); - color: var(--stamp-color); + color: var(--color-ink-medium); display: flex; flex-direction: column; font-weight: bold; @@ -302,7 +303,6 @@ justify-content: center; max-inline-size: 25ch; min-inline-size: 16ch; - mix-blend-mode: multiply; padding: 1ch; position: absolute; rotate: 5deg; @@ -319,6 +319,7 @@ } .card__closed-title { + color: var(--stamp-color); font-size: 1.3em; font-weight: 900; line-height: 1.2;