more ths changes

static/site.css

@@ -5,13 +5,72 @@ html {
 body {
     font-size: 20px;
     overflow-x: hidden;
+    #background: linear-gradient(to left, 60deg, #88bbcf, #54c4eb, #aeb2b5) !important;
     background: linear-gradient(to right, #88bbcf, #54c4eb, #e1f5fc) !important;
+    #background: rgb(255,255,255);
+    #background: linear-gradient(30deg, rgba(255,255,255,1) 0%, rgba(105,154,194,1) 35%, rgba(105,154,194,1) 78%, rgba(255,255,255,1) 100%);
+}
+
+.flex-dir{
+    flex-direction: row-reverse;
+}
+
+.ths-hr{
+    border: 1px  solid white;
+    border-radius 5px;
+    margin: auto;
+    width: 90%;
+}
+
+.ths-box-manual{
+    background: white;
+    padding: 10px;
+    border: 0.5px solid black;
+    border-radius: 20px;
+}
+
+.ths-under766{
+    display: none;
+}
+
+.ths-box{
+    background: white;
+    padding: 10px;
+    border: 0.5px solid black;
+    border-radius: 20px;
+}
+
+.ths-text-cg{
+    font-family: cg;
+}
+
+.ths-dot{
+    text-align: center !important;
+    color: rgba(255,0,0) !important;
+    font-size: 50px !important;
+}
+
+.ths-border-round-img{
+    border-radius: 20px;
 }
 
 @media (max-width: 767px) {
     body {
         font-size: 25px;
     }
+    .ths-box {
+        margin-right: 0px !important;
+        margin-left:  0px !important;
+    }
+    .flex-dir{
+        flex-direction: unset;
+    }
+    .ths-under766{
+        display: block;
+    }
+    .ths-over766{
+        display: none;
+    }
 }
 
 @media (max-width: 500px) {
@@ -21,21 +80,31 @@ body {
 }
 
 .title-responsive{
-    font-size: 25px !important;
     padding-left: 40px;
+    font-size: 40px !important;
+    padding-left: unset;
+    border: 2px black solid;
+    padding: 10px;
+    background: whitesmoke;
+    min-width: 500px;
+    text-align: center;
+    max-width: 600px;
+    margin-left: 20%;
 }
 
 @media (max-width: 1300px) {
     .title-responsive{
-        font-size: 20px !important;
+        min-width: 500px;
-        padding-left: unset;
+        font-size: 40px !important;
+        margin-left: unset;
     }
 }
 
 @media (max-width: 900px) {
     .title-responsive{
-        font-size: 2.2vw !important;
+        font-size: 30px !important;
-        padding-left: unset;
+        min-width: 400px;
+        margin-left: unset;
     }
 }
 
@@ -53,6 +122,7 @@ body {
 
 .text-color-special{
   color: black;
+  font-family: Veranda;
 }
 
 .stretched-link::after {

templates/footer.html

@@ -1,8 +1,8 @@
-<div class="footer-copyright {% if footerFixBottom %} fixed-bottom {% endif %}text-center py-3 bg-dark" style="position: relative; bottom: 0;">
+<hr class="ths-hr">
-      {% if conf["IMPRESSUM_IS_CONTACT"] %}
+<div class="footer-copyright {% if footerFixBottom %} fixed-bottom {% endif %} py-1 pl-3" style="position: relative; bottom: 0;">
-         <a style="color: rgba(255,255,255,.5);" href="/impressum">Impressum/Kontakt</a>
+        <small>
-      {% else %}
+        Mail: info@thermoscan.de<br>
-         <a class="mr-2" style="color: rgba(255,255,255,.5);" href="/impressum">Impressum</a>
+        Tel: 0911 / 7530-177 Fax: 0911 / 7568-722<br>
-         <a class="ml-2" style="color: rgba(255,255,255,.5);" href="/contact">Kontakt</a>
+        Copyright © 2021 Alle Rechte bei THERMOSCAN Thermographie GmbH<br>
-      {% endif %}
+        </small>
 </div>

templates/index.html

@@ -17,17 +17,19 @@
 {% include 'navbar.html' %}
 
 <!-- Site wellcome header -->
-<header class="masthead {% if conf['NO_CENTER_TITLE'] %} h-50 {% endif %}"
+<header class="masthead">
-        style="background-size: unset; background-position: right;
+  <div class="pb-4 pl-2 pr-2 h-50">
-                padding: 30px"
+    <div class="row h-100 align-items-center flex-dir">
-        {% if conf['WALLPAPER_URL'] %} realsrc='{{ conf["WALLPAPER_URL"] }}' {% endif %}>
+        <div class="col">
-  <div class="{% if conf['NO_CENTER_TITLE'] %} pb-4 pl-2 pr-2 {% else %} container {% endif %} 
+                <img class="img-responsive"
-              {% if conf['WALLPAPER_URL'] %} h-50 {% endif %}">
+                  style="max-width: 400px; float: right;"
-    <div class="row h-100 align-items-center">
+                  src="{{ conf['WALLPAPER_URL'] }}">
-      <div class="col-12 {% if not conf['NO_CENTER_TITLE'] %} text-center {% endif %}">
+        </div>
-        <div style="opacity: 0;"></div> <!-- TODO color for text configurable -->
+        <div class="col">
-        {% if "SITE_WELLCOME_TITLE" in conf %} <h1 class="pt-4 title-responsive font-weight-light" style="{{ conf['SITE_WELLCOME_TITLE_CSS'] | safe }}">{{ conf["SITE_WELLCOME_TITLE"] | safe }}</h1> {% endif %}
+            <h1 class="mt-4 title-responsive text-color-special ths-text-cg">
-        {% if "SITE_WELLCOME_SUBTITLE" in conf %} <p class="lead">{{ conf["SITE_WELLCOME_SUBTITLE"] | safe }}</p> {% endif %}
+                Tel: 0911 / 7530-177 <br>
+                Fax: 0911 / 7568-722
+            </h1>
         </div>
     </div>
   </div>
@@ -58,82 +60,46 @@
 {% endif %}
 
 <!-- announcements -->
-{% if announcements %}
-<div class="bg-secondary">
-  <div class="container pb-2 pt-2">
-	{% include 'announcements.html' %}
-  </div>
-</div>
-{% endif %}
-
-<!-- twitch -->
-  {% if conf["TWITCH_CHANNEL"] %}
-  <div class="bg-dark pb-4">
-    <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" realsrc="{{ conf['TWITCH_PLACEHOLDER_IMG'] }}" >
-        <div class="card-img-overlay">
-          <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 mt-0-u440" style="font-size: x-large;">
-                  Laden externe Inhalte von Twitch.tv zulassen
-          </div>
-        </div>
-      </div>
-      <!-- Add a placeholder for the Twitch embed -->
-      <div id="twitch-embed"></div>
-      <script>
-          document.getElementById("toogle-twitch").checked = false
-          function handleToggle(id){
-              if(document.getElementById(id).checked){
-                createTwitchFrame()
-                document.getElementById("twitch-consent-placeholder").style.display = "none";
-              }else{
-                document.getElementById("twitch-consent-placeholder").style.display = "";
-                destroyTwitchFrame()
-              }
-          }
-
-          function createTwitchFrame(){
-	      options = { width: "100%", height: 480, channel: "{{ conf['TWITCH_CHANNEL'] }}" }
-              new Twitch.Embed("twitch-embed", options);
-          }
-
-          function destroyTwitchFrame(){
-              window.location.reload()
-          }
-      </script>
 
 
-      <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
+  <div class="container ths-box-manual pb-2 pt-2 text-color-special">
+        Willkommen auf den Seiten der Thermoscan Thermographie GmbH.<br>
+        Seit über 20 Jahren sind wir unseren Kunden ein zuverlässiger Partner in den Bereichen:
   </div>
-  </div>
-  {% endif %}
 
   {% for section in sections %}
   <div class="pt-2 pb-4">
     <div class="container text-color-special">
-      <div class="row" {% if loop.index %2 == 1 %} style="flex-direction: row-reverse;" {% endif %}>
+      <div class="row {% if loop.index %2 == 1 %} flex-dir {% endif %}">
-        <div class="mt-3 col image-min-dimensions">
+        <div class="ths-box mt-1 col text-min-dimensions p-4
-          <img class="img-responsive w-100" realsrc="{{ section['picture'] }}">
+                    {% if loop.index %2 == 1 %}
-        </div>
+                        ml-3
-        <div class="mt-3 col text-min-dimensions">
+                    {% else %}
-          <h1>{{ section['title'] }}</h1>
+                        mr-3
+                    {% endif %}">
+          <h4>{{ section['title'] }}</h4>
           <p class="mt-3">
-            {{ section["text"] }}
+          <small>{{ section["text"] }}</small>
           </p>
           {% if section["moreInfoButtonText"] %}
             <a type=button href="{{ section['moreInfoButtonHref'] }}"
               class="mt-3 btn btn-light">{{ section["moreInfoButtonText"] }}
             </a>
           {% endif %}
+          <div class="ths-box mt-1 col image-min-dimensions ths-under766"
+                  style="padding: 0 !important; border: unset">
+            <img class="ths-border-round-img img-responsive w-100"
+                realsrc="{{ section['picture'] }}">
           </div>
         </div>
+
+        <!-- larger displays -->
+        <div class="ths-box mt-1 col image-min-dimensions ths-over766">
+          <img class="ths-border-round-img img-responsive w-100"
+              realsrc="{{ section['picture'] }}">
+        </div>
+
+      </div>
     </div>
   </div>
   {% endfor %}