diff --git a/CLAUDE.md b/CLAUDE.md index 7814e24..0dd9284 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -30,8 +30,8 @@ Mobile-first static site. CSS Grid. Helvetica. Media queries at 800px (tablet/de | Blue Secondary | `#98b6fa` | Secondary buttons (edit, preview, save, PyPi, blog), alert-info | | Navy Brand | `#5871ad` | Ribbon gradient start, log-out/activate buttons, corner ribbon | | Light Navy | `#82A8FF` | Ribbon gradient end | -| Purple | `#9B59B6` | Source/code buttons (PyPi, Source Code), corner ribbon | -| Purple Dark | `#7B2D8E` | Purple hover state, ribbon gradient | +| Purple | `#9B59B6` | Source/code buttons (PyPi, Source Code) | +| Purple Dark | `#7B2D8E` | Purple hover state | | Danger Red | `#CC6958` | Delete button | | Check Green | `#678731` | Checkmark list items | | Cross Red | `#c77765` | Cross list items | @@ -62,7 +62,6 @@ Green = primary CTA (action the user should take). Blue = secondary (information ### Components -- **Corner ribbon** — `.corner-ribbon` fixed top-right, navy, links to source repo - **Message ribbon** — `.message-ribbon` gradient banner, hidden on mobile - **Wells** — `.well` (gray bg) and `.well.well-white` (white bg), rounded corners - **Alerts** — `.alert.alert-success`, `.alert.alert-info`, `.alert.alert-warning`, `.alert.alert-danger` diff --git a/common.css b/common.css index 118f57c..d9bef26 100644 --- a/common.css +++ b/common.css @@ -784,68 +784,6 @@ textarea.markup-editor-textarea { color: #a3c765; } -/* ============================================ - CORNER RIBBON - ============================================ */ - -@keyframes ribbon-glow { - 0% { box-shadow: 0 3px 10px rgba(163, 199, 101, 0.4), 0 0 20px rgba(163, 199, 101, 0.2), 0 0 40px rgba(163, 199, 101, 0.1); } - 50% { box-shadow: 0 3px 16px rgba(163, 199, 101, 0.7), 0 0 35px rgba(163, 199, 101, 0.4), 0 0 60px rgba(163, 199, 101, 0.15); } - 100% { box-shadow: 0 3px 10px rgba(163, 199, 101, 0.4), 0 0 20px rgba(163, 199, 101, 0.2), 0 0 40px rgba(163, 199, 101, 0.1); } -} - -@keyframes ribbon-glow-hover { - 0% { box-shadow: 0 3px 16px rgba(163, 199, 101, 0.8), 0 0 40px rgba(163, 199, 101, 0.5), 0 0 80px rgba(163, 199, 101, 0.2), 0 0 120px rgba(163, 199, 101, 0.1); } - 50% { box-shadow: 0 3px 24px rgba(163, 199, 101, 1.0), 0 0 60px rgba(163, 199, 101, 0.7), 0 0 100px rgba(163, 199, 101, 0.3), 0 0 140px rgba(163, 199, 101, 0.15); } - 100% { box-shadow: 0 3px 16px rgba(163, 199, 101, 0.8), 0 0 40px rgba(163, 199, 101, 0.5), 0 0 80px rgba(163, 199, 101, 0.2), 0 0 120px rgba(163, 199, 101, 0.1); } -} - -@keyframes ribbon-shimmer { - 0% { background-position: 200% center; } - 100% { background-position: -200% center; } -} - -.corner-ribbon { - position: fixed; - top: 0; - right: 0; - z-index: 99; - width: 200px; - height: 200px; - overflow: hidden; - pointer-events: none; -} - -.corner-ribbon a { - display: block !important; - position: absolute !important; - right: -55px; - top: 30px; - width: 300px; - padding: 18px 0; - text-align: center; - font-size: 15px; - font-weight: bold !important; - white-space: nowrap !important; - color: #ffffff !important; - background: linear-gradient(135deg, #7B2D8E, #9B59B6, #7B2D8E) !important; - background-size: 200% auto !important; - text-decoration: none !important; - transform: rotate(45deg); - pointer-events: auto; - letter-spacing: 0.08em; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 10px rgba(163, 199, 101, 0.4); - animation: ribbon-glow 2.5s ease-in-out infinite, ribbon-shimmer 4s linear infinite; - transition: all 300ms ease; -} - -.corner-ribbon a:hover { - background: linear-gradient(135deg, #6A1B7A, #a3c765, #6A1B7A) !important; - background-size: 200% auto !important; - animation: ribbon-glow-hover 1.5s ease-in-out infinite, ribbon-shimmer 2s linear infinite; - transform: rotate(45deg) scale(1.08); - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(163, 199, 101, 0.8); -} @media (min-width: 800px) { .mps-footer-grid { diff --git a/index.html b/index.html index 7c9101f..5052be1 100644 --- a/index.html +++ b/index.html @@ -18,9 +18,6 @@
-