:lipstick: add sass global files main and variables, tested breakpoints with colors and font sizes

frontend/assets/sass/main.scss

@@ -0,0 +1 @@
+@import 'variables';

frontend/assets/sass/variables.scss

@@ -0,0 +1,48 @@
+// Color Variables
+$yellow: #F7F5A6;
+$light-green: #49E64D;
+$dark-green: #4D9127;
+$red: #FF3660;
+$light-blue: #05DBF2;
+$dark-blue: #183770;
+$dark-grey: #1F2024;
+$grey: #4C5264;
+$light-grey: #D5D5D5;
+$black: #000;
+
+// Define the base font size
+$base-font-size: 14px;
+
+// Define breakpoints
+$mobile: 350px;
+$tablet: 768px;
+$desktop: 960px;
+
+// Define font sizes for each breakpoint
+$mobile-font-size: $base-font-size;
+$tablet-font-size: $base-font-size * 1.2;
+$desktop-font-size: $base-font-size * 1.4;
+
+// Set default font size
+html {
+    font-size: $base-font-size;
+}
+
+// Media queries for font sizes
+@media (min-width: $mobile) {
+    html {
+        font-size: $mobile-font-size;
+    }
+}
+
+@media (min-width: $tablet) {
+    html {
+        font-size: $tablet-font-size;
+    }
+}
+
+@media (min-width: $desktop) {
+    html {
+        font-size: $desktop-font-size;
+    }
+}

frontend/src/App.vue

@@ -73,6 +73,7 @@ export default {
 </script>
 
 <style lang="sass">
+@import '../assets/sass/main'
 #app > .w-app > main
     position: relative
     top: 50px

frontend/src/components/PairsList.vue

@@ -40,22 +40,23 @@ const showMenu = ref(false)
 </script>
 
 <style lang="sass">
+@import '../assets/sass/main'
 .pairs-list
     color: #fff
     article
-        font-family: 'Century Gothic'
+        font-family: 'Source Pro'
         .dot--icon
             width:12px
             height:12px
             margin: 11px
             border-radius:50%
-            background-color:#60C3FF
+            background-color:$light-blue
         .avatar
             width:40px
             height:40px
             margin: 11px
             border-radius: 6px
-            background-color:#D5D5D5
+            background-color:$light-blue
         .idCard
             color: #fff
             margin: 11px
@@ -64,5 +65,5 @@ const showMenu = ref(false)
             p
                 font-size: 14px
 .w-menu--card
-    background-color: #000000 !important
+    background-color: $black !important
 </style>

frontend/src/components/ProfileCard.vue

@@ -134,19 +134,21 @@ const onPass = async () => {
 </script>
 
 <style lang="sass">
+@import '../assets/sass/main'
+
 .profile-card-list--card
-    background-color: #000
+    background-color: $black
     color: #fff
     width: 100%
     max-width: 450px
     margin: 11px auto
     header > .w-button
-        background-color: #116006
+        background-color: $dark-green
         color: #fff
     footer
         margin-bottom: 22px
         p
-            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+            font-family: Source Pro, CenturyGothic, AppleGothic, sans-serif
             margin: 11px auto
             padding: 0 7px
             line-height: 1.619em