diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/main.css | 60 | ||||
| -rw-r--r-- | assets/css/main.min.css | 62 |
2 files changed, 122 insertions, 0 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index 2645b4a..9e32abf 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1704,6 +1704,66 @@ select:focus-visible { transform: rotate(315deg); } +/* Obsolete article banner */ +.banner-obsolete { + margin: 1.5rem 0; + padding: 1rem 1.25rem; + border-left: 4px solid var(--type-life); + border-radius: 0.5rem; + background-color: rgba(245, 158, 11, 0.08); +} + +.banner-obsolete__inner { + display: flex; + align-items: flex-start; + gap: 0.75rem; + color: var(--type-life); +} + +.banner-obsolete__inner svg { + flex-shrink: 0; + margin-top: 0.125rem; + color: var(--type-life); +} + +.banner-obsolete__body { + display: flex; + flex-direction: column; + gap: 0.75rem; + flex: 1; +} + +.banner-obsolete__body p { + color: var(--text); + font-size: 0.9rem; + margin: 0; +} + +.banner-obsolete__cta { + display: inline-flex; + align-items: center; + gap: 0.5rem; + align-self: center; + padding: 0.4rem 1rem; + border: 1px solid var(--type-life); + border-radius: 0.375rem; + color: var(--type-life); + font-size: 0.875rem; + font-weight: 500; + text-decoration: none; + transition: background-color 0.2s; +} + +.banner-obsolete__cta:hover { + background-color: rgba(245, 158, 11, 0.12); +} + +/* Light theme override — #d97706 passes WCAG AA on white */ +html.theme-light .banner-obsolete { + background-color: rgba(217, 119, 6, 0.07); + border-left-color: var(--type-life); +} + /* Motion Safety - Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { diff --git a/assets/css/main.min.css b/assets/css/main.min.css index 2decaba..c335eb9 100644 --- a/assets/css/main.min.css +++ b/assets/css/main.min.css @@ -4205,6 +4205,68 @@ article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg { transform: rotate(315deg); } +/* Obsolete article banner */ + +.banner-obsolete { + margin: 1.5rem 0; + padding: 1rem 1.25rem; + border-left: 4px solid var(--type-life); + border-radius: 0.5rem; + background-color: rgba(245, 158, 11, 0.08); +} + +.banner-obsolete__inner { + display: flex; + align-items: flex-start; + gap: 0.75rem; + color: var(--type-life); +} + +.banner-obsolete__inner svg { + flex-shrink: 0; + margin-top: 0.125rem; + color: var(--type-life); +} + +.banner-obsolete__body { + display: flex; + flex-direction: column; + gap: 0.75rem; + flex: 1; +} + +.banner-obsolete__body p { + color: var(--text); + font-size: 0.9rem; + margin: 0; +} + +.banner-obsolete__cta { + display: inline-flex; + align-items: center; + gap: 0.5rem; + align-self: center; + padding: 0.4rem 1rem; + border: 1px solid var(--type-life); + border-radius: 0.375rem; + color: var(--type-life); + font-size: 0.875rem; + font-weight: 500; + text-decoration: none; + transition: background-color 0.2s; +} + +.banner-obsolete__cta:hover { + background-color: rgba(245, 158, 11, 0.12); +} + +/* Light theme override — #d97706 passes WCAG AA on white */ + +html.theme-light .banner-obsolete { + background-color: rgba(217, 119, 6, 0.07); + border-left-color: var(--type-life); +} + /* Motion Safety - Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { |