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

Fix corner ribbon: use !important to override inline styles, match brand gradient

Browse source 
Ribbon was rendering as flat green text because inline <style> block
overrode external CSS. Now uses !important on color/background/display.
Also upgraded to brand gradient (#5871ad → #82A8FF), larger size, smoother
transitions.
This commit is contained in:
russell@unturf.com 2026-03-04 15:53:41 -05:00
parent 5818fbfa81
commit a7bef8b98c
2 changed files with 23 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

11
styleguide.html
View file

@ -338,17 +338,18 @@ Hidden on mobile, visible at 800px+</div>
<div class="sg-subsection">
<div class="sg-label">Corner Ribbon (fixed, top-right)</div>
<div class="sg-demo" style="position: relative; min-height: 160px; overflow: hidden;">
<div style="position: absolute; top: 0; right: 0; overflow: hidden; width: 150px; height: 150px;">
<a href="#" style="display: block; position: absolute; right: -40px; top: 30px; width: 220px; padding: 8px 0; text-align: center; font-size: 13px; font-weight: bold; color: #ffffff; background-color: #5871ad; text-decoration: none; transform: rotate(45deg); box-shadow: 0 2px 4px rgba(0,0,0,0.2);">Contribute Code</a>
<div class="sg-demo" style="position: relative; min-height: 200px; overflow: hidden;">
<div style="position: absolute; top: 0; right: 0; overflow: hidden; width: 185px; height: 185px;">
<a href="#" style="display: block; position: absolute; right: -45px; top: 40px; width: 250px; padding: 10px 0; text-align: center; font-size: 14px; font-weight: bold; color: #ffffff; background: linear-gradient(to right, #5871ad, #82A8FF); text-decoration: none; transform: rotate(45deg); box-shadow: 0 3px 6px rgba(0,0,0,0.25); letter-spacing: 0.03em;">Contribute Code</a>
</div>
</div>
<div class="sg-code">&lt;div class="corner-ribbon"&gt;
&lt;a href="https://git.unturf.com/..." target="_blank"&gt;Contribute Code&lt;/a&gt;
&lt;/div&gt;
Navy #5871ad, hovers to green #a3c765
Fixed position, z-index 99</div>
Gradient: #5871ad &#8594; #82A8FF, hovers to green #a3c765
Fixed position, z-index 99
Uses !important to override inline page styles</div>
</div>
</div>