Added a page for upcoming events by establishing a second flat-pages instance. Added css styling and first contents.
Markus Steinlein
4 years ago
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