update font

remove useless style rules

supprime les modes interstice

public/main.css

@@ -1,6 +1,8 @@
 body {
   margin: 0px;
-  font: 1.8rem "Fira Sans", sans-serif;
+  font-family: "Sour Gummy", sans-serif;
+  font-weight: 350;
+  font-style: normal;
 }
 
 .mode {
@@ -15,26 +17,9 @@ body {
 .title {
   grid-area: title;
   margin: 30px;
+  font-size: 2rem;
 }
 
-.moods {
-  grid-area: moods;
-  margin: 30px;
-}
-
-.legend {
-  grid-area: legend;
-  margin: 4px;
-  font-size: 0.8rem;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: flex-end;
-  margin: 30px;
-}
-.info {
-  grid-area: info;
-}
 .legend .bar-creatif {
   background: red;
   width: 10px;
@@ -107,15 +92,10 @@ main {
     grid-area: tracker;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: repeat(2, 1fr) repeat(7, 1fr);
+    grid-template-rows: 2fr 1fr 6fr 1fr;
     grid-template-areas:
       "title title"
-      "title title"
+      "info-day info-day"
-      "moods moods"
-      "moods moods"
-      "moods moods"
-      "moods moods"
-      "moods moods"
       "moods moods"
       ". legend";
     background-color: lightgoldenrodyellow;
@@ -131,6 +111,10 @@ main {
     margin: 30px;
   }
 
+  .info-day {
+    grid-area: info-day;
+    margin: 30px;
+  }
 
   .info {
     grid-area: info;
@@ -151,10 +135,18 @@ main {
   max-height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .legend {
-  align-self: flex-end;
+  grid-area: legend;
+  margin: 4px;
+  font-size: 0.8rem;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-end;
+  margin: 30px;
 }
 .log {
   align-self: flex-end;

views/index.erb

@@ -3,21 +3,22 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="main.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Delius&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
   <script type="module">
     import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
     window.Stimulus = Application.start()
 
     Stimulus.register("mood", class extends Controller {
-      static targets = [ "image" ]
+      static targets = [ "image", "info" ]
 
-      showMode(event) {
+      updateDayInfo(event) {
-        const image = this.imageTarget
+        const image = this.imageTarget;
+        const infoDay = this.infoTarget;
         image.src = event.target.dataset.mode + ".jpg"
-      }
+        infoDay.textContent = event.target.dataset.day;
-
-      showCurrent() {
-        const image = this.imageTarget
-        image.src = "<%= @mode %>.jpg"
       }
 
     })
@@ -31,13 +32,14 @@
     <div class="title">
       <h1>Comment il va le Robi ?</h1>
     </div>
+    <div class="info-day" data-mood-target="info">Aujourd'hui</div>
     <div class="moods">
       <div class="log">
         <% @mood_log.each do |week| %>
           <div class="week">
             <% week.each do |d| %>
               <% if d[1] %>
-                <div data-mode="<%= d[1] %>" data-action="mouseover->mood#showMode mouseleave->mood#showCurrent" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
+                <div data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
               <% else %>
                 <div class="day"></div>
               <% end %>