I hate responsive design

front/src/assets/base.css

@@ -5,7 +5,6 @@
     --header-color : #FCFCFC;
     --background-color : rgba(252, 252, 252, 0.43);
     --radius : 3px;
-    --font-size : 1.3rem;
 }
 
 *
@@ -15,4 +14,19 @@
     font-family: 'Afacad Flux', sans-serif;
     transition: 0.3s all;
     box-sizing: border-box;
-}
+}
+
+@media screen and (min-width: 1001px) {
+    :root
+    {
+        --font-size : 1.3rem;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    :root
+    {
+        --font-size : 1.1rem;
+    }
+}
+

front/src/assets/main.css

@@ -10,7 +10,6 @@ body
 {
     background-color: white;
     font-size: var(--font-size);
-    overflow: hidden;
 }
 
 .layout
@@ -27,21 +26,22 @@ body
     align-items: center;
     height: 100%;
     max-height: 100%;
-    gap: 10vw;
     width: 80%;
 
 }
 
-@media screen and (min-width: 801px) {
+@media screen and (min-width: 1001px) {
     .container
     {
         flex-direction: row;
+        gap: 10vw;
     }
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1000px) {
     .container {
         flex-direction: column;
+        gap: 50px;
     }
 }
 

front/src/components/TextBlock.vue

@@ -16,7 +16,6 @@
 
   justify-content: center;
   align-items: center;
-  /*justify-content: start;*/
 
   word-break: break-word;
   height: fit-content;
@@ -26,17 +25,16 @@
   background: rgb(239, 239, 239);
 }
 
-
-@media screen and (max-width: 800px) {
+@media screen and (min-width: 1001px) {
   .text-block {
-    padding: 5px 15px 5px 15px;
+    padding: 30px;
+    width: 50%;
   }
 }
 
-@media screen and (min-width: 801px) {
+@media screen and (max-width: 1000px) {
   .text-block {
-    padding: 10px 30px 10px 30px;
+    padding: 10px;
   }
 }
-
 </style>

front/src/layouts/LayoutDefault.vue

@@ -64,7 +64,7 @@ nav p {
   height: fit-content;
 }
 
-@media screen and (min-width: 801px) {
+@media screen and (min-width: 1001px) {
 
   ::v-deep(nav .button) {
     width: 5vw;
@@ -74,7 +74,7 @@ nav p {
   }
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1000px) {
 
   ::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: 801px) {
+@media screen and (min-width: 1001px) {
 
   .title {
     width: 50%;
@@ -52,7 +52,7 @@ import NavLink from "@/components/NavLink.vue";
   }
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1000px) {
 
   .title, .event-form {
     width: 100%;

front/src/views/ErrorView.vue

@@ -4,10 +4,12 @@ import TextBlock from "@/components/TextBlock.vue";
 </script>
 
 <template>
-  <TextBlock>
-    <h1>Oopsie</h1>
-    <p>Something went wrong</p>
-  </TextBlock>
+  <div class="container">
+    <TextBlock>
+      <h1>Oopsie</h1>
+      <p>Something went wrong</p>
+    </TextBlock>
+  </div>
 
 </template>
 
@@ -15,8 +17,6 @@ import TextBlock from "@/components/TextBlock.vue";
 
 .text-block {
   border-left: solid 4px red;
-  width: 35%;
-  height: 35%;
 }
 
 </style>

front/src/views/HomeView.vue

@@ -40,7 +40,6 @@ import TextBlock from "@/components/TextBlock.vue";
 
 .introduction p
 {
-  width: 80%;
   text-align: justify;
 }
 
@@ -67,13 +66,13 @@ import TextBlock from "@/components/TextBlock.vue";
 .actions-group::after {
   content: "";
   position: absolute;
-  width: 5%;
-  height: 15%;
+  width: 50px;
+  height: 50px;
   border: 4px solid black;
 }
 
 .actions-group::before {
-  top: 0;
+  top: -20px;
   left: 0;
   border-radius: var(--radius);
   border-right: none;
@@ -81,60 +80,59 @@ import TextBlock from "@/components/TextBlock.vue";
 }
 
 .actions-group::after {
-  bottom: 0;
+  bottom: -20px;
   right: 0;
   border-radius: var(--radius);
   border-left: none;
   border-top: none;
 }
 
-
 .button {
   width: 50%;
   min-width: 50%;
 }
 
 /* MEDIA QUERIES */
-@media screen and (min-width: 801px) {
-
-  .introduction {
-    padding: 0 0 1vw 0;
-    width: 50%;
-    min-height: 40vh;
-  }
+@media screen and (min-width: 1001px) {
 
   .actions-group {
     width: 35%;
-    min-height: 40vh;
+  }
+
+  .introduction p
+  {
+    width: 90%;
+    margin-bottom: 0;
   }
 
   .introduction h1
   {
     font-size: 4rem;
-    margin-bottom: 5px;
+    margin: 0 5px 5px 5px;
   }
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1000px) {
 
   .introduction, .actions-group {
     width: 100%;
   }
 
-  .introduction {
-    height: 60%;
-  }
-
   .actions-group {
     height: 40%;
   }
 
+  .introduction p
+  {
+    width: 95%;
+    margin-bottom: 0;
+  }
+
   .introduction h1
   {
     font-size: 2.5rem;
-    margin: 5px;
+    margin: 0 5px 5px 5px;
   }
 }
 
-
 </style>