Add responsive rules

src/assets/main.css

@@ -17,6 +17,25 @@ body
     background: var(--background-color);
 }
 
+.container
+{
+    display: flex;
+    padding: 0 1vw 3vh 1vw;
+}
+
+@media screen and (min-width: 1501px) {
+    .container
+    {
+        flex-direction: row;
+    }
+}
+
+@media screen and (max-width: 1500px) {
+    .container {
+        flex-direction: column;
+    }
+}
+
 .colored-text
 {
     color: var(--secondary-color);

src/components/Calendar.vue

@@ -105,11 +105,15 @@
 
 .day-picker, .day-names {
   display: grid;
-  grid-template-columns: repeat(7, 2fr);
+  grid-template-columns: repeat(7, 1fr);
   row-gap: 20px;
   width: 100%;
 }
 
+.day-picker {
+  grid-template-rows: repeat(6, 1fr);
+}
+
 .day-names {
   padding: 20px 0 20px 0;
 }

src/components/NavLink.vue

@@ -13,21 +13,6 @@ const props = defineProps<{
 
 <style scoped>
 
-@media screen and (min-width: 801px) {
-  .button {
-    width: 15vw;
-    min-width: 15vw;
-  }
-}
-
-@media screen and (max-width: 800px) {
-  .button {
-    width: 50vw;
-    min-width: 50vw;
-  }
-
-}
-
 .button {
   color: var(--primary-color);
   text-align: center;

src/components/TextBlock.vue

@@ -3,25 +3,18 @@
 </script>
 
 <template>
-  <div class="text-block">
+    <div class="text-block">
-    <slot></slot>
+      <slot></slot>
-  </div>
+    </div>
 </template>
 
 <style scoped>
 
 .text-block {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100%;
-  padding: 0 1vw 0 1vw;
-}
-
-.text-block {
-  flex-direction: column;
-  padding: 30px;
-  min-width: 250px;
 }
 
 .text-block {
@@ -34,4 +27,16 @@
   background: rgb(239, 239, 239);
 }
 
+@media screen and (max-width: 1501px) {
+  .text-block {
+    padding: 5px 15px 5px 15px;
+  }
+}
+
+@media screen and (min-width: 1500px) {
+  .text-block {
+    padding: 10px 30px 10px 30px;
+  }
+}
+
 </style>

src/views/CreateView.vue

@@ -2,35 +2,65 @@
 
 import Calendar from "@/components/Calendar.vue";
 import TextBlock from "@/components/TextBlock.vue";
+import NavLink from "@/components/NavLink.vue";
 </script>
 
 <template>
+
   <div class="container">
-    <TextBlock class="text-block">
+    <TextBlock class="title">
       <h1>Create an <span class="colored-text">event</span></h1>
     </TextBlock>
-    <Calendar class="calendar" />
+    <div class="event-form">
+      <Calendar class="calendar"/>
+      <NavLink path="/create" description="Create" class="create-button"></NavLink>
+    </div>
   </div>
+
 </template>
 
 <style scoped>
 
 .container
 {
-  display: flex;
-  flex-direction: row;
   width: 80%;
   gap: 10vw;
 }
 
-.text-block
+.event-form {
-{
+  display: flex;
-  width: 50%;
+  flex-direction: column;
+  width: 45%;
+  gap: 20px;
 }
 
-.calendar
+/* MEDIA QUERIES */
-{
+@media screen and (min-width: 1501px) {
-  width: 45%;
+
+  .title {
+    width: 50%;
+  }
+
+  .title h1
+  {
+    font-size: 4rem;
+  }
+
+  .calendar {
+    width: 100%;
+    min-width: 100%;
+  }
+}
+
+@media screen and (max-width: 1500px) {
+
+  .title, .event-form {
+    width: 100%;
+  }
+
+  .title {
+    height: fit-content;
+  }
 }
 
 </style>

src/views/HomeView.vue

@@ -21,8 +21,8 @@ import TextBlock from "@/components/TextBlock.vue";
 
       <div class="actions-group">
         <h1>Meet up <span class="colored-text">now</span> !</h1>
-        <NavLink path="/create" description="Create"></NavLink>
+        <NavLink path="/create" description="Create" class="button"></NavLink>
-        <NavLink path="/join" description="Join"></NavLink>
+        <NavLink path="/join" description="Join" class="button"></NavLink>
     </div>
   </div>
 
@@ -36,7 +36,6 @@ import TextBlock from "@/components/TextBlock.vue";
   justify-content: center;
   align-items: center;
   height: 100%;
-  padding: 0 1vw 0 1vw;
 }
 
 .container {
@@ -52,7 +51,6 @@ import TextBlock from "@/components/TextBlock.vue";
 
 .actions-group {
   flex-direction: column;
-  padding: 30px;
   min-width: 250px;
 }
 
@@ -96,19 +94,17 @@ import TextBlock from "@/components/TextBlock.vue";
 }
 
 /* MEDIA QUERIES */
-@media screen and (min-width: 1500px) {
+@media screen and (min-width: 1501px) {
-  .container {
-    flex-direction: row;
-  }
 
   .introduction {
+    padding: 0 0 1vw 0;
     width: 50%;
     min-height: 40vh;
   }
 
   .actions-group {
-    width: 25%;
+    width: 35%;
-    min-height: 35vh;
+    min-height: 40vh;
   }
 
   .introduction h1
@@ -117,13 +113,10 @@ import TextBlock from "@/components/TextBlock.vue";
   }
 }
 
-@media screen and (max-width: 1501px) {
+@media screen and (max-width: 1500px) {
-  .container {
-    flex-direction: column;
-  }
 
   .introduction, .actions-group {
-    width: 95%;
+    width: 100%;
   }
 
   .introduction {
@@ -140,4 +133,19 @@ import TextBlock from "@/components/TextBlock.vue";
   }
 }
 
+@media screen and (min-width: 801px) {
+  .button {
+    width: 15vw;
+    min-width: 15vw;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .button {
+    width: 50vw;
+    min-width: 50vw;
+  }
+
+}
+
 </style>