better responsivness #2416

src/assets/main.scss

@@ -14,10 +14,10 @@ body{
   font-size: 16px;
 }
 
-#app{
-  min-width: 1280px;
-  min-height: 800px;
-}
+// #app{
+//   min-width: 1280px;
+//   min-height: 800px;
+// }
 
 #app>header#header{
   // background-color: $front;
@@ -115,7 +115,7 @@ body{
     ul{
       display: flex;
       flex-flow: row;
-      gap: 1em;
+      // gap: 1em;
       pointer-events: none;
       li{
         list-style: none;
@@ -147,7 +147,7 @@ body{
       }
       
     }
-    @media screen and (max-width: 1300px) {
+    @media screen and (max-width: 1500px) {
       ul{
         gap: 0.5em;
         li{
@@ -179,16 +179,31 @@ body{
     }
   }
 
-  $cartouch_width : 450px;
+  $cartouch_width_full : 450px;
+  $cartouch_width_medium: 350px;
+  $cartouch_width_small: 250px;
+
   @mixin font_questions{
     font-size: 1em;
     font-weight: 500;
     line-height: 1.4;
+    @media screen and (max-width: 1500px) {
+      font-size: 0.882em;
+    }
+    @media screen and (max-width: 880px) {
+      font-size: 0.756em;
+    }
   }
   @mixin font_reponses{
     font-weight: 100;
     font-size: 0.882em;
     line-height: 1.4;
+    @media screen and (max-width: 1500px) {
+      font-size: 0.756em;
+    }
+    @media screen and (max-width: 880px) {
+      font-size: 0.693em;
+    }
   }
   #content{
     display: flex;
@@ -196,7 +211,7 @@ body{
     @mixin main-cartouche{
       background-color: rgba(255, 255, 255, 1);
       box-sizing: border-box;
-      width:$cartouch_width;
+      width:$cartouch_width_full;
       height: 100%;
       padding: 2rem 2rem 1rem;
       overflow-y: auto;
@@ -204,6 +219,14 @@ body{
       //
       display: flex;
       flex-direction: column;
+      @media screen and (max-width: 1500px) {
+        width: $cartouch_width_medium;
+        padding: 1rem 1rem 0.5rem;
+      }
+      @media screen and (max-width: 880px) {
+        width: $cartouch_width_small;
+        padding: 0.5rem 0.5rem 0.5rem;
+      }
     }
     section.static{
       @include main-cartouche();
@@ -721,7 +744,7 @@ body{
       pointer-events: none;
       overflow: hidden;
       top: 0; left: 0;
-      width: calc(100vw - $cartouch_width - 0.5rem);
+      width: calc(100vw - $cartouch_width_full - 0.5rem);
       height: 100vh;
       div{
         pointer-events: all;
@@ -811,6 +834,12 @@ body{
         border-radius: 3px;
         // border: #fff 1px solid;
       }
+      @media screen and (max-width: 1500px) {
+        width: $cartouch_width_medium
+      }
+      @media screen and (max-width: 880px) {
+        width: $cartouch_width_small;
+      }
     }
     &:not(.visible){
       display: none;