fix merge with tailwindcss

2020-04-27 22:39:32 +02:00
parent 28dc709748 8ce0f34cd6
commit af9f42d29e
27 changed files with 512 additions and 305 deletions
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
        "eslint-plugin-vue": "^6.2.2",
        "laravel-mix": "^5.0.1",
        "laravel-mix-eslint": "^0.1.3",
+        "laravel-mix-purgecss": "^5.0.0-rc.2",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
@@ -32,6 +33,7 @@
        "dropzone": "^5.7.0",
        "laravel-mix-svg-vue": "^0.2.6",
        "markdown-it": "^10.0.0",
-        "markdown-it-checkbox": "^1.1.0"
+        "markdown-it-checkbox": "^1.1.0",
+        "tailwindcss": "^1.3.5"
    }
 }
--- a/public/img/logo.svg
+++ b/public/img/logo.svg
@@ -7,25 +7,27 @@
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 24 24"
-   class="fill-current"
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
   version="1.1"
-   id="svg6"
-   sodipodi:docname="logo.svg"
+   id="svg4659"
+   sodipodi:docname="portal-logo.svg"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
  <metadata
-     id="metadata12">
+     id="metadata4665">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
-     id="defs10" />
+     id="defs4663" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
@@ -37,19 +39,23 @@
     inkscape:pageshadow="2"
     inkscape:window-width="1850"
     inkscape:window-height="1136"
-     id="namedview8"
+     id="namedview4661"
     showgrid="false"
-     inkscape:zoom="9.8333333"
-     inkscape:cx="12"
-     inkscape:cy="12"
+     inkscape:zoom="0.62441667"
+     inkscape:cx="-99.292673"
+     inkscape:cy="188.97638"
     inkscape:window-x="70"
     inkscape:window-y="27"
     inkscape:window-maximized="1"
