From feb55953796e9b9a117459436e188ffed3754184 Mon Sep 17 00:00:00 2001
From: Yannik Schmidt <sheppy@atlantishq.de>
Date: Thu, 9 Jul 2020 12:46:36 +0200
Subject: [PATCH] improve spacing/sizes on very low resolutions

---
 static/site.css          | 19 +++++++++++++++++++
 static/toggle_button.css |  8 +++++++-
 templates/events.html    | 17 ++++++++++-------
 templates/index.html     | 10 +++++-----
 4 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/static/site.css b/static/site.css
index d892cf6..c42e968 100644
--- a/static/site.css
+++ b/static/site.css
@@ -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;
+   }
+}
diff --git a/static/toggle_button.css b/static/toggle_button.css
index ed4adef..0c8cac0 100644
--- a/static/toggle_button.css
+++ b/static/toggle_button.css
@@ -60,4 +60,10 @@
 
   .switch-caption {
       float: left;
-  }
\ No newline at end of file
+  }
+
+@media(max-width: 440px){
+  .switch-caption{
+      font-size: 7vw !important;
+  }
+}
diff --git a/templates/events.html b/templates/events.html
index 0b181b2..b532350 100644
--- a/templates/events.html
+++ b/templates/events.html
@@ -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>
diff --git a/templates/index.html b/templates/index.html
index 07b3464..835bb97 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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>