From fbf74308598a63e6c481d6a324521c61f69ac741 Mon Sep 17 00:00:00 2001
From: quentin <quentin.leblanc@hesge.ch>
Date: Wed, 5 Mar 2025 13:11:00 +0100
Subject: [PATCH] Footer is in the right place - Colors Bar now sclae and have
 appropriate comportment - reducing of game zone

---
 src/App.css                   |  4 +---
 src/index.css                 |  2 --
 src/objects/Case/case.css     |  7 +++++++
 src/objects/Footer/Footer.css |  2 ++
 src/objects/Game/Game.css     | 24 ++++++++++++++++++++++--
 src/objects/Line/Line.css     |  6 ++++++
 6 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index daa15cf..97375dd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,11 +1,9 @@
 #root {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   margin: 0 0;
   padding: 0;
   text-align: center;
-  display: flex;
-  flex-direction: column;
   align-content: center;
   justify-content: center;
   overflow-x: hidden;
diff --git a/src/index.css b/src/index.css
index 033b630..8d65531 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,8 +27,6 @@ body {
   height: 100vh;
   margin: 0;
   padding: 0;
-  display: flex;
-  flex-direction: column;
   place-items: center;
   overflow-y: hidden;
   overflow-x: hidden;
diff --git a/src/objects/Case/case.css b/src/objects/Case/case.css
index 6d94e56..209df11 100644
--- a/src/objects/Case/case.css
+++ b/src/objects/Case/case.css
@@ -30,4 +30,11 @@
 
 .case.inactive.lightred {
     background-color: var(--color-lightred);
+}
+
+@media (max-width: 720px) {
+    .case {
+        height: calc(58px * 0.8);
+        width: calc(58px * 0.8);
+    }
 }
\ No newline at end of file
diff --git a/src/objects/Footer/Footer.css b/src/objects/Footer/Footer.css
index 0873253..8f308fe 100644
--- a/src/objects/Footer/Footer.css
+++ b/src/objects/Footer/Footer.css
@@ -3,11 +3,13 @@ footer {
     flex-grow: 0;
     flex-shrink: 0;
     bottom: 0;
+    top: 100%;
     height: 10em;
     width: 100%;
     display: flex;
     grid-template-columns: 1fr 2fr 1fr;
     opacity: 0.8;
+    z-index: 200;
 }
 
 footer .middle {
diff --git a/src/objects/Game/Game.css b/src/objects/Game/Game.css
index fe41029..feb99d2 100644
--- a/src/objects/Game/Game.css
+++ b/src/objects/Game/Game.css
@@ -1,5 +1,13 @@
 #game {
-    width: 100%;
+    width: 750px;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 2rem;
+}
+
+#colors {
+    flex-direction: column;
+    align-items: flex-end;
 }
 
 .result {
@@ -21,7 +29,19 @@
 }
 
 @media (max-width: 720px) {
+    #game {
+        width: 500px;
+        flex-direction: column-reverse;
+        gap: 2rem;
+    }
+
     #drop-zone {
-        width: calc(500px*80%);
+        width: calc(500px*0.8);
+        height: 500px;
+    }
+
+    #colors {
+        width: 100%;
+        flex-direction: row;
     }
 }
\ No newline at end of file
diff --git a/src/objects/Line/Line.css b/src/objects/Line/Line.css
index fc0ae13..7f6115b 100644
--- a/src/objects/Line/Line.css
+++ b/src/objects/Line/Line.css
@@ -16,4 +16,10 @@ button {
     width: calc(20% - 1em);
     margin-left: 1em;
     padding: 0;
+}
+
+@media (max-width: 720px) {
+    .line {
+        height: clamp(calc(58px * 0.3), calc(58px * 0.3 + 3px), calc(58px * 0.8));
+    }
 }
\ No newline at end of file