first theming

main
Arne Schauf 3 weeks ago
parent 7aa3fd4715
commit f79628ac31
  1. 133
      core/static/css/theme.css
  2. 42
      core/templates/bootstrap5_base.html
  3. 119
      core/templates/core/event_index_page.html
  4. 56
      core/templates/core/includes/revolution_slider_slide.html
  5. 4
      core/templates/core/tags/bootstrap5_breadcrumbs.html
  6. 6
      core/templates/core/tags/bootstrap5_top_menu.html
  7. 4
      core/templates/core/tags/bootstrap5_top_menu_children.html

@ -0,0 +1,133 @@
/* FEO GmbH Custom Bootstrap Theme
* An elegant, lightweight, and modern design
*/
:root {
--bs-primary: #72c02c;
--bs-primary-rgb: 114, 192, 44;
}
/* Override Bootstrap primary color */
.btn-primary {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #65ab27;
border-color: #65ab27;
}
.btn-outline-primary {
color: var(--bs-primary);
border-color: var(--bs-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.text-primary {
color: var(--bs-primary) !important;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.border-primary {
border-color: var(--bs-primary) !important;
}
/* Navigation styling */
.navbar {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar-light .navbar-nav .nav-link {
color: #333;
font-weight: 500;
padding: 0.5rem 1rem;
transition: color 0.3s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .active > .nav-link {
color: var(--bs-primary);
}
/* Card styling */
.card {
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
/* Button styling */
.btn {
border-radius: 4px;
padding: 0.5rem 1.5rem;
font-weight: 500;
transition: all 0.3s ease;
}
/* Footer styling */
.footer {
background-color: #f8f9fa;
padding: 4rem 0;
border-top: 1px solid #eee;
}
.copyright {
background-color: #333;
color: white;
padding: 1.5rem 0;
}
.copyright a {
color: #ccc;
text-decoration: none;
transition: color 0.3s ease;
}
.copyright a:hover {
color: white;
}
/* Typography improvements */
body {
font-family: 'Roboto', 'Segoe UI', sans-serif;
color: #333;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
margin-bottom: 1rem;
}
/* Link styling */
a {
color: var(--bs-primary);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #65ab27;
text-decoration: underline;
}
/* Form controls */
.form-control:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

@ -11,31 +11,19 @@
<!-- Favicon -->
<link rel="shortcut icon" href="{% static 'favicon.png' %}">
<!-- Google Fonts - Roboto -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Custom CSS -->
<style>
.footer {
background-color: #f8f9fa;
padding: 3rem 0;
}
.copyright {
background-color: #212529;
color: white;
padding: 1rem 0;
}
.copyright a {
color: #adb5bd;
text-decoration: none;
}
.copyright a:hover {
color: white;
}
</style>
<!-- Custom Theme CSS -->
<link rel="stylesheet" href="{% static 'css/theme.css' %}">
{% block extra_css %}
{% endblock %}
@ -65,9 +53,9 @@
<!-- Breadcrumbs -->
{% if not self.url == site_root.url %}
<div class="bg-light py-3">
<div class="bg-light py-4">
<div class="container">
<h1 class="h2">{{ self.title }}</h1>
<h1 class="h2 mb-3">{{ self.title }}</h1>
<nav aria-label="breadcrumb">
{% bootstrap5_breadcrumbs %}
</nav>
@ -106,10 +94,10 @@
<div class="container">
<div class="row">
<div class="col-md-4 mb-4 mb-md-0">
<h2 class="h4 mb-3">FEO GmbH</h2>
<h2 class="h4 mb-3 text-primary">FEO GmbH</h2>
<p class="mb-4">{% footer_about %}</p>
<h2 class="h4 mb-3">Newsletter</h2>
<h2 class="h4 mb-3 text-primary">Newsletter</h2>
{% footer_newsletter %}
</div>
@ -118,7 +106,7 @@
</div>
<div class="col-md-4">
<h2 class="h4 mb-3">Kontakt</h2>
<h2 class="h4 mb-3 text-primary">Kontakt</h2>
<address>
<p>
FEO Gesellschaft für Fortbildungs-<br>
@ -131,12 +119,12 @@
</p>
</address>
<h2 class="h4 mb-3">Stay Connected</h2>
<h2 class="h4 mb-3 text-primary">Stay Connected</h2>
<div class="d-flex gap-2">
<a href="https://www.linkedin.com/in/marion-s-a2b81152/" target="_blank" class="btn btn-outline-secondary">
<a href="https://www.linkedin.com/in/marion-s-a2b81152/" target="_blank" class="btn btn-outline-primary">
<i class="bi bi-linkedin"></i>
</a>
<a href="https://www.xing.com/companies/feogesellschaftf%C3%BCrfortbildungs-undeventorganisationmbh" target="_blank" class="btn btn-outline-secondary">
<a href="https://www.xing.com/companies/feogesellschaftf%C3%BCrfortbildungs-undeventorganisationmbh" target="_blank" class="btn btn-outline-primary">
<i class="bi bi-x"></i>
</a>
</div>

@ -1,10 +1,122 @@
{% extends "core/base.html" %}
{% load core_tags menu_tags static wagtailuserbar wagtailcore_tags wagtailimages_tags %}
{% block extra_css %}
<style>
/* Timeline styling */
.timeline {
position: relative;
padding: 0;
list-style: none;
}
.timeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 40px;
width: 4px;
background-color: var(--bs-primary);
}
.timeline-item {
position: relative;
margin-bottom: 50px;
}
.timeline-badge {
position: absolute;
top: 0;
left: 40px;
width: 60px;
height: 60px;
margin-left: -30px;
border-radius: 50%;
text-align: center;
background-color: var(--bs-primary);
color: white;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 5px;
}
.timeline-badge-day {
font-size: 1.25rem;
font-weight: bold;
line-height: 1;
}
.timeline-badge-month {
font-size: 0.8rem;
text-transform: uppercase;
line-height: 1;
}
.timeline-month-header {
position: relative;
margin-bottom: 30px;
list-style: none;
}
.timeline-month-header h3 {
position: relative;
padding-left: 60px;
border-bottom: 2px solid var(--bs-primary);
padding-bottom: 10px;
}
.timeline-panel {
position: relative;
width: calc(100% - 90px);
float: right;
border-radius: 8px;
}
.timeline-panel:before {
content: '';
position: absolute;
top: 26px;
left: -15px;
border-top: 15px solid transparent;
border-right: 15px solid #fff;
border-bottom: 15px solid transparent;
}
.timeline-date {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: var(--bs-primary);
}
@media (max-width: 767px) {
.timeline-badge {
margin-left: 0;
}
}
</style>
{% endblock %}
{% block content %}
<div class="container">
{% for event in self.get_events %}
<div class="card mb-4 border-0 shadow-sm">
<ul class="timeline">
{% regroup self.get_events by start_date|date:"F Y" as events_by_month %}
{% for month_group in events_by_month %}
<li class="timeline-month-header">
<h3 class="text-primary mb-4">{{ month_group.grouper }}</h3>
</li>
{% for event in month_group.list %}
<li class="timeline-item clearfix">
<div class="timeline-badge">
<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="card-header bg-light">
<div class="d-flex justify-content-between align-items-center">
<div>
@ -54,6 +166,9 @@
</div>
</div>
</div>
</li>
{% endfor %}
{% endfor %}
</ul>
</div>
{% endblock content %}

@ -1,56 +0,0 @@
{% load wagtailimages_tags %}
<!-- SLIDE -->
<li class="revolution-mch-1" data-transition="fade" data-slotamount="5" data-masterspeed="1000">
<!-- MAIN IMAGE -->
{% image img fill-2000x500 data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" %}
{% if headline %}
<div class="tp-caption revolution-ch1 sft start"
data-x="center"
data-hoffset="0"
data-y="100"
data-speed="1500"
data-start="500"
data-easing="Back.easeInOut"
data-endeasing="Power1.easeIn"
data-endspeed="300">
{{ headline }}
</div>
{% endif %}
{% if subline %}
<!-- LAYER -->
<div class="tp-caption revolution-ch2 sft"
data-x="center"
data-hoffset="0"
data-y="190"
data-speed="1400"
data-start="2000"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">
{{ subline }}
</div>
{% endif %}
{% if link_url and link_text %}
<!-- LAYER -->
<div class="tp-caption sft"
data-x="center"
data-hoffset="0"
data-y="310"
data-speed="1600"
data-start="2800"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">
<a href="{{ link_url }}" class="btn-u btn-brd btn-brd-hover btn-u-light">{{ link_text }}</a>
</div>
{% endif %}
</li>
<!-- END SLIDE -->

@ -1,12 +1,12 @@
{% load wagtailcore_tags %}
{% if ancestors %}
<ol class="breadcrumb mb-0">
<ol class="breadcrumb mb-0 py-2">
{% for ancestor in ancestors %}
{% if forloop.last %}
<li class="breadcrumb-item active" aria-current="page">{{ ancestor }}</li>
{% else %}
<li class="breadcrumb-item"><a href="{% pageurl ancestor %}">{{ ancestor }}</a></li>
<li class="breadcrumb-item"><a href="{% pageurl ancestor %}" class="text-decoration-none">{{ ancestor }}</a></li>
{% endif %}
{% endfor %}
</ol>

@ -1,7 +1,7 @@
{% load menu_tags wagtailcore_tags static %}
{% get_site_root as site_root %}
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
<div class="container">
<a class="navbar-brand" href="{{ site_root.url }}">
<img src="{% static 'img/logo_feo.png' %}" alt="Logo FEO GmbH" height="60">
@ -14,14 +14,14 @@
{% for menuitem in menuitems %}
{% if menuitem.show_dropdown %}
<li class="nav-item dropdown{% if menuitem.active %} active{% endif %}">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown{{ forloop.counter }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<a class="nav-link dropdown-toggle{% if menuitem.active %} text-primary{% endif %}" href="#" id="navbarDropdown{{ forloop.counter }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ menuitem.title }}
</a>
{% bootstrap5_top_menu_children parent=menuitem %}
</li>
{% else %}
<li class="nav-item{% if menuitem.active %} active{% endif %}">
<a class="nav-link" href="{% pageurl menuitem %}">{{ menuitem.title }}</a>
<a class="nav-link{% if menuitem.active %} text-primary{% endif %}" href="{% pageurl menuitem %}">{{ menuitem.title }}</a>
</li>
{% endif %}
{% endfor %}

@ -1,9 +1,9 @@
{% load menu_tags wagtailcore_tags %}
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<ul class="dropdown-menu shadow-sm border-0" aria-labelledby="navbarDropdown">
{# Include link to parent because the parent link is a drop down #}
<li><a class="dropdown-item" href="{% pageurl parent %}">{{ parent.title }}</a></li>
{% for child in menuitems_children %}
<li><a class="dropdown-item{% if child.active %} active{% endif %}" href="{% pageurl child %}">{{ child.title }}</a></li>
<li><a class="dropdown-item{% if child.active %} active text-primary{% endif %}" href="{% pageurl child %}">{{ child.title }}</a></li>
{% endfor %}
</ul>

Loading…
Cancel
Save