From e5040b5ffa8d5194bc2ab558716654e66ed360e9 Mon Sep 17 00:00:00 2001 From: solace Date: Wed, 30 Sep 2026 12:35:04 -0400 Subject: [PATCH 1/2] added dismissable deadline extension banner Co-Authored-By: Claude Opus 5.5 --- .../components/_buku_x3_status.scss | 13 -- .../stylesheets/components/_top_banner.scss | 219 +++++++++++------- .../buku_x3_status_component.html.erb | 1 - app/views/layouts/application.html.erb | 8 + 4 files changed, 138 insertions(+), 103 deletions(-) diff --git a/app/assets/stylesheets/components/_buku_x3_status.scss b/app/assets/stylesheets/components/_buku_x3_status.scss index 5e51608dd..8cbf70d9f 100644 --- a/app/assets/stylesheets/components/_buku_x3_status.scss +++ b/app/assets/stylesheets/components/_buku_x3_status.scss @@ -149,19 +149,6 @@ transform: translateY(-100%); } - &__deadline { - // Mirror the label just below the rope. - position: absolute; - left: calc(var(--character-width) * 0.93); - right: calc(var(--character-width) * 0.93); - top: calc(var(--character-width) * 0.619 + var(--space-s)); - z-index: 1; - margin: 0; - font-size: var(--font-size-s); - font-style: italic; - text-align: center; - } - &__tug { --character-width: clamp(64px, 24cqi, 160px); diff --git a/app/assets/stylesheets/components/_top_banner.scss b/app/assets/stylesheets/components/_top_banner.scss index 24646a2a4..2d800cd0d 100644 --- a/app/assets/stylesheets/components/_top_banner.scss +++ b/app/assets/stylesheets/components/_top_banner.scss @@ -1,89 +1,130 @@ -.top-banner { - padding: 0.5rem 1rem; - color: white; - font-size: 0.85rem; - font-weight: 500; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); - - strong { - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.5px; - } -} - -.top-banner--beta { - text-align: center; - background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); - border-bottom: 2px solid #92400e; -} - -.top-banner--impersonation { - background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); - border-bottom: 3px solid #991b1b; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - animation: pulse-glow 2s ease-in-out infinite; -} - -.top-banner__content { - display: flex; - align-items: center; - justify-content: space-between; -} - -.top-banner__text { - flex: 1; - font-size: 1rem; -} - -.top-banner__detail { - opacity: 0.9; - font-size: 0.875rem; - margin-left: 0.5rem; -} - -.top-banner__action { - background: white; - border: 2px solid white; - padding: 0.5rem 1.5rem; - border-radius: 6px; - font-weight: 600; - font-size: 0.875rem; - text-transform: uppercase; - letter-spacing: 0.5px; - cursor: pointer; - transition: all 0.2s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -} - -.top-banner--impersonation .top-banner__action { - color: #dc2626; - - &:hover { - background: #fee2e2; - color: #991b1b; - transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - } - - &:active { - transform: translateY(0); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - } -} - -@media (prefers-reduced-motion: reduce) { - .top-banner--impersonation { - animation: none; - } -} - -@keyframes pulse-glow { - 0%, - 100% { - box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5); - } - 50% { - box-shadow: 0 4px 20px rgba(239, 68, 68, 0.8); - } -} +.top-banner { + padding: 0.5rem 1rem; + color: white; + font-size: 0.85rem; + font-weight: 500; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + + strong { + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + } +} + +.top-banner--beta { + text-align: center; + background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); + border-bottom: 2px solid #92400e; +} + +.top-banner--announcement { + position: relative; + padding-inline: 2.5rem; + text-align: center; + background: var(--color-brand-yellow); + color: var(--color-set-1-bg); + text-shadow: none; + + .top-banner__text { + margin: 0; + } +} + +.top-banner__dismiss { + position: absolute; + top: 50%; + right: 0.5rem; + display: grid; + place-items: center; + width: 1.75rem; + height: 1.75rem; + padding: 0; + border: 0; + border-radius: 4px; + background: transparent; + color: inherit; + font-size: 1.25rem; + line-height: 1; + cursor: pointer; + transform: translateY(-50%); + + &:hover { + background: rgba(0, 0, 0, 0.1); + } + + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: 1px; + } +} + +.top-banner--impersonation { + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + border-bottom: 3px solid #991b1b; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + animation: pulse-glow 2s ease-in-out infinite; +} + +.top-banner__content { + display: flex; + align-items: center; + justify-content: space-between; +} + +.top-banner__text { + flex: 1; + font-size: 1rem; +} + +.top-banner__detail { + opacity: 0.9; + font-size: 0.875rem; + margin-left: 0.5rem; +} + +.top-banner__action { + background: white; + border: 2px solid white; + padding: 0.5rem 1.5rem; + border-radius: 6px; + font-weight: 600; + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 0.5px; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.top-banner--impersonation .top-banner__action { + color: #dc2626; + + &:hover { + background: #fee2e2; + color: #991b1b; + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + } + + &:active { + transform: translateY(0); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + } +} + +@media (prefers-reduced-motion: reduce) { + .top-banner--impersonation { + animation: none; + } +} + +@keyframes pulse-glow { + 0%, + 100% { + box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5); + } + 50% { + box-shadow: 0 4px 20px rgba(239, 68, 68, 0.8); + } +} diff --git a/app/components/buku_x3_status_component.html.erb b/app/components/buku_x3_status_component.html.erb index 83da5a1f6..a02b8df15 100644 --- a/app/components/buku_x3_status_component.html.erb +++ b/app/components/buku_x3_status_component.html.erb @@ -40,7 +40,6 @@ beans <%= display_hours(:bean) %> h shipped -

stardance ends october 31st!

<% end %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f97b7fe75..93fa6db2d 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -89,6 +89,14 @@ <% end %>
+ <% unless cookies[:deadline_extension_dismissed] %> +
+

stardance has been extended another month! the new deadline is october 31 :)

