From cdfd929d2710762cc198f2d54a7aba6d21ea35b5 Mon Sep 17 00:00:00 2001
From: Laurent <58115082+naaturel@users.noreply.github.com>
Date: Sat, 1 Mar 2025 12:20:18 +0100
Subject: [PATCH] Fix some responsive rules

---
 deploy.sh                     |   2 +
 src/assets/base.css           |  12 +---
 src/components/NavLink.vue    |  33 +++++++--
 src/layouts/LayoutDefault.vue |  56 ++++++++-------
 src/views/HomeView.vue        | 128 ++++++++++++++++------------------
 5 files changed, 123 insertions(+), 108 deletions(-)
 create mode 100644 deploy.sh

diff --git a/deploy.sh b/deploy.sh
new file mode 100644
index 0000000..1c55b12
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,2 @@
+docker build -t letsmeet .
+docker run -d -p 8080:8080 letsmeet
\ No newline at end of file
diff --git a/src/assets/base.css b/src/assets/base.css
index baa6f2c..3a05f5c 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -5,19 +5,9 @@
     --header-color : #FCFCFC;
     --background-color : rgba(252, 252, 252, 0.43);
     --radius : 3px;
+    --font-size : 1.3rem;
 }
 
-@media screen and (min-width: 601px) {
-    :root {
-        --font-size : 1.5rem;
-    }
-}
-
-@media screen and (max-width: 600px) {
-    :root {
-        --font-size : 0.8rem;
-    }
-}
 
 *
 {
diff --git a/src/components/NavLink.vue b/src/components/NavLink.vue
index c1467dc..eabebf3 100644
--- a/src/components/NavLink.vue
+++ b/src/components/NavLink.vue
@@ -1,24 +1,49 @@
 <script setup lang="ts">
+
+const props = defineProps<{
+  path: string;
+  description: string;
+}>();
+
 </script>
 
 <template>
-  <router-link to="/create"><div class="button">Create an event</div></router-link>
+  <router-link :to=path><div class="button">{{ description }}</div></router-link>
 </template>
 
 <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;
   align-content: center;
-  min-width: 15vw;
-  min-height: 7vh;
+
   border-radius: var(--radius);
   background-color: var(--secondary-color);
+  word-break: break-word;
+  min-height: 7vh;
 }
 
 .button:hover
 {
-  background-color: rgba(255, 255, 255, 0.8);
+  transform: scale(1.1);
+  background-color: var(--header-color);
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
+
 </style>
diff --git a/src/layouts/LayoutDefault.vue b/src/layouts/LayoutDefault.vue
index 77c1c35..03d483a 100644
--- a/src/layouts/LayoutDefault.vue
+++ b/src/layouts/LayoutDefault.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 
+import NavLink from "@/components/NavLink.vue";
 </script>
 
 <template>
@@ -8,8 +9,9 @@
     <nav class="nav">
       <p>Let's<br>Meet</p>
       <div class="nav-actions">
-        <router-link to="/login"><div class="button">Login</div></router-link>
-        <router-link to="/about"><div class="button">About</div></router-link>
+        <NavLink path="/" description="Home"></NavLink>
+        <NavLink path="/login" description="Log in"></NavLink>
+        <NavLink path="/about" description="About"></NavLink>
       </div>
     </nav>
 
@@ -35,12 +37,13 @@ nav {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  min-height: 5vw;
+  min-height: 10vh;
   border: 1px solid;
   border-radius: var(--radius);
   background-color: var(--header-color);
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   padding: 0 3vw 0 2vw;
+  margin-bottom: 20px;
 }
 
 nav p {
@@ -54,6 +57,30 @@ nav p {
   gap: 1vw;
 }
 
+::v-deep(nav .button) {
+  font-size: calc(var(--font-size) * 0.8);
+  height: fit-content;
+}
+
+@media screen and (min-width: 951px) {
+
+  ::v-deep(nav .button) {
+    width: 5vw;
+
+    min-width: 5vw;
+    min-height: 4vh;
+  }
+}
+
+@media screen and (max-width: 950px) {
+
+  ::v-deep(nav .button) {
+    width: 5vw;
+
+    min-width: 10vw;
+    min-height: 3vh;
+  }
+}
 
 .main {
   display: flex;
@@ -63,27 +90,4 @@ nav p {
   flex-grow: 1;
 }
 
-.button {
-  color: var(--primary-color);
-  text-align: center;
-  align-content: center;
-  width: 5vw;
-  height: fit-content;
-
-  min-width: 5vw;
-  min-height: 4vh;
-  border-radius: var(--radius);
-  background-color: var(--secondary-color);
-
-  word-break: break-word;
-}
-
-.button:hover
-{
-  transform: scale(1.1);
-  background-color: var(--header-color);
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
-}
-
-
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3200127..f79dc66 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 
+import NavLink from "@/components/NavLink.vue";
 </script>
 
 <template>
@@ -7,13 +8,20 @@
   <div class="container">
     <div class="introduction">
       <h1>Welcome !</h1>
-      <p>This website is currently under <span class="colored-text">development</span> and might look ugly as fuck</p>
+      <p>
+        This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
+        bla bla bla I'm just writting 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>
     </div>
 
       <div class="actions">
         <h1>Meet up now !</h1>
-        <router-link to="/create"><div class="button">Create</div></router-link>
-        <router-link to="/join"><div class="button">Join</div></router-link>
+        <NavLink path="/create" description="Join"></NavLink>
+        <NavLink path="/join" description="Create"></NavLink>
     </div>
   </div>
 
@@ -35,49 +43,15 @@
   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;
+  padding: 30px;
+  min-width: 250px;
 }
 
 .introduction {
+  justify-content: start;
   word-break: break-word;
-
-  min-height: 40vh;
   height: fit-content;
 
   border-radius: var(--radius);
@@ -85,15 +59,10 @@
   background: rgb(239, 239, 239);
 }
 
-.introduction h1
-{
-  font-size: 4rem;
-}
-
 .introduction p
 {
   width: 80%;
-  text-align: center;
+  text-align: justify;
 }
 
 .colored-text
@@ -104,32 +73,12 @@
 .actions {
   justify-content: start;
   gap: 4vh;
-  min-height: 40vh;
   height: fit-content;
   border-radius: var(--radius);
   filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0));
+  margin-bottom: 5vh;
 }
 
-.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));
-}
-
-
 .actions::before,
 .actions::after {
   content: "";
@@ -155,4 +104,49 @@
   border-top: none;
 }
 
+/* MEDIA QUERIES */
+@media screen and (min-width: 1500px) {
+  .container {
+    flex-direction: row;
+  }
+
+  .introduction {
+    width: 50%;
+    min-height: 40vh;
+  }
+
+  .actions {
+    width: 25%;
+    min-height: 35vh;
+  }
+
+  .introduction h1
+  {
+    font-size: 4rem;
+  }
+}
+
+@media screen and (max-width: 1501px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .introduction, .actions {
+    width: 95%;
+  }
+
+  .introduction {
+    min-height: 25vh;
+  }
+
+  .actions {
+    min-height: 40vh;
+  }
+
+  .introduction h1
+  {
+    font-size: 3rem;
+  }
+}
+
 </style>