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

32
common.css
View file

@ -786,31 +786,33 @@ textarea.markup-editor-textarea {
right: 0;
z-index: 99;
overflow: hidden;
width: 150px;
height: 150px;
width: 185px;
height: 185px;
pointer-events: none;
}
.corner-ribbon a {
display: block;
position: absolute;
right: -40px;
top: 30px;
width: 220px;
padding: 8px 0;
display: block !important;
position: absolute !important;
right: -45px;
top: 40px;
width: 250px;
padding: 10px 0;
text-align: center;
font-size: 13px;
font-weight: bold;
color: #ffffff;
background-color: #5871ad;
text-decoration: none;
font-size: 14px;
font-weight: bold !important;
color: #ffffff !important;
background: linear-gradient(to right, #5871ad, #82A8FF) !important;
text-decoration: none !important;
transform: rotate(45deg);
pointer-events: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
letter-spacing: 0.03em;
transition: background 300ms ease;
}
.corner-ribbon a:hover {
background-color: #a3c765;
background: #a3c765 !important;
}
@media (min-width: 800px) {

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>