Some enhancements to event styling.

pull/42/head
Markus Steinlein 4 years ago
parent 2df0002432
commit 6a1ee41cee

@ -10,4 +10,4 @@ description: Lernt Growlen, Screamen, Grunten wie die Großen!
attending: Britta Görtz attending: Britta Görtz
Lernt Growlen, Screamen, Grunten wie die Großen! Lernt Growlen, Screamen, Grunten wie die Großen!
Im FdgL-Growl-Workshop mit Britta Görz von Critical Mess. Im FdgL-Growl-Workshop mit Britta Görtz von Critical Mess.

@ -11,12 +11,20 @@
*/ */
.event-card { .event-card {
border-style: solid; border-style: solid;
border-width: 3px; border-width: 0.2rem;
border-color: black; border-image-source: linear-gradient(to bottom, rgba(191, 191, 191, 1.0), rgba(255, 255, 255, 1.0));
border-radius: 9px; border-image-slice: 1;
margin: 4px 4px 4px 1px; margin: 0.2rem 0.2rem 0.2rem 0.2rem;
padding-left: 8px; padding-left: 0.8rem;
padding-right: 8px; padding-right: 0.8rem;
width: 16rem;
}
.event-card-fdgl {
border-width: 0.4rem;
border-color: #c11012;
border-image-source: none;
border-image-sice: none;
} }
.event-card img { .event-card img {
@ -50,8 +58,8 @@
padding-right: 2px; padding-right: 2px;
} }
@media (min-width: 54rem) { @media screen and (max-width: 783px), (orientation: portrait) {
.event-card { .event-card {
max-width: 40%; width: 100%;
} }
} }

@ -1,27 +1,38 @@
{% extends "template.html" %} {% extends "template.html" %}
{% block additional_style %}
.container > * {
max-width: 50rem;
padding:0
}
{% endblock additional_style %}
{% block title %} {% block title %}
Was liegt an? Was liegt an?
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<p>
Neben unseren eigenen Veranstaltungen trefft ihr uns auch auf Konzerten und
Festivals an. Haltet nach unserem Patch Ausschau und sprecht uns an!
</p>
<div class="event-container"> <div class="event-container">
{% for event in events %} {% for event in events %}
<div class="event-card" <div class="event-card {% if event.fdglevent == 'ja' %} event-card-fdgl{% endif %}"
style="background-image: style="background-image:
linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1.0)), linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1.0)),
url({{ event.pic }}); url({{ event.pic }});
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center;"> background-position: center;">
<a href="{{ event.link }}#hideextern"><h2>{{ event.title }}</h2></a> <a href="{{ event.link }}#hideextern"><h2>{{ event.title }}</h2></a>
<!--<img src="{{ event.pic }}"></img>--> <!--<img src="{{ event.pic }}"></img>-->
<p><i class="fas fa-calendar-alt">&nbsp;</i>{{ event.date }}</p> <p><i class="fas fa-calendar-alt">&nbsp;</i>{{ event.date }}</p>
<span class="event-type">{{ event.event }}</span>
{% if event.fdglevent == 'ja' %} {% if event.fdglevent == 'ja' %}
<span class="event-type-fdgl"><i class="fas fa-certificate">&nbsp;</i>FdgL Event</span> <span class="event-type"><i class="fas fa-asterisk">&nbsp;</i>FdgL</span>
{% endif %} {% endif %}
<span class="event-type">{{ event.event }}</span>
<p> {{ event.html|safe }} </p> <p> {{ event.html|safe }} </p>
<p class="attending">vor Ort: <p class="attending">vor Ort:
{% for a in event.attending.split(',') %} {% for a in event.attending.split(',') %}
<span class="attendee">{{ a }}{% if a != event.attending.split(',')[-1] %},{% endif %}</span> <span class="attendee">{{ a }}{% if a != event.attending.split(',')[-1] %},{% endif %}</span>

@ -7,6 +7,9 @@
<link rel="fotogrid stylesheet" href="{{ url_for('static', filename='css/fotogrid.css') }}"> <link rel="fotogrid stylesheet" href="{{ url_for('static', filename='css/fotogrid.css') }}">
<link rel="event cards stylesheet" href="{{ url_for('static', filename='css/events.css') }}"> <link rel="event cards stylesheet" href="{{ url_for('static', filename='css/events.css') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<style>
{% block additional_style %}{% endblock additional_style %}
</style>
<title>FdgL - Freunde des geordneten Lärms</title> <title>FdgL - Freunde des geordneten Lärms</title>
</head> </head>
<body class=post> <body class=post>

Loading…
Cancel
Save