style: Extract global body styles to main.css and update TeamCard component layout and background.

Author: thelooter

assets/css/main.css

@@ -0,0 +1,8 @@
+body {
+    background-color: #111111;
+}
+@media (prefers-color-scheme: light) {
+    body {
+        background-color: #dddddd;
+    }
+}

components/team/TeamCard.vue

@@ -23,7 +23,7 @@ defineProps({
 
 <template>
     <div
-        class="mx-auto my-2 rounded bg-white bg-gradient-to-b from-green-500 to-green-400 p-2 text-center shadow-xl transition duration-200 ease-in-out hover:scale-105 max-md:mx-6 dark:from-green-800 dark:to-green-700"
+        class="h-full flex flex-col rounded bg-green-500 bg-gradient-to-b from-green-500 to-green-400 p-2 text-center shadow-xl transition duration-200 ease-in-out hover:scale-105 max-md:mx-6 dark:bg-green-800 dark:from-green-800 dark:to-green-700"
     >
         <img class="mx-auto mt-4 w-1/3 rounded-full shadow-xl max-md:w-1/4" :src="image" alt="pic" />
         <h2 class="mt-2 text-lg font-bold dark:text-white">{{ name }}</h2>

nuxt.config.ts

@@ -46,7 +46,7 @@ export default defineNuxtConfig({
         },
     },
 
-    css: ["@fortawesome/fontawesome-svg-core/styles.css"],
+    css: ["@fortawesome/fontawesome-svg-core/styles.css", "~/assets/css/main.css"],
 
     build: {
         transpile: [

pages/index.vue

@@ -27,13 +27,4 @@ useSeoMeta({
 });
 </script>
 
-<style>
-body {
-    background-color: #111111;
-}
-@media (prefers-color-scheme: light) {
-    body {
-        background-color: #dddddd;
-    }
-}
-</style>
+