embarq ccs hangman

resources/js/components/Nav.vue

@@ -18,7 +18,7 @@
                 <span>Jeux</span>
             </router-link>
         </div>
-        <div @click="toggleNavBar"  class="nav-toggle flex ml-2">
+        <div @click="toggleNavBar"  class="nav-toggle flex ml-2 cursor-pointer">
             <svg-vue icon="arrow" v-bind:class="{ small: !toggleNav }" />
         </div>
     </nav>

resources/js/views/Games/HangMan/Hangman.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="p-2 game-container">
-        <h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
+        <h1 class="text-3xl text-center text-primary-900 font-bold">Pendu</h1>
         <p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
         <div class="flex justify-center dic-select">
             <div v-for="(dic, key) in dictionary" :key="key">
@@ -159,3 +159,118 @@ export default {
     }
 }
 </script>
+
+<style scoped>
+
+    .game-container {
+        max-width: 80rem;
+        margin: 0 auto;
+    }
+    .game-container-box {
+        padding: 2rem 3rem;
+        position: relative;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .dic-select {
+        min-height: 6rem;
+    }
+
+    .figure-container {
+        fill: transparent;
+        stroke: orange;
+        stroke-width: 4px;
+        stroke-linecap: round;
+    }
+
+    .figure-part {
+        display: none;
+        stroke: #7b341e;
+    }
+
+    .wrong-letters-container {
+        top: 4rem;
+        display: flex;
+        flex-direction: column;
+        text-align: right;
+    }
+
+    .wrong-letters-container .wrong-letters {
+        height: 3.5rem;
+    }
+
+    .wrong-letters-container p {
+        margin: 0 0 5px;
+    }
+
+    .wrong-letters-container span {
+        font-size: 2.4rem;
+    }
+
+    .word {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        bottom: 1rem;
+    }
+
+    .word .letter {
+        border-bottom: 3px solid #c05621;
+        display: inline-flex;
+        font-size: 30px;
+        align-items: center;
+        justify-content: center;
+        margin: 0 3px;
+        height: 50px;
+        width: 20px;
+    }
+
+    .popup-container {
+        position: absolute;
+        width: calc(100% - 6rem);
+    }
+
+    .popup-container .popup {
+        background-color: #c05621;
+        border-radius: 5px;
+        color: #fbd38d;
+        min-height: 10rem;
+        padding: 20px;
+        text-align: center;
+    }
+
+    .popup-container .popup button {
+        cursor: pointer;
+        background-color: #fff;
+        color: #7b341e;
+        border: 0;
+        margin-top: 20px;
+        padding: 12px 20px;
+        font-size: 16px;
+    }
+
+    .popup-container .popup button:active {
+         transform: scale(0.98);
+     }
+
+    .popup-container .popup button:focus {
+         outline: 0;
+     }
+
+    .notification-container {
+        background-color: #ed8936;
+        border-radius: 2px;
+        padding: 1rem;
+        text-align: center;
+        margin-bottom: 6rem;
+    }
+
+    .notification-container p {
+        margin: 0;
+    }
+
+
+</style>

resources/js/views/Memo/MemoShow.vue

@@ -30,8 +30,8 @@
     <!--           <TagBox :memo="memo" />-->
             <div class="p-4">
 
-                <div class="memo-style p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
-                <div class="bg-primary-400 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
+                <div class="memo-style rounded-t-sm p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
+                <div class="bg-primary-400 rounded-b-sm px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
             </div>
         </div>
     </div>

resources/sass/app.scss

@@ -11,7 +11,5 @@
 
 @import "pages/memos";
 
-@import "pages/games/hangman";
-
 
 @tailwind utilities;

resources/sass/pages/games/hangman.scss

@@ -1,107 +0,0 @@
-.game-container {
-    max-width: 80rem;
-    margin: 0 auto;
-}
-.game-container-box {
-    padding: 2rem 3rem;
-    position: relative;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.dic-select {
-    min-height: 6rem;
-}
-
-.figure-container {
-    fill: transparent;
-    stroke: orange;
-    stroke-width: 4px;
-    stroke-linecap: round;
-}
-
-.figure-part {
-    display: none;
-    stroke: #7b341e;
-}
-
-.wrong-letters-container {
-    top: 4rem;
-    display: flex;
-    flex-direction: column;
-    text-align: right;
-
-    .wrong-letters {
-        height: 3.5rem;
-    }
-
-    p {
-        margin: 0 0 5px;
-    }
-
-    span {
-        font-size: 2.4rem;
-    }
-}
-
-.word {
-    @apply flex justify-center items-center;
-    bottom: 1rem;
-
-    .letter {
-        border-bottom: 3px solid #c05621;
-        display: inline-flex;
-        font-size: 30px;
-        align-items: center;
-        justify-content: center;
-        margin: 0 3px;
-        height: 50px;
-        width: 20px;
-    }
-}
-
-.popup-container {
-    position: absolute;
-    width: calc(100% - 6rem);
-
-    .popup {
-        background-color: #c05621;
-        border-radius: 5px;
-        color: #fbd38d;
-        min-height: 10rem;
-        padding: 20px;
-        text-align: center;
-
-        button {
-            cursor: pointer;
-            background-color: #fff;
-            color: #7b341e;
-            border: 0;
-            margin-top: 20px;
-            padding: 12px 20px;
-            font-size: 16px;
-
-            &:active {
-                transform: scale(0.98);
-            }
-
-            &:focus {
-                outline: 0;
-            }
-        }
-    }
-}
-
-.notification-container {
-    background-color: #ed8936;
-    border-radius: 2px;
-    padding: 1rem;
-    text-align: center;
-    margin-bottom: 6rem;
-
-    p {
-        margin: 0;
-    }
-}