resize images and improve responsiveness

Closes: #4

static/css/style.css

@@ -211,6 +211,8 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .dc-secondary-background {background-color:#995f5e!important}
 .dc-page-background {background-color:#d2bf84!important}
 .dc-formula-background {background-color:#c9b27e!important}
+@media (min-width:562px){.dc-main-background {background-image:url({% static 'pictures/background-i.webp' %});width:100%;}}
+@media (max-width:561px){.dc-main-background {background-image:url({% static 'pictures/background-mobile.webp' %});width:100%;}}
 
 /*divider*/
 .editorial{display: block;width: 100%;height: 30px;max-height: 30px;margin: 0;z-index:5;bottom:0;position:absolute;left:0px;float:left;}
@@ -225,7 +227,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 
 
 /* image gallery */
-div.gallery{margin:5px;border:1px solid #ccc;float:left;height:195px;width:180px;overflow-x:hidden}
+div.gallery{margin:5px;border:1px solid #ccc;float:left;height:254px;width:180px;overflow-x:clip}
 div.gallery:hover{border:1px solid #777;}
 div.gallery img {width:100%;height:auto;}
 div.desc{padding:15px;text-align:center;}

templates/about_page.html

@@ -10,31 +10,31 @@
 <section class="dc-container dc-center">
 <div class='gallery'>
 <a href="{% static 'pictures/2017.webp' %}" >
-<img src="{% static 'pictures/2017.webp' %}" width="632px" height="442px" async> </a>
+<img src="{% static 'pictures/2017.webp' %}" width="600px" height="856px" async> </a>
 </div>
 <div class='gallery'>
 <a href="{% static 'pictures/2018.webp' %}" >
-<img src="{% static 'pictures/2018.webp' %}" width="632px" height="442px" async> </a>
+<img src="{% static 'pictures/2018.webp' %}" width="600px" height="856px" async> </a>
 </div>
 <div class='gallery'>
 <a href="{% static 'pictures/2019.webp' %}" >
-<img src="{% static 'pictures/2019.webp' %}" width="632px" height="442px" async> </a>
+<img src="{% static 'pictures/2019.webp' %}" width="600px" height="856px" async> </a>
 </div>
 <div class='gallery'>
 <a href="{% static 'pictures/2020.webp' %}" >
-<img src="{% static 'pictures/2020.webp' %}" width="632px" height="442px" async> </a>
+<img src="{% static 'pictures/2020.webp' %}" width="600px" height="856px" async> </a>
 </div>
 <div class='gallery'>
 <a href="{% static 'pictures/2021.webp' %}" >
-<img src="{% static 'pictures/2021.webp' %}" width="632px" height="442px" async> </a>
+<img src="{% static 'pictures/2021.webp' %}" width="600px" height="856px" async> </a>
 </div>
 <div class='gallery'>
 <a href="{% static 'pictures/2022.webp' %}" >
-<img src="{% static 'pictures/2022.webp' %}" width="632px" height="442px" async> </a>
+<img src="{% static 'pictures/2022.webp' %}" width="600px" height="856px" async> </a>
 </div>
 <div class='gallery'>
 <a href="{% static 'pictures/2023.webp' %}" >
-<img src="{% static 'pictures/2023.webp' %}" width="632px" height="442px" async> </a>
+<img src="{% static 'pictures/2023.webp' %}" width="600px" height="856px" async> </a>
 </div>
 </section>
 </div>

templates/base.html

@@ -7,7 +7,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Denkena Consulting - Ihr IT-Sicherheitsberater">
 <link rel="stylesheet" href="{% static 'css/style.css' %}">
-<link rel="stylesheet" href="{% static 'css/all.min.css' %}">
 <link rel="icon" href="{% static 'pictures/logo.webp' %}"
 </head>
 

templates/footer.html

@@ -1,8 +1,8 @@
 <footer class="dc-center dc-black dc-padding-16">
 <div class="dc-center">
-<div class="dc-third"><a href="{% url 'impressum' %}">Impressum</a></div>
-<div class="dc-third"><a href="{% url 'datenschutz' %}">Datenschutz</a></div>
-<div class="dc-third"><a href="{% url 'contact' %}">Kontakt</a></div>
+<div class="dc-third dc-padding-24"><a href="{% url 'impressum' %}">Impressum</a></div>
+<div class="dc-third dc-padding-24"><a href="{% url 'datenschutz' %}">Datenschutz</a></div>
+<div class="dc-third dc-padding-24"><a href="{% url 'contact' %}">Kontakt</a></div>
 </div>
 <p>© 2023 Denkena Consulting</p>
 </footer>

templates/homepage.html

@@ -1,12 +1,15 @@
 {% extends 'base.html' %}
 {% load static %}
 {% block content %}
-
+<style scoped>
+@media (min-width:562px){.dc-main-background {background-image:url({% static 'pictures/background-i.webp' %});width:100%;}}
+@media (max-width:561px){.dc-main-background {background-image:url({% static 'pictures/background-mobile.webp' %});width:100%;}}
+</style>
 <section style="padding-bottom:750px;width:100%"class="dc-header dc-text-white">
-<span style="background-image:url({% static 'pictures/background-i.webp' %});width:100%;" class="dc-parallax">
+<span class="dc-parallax dc-main-background">
 <div class="dc-header dc-center">
-<h1 class="dc-jumbo">Geistige IDEALE<br>&<br>irdische REALITÄT</h1>
-<span class="dc-xlarge">Im·Puls 2024</span><br>
+<h1 class="dc-jumbo">Im·Puls 2024</h1>
+<h2 class="dc-xxxlarge">Geistige IDEALE<br>&<br>irdische REALITÄT</h2>
 <span class="dc-xlarge">Die aktuelle Tagung findet vom 14. Februar, 17:00, bis zum 18. Februar, 12:30, in Stuttgart statt. 
 </div>
 <svg class="editorial" viewBox="0 24 150 28 " preserveAspectRatio="none">
@@ -18,7 +21,7 @@
 </section>
 
 <section>
-<div class="dc-container dc-secondary-background" style="padding:128px 16px" id="contact">
+<div class="dc-container dc-secondary-background dc-text-white" style="padding:128px 16px" id="contact">
 <h3 class="dc-center">Interesse an der Tagung?</h3>
   <div class="dc-center">
   <a href="{% url 'anmeldung' %}" class="dc-btn">Melde dich Hier an!</a>