correction style

Author: JodieAddis

astro.config.mjs

@@ -6,6 +6,6 @@ import react from "@astrojs/react";
 
 export default defineConfig({
   integrations: [tailwind(), react()],
-  site: "https://jodieaddis.github.io/space-tourism",
+  site: "https://jodieaddis.github.io",
   base: "/space-tourism/",
 });

public/style/style.css

@@ -21,60 +21,62 @@
   }
 }
 
-/* NavBar */
-.nav-link-mobile {
-  @apply font-Barlow text-base my-5;
-}
-.nav-link-desktop {
-  @apply font-Barlow text-base mx-6 py-10 border-b-white border-b-4 border-opacity-0;
-}
-.nav-link-desktop:hover {
-  @apply border-b-white border-b-4 border-opacity-50;
-}
-.nav-link-desktop.active {
-  @apply border-b-white border-b-4;
-}
+@layer components {
+  /* NavBar */
+  .nav-link-mobile {
+    @apply font-Barlow text-base my-5;
+  }
+  .nav-link-desktop {
+    @apply font-Barlow text-base mx-6 py-10 border-b-white border-b-4 border-opacity-0;
+  }
+  .nav-link-desktop:hover {
+    @apply border-b-white border-b-4 border-opacity-50;
+  }
+  .nav-link-desktop.active {
+    @apply border-b-white border-b-4;
+  }
 
-/* Home Page */
-.circle-hover {
-  @apply shadow-none;
-}
-.circle-hover:hover {
-  @apply shadow-[0_0_0_70px_rgba(255,255,255,0.1)] cursor-pointer;
-}
+  /* Home Page */
+  .circle-hover {
+    @apply shadow-none;
+  }
+  .circle-hover:hover {
+    @apply shadow-[0_0_0_70px_rgba(255,255,255,0.1)] cursor-pointer;
+  }
 
-/* Destination Page */
-.destination-tab {
-  @apply m-5 font-Barlow uppercase text-base pb-2;
-}
-.destination-tab:hover {
-  @apply border-b-white border-b-2 border-solid border-opacity-50;
-}
-.destination-tab.active {
-  @apply border-b-white border-b-2 border-solid border-opacity-100;
-}
+  /* Destination Page */
+  .destination-tab {
+    @apply m-5 font-Barlow uppercase text-base pb-2;
+  }
+  .destination-tab:hover {
+    @apply border-b-white border-b-2 border-solid border-opacity-50;
+  }
+  .destination-tab.active {
+    @apply border-b-white border-b-2 border-solid border-opacity-100;
+  }
 
-/* Crew Page */
-.crew-info-container {
-  @apply flex-col;
-}
-.crew-container-text {
-  @apply order-2 lg:order-1;
-}
-.crew-container-tab {
-  @apply order-1 lg:order-2;
-}
-.crew-tab {
-  @apply bg-white opacity-20 hover:opacity-50 w-2.5 lg:w-4 h-2.5 lg:h-4 rounded-full mr-6;
-}
-.crew-tab.active {
-  @apply opacity-100;
-}
+  /* Crew Page */
+  .crew-info-container {
+    @apply flex-col;
+  }
+  .crew-container-text {
+    @apply order-2 lg:order-1;
+  }
+  .crew-container-tab {
+    @apply order-1 lg:order-2;
+  }
+  .crew-tab {
+    @apply bg-white opacity-20 hover:opacity-50 w-2.5 lg:w-4 h-2.5 lg:h-4 rounded-full mr-6;
+  }
+  .crew-tab.active {
+    @apply opacity-100;
+  }
 
-/* Tech page */
-.tab-tech {
-  @apply w-[40px] h-[40px] lg:h-[80px] lg:w-[80px] text-base lg:text-3xl font-Bellefair border-white border-solid border-[1px] border-opacity-30 hover:border-opacity-100 lg:border-2 rounded-full;
-}
-.tab-tech.active {
-  @apply bg-white text-black;
+  /* Tech page */
+  .tab-tech {
+    @apply w-[40px] h-[40px] lg:h-[80px] lg:w-[80px] text-base lg:text-3xl font-Bellefair border-white border-solid border-[1px] border-opacity-30 hover:border-opacity-100 lg:border-2 rounded-full;
+  }
+  .tab-tech.active {
+    @apply bg-white text-black;
+  }
 }