diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 0fe0d6a0e..108e7fd19 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -167,6 +167,51 @@
@media (max-width: 960px) {
inline-size: calc((100% - var(--cards-gap)) / 2);
}
+
+ &:nth-of-type(7) {
+ margin-block-start: var(--cards-gap);
+ }
+
+ &:nth-of-type(n+7) {
+ background-color: var(--color-canvas);
+ border: none;
+ border-block-end: 1px solid var(--color-ink-lighter);
+ box-shadow: none;
+ inline-size: 100%;
+ margin-inline: auto;
+ max-inline-size: 110ch;
+ padding-block: 0 var(--cards-gap);
+
+ .card__background,
+ .card__meta {
+ display: none;
+ }
+
+ .card__body {
+ padding-block-end: 0;
+ }
+
+ .card__closed {
+ aspect-ratio: unset;
+ border-width: 0.5ch;
+ font-size: 0.75em;
+ inset: auto 0 auto auto;
+ transform: none;
+ }
+
+ .card__closed-by-line,
+ .card__closed-date {
+ display: none;
+ }
+
+ .card__header {
+ margin: 0;
+ }
+
+ .card__title {
+ min-block-size: 0;
+ }
+ }
}
}
}
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index ac700ba51..41c27cfa3 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -69,6 +69,11 @@
margin-block-start: calc(-1 * var(--card-padding-block));
margin-inline-start: calc(-1 * var(--card-padding-inline));
min-inline-size: 0;
+
+ .cards--considering & {
+ color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+ margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0;
+ }
}
.card__collection {
@@ -78,6 +83,12 @@
font-weight: 800;
padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double);
text-transform: uppercase;
+
+ .cards--considering & {
+ background-color: var(--color-canvas);
+ color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+ padding: 0 0 0 var(--inline-space);
+ }
}
.card__id {
@@ -96,6 +107,11 @@
display: inline-flex;
margin-inline-start: var(--inline-space-half);
padding-inline-start: calc(var(--inline-space) * 0.75);
+
+ .cards--considering & {
+ border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
+ color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+ }
}
.card__tags {
@@ -148,13 +164,8 @@
font-size: var(--text-xx-large);
font-weight: 900;
line-height: 1.2;
- min-block-size: 3lh;
text-wrap: balance;
- .card-perma__bg & {
- min-block-size: unset;
- }
-
.card-field__title {
&:is(textarea)::placeholder {
color: inherit;
@@ -256,7 +267,7 @@
inset: auto var(--block-space) var(--block-space-double) auto;
justify-content: center;
max-inline-size: 25ch;
- min-inline-size: 18ch;
+ min-inline-size: 16ch;
mix-blend-mode: multiply;
padding: 1ch;
position: absolute;
@@ -273,7 +284,7 @@
}
.card__closed-title {
- font-size: 1.5em;
+ font-size: 1.3em;
font-weight: 900;
line-height: 1.2;
position: relative;
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index ead910bd9..4bdccb6bb 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -1,23 +1,27 @@
<% cache card do %>
<%= card_article_tag card, class: "card" do %>
-