From 629a599c3092dbc3bfaa8f63cc0ef33e127e44a4 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Thu, 13 Jul 2023 00:47:34 +0200
Subject: [PATCH] align everything and add emoji

---
 feature-flow.css  |  5 ++++-
 feature-flow.html | 40 ++++++++++++++++++++--------------------
 index.css         |  1 +
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/feature-flow.css b/feature-flow.css
index 7ee2403..85cf2b3 100644
--- a/feature-flow.css
+++ b/feature-flow.css
@@ -22,6 +22,8 @@ li {
   height: 100%;
   margin: 0;
   color: var(--background-color);
+  display: flex;
+  flex-direction: column;
 }
 
 main > ul > li:first-child {
@@ -46,6 +48,7 @@ header {
 
 section {
   margin: 1rem 0;
+  flex: 1;
 }
 
 section ul {
@@ -55,8 +58,8 @@ section ul {
 h5 {
   margin-bottom: 0;
   background-color: var(--background-color);
-  color: var(--color);
   padding: 0.35rem;
+  text-align: center;
 }
 
 .blue-bin {
diff --git a/feature-flow.html b/feature-flow.html
index 4495e54..618812c 100644
--- a/feature-flow.html
+++ b/feature-flow.html
@@ -19,49 +19,49 @@
         <li>
           <header>Pitch</header>
           <section class="doing">
-            <h5>doing</h5>
-            <ul>
-              <li>Feature 1</li>
-              <li>Feature 2</li>
-            </ul>
-          </section>
-          <section class="done">
-            <h5>done</h5>
+            <h5>📝</h5>
             <ul>
               <li>Feature 3</li>
               <li>Feature 4</li>
             </ul>
           </section>
+          <section class="done">
+            <h5>✅</h5>
+            <ul>
+              <li class="blue-bin">feature 1</li>
+              <li class="blue-bin">feature 2</li>
+            </ul>
+          </section>
         </li>
         <li>
           <header>Design</header>
           <section class="doing">
-            <h5>doing</h5>
+            <h5>📝</h5>
           </section>
           <section class="done">
-            <h5>done</h5>
+            <h5>✅</h5>
           </section>
         </li>
         <li>
           <header>Investigation</header>
           <section class="doing">
-            <h5>doing</h5>
+            <h5>📝</h5>
           </section>
           <section class="done">
-            <h5>done</h5>
+            <h5>✅</h5>
           </section>
         </li>
         <li>
           <header>Product design</header>
           <section class="doing">
-            <h5>doing</h5>
+            <h5>📝</h5>
             <ul>
               <li></li>
               <li></li>
             </ul>
           </section>
           <section class="done">
-            <h5>done</h5>
+            <h5>✅</h5>
             <div class="blue-bin">Blue bucket</div>
             <div class="blue-bin">Blue bucket</div>
           </section>
@@ -69,28 +69,28 @@
         <li>
           <header>Development</header>
           <section class="doing">
-            <h5>doing</h5>
+            <h5>📝</h5>
           </section>
           <section class="done">
-            <h5>done</h5>
+            <h5>✅</h5>
           </section>
         </li>
         <li>
           <header>UAT</header>
           <section class="doing">
-            <h5>doing</h5>
+            <h5>📝</h5>
           </section>
           <section class="done">
-            <h5>done</h5>
+            <h5>✅</h5>
           </section>
         </li>
         <li>
           <header>Release</header>
           <section class="doing">
-            <h5>doing</h5>
+            <h5>📝</h5>
           </section>
           <section class="done">
-            <h5>done</h5>
+            <h5>✅</h5>
           </section>
         </li>
       </ul>
diff --git a/index.css b/index.css
index bbca8aa..2e98ecf 100644
--- a/index.css
+++ b/index.css
@@ -100,6 +100,7 @@ li {
 
 .pilars li {
   flex: 0;
+  width: 100%;
 }
 
 .ground {