-     inkscape:current-layer="svg6" />
-  <title
-     id="title2">Portal</title>
-  <path
-     d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"
-     id="path4"
-     style="fill:#1f6521;fill-opacity:1" />
+     inkscape:current-layer="svg4659" />
+  <g
+     transform="translate(0,-197)"
+     id="g4657"
+     style="fill:#1f6521;fill-opacity:1">
+    <path
+       d="M 188.97656 0 A 188.97638 188.97638 0 0 0 0 188.97656 A 188.97638 188.97638 0 0 0 188.97656 377.95312 A 188.97638 188.97638 0 0 0 377.95312 188.97656 A 188.97638 188.97638 0 0 0 188.97656 0 z M 170.81055 38.818359 L 211.67188 38.818359 C 214.22548 38.818359 215.50235 38.818893 216.7793 40.109375 C 218.05624 41.399857 219.33203 42.684127 219.33203 43.974609 L 224.43945 77.474609 C 230.8238 80.050168 235.93136 82.625534 239.76172 83.916016 L 265.29883 64.589844 C 266.57592 63.299362 269.1293 63.300781 270.40625 63.300781 C 272.9598 63.300781 274.23673 64.584518 275.51367 65.875 C 290.83607 80.047813 301.05271 90.356699 306.16016 96.798828 C 307.4371 98.08931 307.43555 99.375534 307.43555 100.66602 C 307.43555 101.9565 307.4371 103.24077 306.16016 104.53125 C 304.88331 107.10783 301.05106 112.26237 297.2207 117.41602 C 292.11325 122.56959 289.55975 127.72473 287.00586 130.30078 C 290.8367 136.7434 293.39102 141.89572 294.66797 148.33789 L 327.86523 153.49219 C 329.14218 153.49219 330.42032 154.77788 331.69727 156.06836 C 332.97421 157.3588 332.97461 158.64506 332.97461 159.93555 L 332.97461 201.16406 C 332.97461 202.45454 332.97421 203.74081 331.69727 205.03125 C 330.42032 206.32173 329.14218 207.60742 327.86523 207.60742 L 294.66797 212.76172 C 292.11451 219.20389 290.83709 224.3567 288.2832 230.79883 C 292.1138 238.52955 299.77435 246.26064 307.43555 256.56836 C 308.71249 257.85884 308.71289 259.14506 308.71289 260.43555 C 308.71289 261.72603 308.71249 263.01034 307.43555 264.30078 C 303.60495 268.16637 297.22174 275.89734 289.56055 284.91602 C 280.6225 293.93427 274.23749 297.80078 271.68359 297.80078 C 270.4065 297.80078 267.85312 296.51509 266.57617 295.22461 L 241.03906 275.89844 C 235.93161 278.47403 230.8238 281.05131 224.43945 282.3418 C 223.16236 299.09168 220.60898 310.68678 219.33203 317.12891 C 218.05513 320.99253 216.77762 322.2832 212.94727 322.2832 L 172.08789 322.2832 C 170.81143 322.2832 169.53476 322.28312 168.25781 319.70703 C 166.98087 318.41659 165.70312 317.13033 165.70312 315.83984 L 160.5957 282.3418 C 154.2114 281.05324 149.1055 278.47652 143.99805 275.90039 L 118.46094 295.22656 C 118.46094 296.51704 115.90585 296.51758 114.62891 296.51758 C 112.07535 296.51758 110.79843 296.51704 109.52148 295.22656 C 92.922242 281.05375 82.707795 270.74685 78.876953 264.30469 C 77.600006 263.01421 77.599609 261.72798 77.599609 260.4375 C 77.599609 259.14702 77.600006 256.57227 78.876953 256.57227 C 80.153802 253.99523 83.985568 248.84107 87.816406 243.6875 C 92.923905 238.53336 95.477355 233.37882 98.03125 230.80273 C 94.200892 224.36057 91.646084 219.2058 90.369141 212.76367 L 57.169922 207.61133 C 55.893454 207.61133 54.616791 206.32564 53.339844 205.03516 C 52.06338 203.74475 52.06366 202.45845 49.509766 201.16797 L 49.509766 159.93945 C 49.509766 158.64897 49.508209 157.36275 50.785156 156.07227 C 52.06162 154.78662 53.340244 153.49609 54.617188 153.49609 L 89.091797 148.33594 C 91.645544 141.89377 94.200011 136.74004 96.753906 131.58594 C 92.923306 125.14377 86.537701 116.12363 77.599609 105.81641 C 76.322662 103.23835 76.322266 101.95454 76.322266 100.66406 C 76.322266 99.373581 76.322662 98.087357 77.599609 96.796875 C 80.153357 92.931288 86.538513 86.489941 95.476562 77.470703 C 103.13776 68.452977 109.52228 64.585938 112.07617 64.585938 C 113.35283 64.585938 115.90665 64.584518 117.18359 65.875 L 142.7207 85.203125 C 147.8282 82.627528 154.21281 80.050248 159.32031 78.759766 C 160.5974 62.009882 163.15079 50.414785 164.42773 43.972656 C 165.70459 40.109034 166.98019 38.818359 170.81055 38.818359 z M 192.51953 132.88086 C 179.75084 132.88086 168.25836 138.03545 159.32031 147.05469 C 150.38227 156.07385 145.27539 167.67039 145.27539 180.55469 C 145.27539 193.43898 150.38227 205.03353 159.32031 214.05273 C 168.25836 223.07144 179.75084 228.22656 192.51953 228.22656 C 205.28818 228.22656 216.77875 223.07144 225.7168 214.05273 C 234.65489 205.03353 239.76367 193.43898 239.76367 180.55469 C 239.76367 167.67039 234.65489 156.07385 225.7168 147.05469 C 216.77875 138.03545 205.28818 132.88086 192.51953 132.88086 z "
+       transform="matrix(0.26458333,0,0,0.26458333,0,197)"
+       id="path4655"
+       style="fill:#1f6521;fill-opacity:1" />
+  </g>
 </svg>
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="flex">
+    <div class="flex bg-orange-200 h-screen overflow-y-hidden">
        <Nav />
-        <div v-if="authUser" class="w-100">
+        <div v-if="authUser" class="w-full overflow-y-auto">
            <TopBar />
            <main>
-                <router-view :key="$route.fullPath" class="main"></router-view>
+                <router-view :key="$route.fullPath"></router-view>
            </main>
        </div>
    </div>
--- a/resources/js/components/Avatar.vue
+++ b/resources/js/components/Avatar.vue
@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div class="flex justify-center items-center rounded-full bg-orange-600 hover:bg-orange-800">
        <img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
-        <span v-else class="avatar" v-bind:class="'avatar-' + size">{{ alt[0] }}</span>
+        <span v-else class="text-2xl font-bold"  v-bind:class="'text-' + size">{{ alt[0] }}</span>
    </div>

 </template>
--- a/resources/js/components/InputField.vue
+++ b/resources/js/components/InputField.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="relative mt-1" :classes="classes">
-        <label :for="name" class="pb-1">{{ label }}</label>
-        <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
-        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
+    <div class="relative mb-2">
+        <label :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
+        <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()" class="w-full rounded p-2">
+        <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
    </div>
 </template>

