ajout de strapi

app/assets/scss/layout/_layout.scss

@@ -0,0 +1,9 @@
+  .page-enter-active, 
+  .page-leave-active {
+    transition: all 0.4s ease;
+  }
+  .page-enter-from, 
+  .page-leave-to {
+    opacity: 0;
+    filter: grayscale(66%) brightness(0.2);
+  }

app/assets/scss/layout/_media_queries.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+
+
+$breakpoints: (
+    "phone_300": 300px,
+    "phone_400": 400px,
+    "phone_500": 500px,
+    "tablet_600": 600px,
+    "tablet_640": 640px,
+    "tablet_700": 700px,
+    "tablet_800": 800px,
+    "tablet_900": 900px,
+    "desktop_1000": 1000px,
+    "desktop_1100": 1100px,
+    "desktop_1200": 1200px,
+    "desktop_1300": 1300px,
+    "desktop_1500": 1500px,
+    "desktop_1800": 1800px
+);
+
+
+// jusqu'à cette taille
+@mixin media_max($key) {
+    @media (max-width: map.get($breakpoints,$key)) {
+        @content;
+    }
+}
+
+// à partir de cette taille
+@mixin media_min($key) {
+    @media (min-width: map.get($breakpoints,$key)) {
+        @content;
+    }
+}
+// Entre minumum et maximum
+// media_minmax("phone","desktop") = tablette
+@mixin media_minmax($key_min, $key_max) {
+    @media (min-width: calc(map.get($breakpoints,$key_min))) and (max-width: calc(map.get($breakpoints,$key_max) - 1px)) {
+        @content;
+    }
+}