wip migration

assets/scss/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/scss/core/mixins.scss

@@ -0,0 +1,19 @@
+@use 'variables' as *;
+
+@mixin mobile {
+  @media all and (max-width: 767px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media all and (min-width: $tablet) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media all and (min-width: $desktop) {
+    @content;
+  }
+}

assets/scss/core/variables.scss

@@ -0,0 +1,46 @@
+/* COLORS */
+$color-navy: #374493;
+$color-lightblue: #eff9ff;
+$color-orange: #ff666e;
+$color-green: #8cead8;
+$color-dark-green: #22c6a9;
+$color-darker-green: #0c505e;
+$color-light-green: #bbf3e7;
+$color-lighter-green: #ebfff9;
+$color-lavender: #958bff;
+$color-light: #ffffff;
+
+$color-grey-inputs: #f3f3f3;
+$color-greylighter: #d6d5d5;
+$color-grey-nav: #e9e9e9;
+$color-grey-inputs-border: #b3b3b3;
+$color-greylayout: #807f7f;
+$color-greylink: #999999;
+$color-greytext: #808080;
+$color-grey-darker: #3b3b3b;
+
+$color-facebook: #3351a3;
+$color-google: #346cf1;
+$color-error: crimson;
+
+/* FONT SIZE */
+$xxl: 1.562rem; //25px
+$xl: 1.25rem; //20px
+$l: 1.125rem; //18px
+$m: 1rem; //16px
+$s: 0.875rem; //14px
+$xs: 0.75rem; //12px
+$xxs: 0.625rem; // 10px
+
+/* FONTS */
+$font-primary: 'Poppins', Arial, sans-serif;
+$font-secondary: 'Noto Sans', Arial, sans-serif;
+
+/* FONT WEIGHT */
+$regular: 400;
+$medium: 600;
+$bold: 700;
+
+/* BREAKPOINTS */
+$tablet: 768px;
+$desktop: 1200px;

assets/scss/main.scss

@@ -0,0 +1,60 @@
+//all other custom scss files or css should be added here
+@use 'core/variables' as *;
+@use 'core/mixins' as *;
+
+// Fonts
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~/assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('~/assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('~/assets/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~/assets/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~/assets/fonts/Noto_Sans/NotoSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('~/assets/fonts/Noto_Sans/NotoSans-Bold.ttf') format('truetype');
+}
+
+$font-family-sans-serif: 'Poppins';
+$blue: #374493;
+
+
+html {
+  font-size: min(max(1rem, 4vw), 16px);
+}