--- a/resources/js/components/Loader.vue
+++ b/resources/js/components/Loader.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="loading" class="flex-center">
+    <div v-if="loading" class="flex items-center">
        <svg-vue icon="loader" class="loader"/>
    </div>
 </template>
--- a/resources/js/components/Nav.vue
+++ b/resources/js/components/Nav.vue
@@ -1,22 +1,24 @@
 <template>
-    <nav v-bind:class="{ small: !toggleNav }">
-        <router-link to="/" class="site-logo-main" v-bind:class="{ small: !toggleNav }">
-            <svg-vue icon="logo" />
-        </router-link>
-        <hr>
-        <router-link to="/memos" class="nav-item">
-            <svg-vue icon="memos" />
-            <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
-        </router-link>
-        <router-link to="/to-do-lists" class="nav-item">
-            <svg-vue icon="list" />
-            <span v-bind:class="{ navhidden: !toggleNav }">To Do Lists</span>
-        </router-link>
-        <router-link to="/jeux" class="nav-item">
-            <svg-vue icon="games" />
-            <span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
-        </router-link>
-        <div @click="toggleNavBar"  class="nav-toggle mt-5">
+    <nav v-bind:class="{ small: !toggleNav }" class="h-screen bg-orange-400 flex flex-col justify-between">
+        <div class="">
+            <router-link to="/" class="logo" v-bind:class="{ small: !toggleNav }">
+                <svg-vue icon="logo" />
+            </router-link>
+            <hr>
+            <router-link to="/memos" class="nav-item p-2">
+                <svg-vue icon="memos" />
+                <span>Memos</span>
+            </router-link>
+            <router-link to="/to-do-lists" class="nav-item">
+                <svg-vue icon="list" />
+                <span>To Do Lists</span>
+            </router-link>
+            <router-link to="/jeux" class="nav-item p-2">
+                <svg-vue icon="games" />
+                <span>Jeux</span>
+            </router-link>
+        </div>
+        <div @click="toggleNavBar"  class="nav-toggle flex ml-2">
            <svg-vue icon="arrow" v-bind:class="{ small: !toggleNav }" />
        </div>
    </nav>
--- a/resources/js/components/TextAreaField.vue
+++ b/resources/js/components/TextAreaField.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="relative mt-1">
+    <div class="relative mb-2">
        <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
-        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="p-1">{{ data }}</textarea>
-        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
+        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="w-full h-64 rounded p-2">{{ data }}</textarea>
+        <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
    </div>
 </template>

--- a/resources/js/components/TopBar.vue
+++ b/resources/js/components/TopBar.vue
@@ -1,17 +1,17 @@
 <template>
-    <div class="flex-between flex-middle py-1 px-2 topbar">
-        <router-link v-if="authUser" :to="'/profile'" class="flex-middle avatar-box">
-            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
-            {{ authUser.data.attributes.name }}
+    <div class="top-bar flex justify-between bg-orange-300">
+        <router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
+            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
+            <span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
        </router-link>
-        <form v-if="authUser && search" class="search-box">
+        <form v-if="authUser && search" class="m-2">
            <input type="search" name="search" placeholder="Search">
            <button type="submit" value="S">
                <svg-vue icon="search" />
            </button>
        </form>
-        <router-link to="/dashboard" v-if="authUser" class="mr-1">
-            <svg-vue icon="params" />
+        <router-link to="/dashboard" v-if="authUser" class="text-orange-600 hover:text-orange-800">
+            <svg-vue icon="params" class="w-10 m-2 fill-current" />
        </router-link>
        <router-link v-else to="/login">
            Se connecter
--- a/resources/js/views/DashBoard.vue
+++ b/resources/js/views/DashBoard.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="m-2">
-        <div class="flex-between">
-            <h1 class="mb-3">Administration</h1>
-            <a href="#" @click.prevent="logout" class="btn btn-icon">
+    <div class="p-4">
+        <div class="flex justify-between">
+            <h1 class="page-title">Administration</h1>
+            <a href="#" @click.prevent="logout" class="btn">
                <svg-vue icon="logout" /> Déconnexion
            </a>
        </div>
--- a/resources/js/views/Games/GameIndex.vue
+++ b/resources/js/views/Games/GameIndex.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="p-2">
-        <h1>Liste des jeux</h1>
-        <div class="container-cards-list mt-2">
-            <HangmanIndex link="/jeux/pendu" class="card" />
+    <div class="p-4">
+        <h1 class="page-title">Liste des jeux</h1>
+        <div class="flex flex-wrap mt-4">
+            <HangmanIndex link="/jeux/pendu" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 card" />
        </div>
    </div>
 </template>
