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

Remove corner ribbon from all files and docs

Browse source
This commit is contained in:
russell@unturf.com 2026-03-04 16:01:55 -05:00
parent 702ad49764
commit 212c950707
4 changed files with 2 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

5
CLAUDE.md
View file

@ -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 | | Blue Secondary | `#98b6fa` | Secondary buttons (edit, preview, save, PyPi, blog), alert-info |
| Navy Brand | `#5871ad` | Ribbon gradient start, log-out/activate buttons, corner ribbon | | Navy Brand | `#5871ad` | Ribbon gradient start, log-out/activate buttons, corner ribbon |
| Light Navy | `#82A8FF` | Ribbon gradient end | | Light Navy | `#82A8FF` | Ribbon gradient end |
| Purple | `#9B59B6` | Source/code buttons (PyPi, Source Code), corner ribbon | | Purple | `#9B59B6` | Source/code buttons (PyPi, Source Code) |
| Purple Dark | `#7B2D8E` | Purple hover state, ribbon gradient | | Purple Dark | `#7B2D8E` | Purple hover state |
| Danger Red | `#CC6958` | Delete button | | Danger Red | `#CC6958` | Delete button |
| Check Green | `#678731` | Checkmark list items | | Check Green | `#678731` | Checkmark list items |
| Cross Red | `#c77765` | Cross list items | | Cross Red | `#c77765` | Cross list items |
@ -62,7 +62,6 @@ Green = primary CTA (action the user should take). Blue = secondary (information
### Components ### Components
- **Corner ribbon** — `.corner-ribbon` fixed top-right, navy, links to source repo
- **Message ribbon** — `.message-ribbon` gradient banner, hidden on mobile - **Message ribbon** — `.message-ribbon` gradient banner, hidden on mobile
- **Wells** — `.well` (gray bg) and `.well.well-white` (white bg), rounded corners - **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` - **Alerts** — `.alert.alert-success`, `.alert.alert-info`, `.alert.alert-warning`, `.alert.alert-danger`

62
common.css
View file

@ -784,68 +784,6 @@ textarea.markup-editor-textarea {
color: #a3c765; 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) { @media (min-width: 800px) {
.mps-footer-grid { .mps-footer-grid {

3
index.html
View file

@ -18,9 +18,6 @@
<body style="color: #515151; background-color: #F9F9FA;"> <body style="color: #515151; background-color: #F9F9FA;">
<div class="corner-ribbon">
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank">Contribute Code</a>
</div>
<div class="message-ribbon"> <div class="message-ribbon">
Sell digital downloads or physical products &#8212; commission free! Sell digital downloads or physical products &#8212; commission free!

18
styleguide.html
View file

@ -87,9 +87,6 @@
<body style="color: #515151; background-color: #F9F9FA;"> <body style="color: #515151; background-color: #F9F9FA;">
<div class="corner-ribbon">
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank">Contribute Code</a>
</div>
<div class="message-ribbon"> <div class="message-ribbon">
Style Guide &#8212; Make Post Sell Design System Style Guide &#8212; Make Post Sell Design System
@ -359,21 +356,6 @@ Gradient: #5871ad &#8594; #82A8FF
Hidden on mobile, visible at 800px+</div> Hidden on mobile, visible at 800px+</div>
</div> </div>
<div class="sg-subsection">
<div class="sg-label">Corner Ribbon (fixed, top-right)</div>
<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;
Gradient: #5871ad &#8594; #82A8FF, hovers to green #a3c765
Fixed position, z-index 99
Uses !important to override inline page styles</div>
</div>
</div> </div>
<!-- ======== WELLS ======== --> <!-- ======== WELLS ======== -->