From 37f3ef400d534dbc0c400f346b1540c6b2d3940b Mon Sep 17 00:00:00 2001
From: Christophe Robillard <christophe@robiweb.net>
Date: Mon, 1 Dec 2025 15:01:40 +0100
Subject: [PATCH] bulmaize legend

---
 app/assets/stylesheets/kluk.css | 34 +++++++++++++++++++++++++--------
 app/views/moods/index.html.erb  | 16 ++++++++--------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/kluk.css b/app/assets/stylesheets/kluk.css
index 9fc2e7f..5bd9495 100644
--- a/app/assets/stylesheets/kluk.css
+++ b/app/assets/stylesheets/kluk.css
@@ -31,38 +31,42 @@ body {
   font-size: 2rem;
 }
 
-.legend .bar-afond {
+.bar-afond {
   background: black;
   width: 10px;
   height: 10px;
   margin-left: 15px;
 }
 
-.legend .bar-creatif {
+.bar-creatif {
   background: red;
   width: 10px;
   height: 10px;
   margin-left: 15px;
 }
-.legend .bar-frigo {
+
+.bar-frigo {
   background: gray;
   width: 10px;
   height: 10px;
   margin-left: 15px;
 }
-.legend .bar-croisiere {
+
+.bar-croisiere {
   background: green;
   width: 10px;
   height: 10px;
   margin-left: 15px;
 }
-.legend .bar-en-charge {
+
+.bar-en-charge {
   background: orange;
   width: 10px;
   height: 10px;
   margin-left: 15px;
 }
-.legend .bar-explain {
+
+.bar-explain {
   padding-left: 3px;
 }
 
@@ -80,14 +84,17 @@ main {
   align-items: center;
   justify-content: center;
 }
+
 .mode img {
   height: 100%;
-  width:100%;
+  width: 100%;
   object-fit: contain;
 }
+
 .tracker {
   grid-area: tracker;
 }
+
 .title h1 {
   font-weight: 350;
 }
@@ -106,6 +113,7 @@ main {
     height: 100vh;
     grid-area: mode;
   }
+
   .tracker {
     grid-area: tracker;
     display: grid;
@@ -141,13 +149,15 @@ main {
 
   .mode img {
     height: 100%;
-    width:100%;
+    width: 100%;
     object-fit: contain;
   }
+
   .title h1 {
     font-weight: 350;
   }
 }
+
 .moods {
   grid-area: moods;
   margin: 30px;
@@ -167,6 +177,7 @@ main {
   justify-content: flex-end;
   margin: 30px;
 }
+
 .log {
   align-self: flex-end;
   display: flex;
@@ -174,6 +185,7 @@ main {
   align-items: flex-start;
   overflow: hidden;
 }
+
 .moods .log .week {
   display: flex;
   flex-direction: column;
@@ -181,24 +193,30 @@ main {
   flex-wrap: wrap;
   margin-bottom: 20px;
 }
+
 .moods .log .day {
   border: 1px;
   margin: 4px;
   min-width: 15px;
   min-height: 15px;
 }
+
 .creatif {
   background-color: red;
 }
+
 .en-charge {
   background-color: orange;
 }
+
 .frigo-vide {
   background-color: grey;
 }
+
 .croisiere {
   background-color: green;
 }
+
 .afond {
   background-color: black;
 }
diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb
index ef8eb2a..341d65f 100644
--- a/app/views/moods/index.html.erb
+++ b/app/views/moods/index.html.erb
@@ -20,24 +20,24 @@
         <% end %>
       </div>
     </div>
-    <div class="legend">
-      <div class="legend-mood">
-        <div class="bar-frigo"></div>
-        <div class="bar-explain">Triste</div>
+    <div class="level">
+      <div class="level-item">
+          <div class="bar-frigo"></div>
+          <div class="bar-explain">Triste</div>
       </div>
-      <div class="legend-mood">
+      <div class="level-item">
         <div class="bar-en-charge"></div>
         <div class="bar-explain">En charge</div>
       </div>
-      <div class="legend-mood">
+      <div class="level-item">
         <div class="bar-croisiere"></div>
         <div class="bar-explain">Croisiere</div>
       </div>
-      <div class="legend-mood">
+      <div class="level-item">
         <div class="bar-creatif"></div>
         <div class="bar-explain">Créatif</div>
       </div>
-      <div class="legend-afond">
+      <div class="level-item">
         <div class="bar-afond"></div>
         <div class="bar-explain">A fond</div>
       </div>