--- a/resources/js/views/Games/HangMan/Hangman.vue
+++ b/resources/js/views/Games/HangMan/Hangman.vue
@@ -1,8 +1,8 @@
 <template>
    <div class="p-2 game-container">
-        <h1 class="text-center">Pendu</h1>
-        <p class="text-center">Trouve le mot du pendu - Saisi les lettres</p>
-        <div class="flex-center dic-select">
+        <h1 class="text-3xl text-center text-orange-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">
                <a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a>
            </div>
--- a/resources/js/views/Memo/MemoCreate.vue
+++ b/resources/js/views/Memo/MemoCreate.vue
@@ -1,14 +1,14 @@
 <template>
-    <div class="memo-edit p-2">
-        <div class="flex-between mb-1">
+    <div class="p-4">
+        <div class="flex justify-between flex-center mb-4">
            <router-link to="/memos/" class="btn">< Back</router-link>
-            <button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
+            <button @click="$router.back()" class="btn-alert">Cancel</button>
        </div>
        <form @submit.prevent="submitForm">
            <InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
-            <TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
+            <TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />

-            <div class="flex-end mt-1">
+            <div class="flex justify-end mt-2">
                <button class="btn-primary">Add New Memo</button>
            </div>
        </form>
--- a/resources/js/views/Memo/MemoEdit.vue
+++ b/resources/js/views/Memo/MemoEdit.vue
@@ -12,15 +12,15 @@
                :model="form.type"
                classes="cover"
                :alt="form.name"/>
-            <div class="flex-between ml-2 mt-1 absolute t-0">
-                <router-link :to="'/memos/' + this.$route.params.id" class="btn-secondary">< Back</router-link>
-            </div>
        </div>
-        <div class="p-2">
+        <div class="p-4">
+            <div class="flex justify-between mb-4">
+                <router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
+            </div>
            <form @submit.prevent="submitForm">
                <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
                <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
-                <div class="flex-end mt-1">
+                <div class="flex justify-end mt-2">
                    <button class="btn-primary">Save</button>
                </div>

--- a/resources/js/views/Memo/MemoIndex.vue
+++ b/resources/js/views/Memo/MemoIndex.vue
@@ -1,20 +1,24 @@
 <template>
-    <div class="p-2">
-        <div class="flex-between flex-center mb-1">
+    <div class="p-4">
+        <div class="flex justify-between flex-center mb-4">
            <a href="#" class="btn" @click="$router.back()">< Back</a>
            <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
        </div>
        <Loader v-if="loading" />
-        <div v-else class="container-cards-list">
+        <div v-else class="flex flex-wrap -m-2">
            <div v-if="memos.lenght === 0">
                <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
            </div>
-            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="card">
-                <div>
-                    <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="cover">
-                    <h1 class="p-1">{{ memo.data.name }}</h1>
+            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
+                <div class="m-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
+                    <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
+                    <div class="px-6 py-4">
+                        <h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
+                    </div>
+                    <div class="flex justify-end py-2">
+                        <span class="inline-block bg-orange-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
+                    </div>
                </div>
-                <div class="memo-date p-1">{{ memo.data.last_updated }}</div>
            </router-link>
        </div>
    </div>
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -4,8 +4,8 @@
        <div v-else>
            <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
            <div v-if="modal" class="modal">
-                <p class="m-1 text-center">Are you sure you want to delete this record ?</p>
-                <div class="flex-center m-1 mt-2">
+                <p class="m-2 text-center">Are you sure you want to delete this record ?</p>
+                <div class="flex justify-center mx-2 my-4">
                    <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
                    <button class="btn-alert" @click="destroy"> Delete</button>
                </div>
@@ -16,23 +16,22 @@
                    class="cover"
                    :src="memo.attributes.cover_image.data.attributes.path"
                />
-                <div class="flex-col flex-between absolute memo-cover">
-                    <div class="flex-between px-2 py-1">
+                <div class="absolute flex flex-col justify-between w-full top-0 bottom-0">
+                    <div class="flex items-center justify-between p-4">
                        <router-link to="/memos/" class="btn-secondary">< Back</router-link>
-
                        <div class="flex-middle">
                            <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
                            <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
                        </div>
                    </div>
