arne
/
feo-homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first theming

Browse Source
main
Arne Schauf 3 weeks ago
parent 7aa3fd4715
commit f79628ac31
7 changed files with 319 additions and 139 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 133
      core/static/css/theme.css
  2. 42
      core/templates/bootstrap5_base.html
  3. 213
      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

133
core/static/css/theme.css
Unescape View File

@ -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);
}

42
core/templates/bootstrap5_base.html
Unescape View File

@ -11,31 +11,19 @@
<!-- Favicon --> <!-- Favicon -->
<link rel="shortcut icon" href="{% static 'favicon.png' %}"> <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 --> <!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons --> <!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Custom CSS --> <!-- Custom Theme CSS -->
<style> <link rel="stylesheet" href="{% static 'css/theme.css' %}">
.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>
{% block extra_css %} {% block extra_css %}
{% endblock %} {% endblock %}
@ -65,9 +53,9 @@
<!-- Breadcrumbs --> <!-- Breadcrumbs -->
{% if not self.url == site_root.url %} {% if not self.url == site_root.url %}
<div class="bg-light py-3"> <div class="bg-light py-4">
<div class="container"> <div class="container">
<h1 class="h2">{{ self.title }}</h1> <h1 class="h2 mb-3">{{ self.title }}</h1>
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
{% bootstrap5_breadcrumbs %} {% bootstrap5_breadcrumbs %}
</nav> </nav>
@ -106,10 +94,10 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-4 mb-4 mb-md-0"> <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> <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 %} {% footer_newsletter %}
</div> </div>
@ -118,7 +106,7 @@
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h2 class="h4 mb-3">Kontakt</h2> <h2 class="h4 mb-3 text-primary">Kontakt</h2>
<address> <address>
<p> <p>
FEO Gesellschaft für Fortbildungs-<br> FEO Gesellschaft für Fortbildungs-<br>
@ -131,12 +119,12 @@
</p> </p>
</address> </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"> <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> <i class="bi bi-linkedin"></i>
</a> </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> <i class="bi bi-x"></i>
</a> </a>
</div> </div>

213
core/templates/core/event_index_page.html
Unescape View File

@ -1,59 +1,174 @@
{% extends "core/base.html" %} {% extends "core/base.html" %}
{% load core_tags menu_tags static wagtailuserbar wagtailcore_tags wagtailimages_tags %} {% 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 %} {% block content %}
<div class="container"> <div class="container">
{% for event in self.get_events %} <ul class="timeline">
<div class="card mb-4 border-0 shadow-sm"> {% regroup self.get_events by start_date|date:"F Y" as events_by_month %}
<div class="card-header bg-light"> {% for month_group in events_by_month %}
<div class="d-flex justify-content-between align-items-center"> <li class="timeline-month-header">
<div> <h3 class="text-primary mb-4">{{ month_group.grouper }}</h3>
<span class="fs-5">{{ event.start_date|date:"SHORT_DATE_FORMAT" }}{% if event.end_date %} - {{ event.end_date|date:"SHORT_DATE_FORMAT" }}{% endif %}</span> </li>
</div> {% for event in month_group.list %}
<div> <li class="timeline-item clearfix">
<span class="text-muted">{{ event.start_date|date:"F Y" }}</span> <div class="timeline-badge">
</div> <span class="timeline-badge-day">{{ event.start_date|date:"d" }}</span>
<span class="timeline-badge-month">{{ event.start_date|date:"b" }}</span>
</div> </div>
</div> <div class="timeline-panel card border-0 shadow-sm">
<div class="card-body"> <div class="card-header bg-light">
<h3 class="card-title mb-3"><a href="{{ event.url }}" class="text-decoration-none">{{ event.title }}</a> <div class="d-flex justify-content-between align-items-center">
{% if event.subtitle %}<br><small class="text-muted">{{ event.subtitle }}</small>{% endif %}</h3> <div>
<div class="row"> <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 class="col-md-4 mb-3 mb-md-0"> </div>
{% if event.img1_img %} <div>
{% image event.img1_img max-250x250 class="img-fluid rounded" %} <span class="text-muted">{{ event.start_date|date:"F Y" }}</span>
{% endif %} </div>
</div>
</div> </div>
<div class="col-md-4 mb-3 mb-md-0"> <div class="card-body">
<h5 class="mb-3"> <h3 class="card-title mb-3"><a href="{{ event.url }}" class="text-decoration-none">{{ event.title }}</a>
{{ event.start_date }}{% if event.end_date %} - {{ event.end_date }}{% endif %} {% if event.subtitle %}<br><small class="text-muted">{{ event.subtitle }}</small>{% endif %}</h3>
</h5> <div class="row">
{% if event.location_name %} <div class="col-md-4 mb-3 mb-md-0">
<p> {% if event.img1_img %}
<strong>{{ event.location_name }}</strong><br> {% image event.img1_img max-250x250 class="img-fluid rounded" %}
{% if event.location_street %}{{ event.location_street }}<br>{% endif %} {% endif %}
{% if event.location_city %}{{ event.location_city }}{% endif %} </div>
</p> <div class="col-md-4 mb-3 mb-md-0">
{% endif %} <h5 class="mb-3">
{{ event.start_date }}{% if event.end_date %} - {{ event.end_date }}{% endif %}
</h5>
{% if event.location_name %}
<p>
<strong>{{ event.location_name }}</strong><br>
{% if event.location_street %}{{ event.location_street }}<br>{% endif %}
{% if event.location_city %}{{ event.location_city }}{% endif %}
</p>
{% endif %}
</div>
<div class="col-md-4">
{% if event.is_registration_active %}
<p>
<a class="btn btn-outline-primary w-100 mb-2" href="{{ event.url }}"><i class="bi bi-people"></i> Zur Anmeldung</a>
</p>
{% endif %}
{% if event.flyer.url %}
<p>
<a class="btn btn-outline-primary w-100 mb-2" href="{{ event.flyer.url }}" target="_blank"><i class="bi bi-cloud-download"></i> Programm herunterladen</a>
</p>
{% endif %}
<p>
<a class="btn btn-outline-primary w-100 mb-2" href="{{ event.url }}"><i class="bi bi-search"></i> Mehr Informationen</a>
</p>
</div>
</div>
</div> </div>
<div class="col-md-4"> </div>
{% if event.is_registration_active %} </li>
<p> {% endfor %}
<a class="btn btn-outline-primary w-100 mb-2" href="{{ event.url }}"><i class="bi bi-people"></i> Zur Anmeldung</a> {% endfor %}
</p> </ul>
{% endif %}
{% if event.flyer.url %}
<p>
<a class="btn btn-outline-primary w-100 mb-2" href="{{ event.flyer.url }}" target="_blank"><i class="bi bi-cloud-download"></i> Programm herunterladen</a>
</p>
{% endif %}
<p>
<a class="btn btn-outline-primary w-100 mb-2" href="{{ event.url }}"><i class="bi bi-search"></i> Mehr Informationen</a>
</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div> </div>
{% endblock content %} {% endblock content %}

