engineering/www.makepostsell.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Purple corner ribbon with green glow animation, sticky position

Browse source 
Ribbon now purple gradient with pulsing green glow keyframes.
Hover intensifies the glow and slightly scales up.
Changed from position:fixed to position:sticky so it scrolls
with the page but sticks to top.
This commit is contained in:
russell@unturf.com 2026-03-04 15:54:47 -05:00
parent a7bef8b98c
commit 10b8ad27f8
1 changed files with 21 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

30
common.css
View file

@ -780,14 +780,24 @@ textarea.markup-editor-textarea {
CORNER RIBBON
============================================ */
@keyframes ribbon-glow {
0% { box-shadow: 0 3px 8px rgba(163, 199, 101, 0.3), 0 0 15px rgba(163, 199, 101, 0.15); }
50% { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 30px rgba(163, 199, 101, 0.3); }
100% { box-shadow: 0 3px 8px rgba(163, 199, 101, 0.3), 0 0 15px rgba(163, 199, 101, 0.15); }
}
@keyframes ribbon-glow-hover {
0% { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 35px rgba(163, 199, 101, 0.4), 0 0 60px rgba(163, 199, 101, 0.15); }
50% { box-shadow: 0 3px 18px rgba(163, 199, 101, 0.9), 0 0 50px rgba(163, 199, 101, 0.6), 0 0 80px rgba(163, 199, 101, 0.25); }
100% { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 35px rgba(163, 199, 101, 0.4), 0 0 60px rgba(163, 199, 101, 0.15); }
}
.corner-ribbon {
position: fixed;
position: sticky;
top: 0;
right: 0;
z-index: 99;
overflow: hidden;
width: 185px;
height: 185px;
height: 0;
overflow: visible;
pointer-events: none;
}
@ -802,17 +812,19 @@ textarea.markup-editor-textarea {
font-size: 14px;
font-weight: bold !important;
color: #ffffff !important;
background: linear-gradient(to right, #5871ad, #82A8FF) !important;
background: linear-gradient(135deg, #7B2D8E, #9B59B6, #7B2D8E) !important;
text-decoration: none !important;
transform: rotate(45deg);
pointer-events: auto;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
letter-spacing: 0.03em;
transition: background 300ms ease;
animation: ribbon-glow 2.5s ease-in-out infinite;
transition: all 300ms ease;
}
.corner-ribbon a:hover {
background: #a3c765 !important;
background: linear-gradient(135deg, #6A1B7A, #8E44AD, #6A1B7A) !important;
animation: ribbon-glow-hover 1.5s ease-in-out infinite;
transform: rotate(45deg) scale(1.05);
}
@media (min-width: 800px) {