From 437c1872eecde45d7a9ef3d4062c013f6bdebbf5 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 21 Oct 2025 15:41:40 -0700 Subject: [PATCH] Pinstripe background --- app/assets/stylesheets/card-columns.css | 135 +++++++----------- .../collections/columns/_pinstripes.html.erb | 4 + app/views/collections/show/_stream.html.erb | 5 +- .../collections/show/_considering.html.erb | 5 +- .../public/collections/show/_stream.html.erb | 5 +- 5 files changed, 65 insertions(+), 89 deletions(-) create mode 100644 app/views/collections/columns/_pinstripes.html.erb diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index e095e7e28..5cc2ab060 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -24,6 +24,7 @@ margin-inline: auto; max-inline-size: var(--main-width); overflow-x: auto; + overflow-y: hidden; position: relative; /* When it has something expanded */ @@ -462,93 +463,12 @@ /* ------------------------------------------------------------------------ */ .cards--considering { - --gradient-opacity: 25%; - --bottom-gradient-size: 4em; - - padding-bottom: var(--bottom-gradient-size); position: relative; - @supports(mask: linear-gradient(black)) { - &:before { - background-image: linear-gradient(90deg, - transparent 0%, - color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 33%, - color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 66%, - transparent 100%); - content: ""; - inset: calc(var(--column-width-collapsed) + var(--block-space-half)) 0 0 0; - position: absolute; - z-index: 0; - } - - &:after { - background: linear-gradient(90deg, - color-mix(in oklch, var(--color-considering) 0%, transparent) 0%, - color-mix(in oklch, var(--color-considering) 20%, transparent) 25%, - color-mix(in oklch, var(--color-considering) 20%, transparent) 50%, - color-mix(in oklch, var(--color-considering) 0%, transparent) 100%); - content: ""; - inset: calc(var(--column-width-collapsed) + var(--block-space-half)) 0 0 0; - mask: var(--wavy-background-mask); - position: absolute; - z-index: -1; - } - } - @media (min-width: 640px) { padding-inline: var(--cards-gap); } - @media (prefers-color-scheme: dark) { - --gradient-opacity: 10%; - } - - .cards__decoration { - --gradient-opacity: 30%; - --size: 2.2em; - - background-color: var(--color-canvas); - background-image: radial-gradient(ellipse at bottom, - color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 0%, - transparent 70%); - block-size: var(--size); - inline-size: 100%; - inset: calc(var(--column-width-collapsed) + var(--block-space) - var(--size)) 0 auto 0; - position: absolute; - z-index: -1; - - @media (prefers-color-scheme: dark) { - --gradient-opacity: 15%; - } - - @supports(mask: radial-gradient(black)) { - --gradient-opacity: 30%; - - &:before { - background: radial-gradient(ellipse at bottom, - color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 0%, - transparent 70%); - content: ""; - inset: 0; - mask: radial-gradient(6px at 50% calc(100% + 3px), - transparent calc(99% - 2px), - black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px, - radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px; - position: absolute; - z-index: 0; - } - } - } - - .cards__decoration-end { - background: linear-gradient( transparent 0%, var(--color-canvas) 90%); - block-size: var(--bottom-gradient-size); - content: ""; - inset: auto 0 0; - position: absolute; - z-index: 1; - } - .card { --avatar-size: 2.75em; --text-small: 1.1em; @@ -589,6 +509,59 @@ } } + /* Pinstripes + /* -------------------------------------------------------------------------- */ + + .pinstripes { + --pinstripe-color: oklch(var(--lch-blue-light)); + --pinstripe-spacing: 3px; + + background: repeating-linear-gradient( + 90deg, + var(--pinstripe-color), + var(--pinstripe-color) 1px, + transparent 1px, + transparent var(--pinstripe-spacing) + ); + inset: -24px 0; + overflow: hidden; + position: absolute; + + /* Fade */ + &:before, + &:after { + background: radial-gradient( + circle at center bottom, + transparent, + transparent 65%, + white 70%, + white + ); + block-size: 480px; + inline-size: 200%; + content: ""; + inset: 0; + position: absolute; + translate: -25% 0; + } + + &:after { + inset-block: auto 0; + rotate: 180deg; + } + } + + .pinstripes--alt { + --pinstripe-spacing: 6px; /* 2x previous spacing value */ + } + + .pinstripes__fade { + background: linear-gradient(to right, var(--color-canvas), transparent 10%, transparent 90%, var(--color-canvas)); + content: ""; + inset: 0; + position: absolute; + } + /* Collection tools /* -------------------------------------------------------------------------- */ diff --git a/app/views/collections/columns/_pinstripes.html.erb b/app/views/collections/columns/_pinstripes.html.erb new file mode 100644 index 000000000..d3c3dcfe5 --- /dev/null +++ b/app/views/collections/columns/_pinstripes.html.erb @@ -0,0 +1,4 @@ +
+
+
+
diff --git a/app/views/collections/show/_stream.html.erb b/app/views/collections/show/_stream.html.erb index 56f0ee3e2..c60e67e3e 100644 --- a/app/views/collections/show/_stream.html.erb +++ b/app/views/collections/show/_stream.html.erb @@ -2,7 +2,8 @@ data-drag-and-drop-target="container" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>"> -
+ + <%= render "collections/columns/pinstripes" %>

The Stream

@@ -19,6 +20,4 @@ <%= render "collections/columns/list", cards: page.records, draggable: true %> <% end %> <% end %> - -
diff --git a/app/views/public/collections/show/_considering.html.erb b/app/views/public/collections/show/_considering.html.erb index 32c01b865..de72329f1 100644 --- a/app/views/public/collections/show/_considering.html.erb +++ b/app/views/public/collections/show/_considering.html.erb @@ -1,5 +1,7 @@
-
+ + <%= render "collections/columns/pinstripes" %> + <% if page.used? %> <%= render partial: "cards/display/public_preview", collection: page.records, as: :card, cached: true %> @@ -11,5 +13,4 @@ <% else %>

Nothing here

<% end %> -
diff --git a/app/views/public/collections/show/_stream.html.erb b/app/views/public/collections/show/_stream.html.erb index 346c5c309..41ab9d6b8 100644 --- a/app/views/public/collections/show/_stream.html.erb +++ b/app/views/public/collections/show/_stream.html.erb @@ -1,6 +1,7 @@
-
+ + <%= render "collections/columns/pinstripes" %>

The Stream

@@ -11,6 +12,4 @@ <%= render "public/collections/columns/list", cards: page.records %> <% end %> <% end %> - -