-                    <h1 class="memo-title flex-center">{{ memo.name }}</h1>
+                    <h1 class="flex justify-center text-white text-3xl px-4 font-bold text-shadow">{{ memo.name }}</h1>
                </div>
            </div>
    <!--           <TagBox :memo="memo" />-->
-            <div class="p-2">
+            <div class="p-4">

-                <p class="memo-style pt-1" v-html="memoMarkdown"></p>
-                <div class="memo-change">@last update : {{ memo.last_updated }}</div>
+                <p class="pt-2" v-html="memoMarkdown"></p>
+                <div class="bg-orange-400 rounded mt-2 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
            </div>
        </div>
    </div>
--- a/resources/js/views/User/ProfileUser.vue
+++ b/resources/js/views/User/ProfileUser.vue
@@ -9,9 +9,9 @@
                :author="authUser"
                :id="authUser.data.user_id"
                :model="authUser.data.type"
-                classes="cover"
+                classes=""
                :alt="authUser.data.attributes.name"/>
-            <div class="absolute b-0">
+            <div class="absolute w-64 bottom-0">
                <UploadableImage
                    :image-width=750
                    :image-height=750
@@ -20,9 +20,9 @@
                    :author="authUser"
                    :id="authUser.data.user_id"
                    :model="authUser.data.type"
-                    classes="profile absolute"
+                    classes="absolute w-64 h-64 -bottom-12 left-8 rounded-full"
                    :alt="authUser.data.attributes.name"/>
-                <h1 class="profile-title">{{ authUser.data.attributes.name }}</h1>
+                <h1 class="relative z-10 text-white text-shadow text-3xl left-80 bottom-0">{{ authUser.data.attributes.name }}</h1>
            </div>
        </div>
    </div>
--- a/resources/js/views/User/UserAdmin.vue
+++ b/resources/js/views/User/UserAdmin.vue
@@ -1,10 +1,10 @@
 <template>
  <div v-if="authUser">
-    <div class="flex mb-4">
+    <div class="flex m-4">
      <div class="avatar mr-2">
-        <Avatar :avatar="authUser.data.attributes.avatar" size="large" :alt="authUser.data.attributes.name" />
+        <Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
      </div>
-      <div class="flex-col flex-center">
+      <div class="flex flex-col justify-center ml-2">
        <div><strong>{{ authUser.data.attributes.name }}</strong></div>
        <div><strong>{{ authUser.data.attributes.email }}</strong></div>
      </div>
@@ -18,10 +18,10 @@
            <transition name="fade">
              <form @submit.prevent="addMember" v-if="userAddToggle"  class="box-toggle-content" >
                  <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
-                  <div class="flex mb-1">
+                  <div class="flex mb-2">
                      <InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
                      <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
-                      <div class="flex-middle mt-4">
+                      <div class="flex items-end mb-2">
                          <button class="btn-primary">Ajouter</button>
                      </div>
                  </div>
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,30 +1,36 @@

-@import "setup/reset";
-@import "setup/colors";
-@import "setup/fonts";
-@import "setup/positions";
-@import "setup/containers";
-@import "setup/effects";
+@tailwind base;
+@tailwind components;

+
+//@import "setup/reset";
+//@import "setup/colors";
+//@import "setup/fonts";
+//@import "setup/positions";
+//@import "setup/containers";
+//@import "setup/effects";
+//
@import "components/transitions";
@import "components/btn";
@import "components/elements";
-@import "components/loader";
-@import "components/events";
-@import "components/main";
+//@import "components/loader";
+//@import "components/main";
@import "components/nav";
-@import "components/topbar";
-@import "components/modal";
-@import "components/images";
-@import "components/avatar";
-@import "components/alert_box";
-@import "components/search_box";
-@import "components/owfont-regular";
-
-@import "pages/auth";
-@import "pages/users";
-@import "pages/memos";
-@import "pages/meteo";
-@import "pages/games";
-
+//@import "components/topbar";
+//@import "components/modal";
+//@import "components/images";
+//@import "components/avatar";
+//@import "components/alert_box";
+//@import "components/search_box";
+//@import "components/owfont-regular";
+//
+//@import "pages/auth";
+//@import "pages/users";
+//@import "pages/memos";
+//@import "pages/meteo";
+//@import "pages/games";
+//
@import "pages/games/hangman";
+
+
+@tailwind utilities;
--- a/resources/sass/components/_btn.scss
+++ b/resources/sass/components/_btn.scss
@@ -1,68 +1,107 @@
 // Button

