From bcc2952b1a3501825f042efd0d65ca42b23fd09a Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 10 Apr 2025 12:00:33 -0500 Subject: [PATCH] Stub out variants --- app/assets/stylesheets/_global.css | 18 ++++++++ app/assets/stylesheets/cards.css | 61 +++++++++++++++++++------ app/assets/stylesheets/utilities.css | 20 +------- app/views/cards/display/_perma.html.erb | 4 +- app/views/cards/index.html.erb | 2 +- 5 files changed, 67 insertions(+), 38 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 8dc17b990..2628615dc 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -19,6 +19,17 @@ --text-x-large: 1.8rem; --text-xx-large: 2.5rem; + /* Borders */ + --border: 1px solid var(--color-subtle); + + /* Shadows */ + --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.02), + 0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2), + 0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3), + 0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4), + 0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5), + 0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6); + /* Components */ --btn-size: 2.65em; @@ -73,5 +84,12 @@ --lch-green-light: 28.11% 0.02 142.49; --lch-yellow: 40.9% 0.06 88.9; --lch-light-blue: 20.62% 0.048 216.62; + + --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.42), + 0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6), + 0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7), + 0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8), + 0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9), + 0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1); } } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index d16a96e56..6075306f2 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -1,12 +1,35 @@ +/* TODO + +• + +*/ + + @layer components { + /* Card containers + /* -------------------------------------------------------------------------- */ + + .card-columns { + border-block: 1px solid var(--color-subtle); + display: grid; + grid-template-columns: repeat(2, 50%); + margin: auto; + max-inline-size: 100ch; + padding-block: var(--block-space-half); + + .card { + z-index: unset; + } + } + .cards { --block-space: 2cqi; --container-gap: var(--block-space); --container-padding: calc(var(--block-space) * 1.5); container-type: inline-size; - padding: var(--block-space-half) 0; justify-content: start; + padding: var(--block-space-half) 0; :where(.card) { --block-space: 1em; @@ -58,29 +81,25 @@ } } - .cards--columns { - border-block: 1px solid var(--color-subtle); - display: grid; - grid-template-columns: repeat(2, 50%); - margin: auto; - max-inline-size: 100ch; - padding-block: var(--block-space-half); - - .card { - aspect-ratio: unset; - z-index: unset; - } - } + /* Card items + /* -------------------------------------------------------------------------- */ .card { --border-color: transparent; --border-radius: 0.2em; --border-size: 0; - aspect-ratio: 2/0.95; + aspect-ratio: var(--card-aspect-ratio, auto); background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg)); + border: var(--border); + border-radius: 0.5em; + box-shadow: var(--shadow); color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + display: flex; + flex-direction: column; max-inline-size: 75ch; + position: relative; + text-align: start; z-index: 1; .card__container & { @@ -97,6 +116,18 @@ } } + /* Variants */ + .card--large { + --card-aspect-ratio: 2 / 0.95; + } + + .card--medium {} + .card--small {} + .card--mini {} + + /* Actions around cards + /* -------------------------------------------------------------------------- */ + .card__actions { position: absolute; inset: var(--actions-block-inset) auto auto calc(var(--actions-inline-inset) * -1); diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 614489b3f..6ec13a630 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -167,25 +167,7 @@ .border-radius { border-radius: var(--border-radius, 0.5em); } /* Shadows */ - .shadow { - box-shadow: - 0 0 0 1px oklch(var(--lch-always-black) / 0.02), - 0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2), - 0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3), - 0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4), - 0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5), - 0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6); - - @media (prefers-color-scheme: dark) { - box-shadow: - 0 0 0 1px oklch(var(--lch-always-black) / 0.42), - 0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6), - 0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7), - 0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8), - 0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9), - 0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1); - } - } + .shadow { box-shadow: var(--shadow); } /* Lists */ :where(.list-style-none) { diff --git a/app/views/cards/display/_perma.html.erb b/app/views/cards/display/_perma.html.erb index 4b205e33b..540956ac1 100644 --- a/app/views/cards/display/_perma.html.erb +++ b/app/views/cards/display/_perma.html.erb @@ -1,7 +1,5 @@ <% cache card do %> -
+
<%= link_to card.collection.name, cards_path(collection_ids: [card.collection]), class: "card__collection txt-uppercase overflow-ellipsis txt-reversed" %> diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb index b8c80ab1d..f9208a546 100644 --- a/app/views/cards/index.html.erb +++ b/app/views/cards/index.html.erb @@ -6,7 +6,7 @@ <%= render "cards/index/header", filter: @filter %> <% end %> -
+
<%= render "cards/index/engagement/considering", cards: @considering_cards %> <%= render "cards/index/engagement/doing", cards: @doing_cards, filter: @filter %>