more css

public/main.css

@@ -3,59 +3,133 @@ body {
   font: 1.8rem "Fira Sans", sans-serif;
 }
 
+.mode {
+  grid-area: mode;
+  height: 50vh;
+}
+
+.tracker {
+  grid-area: tracker;
+}
+
+.title {
+  grid-area: title;
+  margin: 30px;
+}
+
+.moods {
+  grid-area: moods;
+  margin: 30px;
+}
+
+.legend {
+  grid-area: legend;
+  margin: 30px;
+}
+
+.info {
+  grid-area: info;
+}
+
 main {
-  display: flex;
+  display: block;
+  grid-template-rows: 1fr 1fr;
+  grid-template-areas:
+    "mode"
+    "tracker";
+  align-items: center;
+  justify-content: center;
+}
+.mode img {
+  height: 100%;
+  width:100%;
+  object-fit: contain;
+}
+.tracker {
+  grid-area: tracker;
+}
+.title h1 {
+  font-weight: 350;
+}
+
+@media (min-width: 1000px) {
+  main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: "mode tracker";
     align-items: center;
     justify-content: center;
-  flex-wrap: wrap;
   }
 
   .mode {
     height: 100vh;
+    grid-area: mode;
   }
+  .tracker {
+    grid-area: tracker;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-areas:
+      "title title"
+      "moods moods"
+      "moods moods"
+      "moods moods"
+      "info legend";
+    background-color: lightgoldenrodyellow;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100%;
+    gap: 45px;
+  }
+
+  .title {
+    grid-area: title;
+    margin: 30px;
+  }
+
+  .moods {
+    grid-area: moods;
+    margin: 30px;
+  }
+
+  .legend {
+    grid-area: legend;
+  }
+
+  .info {
+    grid-area: info;
+  }
+
   .mode img {
     height: 100%;
     width:100%;
     // min-width: 527px;
     object-fit: contain;
   }
-.tracker {
-  display: flex;
-  flex: 1 527px;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  background-color: lightgoldenrodyellow;
-  height: 100vh;
-  width: 100%;
-}
-
-.info h1 {
-  margin-bottom: 40px;
+  .title h1 {
     font-weight: 350;
   }
-.tracks {
+}
+.moods {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 30px;
 }
-.week {
+.moods .week {
   display: flex;
   flex-direction: column;
   justify-items: start;
   flex-wrap: wrap;
   margin-bottom: 20px;
-  
 }
-
-.day {
+.moods .day {
   border: 1px;
   margin: 4px;
-  min-width: 20px;
-  min-height: 20px;
+  min-width: 15px;
+  min-height: 15px;
 }
 .creatif {
   background-color: red;
@@ -69,3 +143,7 @@ main {
 .croisiere {
   background-color: green;
 }
+
+.info {
+  margin: 30px;
+}

views/index.erb

@@ -28,11 +28,10 @@
     <img data-mood-target="image" src="<%= @mode %>.png">
   </div>
   <div class="tracker">
-    <div class="info">
+    <div class="title">
       <h1>Comment il va le Robi ?</h1>
     </div>
-    <div class="tracks">
-
+    <div class="moods">
       <% @mood_log.each do |week| %>
         <div class="week">
           <% week.each do |d| %>
@@ -45,5 +44,11 @@
         </div>
       <% end %>
     </div>
+    <div class="legend">
+      Ici la légende
     </div>
+    <div class="info">
+      <div class="current-day">20 mai 2025</div>
+    </div>
+  </div
 </main>