+//.btn {
+//    font-size: 1.6rem;
+//    border: 1px solid transparent;
+//    padding: 0.5rem 1rem;
+//    border-radius: 0.5rem;
+//    cursor: pointer;
+//    box-shadow: 1px 1px 2px $grey;
+//    text-decoration: none;
+//    transition: background-color 0.2s, color 0.2s;
+//
+//    &:hover {
+//        transition: background-color 0.2s, color 0.2s;
+//        background-color: $mediumDark;
+//        color: $white;
+//    }
+//}
+//
+//.btn-primary {
+//    @extend .btn;
+//    background-color: $medium;
+//    border-color: $medium;
+//    color: $white;
+//
+//    &:visited,
+//    &:focus {
+//        color: $white;
+//    }
+//}
+//
+//.btn-secondary {
+//    @extend .btn;
+//    background-color: $mediumLight;
+//    border-color: $mediumLight;
+//    color: $dark;
+//}
+//
+//.btn-alert {
+//    @extend .btn;
+//    background-color: $error;
+//    border-color: $error;
+//    color: $white;
+//
+//    &:hover {
+//        background-color: $dark;
+//    }
+//}
+//
+//.btn-icon {
+//    @extend .btn;
+//    display: flex;
+//    align-items: center;
+//    height: 4rem;
+//
+//    &:hover svg {
+//        fill: $white;
+//    }
+//
+//    svg {
+//        height: 3rem;
+//        margin-right: 1rem;
+//
+//        &:hover {
+//            fill: $white;
+//        }
+//    }
+//}
+
 .btn {
-    font-size: 1.6rem;
-    border: 1px solid transparent;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    cursor: pointer;
-    box-shadow: 1px 1px 2px $grey;
-    text-decoration: none;
-    transition: background-color 0.2s, color 0.2s;
+    @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md;

    &:hover {
-        transition: background-color 0.2s, color 0.2s;
-        background-color: $mediumDark;
-        color: $white;
+        @apply text-white bg-orange-600 transition-all duration-300;
+    }
+
+    svg {
+        @apply w-4 fill-current mr-2 inline;
    }
 }

 .btn-primary {
    @extend .btn;
-    background-color: $medium;
-    border-color: $medium;
-    color: $white;
+    @apply bg-orange-600;

-    &:visited,
-    &:focus {
-        color: $white;
+    &:hover {
+        @apply bg-orange-800;
    }
 }

 .btn-secondary {
    @extend .btn;
-    background-color: $mediumLight;
-    border-color: $mediumLight;
-    color: $dark;
+    @apply bg-orange-600;
+
+    &:hover {
+        @apply bg-orange-800;
+    }
 }

 .btn-alert {
    @extend .btn;
-    background-color: $error;
-    border-color: $error;
-    color: $white;
+    @apply bg-red-600 text-white;

    &:hover {
-        background-color: $dark;
-    }
-}
-
-.btn-icon {
-    @extend .btn;
-    display: flex;
-    align-items: center;
-    height: 4rem;
-
-    &:hover svg {
-        fill: $white;
-    }
-
-    svg {
-        height: 3rem;
-        margin-right: 1rem;
-
-        &:hover {
-            fill: $white;
-        }
+        @apply bg-red-800;
    }
 }
--- a/resources/sass/components/_elements.scss
+++ b/resources/sass/components/_elements.scss
@@ -1,42 +1,94 @@
 // Elements

-label {
-    display: block;
+.text-shadow {
+    text-shadow: 1px 1px 2px #000;
 }

-textarea,
-input {
-    width: 100%;
-    border: 1px solid $light;
-    background-color: $greyLight;
-    font-size: 1.6rem;
-    font-family: $fontMain;
-    padding: 0.5rem 1rem;
-    border-radius: 0.2rem;
-
-    &:focus {
-        background-color: $white;
-        border-color: $dark;
-    }
+.left-8 {
+    left: 2rem;
 }

-input[type="checkbox"] {
-    width: unset;
+.left-80 {
+    left: 20rem;
+}

-    & + label {
-        display: inline;
-    }
+.-bottom-12 {
+    bottom: -3rem;
+}
+
+.max-h-64 {
+    max-height: 16rem;
+}
+
+.page-title {
+    @apply text-3xl font-bold text-orange-900;
 }

 a {
-    color: $mediumDark;
+    @apply text-orange-700;

-    &:focus,
-    &:visited {
-        color: $dark;
+    &:hover {
+        @apply text-orange-900;
    }
 }

-pre {
+$modal-duration: 1s;

+.modal-container {
+    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
+}
+
+.modal {
+    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    animation-name: modalopen;
+    animation-duration: $modal-duration;
+}
+
+.box-toggle {
+    @apply shadow;
+
+    &-header {
+        @apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
+
+        svg {
+            @apply w-8 text-orange-600 fill-current;
+        }
+    }
+
+    svg {
+        transform: rotate(270deg);
+        transition: transform 0.3s;
+
+        &.open {
+            transform: rotate(90deg);
+        }
+    }
+
+    &-content {
+        padding: 0.5rem 1rem;
+    }
+}
+
+.card {
+    @apply bg-orange-300 rounded;
+
+    svg {
+        @apply max-w-full max-h-64 m-auto fill-current;
+    }
+
+    h2 {
+        @apply text-2xl text-center font-bold;
+    }
+
+    &:hover {
+        @apply bg-orange-500;
+
+        h2 {
+            @apply text-orange-700;
+        }
+    }
 }
--- a/resources/sass/components/_transitions.scss
+++ b/resources/sass/components/_transitions.scss
@@ -4,3 +4,13 @@
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
 }
+
+@keyframes modalopen {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
--- a/resources/sass/components/modal.scss
+++ b/resources/sass/components/modal.scss
@@ -1,30 +1,25 @@
 $modal-duration: 1s;

 .modal-container {
-    background-color: rgba(0,0,0,0.6);
-    //display: none;
-    z-index: 10;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-
+    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
 }

 .modal {
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    position: absolute;
-    z-index: 20;
-    //overflow: hidden;
+    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
-    max-width: 100%;
    width: 400px;
    animation-name: modalopen;
    animation-duration: $modal-duration;
 }
+
+@keyframes modalopen {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
--- a/resources/sass/components/nav.scss
+++ b/resources/sass/components/nav.scss
@@ -1,103 +1,178 @@

+//nav {
+//    background-color: $mediumDark;
+//    height: 100vh;
+//    width: 15rem;
+//    flex-shrink: 0;
+//    display: flex;
+//    flex-direction: column;
+//    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
+//    transition: width $transition-delay;
+//
+//    &.small {
+//        width: 5.5rem;
+//    }
+//
+//    hr {
+//        width: 90%;
+//        border-radius: 1px;
+//        border: 1px solid $dark;
+//    }
+//
+//    .nav-item {
+//        display: flex;
+//        align-items: center;
+//        text-decoration: none;
+//        color: $light;
+//        padding-top: 1rem;
+//        padding-bottom: 1rem;
+//
+//        span {
+//            overflow: hidden;
+//        }
+//
+//        svg {
+//            margin: 0 1rem;
+//            width: 3rem;
+//            transition: fill 0.2s;
+//            fill: $light;
+//        }
+//
+//        &:hover {
+//            color: $dark;
+//            background-color: $light;
+//            transition: color 0.2s, background-color 0.2s;
+//
+//            svg {
+//                fill: $dark;
+//                transition: fill 0.2s;
+//            }
+//        }
+//
+//        //&:visited {
+//        //    color: $dark;
+//        //}
+//    }
+//}
+//
+//.site-logo {
+//    width: 3rem;
+//    fill: $light;
+//    transition: fill 0.2s;
+//
+//    &:hover {
+//        fill: $dark;
+//        transition: fill 0.2s;
+//    }
+//}
+//
+//.navhidden {
+//    width: 0;
+//}
+//
+//
+//.site-logo-main {
+//    @extend .site-logo;
+//    display: block;
+//    margin: 1rem;
+//    width: 13rem;
+//    transition: width $transition-delay;
+//
+//    svg {
+//
+//        width: 100%;
+//    }
+//
+//    &.small {
+//        //padding-bottom: 10rem;
+//        width: 3.5rem;
+//    }
+//}
+//
+//.nav-toggle {
+//    @extend .site-logo;
+//    align-self: center;
+//
+//    svg {
+//        transition: transform $transition-delay;
+//    }
+//
+//    svg.small {
+//            transform: rotate(-180deg);
+//    }
+//}
+
 nav {
-    background-color: $mediumDark;
-    height: 100vh;
-    width: 15rem;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
-    transition: width $transition-delay;
+    @apply w-48;
+    transition: width 0.3s;

-    &.small {
-        width: 5.5rem;
+    svg {
+        @apply fill-current text-orange-600 w-12 p-2;
+        transition: color 0.3s;
+
+        &:hover {
+            @apply text-orange-800;
+        }
    }

-    hr {
-        width: 90%;
-        border-radius: 1px;
-        border: 1px solid $dark;
+    .logo {
+        @apply block;
+
+        svg {
+            @apply w-40 m-2;
+            transition: width 0.3s, color 0.3s;
+        }
    }

    .nav-item {
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        color: $light;
-        padding-top: 1rem;
-        padding-bottom: 1rem;
+        @apply flex items-center;
+

        span {
-            overflow: hidden;
-        }
+            @apply font-bold text-xl ml-2 overflow-hidden;
+            transition: width 0.3s;

-        svg {
-            margin: 0 1rem;
-            width: 3rem;
-            transition: fill 0.2s;
-            fill: $light;
-        }
-
-        &:hover {
-            color: $dark;
-            background-color: $light;
-            transition: color 0.2s, background-color 0.2s;
-
-            svg {
-                fill: $dark;
-                transition: fill 0.2s;
+            &:hover {
+                @apply text-orange-800;
            }
        }

-        //&:visited {
-        //    color: $dark;
-        //}
+        &:hover {
+            @apply bg-orange-500;
+
+            span,
+            svg {
+                @apply text-orange-800;
+            }
+        }
+    }
+
+    .nav-toggle svg {
+        transition: transform 0.3s;
    }
 }

-.site-logo {
-    width: 3rem;
-    fill: $light;
-    transition: fill 0.2s;
+nav.small {
+    @apply w-16;

-    &:hover {
-        fill: $dark;
-        transition: fill 0.2s;
+    .logo {
+        @apply w-16 p-0;
+
+        svg {
+            @apply w-16 m-0;
+        }
+    }
+
+    .nav-item span {
+        @apply w-0;
+    }
+
+    .nav-toggle svg {
+        transform: rotate(-180deg);
    }
 }

-.navhidden {
-    width: 0;
-}
-
-
-.site-logo-main {
-    @extend .site-logo;
-    display: block;
-    margin: 1rem;
-    width: 13rem;
-    transition: width $transition-delay;
-
-    svg {
-
-        width: 100%;
-    }
-
-    &.small {
-        //padding-bottom: 10rem;
-        width: 3.5rem;
-    }
-}
-
-.nav-toggle {
-    @extend .site-logo;
-    align-self: center;
-
-    svg {
-        transition: transform $transition-delay;
-    }
-
-    svg.small {
-            transform: rotate(-180deg);
-    }
+.app {
+    //min-width: 100%;
+    width: initial;
 }
--- a/resources/sass/pages/games/hangman.scss
+++ b/resources/sass/pages/games/hangman.scss
@@ -17,14 +17,14 @@

 .figure-container {
    fill: transparent;
-    stroke: $mediumDark;
+    stroke: orange;
    stroke-width: 4px;
    stroke-linecap: round;
 }

 .figure-part {
    display: none;
-    stroke: $dark;
+    stroke: #7b341e;
 }

 .wrong-letters-container {
@@ -47,13 +47,11 @@
 }

 .word {
-    display: flex;
-    align-self: center;
-    justify-self: center;
+    @apply flex justify-center items-center;
    bottom: 1rem;

    .letter {
-        border-bottom: 3px solid $medium;
+        border-bottom: 3px solid #c05621;
        display: inline-flex;
        font-size: 30px;
        align-items: center;
@@ -69,16 +67,17 @@
    width: calc(100% - 6rem);

    .popup {
-        background-color: $medium;
+        background-color: #c05621;
        border-radius: 5px;
-        color: $light;
+        color: #fbd38d;
+        min-height: 10rem;
        padding: 20px;
        text-align: center;

        button {
            cursor: pointer;
            background-color: #fff;
-            color: $dark;
+            color: #7b341e;
            border: 0;
            margin-top: 20px;
            padding: 12px 20px;
@@ -96,7 +95,7 @@
 }

 .notification-container {
-    background-color: $mediumLight;
+    background-color: #ed8936;
    border-radius: 2px;
    padding: 1rem;
    text-align: center;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  theme: {
+    extend: {
+        width: {
+            '96': '24rem'
+        }
+    },
+  },
+  variants: {},
+  plugins: [],
+}
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,6 +1,13 @@
 const mix = require('laravel-mix');
+const tailwindcss = require('tailwindcss')
+require('laravel-mix-purgecss');
 require('laravel-mix-svg-vue');

 mix.js('resources/js/app.js', 'public/js')
    .svgVue()
-   .sass('resources/sass/app.scss', 'public/css');
+    .sass('resources/sass/app.scss', 'public/css')
+    .options({
+        processCssUrls: false,
+        postCss: [ tailwindcss('./tailwind.config.js') ],
+    })
+    .purgeCss();