feat(workshops): VHS Worms 2026 workshops with improved styling
- Add 4 VHS Worms 2026 courses (Feb-Jun 2026) - Use markdown-native Material grid cards design - Fix page rendering (remove workshops blog plugin) - Add equal height cards via flexbox CSS - Remove awkward checkmark pseudo-elements - Make page full-width layout (hide navigation sidebar) Courses: KI-Chatbots (Feb 21), KI-Einsatz im Beruf (Mar 14), Videos mit KI (Apr 18), Programmieren mit KI (Jun 20)
This commit is contained in:
@@ -31,7 +31,8 @@
|
||||
@import "modules/slideshow";
|
||||
@import "modules/blog";
|
||||
@import "modules/tooltips"; // Fix for issue #70: Tooltip width improvements
|
||||
@import "modules/workshops"; // VHS Worms workshop cards styling
|
||||
|
||||
//Responsive Design
|
||||
@import "responsive/medium";
|
||||
@import "responsive/mobile";
|
||||
@import "responsive/mobile";
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
// Workshops page styling
|
||||
// Fixes for VHS Worms course cards
|
||||
|
||||
// Workshop cards - equal height grid
|
||||
.workshops {
|
||||
// Grid cards equal height fix
|
||||
.grid.cards {
|
||||
// Ensure grid items stretch to equal height
|
||||
> ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
|
||||
> li {
|
||||
// Equal height cards
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
// Remove the default checkmark decoration from Material theme
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Ensure content fills the card
|
||||
> * {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
// Make the main content area grow to fill space
|
||||
> p:first-of-type {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
// Button stays at bottom
|
||||
.md-button {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DigiSMart checkmark styling - make it more visible and consistent
|
||||
.green {
|
||||
color: #4caf50 !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Global grid cards improvements for workshops page
|
||||
body.workshops {
|
||||
.md-content {
|
||||
.grid.cards {
|
||||
> ul {
|
||||
// Override Material default list styling
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
align-items: stretch;
|
||||
|
||||
> li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--md-primary-fg-color);
|
||||
border-radius: 0.25rem;
|
||||
background: var(--md-default-bg-color);
|
||||
|
||||
// Remove the awkward checkmark pseudo-element
|
||||
&::before {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// First paragraph (description) should expand
|
||||
hr {
|
||||
margin: 0.75rem 0;
|
||||
border-color: var(--md-primary-fg-color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
// Course description - let it grow to push button down
|
||||
> p:nth-of-type(1) {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// Course details (date, location, price)
|
||||
> p:nth-of-type(2),
|
||||
> p:nth-of-type(3),
|
||||
> p:nth-of-type(4) {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
// Button container - always at bottom
|
||||
> p:last-of-type {
|
||||
margin-top: auto;
|
||||
padding-top: 1rem;
|
||||
|
||||
.md-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,72 +1,11 @@
|
||||
{% extends "main.html" %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
|
||||
{# Simple approach: Create workshop data directly from frontmatter structure #}
|
||||
{# Workshop data will be rendered manually with correct structure #}
|
||||
{#
|
||||
Workshops Template
|
||||
|
||||
<h2>Die Nächsten Seminar-Termine</h2>
|
||||
|
||||
<p>Die Termine für 2026 werden hier sukzessive veröffentlicht.</p>
|
||||
|
||||
This template extends main.html without custom content.
|
||||
All content is now rendered from markdown in docs/workshops/index.md
|
||||
using Material for MkDocs features (grids, cards, icons, admonitions).
|
||||
|
||||
<!-- <div class="satag--webinar-dates">
|
||||
<div class="satag--webinar-item">
|
||||
<div class="satag--webinar-date">
|
||||
<i class="fa-sharp fa-thin fa-calendar-day"></i> Sa., 29.11.2025
|
||||
</div>
|
||||
<div class="satag--webinar-time">
|
||||
<i class="fa-sharp fa-thin fa-clock"></i> 09:00 – 13:00 Uhr
|
||||
</div>
|
||||
<div class="satag--webinar-course">
|
||||
<i class="fa-sharp fa-thin fa-arrow-up-right-from-square"></i>
|
||||
<a href="https://www.vhs-worms.de/programm/kurs/KI-Chatbots-im-Privatleben-nutzen/Z04.052" target="_blank" title="KI-Chatbots im Privatleben nutzen">
|
||||
Z04.052 KI-Chatbots im Privatleben nutzen
|
||||
</a>
|
||||
</div>
|
||||
<div class="satag--webinar-location">
|
||||
<i class="fa-sharp fa-thin fa-location-dot"></i> vhs, Willy-Brandt-Ring 11, Raum 1.09, 67547 Worms
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Vergangene Workshops</h2>
|
||||
|
||||
<div class="satag--webinar-dates satag--webinar-dates--past">
|
||||
<div class="satag--webinar-item">
|
||||
<div class="satag--webinar-date">
|
||||
<i class="fa-sharp fa-thin fa-calendar-day"></i> Sa., 12.07.2025
|
||||
</div>
|
||||
<div class="satag--webinar-time">
|
||||
<i class="fa-sharp fa-thin fa-clock"></i> 09:00 – 13:00 Uhr
|
||||
</div>
|
||||
<div class="satag--webinar-course">
|
||||
<i class="fa-sharp fa-thin fa-graduation-cap"></i>
|
||||
Y01.945 KI-Einsatz im Beruf – Nutzen von KI-Chatbots im Arbeitsalltag
|
||||
</div>
|
||||
<div class="satag--webinar-location">
|
||||
<i class="fa-sharp fa-thin fa-location-dot"></i> vhs, Willy-Brandt-Ring 11, Raum 1.09, 67547 Worms
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="satag--webinar-item">
|
||||
<div class="satag--webinar-date">
|
||||
<i class="fa-sharp fa-thin fa-calendar-day"></i> Sa., 21.06.2025
|
||||
</div>
|
||||
<div class="satag--webinar-time">
|
||||
<i class="fa-sharp fa-thin fa-clock"></i> 09:00 – 13:00 Uhr
|
||||
</div>
|
||||
<div class="satag--webinar-course">
|
||||
<i class="fa-sharp fa-thin fa-graduation-cap"></i>
|
||||
Y01.944 KI-Chatbots im Privatleben nutzen
|
||||
</div>
|
||||
<div class="satag--webinar-location">
|
||||
<i class="fa-sharp fa-thin fa-location-dot"></i> vhs, Willy-Brandt-Ring 11, Raum 1.09, 67547 Worms
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
{% endblock %}
|
||||
This file exists for future customizations if needed.
|
||||
#}
|
||||
|
||||
Reference in New Issue
Block a user