56
core/templates/core/includes/revolution_slider_slide.html
Unescape View File

@ -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 -->

4
core/templates/core/tags/bootstrap5_breadcrumbs.html
Unescape View File

@ -1,12 +1,12 @@
{% load wagtailcore_tags %} {% load wagtailcore_tags %}
{% if ancestors %} {% if ancestors %}
<ol class="breadcrumb mb-0"> <ol class="breadcrumb mb-0 py-2">
{% for ancestor in ancestors %} {% for ancestor in ancestors %}
{% if forloop.last %} {% if forloop.last %}
<li class="breadcrumb-item active" aria-current="page">{{ ancestor }}</li> <li class="breadcrumb-item active" aria-current="page">{{ ancestor }}</li>
{% else %} {% 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 %} {% endif %}
{% endfor %} {% endfor %}
</ol> </ol>

6
core/templates/core/tags/bootstrap5_top_menu.html
Unescape View File

@ -1,7 +1,7 @@
{% load menu_tags wagtailcore_tags static %} {% load menu_tags wagtailcore_tags static %}
{% get_site_root as site_root %} {% 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"> <div class="container">
<a class="navbar-brand" href="{{ site_root.url }}"> <a class="navbar-brand" href="{{ site_root.url }}">
<img src="{% static 'img/logo_feo.png' %}" alt="Logo FEO GmbH" height="60"> <img src="{% static 'img/logo_feo.png' %}" alt="Logo FEO GmbH" height="60">
@ -14,14 +14,14 @@
{% for menuitem in menuitems %} {% for menuitem in menuitems %}
{% if menuitem.show_dropdown %} {% if menuitem.show_dropdown %}
<li class="nav-item dropdown{% if menuitem.active %} active{% endif %}"> <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 }} {{ menuitem.title }}
</a> </a>
{% bootstrap5_top_menu_children parent=menuitem %} {% bootstrap5_top_menu_children parent=menuitem %}
</li> </li>
{% else %} {% else %}
<li class="nav-item{% if menuitem.active %} active{% endif %}"> <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> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}

4
core/templates/core/tags/bootstrap5_top_menu_children.html
Unescape View File

@ -1,9 +1,9 @@
{% load menu_tags wagtailcore_tags %} {% 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 #} {# Include link to parent because the parent link is a drop down #}
<li><a class="dropdown-item" href="{% pageurl parent %}">{{ parent.title }}</a></li> <li><a class="dropdown-item" href="{% pageurl parent %}">{{ parent.title }}</a></li>
{% for child in menuitems_children %} {% 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 %} {% endfor %}
</ul> </ul>

Write Preview
Loading…
Cancel
Save