From 814b243b2b2b3ea777cfa06f09829c2f497dbc62 Mon Sep 17 00:00:00 2001
From: Laurent <58115082+naaturel@users.noreply.github.com>
Date: Fri, 28 Feb 2025 22:56:46 +0100
Subject: [PATCH] Add some responsive shit

---
 src/views/HomeView.vue | 46 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 971f133..3200127 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -19,6 +19,7 @@
 
 </template>
 
+
 <style scoped>
 
 .container, .introduction, .actions {
@@ -30,18 +31,52 @@
 }
 
 .container {
-  flex-direction: row;
   width: 80%;
   gap: 10vw;
 }
 
+@media screen and (min-width: 801px) {
+  .container {
+    flex-direction: row;
+  }
+
+  .introduction {
+    width: 50%;
+  }
+
+  .actions {
+    width: 25%;
+  }
+
+  .button {
+    width: 15vw;
+    min-width: 15vw;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .introduction, .actions {
+    width: 95%;
+  }
+
+  .button {
+    width: 50vw;
+    min-width: 50vw;
+  }
+
+}
+
 .introduction, .actions {
   flex-direction: column;
 }
 
 .introduction {
   word-break: break-word;
-  width: 50%;
+
   min-height: 40vh;
   height: fit-content;
 
@@ -68,7 +103,6 @@
 
 .actions {
   justify-content: start;
-  width: 25%;
   gap: 4vh;
   min-height: 40vh;
   height: fit-content;
@@ -80,14 +114,12 @@
   color: var(--primary-color);
   text-align: center;
   align-content: center;
-  width: 15vw;
-  height: fit-content;
 
-  min-width: 15vw;
-  min-height: 7vh;
   border-radius: var(--radius);
   background-color: var(--secondary-color);
   word-break: break-word;
+  min-height: 7vh;
+
 }
 
 .button:hover