article: finally some work on 5S article

5s.html

@@ -10,6 +10,7 @@
     My understanding of how a 5S can help team."
     />
     <link rel="stylesheet" href="core.css" />
+    <link rel="stylesheet" href="core-article.css" />
     <link rel="stylesheet" href="5s.css" />
     <link rel="icon" href="people-improvement.svg" />
     <link rel="mask-icon" href="people-improvement.svg" color="#ffffff" />

core-article.css

@@ -0,0 +1,102 @@
+article {
+  color: black;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 1080px;
+  margin: auto;
+}
+
+h1 {
+  margin: 0 0 0.5rem;
+}
+
+.created-at {
+  font-size: 14pt;
+  margin: 0;
+}
+
+.numeric {
+  font-family: 'Cutive Mono', monospace;
+  font-weight: bold;
+}
+
+.text {
+  font-size: 16pt;
+  max-width: 650px;
+  margin: auto;
+  text-align: justify;
+}
+
+/* Miligram reset */
+
+.button,
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  background-color: var(--primary-color);
+  border: 0.1rem solid var(--primary-color);
+  cursor: pointer;
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.button.button-outline,
+button.button-outline,
+input[type='button'].button-outline,
+input[type='reset'].button-outline,
+input[type='submit'].button-outline {
+  background-color: transparent;
+  color: var(--primary-color);
+}
+
+.button.button-clear,
+button.button-clear,
+input[type='button'].button-clear,
+input[type='reset'].button-clear,
+input[type='submit'].button-clear {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--primary-color);
+}
+
+table {
+  border-spacing: 0;
+  display: block;
+  overflow-x: auto;
+  text-align: left;
+  width: 100%;
+}
+
+td,
+th {
+  border-bottom: 0.1rem solid #e1e1e1;
+  padding: 1.2rem 1.5rem;
+}
+
+td:first-child,
+th:first-child {
+  padding-left: 0;
+}
+
+td:last-child,
+th:last-child {
+  padding-right: 0;
+}
+
+@media (min-width: 40rem) {
+  table {
+    display: table;
+    overflow-x: initial;
+  }
+}
+
+.sub {
+  font-size: 12pt;
+}

core.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&family=Cutive+Mono&display=swap');
 
 :root {
   --primary-color: #002992;

pull-system.css

@@ -57,79 +57,3 @@ ul {
   color: white;
   transition-delay: 3s;
 }
-
-.numeric {
-  font-family: 'Cutive Mono', monospace;
-  font-weight: bold;
-}
-
-/* Miligram reset */
-
-.button,
-button,
-input[type='button'],
-input[type='reset'],
-input[type='submit'] {
-  background-color: var(--primary-color);
-  border: 0.1rem solid var(--primary-color);
-  cursor: pointer;
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-.button.button-outline,
-button.button-outline,
-input[type='button'].button-outline,
-input[type='reset'].button-outline,
-input[type='submit'].button-outline {
-  background-color: transparent;
-  color: var(--primary-color);
-}
-
-.button.button-clear,
-button.button-clear,
-input[type='button'].button-clear,
-input[type='reset'].button-clear,
-input[type='submit'].button-clear {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--primary-color);
-}
-
-table {
-  border-spacing: 0;
-  display: block;
-  overflow-x: auto;
-  text-align: left;
-  width: 100%;
-}
-
-td,
-th {
-  border-bottom: 0.1rem solid #e1e1e1;
-  padding: 1.2rem 1.5rem;
-}
-
-td:first-child,
-th:first-child {
-  padding-left: 0;
-}
-
-td:last-child,
-th:last-child {
-  padding-right: 0;
-}
-
-@media (min-width: 40rem) {
-  table {
-    display: table;
-    overflow-x: initial;
-  }
-}
-
-.sub {
-  font-size: 12pt;
-}

pull-system.html

@@ -9,6 +9,7 @@
       content="Author: Julien Calixte, understanding how a pull system can help team succeed."
     />
     <link rel="stylesheet" href="core.css" />
+    <link rel="stylesheet" href="core-article.css" />
     <link rel="stylesheet" href="pull-system.css" />
     <link rel="icon" href="people-improvement.svg" />
     <link rel="mask-icon" href="people-improvement.svg" color="#ffffff" />

src/App5S.vue

@@ -1,20 +1,45 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import CoffeeDay from '@/modules/5s/game/CoffeeDay.vue'
+
+const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+})
+</script>
 
 <template>
-  <main id="main-app">
+  <article id="main-app">
-    Exploring 5S coming soon
+    <h1>5S</h1>
-    <article>
+    <h2 class="created-at numeric">
+      {{ createdAt }}
+    </h2>
+    <div class="text">
       <p>
-        "This my friend, he says calmly, is what makes the whole shop works.
+        Vous venez d'emmenager dans un nouveau quartier. Une de vos activités
-        Everything I know, everything I need is written down on this piece of
+        préférées dans votre ancienne vie était de flaner dans un café. Alors
-        paper. Please, take care of it."
+        vous vous mettez à la recherche d'un café sympa.
       </p>
       <p>
-        As you look down at the paper, you see a bunch of list, todos and notes
+        Il se trouve que vous en trouvez un tout à fait charmant. Voici le
-        in a brown used paper. It looks like it lived more than you.
+        propriétaire qui vous accueille chaleureusement. Vous prenez votre café
+        et vous vous installez près de la fenêtre prêt pour une bonne lecture.
+        Tout ici y est charmant, et plus les journées passent, plus vous
+        discutez avec le propriétaire vous partage ses secrets. Jusqu'au jour où
+        il vous propose de l'aider à tenir ce café.
       </p>
+      <p>
+        Super ! Comment faire ? "This, my friend," he says calmly, "is what
+        makes the whole shop work. Everything I know, everything I need is
+        written down on this piece of paper. Please, take care of it."
+      </p>
+      <p>
+        As you look down at the paper, you see a bunch of lists, todos, and
+        notes in a brown used paper. It looks like it has lived more than you.
+      </p>
+      <CoffeeDay />
+    </div>
   </article>
-  </main>
 </template>
 
 <style scoped lang="scss">

src/modules/5s/game/CoffeeDay.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="coffee-day">
+    <button>Start the day</button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.coffee-day {
+  button {
+    color: white;
+  }
+}
+</style>

src/modules/pull-system/FlowArticle.vue

@@ -45,7 +45,7 @@ const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, {
 </script>
 
 <template>
-  <article class="flow-article">
+  <article class="flow-article with-article">
     <h1>Pull System</h1>
     <h2 class="created-at numeric">
       {{ createdAt }}
@@ -303,31 +303,6 @@ const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, {
 
 <style lang="scss">
 .flow-article {
-  color: black;
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  max-width: 1080px;
-  margin: auto;
-
-  h1 {
-    margin: 0 0 0.5rem;
-  }
-
-  .created-at {
-    font-size: 14pt;
-    margin: 0;
-  }
-
-  .text {
-    font-size: 16pt;
-    max-width: 650px;
-    margin: auto;
-    text-align: justify;
-  }
-
   .above {
     z-index: 1;
     padding-top: 1rem;