From cc24b885e80faf4d6c8da92d8bf7cb25220cb214 Mon Sep 17 00:00:00 2001
From: koenigmarcel <koenig.marcel@outlook.com>
Date: Thu, 24 Jun 2021 11:04:36 +0200
Subject: [PATCH] 1

---
 public/css/chat.css       | 13 +++++++++++-
 public/css/components.css | 12 +++++++++++
 public/css/game.css       |  7 +++++++
 public/css/header.css     | 43 +++++++++++++++++++++++++++++++++++++++
 public/css/index.css      | 33 +++++++++++++++++++++++++++++-
 public/index.html         |  2 +-
 6 files changed, 107 insertions(+), 3 deletions(-)

diff --git a/public/css/chat.css b/public/css/chat.css
index 4122d4e..ad9a6b8 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -97,4 +97,15 @@
 .messageBody::before {
     content: '\A';
     white-space: pre;
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 980px) {
+    #chat {
+      display: flex;
+      flex-flow: column-reverse;
+      overflow: hidden;
+      border-left: #7d7d7d solid 2px;
+      height: 100%;
+      margin-bottom: 10px;
+    }
+  }
\ No newline at end of file
diff --git a/public/css/components.css b/public/css/components.css
index 0159293..1c5006c 100644
--- a/public/css/components.css
+++ b/public/css/components.css
@@ -94,4 +94,16 @@ main {
     background-color: #fefefe;
     width: 100%;
     height: calc(100% - 50px);
+}
+
+@media only screen and (max-width: 980px) {
+    
+    #main {
+        display: grid;
+        grid-template-columns: unset;
+        grid-template-rows: 60% 40%;
+        height: calc(90% - 7em);
+        touch-action: pan-x pan-y;
+        height: 100%;
+    }
 }
\ No newline at end of file
diff --git a/public/css/game.css b/public/css/game.css
index 23fa8ea..cd35026 100644
--- a/public/css/game.css
+++ b/public/css/game.css
@@ -10,4 +10,11 @@
     -moz-background-size: cover; /* Mozilla*/
     -o-background-size: cover; /* Opera*/
     background-size: cover; /* Generic*/
+}
+
+@media only screen and (max-width: 980px) {
+    #game {
+        height: auto;
+        width: auto;
+    }
 }
\ No newline at end of file
diff --git a/public/css/header.css b/public/css/header.css
index fb27675..505be35 100644
--- a/public/css/header.css
+++ b/public/css/header.css
@@ -44,3 +44,46 @@ header {
     padding-right: 10px;
     flex-direction: column;
 }
+
+@media only screen and (max-width: 980px) {
+    header {
+      height: 2.2em;
+      display: grid;
+      position: inherit !important;
+      z-index: 99;
+    }
+  
+    .title {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 1.5em;
+      vertical-align: central;
+    }
+  
+    .build {
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+      font-size: 0.5em;
+      padding-right: 10px;
+      flex-direction: column;
+    }
+
+    .spielanleitung {
+      display: flex;
+      align-items: center;
+      font-size: 1em;
+      padding-left: 10px;
+  }
+
+    .spielanleitung span {
+      background: #404040;
+      border: 1px solid #000000;
+      padding: 5px;
+      border-radius: 5px;
+      cursor: pointer;
+  }
+}
diff --git a/public/css/index.css b/public/css/index.css
index 2a6dae7..77c18c1 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -52,4 +52,35 @@
 #login button {
     background-color: #0062ff;
     color: #ffffff;
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 980px) {
+    #login {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      background: #212121;
+      height: 100%;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      position: absolute;
+    }
+  
+    #login > form {
+      margin-top: 1em;
+    }
+  
+    #login label {
+      font-size: 1.5em;
+    }
+  
+    #login input,
+    #login button {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      font-size: 1em;
+      height: 1em;
+      padding: 30px;
+      justify-content: center;
+      
+    }
+  }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 1ab98bb..a914c73 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" http-equiv="ScreenOrientation" content="autoRotate:disabled"/>
     <title>Projektmanagement Game</title>
 
     <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">