sheppy/flask-json-dream-website
1
0
Fork 0
mirror of https://github.com/FAUSheppy/flask-json-dream-website synced 2025-12-06 08:11:35 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve spacing/sizes on very low resolutions

Browse Source
This commit is contained in:
Johnathen Sheppard
2020-07-09 12:46:36 +02:00
parent b742436e61
commit feb5595379
4 changed files with 41 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
static/site.css
View File

@@ -68,3 +68,22 @@ html {
.image-max-dimensions{
max-width: 400px;
}
@media(max-width: 440px){
.event-responsive{
padding-left: 0;
font-size: 5vw;
}
.date-responsive{
margin-right: 4vw !important;
}
.container-responsive{
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.mt-0-u440{
margin-top: 0 !important;
}
}

6
static/toggle_button.css
View File

@@ -61,3 +61,9 @@
.switch-caption {
float: left;
}
@media(max-width: 440px){
.switch-caption{
font-size: 7vw !important;
}
}

17
templates/events.html
View File

@@ -6,17 +6,20 @@
{% for event in events %}
<div class="moreDates" {% if loop.index > 3 %} style="display: none;" {% endif %}>
<div class="row">
<div class="pt-1 border-bottom {% if loop.index == 1 %} border-top {% endif %} col">
<div class="event-responsive pt-1 border-bottom
{% if loop.index == 1 %} border-top {% endif %} col">
<div class="d-flex justify-content-center align-items-center">
<h1 class="mr-5 text-primary font-weight-bold text-info">{{ event["day"] }}</h1>
<div>
<p class="font-weight-bold mb-0 text-dark">{{ event["month"] }}</p>
<p class="mb-2">{{ event["year"] }}</p>
</div>
<h1 class="mr-5 text-primary font-weight-bold text-info date-responsive ">
{{ event["day"] }}
</h1>
<div>
<p class="font-weight-bold mb-0 text-dark">{{ event["month"] }}</p>
<p class="mb-2">{{ event["year"] }}</p>
</div>
</div>
</div>
<div class="pt-1 border-bottom {% if loop.index == 1 %} border-top {% endif %} col pl-3">
<p class="text-dark font-weight-bold mb-0">
<p class="event-responsive text-dark font-weight-bold mb-0">
{{ event["description"] }}
{% if event.get("location") %} @{{ event["location"] }} {% endif %}
</p>

10
templates/index.html
View File

@@ -34,7 +34,7 @@
<!-- main links -->
<div class="bg-secondary">
<div class="container pb-2 pt-2">
<div class="container container-responsive pb-2 pt-2">
{% include 'events.html' %}
</div>
</div>
@@ -54,15 +54,15 @@
<div class="container pt-5 text-color-special">
<div id="twitch-consent-placeholder" class="card bg-dark text-white">
<img style="min-width: 80%; min-height: 200px;"
class="card-img" src="/static/pictures/{{ conf['twitch-placeholder-img'] }}" >
<img style="min-width: 80%; min-height: 200px;"
class="card-img" src="/static/pictures/{{ conf['twitch-placeholder-img'] }}" >
<div class="card-img-overlay">
<label class="switch mt-3">
<label class="switch mt-3 mt-0-u440">
<input id="toogle-twitch" class="custom-control-input"
type="checkbox" onchange="handleToggle(this.id)">
<span class="slider"></span>
</label>
<div class="switch-caption ml-3 mt-3" style="font-size: x-large;">
<div class="switch-caption ml-3 mt-3 mt-0-u440" style="font-size: x-large;">
Laden externe Inhalte von Twitch.tv zulassen
</div>
</div>