"Enhance partner event styling and adjust newsletter text

Updated the partner event card with a new ribbon design, left border highlight, and improved layout for better visibility. Simplified newsletter subscription text for conciseness. These changes enhance visual clarity and streamline user communication."
main
Arne Schauf 2 weeks ago
parent b8c745d675
commit b447adb389
  1. 43
      core/static/css/theme/events.css
  2. 3
      core/templates/core/event_index_page.html
  3. 2
      core/templates/core/tags/newsletter_minimal_form.html

@ -40,18 +40,51 @@
/* Partner event ribbon */
.partner-event-ribbon {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #ff9800, #ff5722);
top: 30px;
right: -20px;
background: linear-gradient(135deg, rgba(132, 0, 75, 0.6), #84004b);
color: white;
padding: 0.3rem 1rem;
padding: 0.3rem 0;
font-size: 0.8rem;
font-weight: var(--font-weight-medium);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10;
border-radius: 3px;
transform: rotate(45deg);
text-transform: uppercase;
letter-spacing: 0.5px;
width: 160px;
text-align: center;
overflow: hidden;
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
/* Partner event card left border */
.timeline-panel.partner-event-card {
border: none;
border-left: 4px solid #84004b;
transition: all 0.3s ease;
}
.partner-event-ribbon::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0, 0, 0, 0.15));
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.partner-event-ribbon::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.15);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.event-item:hover {

@ -19,7 +19,7 @@
<span class="timeline-badge-day">{{ event.start_date|date:"d" }}</span>
<span class="timeline-badge-month">{{ event.start_date|date:"b" }}</span>
</div>
<div class="timeline-panel card border-0 shadow-sm">
<div class="timeline-panel card shadow-sm{% if event.is_partner_event %} partner-event-card{% else %} border-0{% endif %}">
{% if event.is_partner_event %}
<div class="partner-event-ribbon">Partner Event</div>
{% endif %}
@ -29,7 +29,6 @@
<span class="fs-5">{{ event.start_date|date:"SHORT_DATE_FORMAT" }}{% if event.end_date %} - {{ event.end_date|date:"SHORT_DATE_FORMAT" }}{% endif %}</span>
</div>
<div>
<span class="text-muted">{{ event.start_date|date:"F Y" }}</span>
</div>
</div>
</div>

@ -1,6 +1,6 @@
<div id="mc_embed_signup" class="newsletter-cta p-3 mb-4 rounded">
<p class="newsletter-heading mb-2">Bleiben Sie informiert!</p>
<p class="newsletter-text mb-3">Erhalten Sie Updates zu unseren Veranstaltungen und Angeboten.</p>
<p class="newsletter-text mb-3">Erhalten Sie Updates zu unseren Veranstaltungen.</p>
<a href="https://gmbh.us8.list-manage.com/subscribe?u=a2db855ea544f9ced14052793&id=42a1a3ba11"
target="_blank" class="btn btn-primary w-100 d-flex align-items-center justify-content-center">
<i class="bi bi-envelope-fill me-2"></i>

Loading…
Cancel
Save