+ +
+ <% end %> <% if in_beta? %>
Beta — This is a testing environment. Your data may be reset at any time. From dcf453e11110fb842c3cce134f85a0ae4b9e664a Mon Sep 17 00:00:00 2001 From: solace Date: Wed, 30 Sep 2026 12:40:06 -0400 Subject: [PATCH 2/2] fix: use LF line endings in top banner styles Co-Authored-By: Claude Opus 5.5 --- .../stylesheets/components/_top_banner.scss | 260 +++++++++--------- 1 file changed, 130 insertions(+), 130 deletions(-) diff --git a/app/assets/stylesheets/components/_top_banner.scss b/app/assets/stylesheets/components/_top_banner.scss index 2d800cd0d..db5605b10 100644 --- a/app/assets/stylesheets/components/_top_banner.scss +++ b/app/assets/stylesheets/components/_top_banner.scss @@ -1,130 +1,130 @@ -.top-banner { - padding: 0.5rem 1rem; - color: white; - font-size: 0.85rem; - font-weight: 500; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); - - strong { - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.5px; - } -} - -.top-banner--beta { - text-align: center; - background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); - border-bottom: 2px solid #92400e; -} - -.top-banner--announcement { - position: relative; - padding-inline: 2.5rem; - text-align: center; - background: var(--color-brand-yellow); - color: var(--color-set-1-bg); - text-shadow: none; - - .top-banner__text { - margin: 0; - } -} - -.top-banner__dismiss { - position: absolute; - top: 50%; - right: 0.5rem; - display: grid; - place-items: center; - width: 1.75rem; - height: 1.75rem; - padding: 0; - border: 0; - border-radius: 4px; - background: transparent; - color: inherit; - font-size: 1.25rem; - line-height: 1; - cursor: pointer; - transform: translateY(-50%); - - &:hover { - background: rgba(0, 0, 0, 0.1); - } - - &:focus-visible { - outline: 2px solid currentColor; - outline-offset: 1px; - } -} - -.top-banner--impersonation { - background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); - border-bottom: 3px solid #991b1b; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - animation: pulse-glow 2s ease-in-out infinite; -} - -.top-banner__content { - display: flex; - align-items: center; - justify-content: space-between; -} - -.top-banner__text { - flex: 1; - font-size: 1rem; -} - -.top-banner__detail { - opacity: 0.9; - font-size: 0.875rem; - margin-left: 0.5rem; -} - -.top-banner__action { - background: white; - border: 2px solid white; - padding: 0.5rem 1.5rem; - border-radius: 6px; - font-weight: 600; - font-size: 0.875rem; - text-transform: uppercase; - letter-spacing: 0.5px; - cursor: pointer; - transition: all 0.2s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -} - -.top-banner--impersonation .top-banner__action { - color: #dc2626; - - &:hover { - background: #fee2e2; - color: #991b1b; - transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - } - - &:active { - transform: translateY(0); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - } -} - -@media (prefers-reduced-motion: reduce) { - .top-banner--impersonation { - animation: none; - } -} - -@keyframes pulse-glow { - 0%, - 100% { - box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5); - } - 50% { - box-shadow: 0 4px 20px rgba(239, 68, 68, 0.8); - } -} +.top-banner { + padding: 0.5rem 1rem; + color: white; + font-size: 0.85rem; + font-weight: 500; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + + strong { + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + } +} + +.top-banner--beta { + text-align: center; + background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); + border-bottom: 2px solid #92400e; +} + +.top-banner--announcement { + position: relative; + padding-inline: 2.5rem; + text-align: center; + background: var(--color-brand-yellow); + color: var(--color-set-1-bg); + text-shadow: none; + + .top-banner__text { + margin: 0; + } +} + +.top-banner__dismiss { + position: absolute; + top: 50%; + right: 0.5rem; + display: grid; + place-items: center; + width: 1.75rem; + height: 1.75rem; + padding: 0; + border: 0; + border-radius: 4px; + background: transparent; + color: inherit; + font-size: 1.25rem; + line-height: 1; + cursor: pointer; + transform: translateY(-50%); + + &:hover { + background: rgba(0, 0, 0, 0.1); + } + + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: 1px; + } +} + +.top-banner--impersonation { + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + border-bottom: 3px solid #991b1b; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + animation: pulse-glow 2s ease-in-out infinite; +} + +.top-banner__content { + display: flex; + align-items: center; + justify-content: space-between; +} + +.top-banner__text { + flex: 1; + font-size: 1rem; +} + +.top-banner__detail { + opacity: 0.9; + font-size: 0.875rem; + margin-left: 0.5rem; +} + +.top-banner__action { + background: white; + border: 2px solid white; + padding: 0.5rem 1.5rem; + border-radius: 6px; + font-weight: 600; + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 0.5px; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.top-banner--impersonation .top-banner__action { + color: #dc2626; + + &:hover { + background: #fee2e2; + color: #991b1b; + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + } + + &:active { + transform: translateY(0); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + } +} + +@media (prefers-reduced-motion: reduce) { + .top-banner--impersonation { + animation: none; + } +} + +@keyframes pulse-glow { + 0%, + 100% { + box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5); + } + 50% { + box-shadow: 0 4px 20px rgba(239, 68, 68, 0.8); + } +}