more design work

index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://kit.fontawesome.com/a41c2c1668.js" crossorigin="anonymous"></script>
     <title>Denver ARTCC, VATSIM Network</title>
 </head>
 

package.json

@@ -11,14 +11,12 @@
     "lint:fix": "eslint src --ext .ts,.js,.vue --fix"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-brands-svg-icons": "^6.2.0",
-    "@fortawesome/free-regular-svg-icons": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/vue-fontawesome": "^3.0.1",
     "@materializecss/materialize": "^1.1.0",
+    "@popperjs/core": "^2.11.6",
+    "bootstrap": "^5.2.1",
     "core-js": "^3.25.1",
     "pinia": "^2.0.22",
+    "tailwind-loves-sass": "^1.1.3",
     "vue": "^3.2.37",
     "vue-router": "4"
   },
@@ -32,6 +30,7 @@
     "@volar/vue-language-service": "^0.38.9",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
+    "autoprefixer": "^10.4.10",
     "eslint": "^8.17.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -40,9 +39,10 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^9.2.0",
-    "node-sass": "^7.0.3",
+    "postcss": "^8.4.16",
     "prettier": "^2.6.2",
     "sass": "^1.54.9",
+    "tailwindcss": "^3.1.8",
     "typescript": "^4.6.4",
     "vite": "^3.1.0",
     "vue-tsc": "^0.40.4"

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/assets/css/_variables.scss

@@ -0,0 +1,32 @@
+:root {
+    --color-primary: #5138ee;
+    --color-primary-dark: #1c0b87;
+    --color-primary-light: #7c69f2;
+    --color-primary-text: #22262a;
+    --color-secondary: #090524;
+    --color-secondary-light: #16122f;
+    --color-heading: #000000;
+    --color-heading-light: #333333;
+}
+
+.theme-salmon {
+    --color-primary: #FF7D6B;
+    --color-primary-dark: #e06a5b;
+    --color-primary-light: #ff8e80;
+    --color-primary-text: #fefefe;
+    --color-secondary: #0d0050;
+    --color-secondary-light: #2c2167;
+    --color-heading: #000000;
+    --color-heading-light: #333333;
+}
+
+.theme-blue {
+    --color-primary: #250c83;
+    --color-primary-dark: #e06a5b;
+    --color-primary-light: #ff8e80;
+    --color-primary-text: #fefefe;
+    --color-secondary: #0d0050;
+    --color-secondary-light: #2c2167;
+    --color-heading: #000000;
+    --color-heading-light: #333333;
+}

src/assets/css/style.scss

@@ -0,0 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+
+@import "tailwind-loves-sass";
+@import "./tailwind.css";
+@import "./swiper.css";
+@import "variables";
+
+$colorado-blue: rgb(0, 39, 102);
+$colorado-red: #bf0a30;
+$colorado-yellow: #ffd700;