From 45366d632bec695f03bf3bdcfff6b1554ba1b381 Mon Sep 17 00:00:00 2001
From: Ronan <ronan.bonnet42@wanadoo.fr>
Date: Mon, 12 Dec 2022 16:57:56 +0100
Subject: [PATCH] new css with beautiful colors

---
 index.html | 40 ++++++++++++++++++++++++----------------
 style.css  | 21 +++++++++++++++++----
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index b336814..41c4a40 100644
--- a/index.html
+++ b/index.html
@@ -25,30 +25,38 @@
             <ol id="level-list" class="not-in-win-animation">
             </ol>
         </nav>
-        <main>
-            <div class="controls not-in-win-animation">
+        <div class="container">
+            <aside class="left-sidebar">
+                <table>
+                    SCORE
+                </table>
+            </aside>
+            <main>
+                <article class="not-in-win-animation">
+                    <canvas id="canvas" width="800" height="400"></canvas>
+                    <div id="tutorial-speech-bubble" class="text-bubble">
+                        <div class="dialog">
+                            <p id="tutorial-box" class="speech"></p>
+                            <div class="right-point">
+                            </div>
+                            <div class="right-point shifted">
+                            </div>
+                        </div>
+                    </div>
+                </article>
+    
+            </main>
+            <aside class="controls not-in-win-animation right-sidebar">
                 <div id="timer">Time</div>
                 <button id="pause-1">Pause</button>
                 <button id="pause-2">Pause</button><br/>
                 <label for="dificulty-slider">Difficulty</label><br/>
                 <input type="range" min="0" max="100" value="50" id="difficulty-slider">
                 <br/>
-            </div>
-            <div class="not-in-win-animation">
-                <canvas id="canvas" width="800" height="400"></canvas>
-                <div id="tutorial-speech-bubble" class="text-bubble">
-                    <div class="dialog">
+            </aside>
+        </div>
 
-                        <p id="tutorial-box" class="speech"></p>
-                        <div class="right-point">
-                        </div>
-                        <div class="right-point shifted">
-                        </div>
-                    </div>
-                </div>
-            </div>
 
-        </main>
         <footer>
             <p>Sokoban 2022</p>
             <p>Pour une meilleure expérience, veuillez utiliser ce jeu sur un ordinateur avec un écran horizontal.</p>
diff --git a/style.css b/style.css
index 97e0c0b..948224d 100644
--- a/style.css
+++ b/style.css
@@ -6,7 +6,7 @@
 
 body {
     background-color: var(--main-background-color);
-    color: --main-invert-color;
+    color: --main-text-color;
     display: flex;
     flex-direction: column;
     margin: 0;
@@ -17,12 +17,25 @@ main {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 1rem 0;
+    float: left;
 }
 
+.container {
+    padding: 2rem 0 0 0;
+    display: flex;
+    min-height: 40vh;
+}
+
+aside {
+    margin: 0 auto;
+    float: left;
+    width: 10rem;
+    justify-content: space-between;
+    flex-direction: column;
+  }
+
 nav {
     display: flex;
-    /*width: 100%; */
     background-color: yellowgreen;
     padding: 0 20%;
 }
@@ -50,6 +63,7 @@ footer {
     align-items: center;
     flex-direction: column;
     position:fixed;
+    margin-top: auto;
     width: 100%;
     bottom: 0;
     background-color: yellowgreen;
@@ -60,7 +74,6 @@ footer p:last-child {
 }
 
 .text-bubble {
-    /* transform: rotate(90deg); */
     position: relative;
     margin: auto;
     margin-left: 185px;