Added a page for upcoming events by establishing a second flat-pages instance. Added css styling and first contents.
parent
9cd5859052
commit
2df0002432
@ -0,0 +1,11 @@
|
|||||||
|
title: Summerbreeze
|
||||||
|
date: 18.08.2021 - 21.08.2021
|
||||||
|
author: Markus
|
||||||
|
event: Festival
|
||||||
|
location: Dinkelsbühl
|
||||||
|
link: https://www.summer-breeze.de
|
||||||
|
pic: https://www.summer-breeze.de/wp-content/themes/summer-breeze-2021/assets/year-600.jpg
|
||||||
|
description: Summerbreeze
|
||||||
|
attending: Merry, Dieter, Ramona, Johannes, Anja, Markus
|
||||||
|
|
||||||
|
Das Summerbreeze in Dinkelsbühl ist schon eine richtige FdgL-Institution
|
@ -0,0 +1,11 @@
|
|||||||
|
title: Christmas Bash
|
||||||
|
date: 03.12.2021 - 04.12.2021
|
||||||
|
author: Markus
|
||||||
|
event: Festival
|
||||||
|
location: Eventzentrum Strohofer, Geiselwind
|
||||||
|
link: https://www.christmasbash.de
|
||||||
|
pic: https://www.christmasbash.de/images/2020/CMB21_Logo_600.png
|
||||||
|
description: The Return of the Bashman
|
||||||
|
attending: Anja, Markus
|
||||||
|
|
||||||
|
Das Winterfestival in Franken, jedes Jahr im Dezember.
|
@ -0,0 +1,13 @@
|
|||||||
|
title: Growl-Workshop mit Britta
|
||||||
|
date: n/a
|
||||||
|
author: Markus
|
||||||
|
event: Workshop
|
||||||
|
fdglevent: ja
|
||||||
|
location: Halle96
|
||||||
|
link: /growl-workshop.html
|
||||||
|
pic:
|
||||||
|
description: Lernt Growlen, Screamen, Grunten wie die Großen!
|
||||||
|
attending: Britta Görtz
|
||||||
|
|
||||||
|
Lernt Growlen, Screamen, Grunten wie die Großen!
|
||||||
|
Im FdgL-Growl-Workshop mit Britta Görz von Critical Mess.
|
@ -0,0 +1,12 @@
|
|||||||
|
title: Metal Hammer Paradise
|
||||||
|
date: 12.11.2021 - 13.11.2021
|
||||||
|
author: Markus
|
||||||
|
event: Festival
|
||||||
|
location: Ferienpark Weissenhäuser Strand
|
||||||
|
link: https://www.metal-hammer-paradise.de
|
||||||
|
pic: /static/img/events/mhp_2021.jpg
|
||||||
|
description: Indoor-Festival im Ferienpark
|
||||||
|
attending: Anja, Markus, Claudia, Dieter
|
||||||
|
|
||||||
|
Das Metal Hammer Paradise ist ein familiäres Indoor-Festival,
|
||||||
|
das im Ferienpark Weissenhäuser Strand an der Ostsee stattfindet.
|
@ -0,0 +1,11 @@
|
|||||||
|
title: Wacken
|
||||||
|
date: 29.07.2021 - 31.07.2021
|
||||||
|
author: Markus
|
||||||
|
event: Festival
|
||||||
|
location: Wacken
|
||||||
|
link: https://www.wacken.com
|
||||||
|
pic: https://www.wacken.com/typo3conf/ext/tnt_template_bs4/Resources/Public/2021/Images/logo_1x-min.png
|
||||||
|
description: Das größte Metal-Festival in Deutschland
|
||||||
|
attending: n/a
|
||||||
|
|
||||||
|
Auf dem W:O:A könnt ihr auch Freund:innen des geordneten Lärms antreffen.
|
@ -0,0 +1,57 @@
|
|||||||
|
/*
|
||||||
|
The event container uses flex layout to arrange the different events as cards.
|
||||||
|
*/
|
||||||
|
.event-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Each event card displays an event in a nice way as a card.
|
||||||
|
*/
|
||||||
|
.event-card {
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 3px;
|
||||||
|
border-color: black;
|
||||||
|
border-radius: 9px;
|
||||||
|
margin: 4px 4px 4px 1px;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attending {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #c11012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attendee {
|
||||||
|
color: #515151;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-type {
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: white;
|
||||||
|
background: #c11012;
|
||||||
|
padding-left: 2px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-type-fdgl {
|
||||||
|
color: #c11012;
|
||||||
|
background: white;
|
||||||
|
border-style: dotted;
|
||||||
|
border-color: #c11012;
|
||||||
|
border-width: 1px;
|
||||||
|
padding-left: 2px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 54rem) {
|
||||||
|
.event-card {
|
||||||
|
max-width: 40%;
|
||||||
|
}
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 173 KiB |
@ -0,0 +1,34 @@
|
|||||||
|
{% extends "template.html" %}
|
||||||
|
|
||||||
|
{% block title %}
|
||||||
|
Was liegt an?
|
||||||
|
{% endblock %}
|
||||||
|
{% block content %}
|
||||||
|
<div class="event-container">
|
||||||
|
|
||||||
|
{% for event in events %}
|
||||||
|
<div class="event-card"
|
||||||
|
style="background-image:
|
||||||
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1.0)),
|
||||||
|
url({{ event.pic }});
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;">
|
||||||
|
<a href="{{ event.link }}#hideextern"><h2>{{ event.title }}</h2></a>
|
||||||
|
<!--<img src="{{ event.pic }}"></img>-->
|
||||||
|
<p><i class="fas fa-calendar-alt"> </i>{{ event.date }}</p>
|
||||||
|
<span class="event-type">{{ event.event }}</span>
|
||||||
|
{% if event.fdglevent == 'ja' %}
|
||||||
|
<span class="event-type-fdgl"><i class="fas fa-certificate"> </i>FdgL Event</span>
|
||||||
|
{% endif %}
|
||||||
|
<p> {{ event.html|safe }} </p>
|
||||||
|
<p class="attending">vor Ort:
|
||||||
|
{% for a in event.attending.split(',') %}
|
||||||
|
<span class="attendee">{{ a }}{% if a != event.attending.split(',')[-1] %},{% endif %}</span>
|
||||||
|
{% endfor %}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
Loading…
Reference in New Issue