diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 9204019f7..e01aec12c 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -8,15 +8,14 @@ grid-template-columns: repeat(2, 50%); margin: auto; max-inline-size: 100ch; - padding-block: var(--block-space-half); .cards:first-child { border-inline-end: var(--border); - padding-inline-end: var(--cards-padding); + padding-inline-end: var(--cards-gap); } .cards:last-child { - padding-inline-start: var(--cards-padding); + padding-inline-start: var(--cards-gap); } } @@ -25,7 +24,7 @@ .cards { --cards-padding: 2cqi; - --cards-gap: var(--block-space); + --cards-gap: 2ch; align-items: center; container-type: inline-size; @@ -33,14 +32,14 @@ flex-direction: column; gap: var(--cards-gap); justify-content: start; - padding-block: var(--cards-padding); + padding-block: var(--cards-gap); - .card { + :where(.card) { --block-space: 1em; --block-space-half: 0.5em; --text-xx-large: 2em; - font-size: 1.8cqi; + font-size: 2.25cqi; } .card__title { @@ -52,12 +51,19 @@ } } + .cards__heading { + display: inline-flex; + font-size: var(--text-medium); + inline-size: 100%; + justify-content: center; + text-transform: uppercase; + } + /* Considering /* ------------------------------------------------------------------------ */ .cards--considering { .card { - --card-color: var(--color-ink) !important; --text-xx-large: 1.6em; --text-small: 1.1em; @@ -75,19 +81,10 @@ } } - .card__collection, .card__background { display: none; } - .card__header { - margin: 0; - } - - .card__body { - padding-block-start: 0; - } - .card__title { margin-block-start: 0.1em; min-block-size: 0; @@ -118,10 +115,7 @@ max-inline-size: 120ch; .card { - --block-space: 1em; - --block-space-half: 0.5em; --card-size: calc(100% - (var(--container-padding) * 2) / 2); - --text-xx-large: 1.8em; block-size: 50%; font-size: 3cqi; @@ -129,7 +123,6 @@ inline-size: var(--card-size); } - .card__meta, .card__stages { display: none; } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index b56b14bac..8cc1d1752 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -73,7 +73,7 @@ background-color: var(--card-color); border-radius: var(--border-radius) 0 var(--border-radius) 0; font-weight: 800; - letter-spacing: 0.5ch; + letter-spacing: 0.4ch; padding: var(--block-space-half) var(--inline-space-double); } @@ -132,7 +132,11 @@ --border-size: 1px; --row-gap: 0.25em; - margin-inline-start: var(--inline-space-double); + align-items: center; + display: flex; + max-inline-size: 100%; + min-inline-size: 0; + text-transform: uppercase; strong { font-weight: 900; diff --git a/app/views/cards/display/common/_meta.html.erb b/app/views/cards/display/common/_meta.html.erb index e90348331..a039c1c99 100644 --- a/app/views/cards/display/common/_meta.html.erb +++ b/app/views/cards/display/common/_meta.html.erb @@ -1,4 +1,4 @@ -
+
<%= avatar_image_tag card.creator, class: "avatar margin-inline-end" %>
@@ -9,12 +9,12 @@
- Reported by <%= familiar_name_for(card.creator) %> + Reported by <%= familiar_name_for(card.creator) %>

- +
<%= card.creating? ? "Created" : "Updated" %> <%= local_datetime_tag(card.updated_at, style: :daysago) %> diff --git a/app/views/cards/index/_workflow_filter.html.erb b/app/views/cards/index/_workflow_filter.html.erb index 3294010f4..3a890907d 100644 --- a/app/views/cards/index/_workflow_filter.html.erb +++ b/app/views/cards/index/_workflow_filter.html.erb @@ -1,5 +1,5 @@
-