Fix responsive shits

front/README.md

@@ -1,4 +1,2 @@
 # Hi there !
-
-Inspired by when2meet, Let's meet is a free and open-source app that allows you and your friends to find a date to meet. 
-From now on, there is no need to spend hours and hours trying to find a suitable day for everyone.
+Inspired by when2meet, Let's meet is a free and open-source app that allows you and your friends to find a date to meet. From now on, there is no need to spend hours and hours trying to find a suitable day for everyone.

front/src/assets/base.css

@@ -8,7 +8,6 @@
     --font-size : 1.3rem;
 }
 
-
 *
 {
     color: var(--primary-color);

front/src/assets/main.css

@@ -10,6 +10,7 @@ body
 {
     background-color: white;
     font-size: var(--font-size);
+    overflow: hidden;
 }
 
 .layout
@@ -21,16 +22,24 @@ body
 {
     display: flex;
     padding: 0 1vw 3vh 1vw;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    height: 100%;
+    max-height: 100%;
+    gap: 10vw;
+    width: 80%;
+
 }
 
-@media screen and (min-width: 1501px) {
+@media screen and (min-width: 801px) {
     .container
     {
         flex-direction: row;
     }
 }
 
-@media screen and (max-width: 1500px) {
+@media screen and (max-width: 800px) {
     .container {
         flex-direction: column;
     }

front/src/components/NavLink.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 
+import Button from "@/components/Button.vue";
+
 const props = defineProps<{
   path: string;
   description: string;
@@ -8,27 +10,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <router-link :to=path><div class="button">{{ description }}</div></router-link>
+  <router-link :to=path>
+    <Button :description="description"/>
+  </router-link>
 </template>
 
 <style scoped>
 
-.button {
-  color: var(--primary-color);
-  text-align: center;
-  align-content: center;
-
-  border-radius: var(--radius);
-  background-color: var(--secondary-color);
-  word-break: break-word;
-  min-height: 7vh;
-}
-
-.button:hover
-{
-  transform: scale(1.1);
-  background-color: var(--header-color);
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
-}
-
 </style>

front/src/components/TextBlock.vue

@@ -27,13 +27,13 @@
 }
 
 
-@media screen and (max-width: 1501px) {
+@media screen and (max-width: 800px) {
   .text-block {
     padding: 5px 15px 5px 15px;
   }
 }
 
-@media screen and (min-width: 1500px) {
+@media screen and (min-width: 801px) {
   .text-block {
     padding: 10px 30px 10px 30px;
   }

front/src/layouts/LayoutDefault.vue

@@ -64,7 +64,7 @@ nav p {
   height: fit-content;
 }
 
-@media screen and (min-width: 951px) {
+@media screen and (min-width: 801px) {
 
   ::v-deep(nav .button) {
     width: 5vw;
@@ -74,7 +74,7 @@ nav p {
   }
 }
 
-@media screen and (max-width: 950px) {
+@media screen and (max-width: 800px) {
 
   ::v-deep(nav .button) {
     width: 7vw;

front/src/views/CreateView.vue

@@ -35,7 +35,7 @@ import NavLink from "@/components/NavLink.vue";
 }
 
 /* MEDIA QUERIES */
-@media screen and (min-width: 1501px) {
+@media screen and (min-width: 801px) {
 
   .title {
     width: 50%;
@@ -52,7 +52,7 @@ import NavLink from "@/components/NavLink.vue";
   }
 }
 
-@media screen and (max-width: 1500px) {
+@media screen and (max-width: 800px) {
 
   .title, .event-form {
     width: 100%;

front/src/views/HomeView.vue

@@ -31,18 +31,13 @@ import TextBlock from "@/components/TextBlock.vue";
 
 <style scoped>
 
-.container, .actions-group {
+.actions-group {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }
 
-.container {
-  width: 80%;
-  gap: 10vw;
-}
-
 .introduction p
 {
   width: 80%;
@@ -93,8 +88,14 @@ import TextBlock from "@/components/TextBlock.vue";
   border-top: none;
 }
 
+
+.button {
+  width: 50%;
+  min-width: 50%;
+}
+
 /* MEDIA QUERIES */
-@media screen and (min-width: 1501px) {
+@media screen and (min-width: 801px) {
 
   .introduction {
     padding: 0 0 1vw 0;
@@ -110,42 +111,30 @@ import TextBlock from "@/components/TextBlock.vue";
   .introduction h1
   {
     font-size: 4rem;
+    margin-bottom: 5px;
   }
 }
 
-@media screen and (max-width: 1500px) {
+@media screen and (max-width: 800px) {
 
   .introduction, .actions-group {
     width: 100%;
   }
 
   .introduction {
-    min-height: 25vh;
+    height: 60%;
   }
 
   .actions-group {
-    min-height: 40vh;
+    height: 40%;
   }
 
   .introduction h1
   {
-    font-size: 3rem;
+    font-size: 2.5rem;
+    margin: 5px;
   }
 }
 
-@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>

front/src/views/JoinView.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
 
 import TextBlock from "@/components/TextBlock.vue";
+import Button from "@/components/Button.vue";
+import InputField from "@/components/InputField.vue";
 </script>
 
 <template>
 
-  <TextBlock>
-    <h1>Join an event</h1>
-    <p>
-      This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
-      bla bla bla I'm just writing things nobody will read to fill the space and see how it looks.
-    </p>
-    <p>
-      Yes I know i could have use
-      a Lorem Ipsum but it seems more natural with words everyone can understand
-    </p>
-  </TextBlock>
+  <div class="container">
+    <TextBlock>
+      <h1>Join an <span class="colored-text">event</span></h1>
+    </TextBlock>
+
+    <div class="actions-group">
+      <InputField/>
+      <Button description="Go for it"></Button>
+    </div>
+
+  </div>
 
 </template>