From 8aa3719fe5b3e858d2c361101d40daa5e40fdcdd Mon Sep 17 00:00:00 2001
From: alpcentaur <luca.wulf@googlemail.com>
Date: Fri, 10 Mar 2023 16:40:08 +0100
Subject: [PATCH] fixed css to define max AND min

---
 index.css   | 63 ++++++++++++++++++++++++++++-------------------------
 index.php   |  2 +-
 locale.yaml |  2 +-
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/index.css b/index.css
index 691e46e..805b781 100644
--- a/index.css
+++ b/index.css
@@ -5,7 +5,6 @@
 header {
   align-items: center;
   display: flex;
-  height: 10vh;
   background-color: deeppink;
   margin-bottom: 1vh;
 }
@@ -88,7 +87,7 @@ footer{
   }
 }
 
-@media only screen and (max-width: 500px) {
+@media screen and (max-width: 400px) {
   [class*="bannerHeader"] {
     font-size: 7vh;
     color: #fff;
@@ -108,9 +107,10 @@ footer{
     grid-row-start: 2;
     grid-row-end: 2;
   }
-  [class*="infoContainer"] {
-    display: grid;
-    grid-template-columns: auto;
+  .infoContainer {
+  margin-left: 10vw;
+  margin-right: 10vw;
+  display: grid;
   }
   [class*="infoImg"] {
     width: 60vw;
@@ -119,11 +119,22 @@ footer{
   .linkContainer {
     grid-template-columns: auto auto;
   }
-  .info {
-    font-size: 6vw;
+  [class*="info"] {
+    font-size: 8vw;
+  }
+  .infoDiv {
+  display: grid;
+  width: 80vw;
+  text-align: left;
+  justify-content: center
+  justify-self: none;
   }
+
   .infoHeader {
-    font-size: 9vw;
+    font-size: 10vw;
+    margin-top: 5vw;
+    margin-bottom: 0vw;  
+    color: deeppink;
   }
   .grid-container {
     display: grid;
@@ -139,6 +150,19 @@ footer{
   }
 }
 
+@media screen and (min-width: 400px) {
+
+  .info {
+    font-size: 2vw;
+  }
+  .infoDiv {
+  display: grid;
+  width: 50vw;
+  text-align: justify;
+  justify-content: center
+  justify-self: none;
+  }
+
 .infoImg {
   width: 30vw;
 }
@@ -157,17 +181,6 @@ footer{
   justify-self: none;
 }
 
-.infoDiv {
-  display: grid;
-  width: 50vw;
-  text-align: justify;
-  justify-content: center
-  justify-self: none;
-}
-
-.info {
-  font-size: 2vw;
-}
 
 .infoHeader {
   font-size: 3vw;
@@ -176,16 +189,6 @@ footer{
   color: deeppink;
 }
 
-.model0 {
-  width: 50vw;
-  height: 100vh;
-}
-.model1 {
-  width: 50vw;
-  height: 100vh;
-}
 
-.grid-container {
-  display: grid;
-  grid-template-columns: auto auto;
 }
+
diff --git a/index.php b/index.php
index cbdd0da..a8c353f 100644
--- a/index.php
+++ b/index.php
@@ -43,7 +43,7 @@
 
 	<center>
 
-        <header style="height: 10vh;">
+        <header>
 
                 <img style="float: right; height: 15vh;" src="static/KaosCubeLogo.png" alt="logo">
 
diff --git a/locale.yaml b/locale.yaml
index 2e83707..2298d32 100644
--- a/locale.yaml
+++ b/locale.yaml
@@ -40,7 +40,7 @@ info3Header:
   de-DE:  Open Source
   en-US:  Open Source
 info4:
-  de-DE:  Die Software des KaosCubes baut auf den Grundprogrammiersprachen des Internets sowie Standard Bibliotheken aller Linux Systeme auf. Das heißt der Code ist wartungsfreundlich und sehr kurz. Die Benutzeroberfläche ist einfach gehalten. In deiner Wunschfarbe. Schau dir Informationen an, die dir alles Wichtige erklären. Dabei kannst du so tief einsteigen, wie es dir passt. 
+  de-DE:  Die Software des KaosCubes baut auf den Standard Bibliotheken aller Linux Systeme auf. Das heißt der Code ist wartungsfreundlich und sehr kurz. Die Benutzeroberfläche ist einfach gehalten. In deiner Wunschfarbe. 
   en-US:  The software of the KaosCube is based on the basic programming languages of the Internet and standard libraries of all Linux systems. This means that the code is easy to maintain and very short. The user interface is kept simple. In the colour of your choice. Look at the information that explains everything important to you. You can go as deep as you like.
 info4Header:
   de-DE:  Einfachheit