css: make TitleBox ready for smartphone

client/src/assets/css/components.scss

@@ -1,4 +1,5 @@
 @import './colors.scss';
+@import './media.scss';
 
 $font-primary: 'Wendy One';
 $font-secondary: 'Dosis';

client/src/assets/css/media.scss

@@ -0,0 +1,3 @@
+$phone-width: 560px;
+$phone-max-width: 767px;
+$tablet-width: 768px;

client/src/components/TitleBox.vue

@@ -19,7 +19,11 @@
     padding: 80px 0;
     display: flex;
     justify-content: center;
+
+    @media (max-width: $phone-max-width) {
+      padding: 40px 0;      
     }
+}
 
   &__titleborderbox1,
   &__titleborderbox2,
@@ -36,6 +40,11 @@
     justify-content: center;
     align-items: center;
     z-index: 3;
+
+    @media (max-width: $phone-max-width) {
+      width: 260px;
+      height: 140px;
+    }
   }
 
   &__titleborderbox2 {
@@ -44,7 +53,13 @@
     width: 720px;
     height: 120px;
     z-index: 2;
+
+    @media (max-width: $phone-max-width) {
+      top: 75px;
+      width: 300px;
+      height: 80px;      
     }
+}
 
   &__titleborderbox3 {
     position: absolute;
@@ -52,6 +67,11 @@
     width: 760px;
     height: 40px;
     z-index: 1;
+
+    @media (max-width: $phone-max-width) {
+      top: 95px;
+      width: 340px;
+    }
   }
 
   &__title {
@@ -59,6 +79,11 @@
     font-family: $font-primary;
     color: $box-primary-text-color;
     text-align: center;
+
+    @media (max-width: $phone-max-width) {
+      font-size: 32px;      
     }
+  }
+
 }
 </style>