feat: assemble

src/modules/5s/BoardGameToolbox.vue

@@ -16,14 +16,13 @@ const rawTools = computed(() =>
 </script>
 
 <template>
-  <aside class="board-game-tools prose">
-    <h2>Toolbox</h2>
+  <div class="board-game-tools prose">
     <div class="overflow-x-auto" v-if="isSeitonActivated">
       <table class="table table-zebra">
         <thead>
           <tr>
             <th>Tool</th>
-            <th>Alias</th>
+            <th>Reference</th>
           </tr>
         </thead>
         <tbody>
@@ -37,7 +36,7 @@ const rawTools = computed(() =>
     <div v-else>
       {{ rawTools }}
     </div>
-  </aside>
+  </div>
 </template>
 
 <style scoped lang="scss">

src/modules/5s/BoardGameWorkshop.vue

@@ -47,10 +47,7 @@ const submit = () => {
 </script>
 
 <template>
-  <div class="board-game-workshop">
-    <BoardGameToolbox class="aside" />
-    <div class="main prose">
-      <h2 class="title">Workshop</h2>
+  <header>
     <button
       class="btn"
       v-if="!boardGameStore.currentBoardGame"
@@ -58,6 +55,15 @@ const submit = () => {
     >
       start
     </button>
+  </header>
+  <div class="board-game-workshop">
+    <aside class="prose">
+      <h2>Toolbox</h2>
+
+      <BoardGameToolbox />
+    </aside>
+    <div class="main prose">
+      <h2 class="title">Workshop</h2>
 
       <div v-if="boardGameStore.currentBoardGame">
         <form @submit.prevent="submit">
@@ -137,14 +143,13 @@ const submit = () => {
         </div>
       </div>
     </div>
-  </div>
     <aside
-    class="performance"
+      class="performance prose"
       v-if="duration !== null || boardGameStore.meta.perfs.length > 0"
     >
       <h2>Performance</h2>
 
-    <p>{{ duration }}</p>
+      <p class="duration numeric">{{ duration }}</p>
 
       <template v-if="boardGameStore.meta.perfs.length > 0">
         <h3>Last performances</h3>
@@ -156,6 +161,7 @@ const submit = () => {
         </ul>
       </template>
     </aside>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -169,7 +175,8 @@ const submit = () => {
   font-style: normal;
   font-size: 14px;
   display: flex;
-  gap: 4rem;
+  gap: 1rem;
+  padding: 1rem;
 
   input {
     font-family: 'Google Sans Code', monospace;
@@ -179,6 +186,10 @@ const submit = () => {
   }
 }
 
+h2 {
+  text-align: center;
+}
+
 form {
   text-align: center;
 }
@@ -199,4 +210,12 @@ aside,
   flex-direction: column;
   gap: 1rem;
 }
+
+.card {
+  margin: 1rem;
+}
+
+.duration {
+  text-align: right;
+}
 </style>