updated navigation and bg

Vatsim-Scandinavia · Mar 1, 2024 · 415f971 · 415f971
1 parent 35df6e5
commit 415f971
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 32 deletions.
diff --git a/src/components/Metar.astro b/src/components/Metar.astro
@@ -7,10 +7,10 @@ const response = await fetch("https://metar.vatsim.net/"+icao)
 const metar = await response.text()
 const metarObject = metarParser(metar);
 ---
-<div class="flex flex-col items-center bg-gray-100 p-6 rounded-xl">
-    <p class="text-black text-2xl font-semibold uppercase pb-4">{airport}</p>
+<div class="flex flex-col items-center bg-[#1a475f] p-6 rounded-xl bg-opacity-45">
+    <p class="text-white text-2xl font-semibold uppercase pb-4">{airport}</p>
     <div class="grid grid-cols-3 gap-4">
-        <div class="w-28 h-28 lg:p-4   rounded-lg flex justify-center items-center flex-col shadow-md bg-white">
+        <div class="w-28 h-28 lg:p-4  rounded-lg flex justify-center items-center flex-col shadow-md bg-white ">
             <img src="/icons/Wether.svg" class="w-16 p-2" />
             <p class="text-black">{metarObject.wind.degrees}° / {metarObject.wind.speed_kts}kt</p>
         </div>
@@ -35,5 +35,5 @@ const metarObject = metarParser(metar);
             <p class="text-black">TBA</p>
         </div>
     </div>
-    <p class="text-black pt-4">Last updated {metarObject.observed}</p>
+    <p class="text-white pt-4">Last updated {metarObject.observed}</p>
 </div>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -21,7 +21,7 @@
       </svg>
     </a>
     <a
-      href="/scenery"
+      href="/charts"
       class="p-2 rounded justify-center items-center flex flex-col text-center hover:bg-vatscasecondary"
     >
       <svg
@@ -103,7 +103,7 @@
     </svg>
   </a>
   <a
-    href="/scenery"
+    href="/charts"
     class="p-2 rounded justify-center items-center flex flex-col text-center hover:bg-[#28465e]"
   >
     <svg

diff --git a/src/layout/index.astro b/src/layout/index.astro
@@ -1,7 +1,7 @@
 ---
 import { ViewTransitions } from "astro:transitions";
 import ThemeToggle from "../components/ThemeToggle.tsx";
-import Navigation from "../components/Navigation.astro"
+import Navigation from "../components/Navigation.astro";
 ---
 
 <html lang="en">
@@ -24,24 +24,32 @@ import Navigation from "../components/Navigation.astro"
     <title>Copenhagen Live 2024</title>
     <ViewTransitions />
   </head>
-  <body class="dark:bg-gradient-to-tr from-slate-800 via-slate-700 to-slate-800 h-full w-screen">
+  <body class="w-screen">
     <Navigation />
-    <div
-      class="hidden lg:block w-[calc(100%-7rem)] h-screen absolute top-0 left-[7rem] -mr-32 bg-gradient-to-tr from-slate-100 via-slate-200 to-slate-300 dark:bg-gradient-to-tr dark:from-slate-800 dark:via-slate-700 dark:to-slate-800 overflow-y-scroll"
-    >
-      <slot />
-    </div>
-    <div class="lg:hidden z-0 absolute top-0 w-screen h-full overflow-scroll bg-gradient-to-tr from-slate-100 via-slate-200 to-slate-300 dark:bg-gradient-to-tr dark:from-slate-800 dark:via-slate-700 dark:to-slate-800">
-      <slot />
+    <div class="w-full h-full text-[#dfebeb] flex flex-col justify-center items-center gap-4" >
+
+      <div class="hidden lg:block w-[calc(100%-7rem)] h-full absolute top-0 left-[7rem] -mr-32 overflow-y-scroll bg-[url('/background.jpg')] bg-center backdrop-blur bg-[size:150%]" >
+        <div class="w-full h-full backdrop-blur-sm bg-black/30 flex flex-col justify-center items-center gap-4">
+          <slot />
+        </div>
+      </div>
+
+      <div class="lg:hidden z-0 absolute top-0 w-screen h-full overflow-scroll bg-[url('/background.jpg')] bg-center bg-cover backdrop-blur">
+        <div class="w-full h-full backdrop-blur-sm bg-black/30 flex flex-col justify-center items-center gap-4">
+          <slot />
+        </div>
+      </div>
+
     </div>
+
     <div class="hidden sm:block absolute right-5 bottom-5">
       <ThemeToggle client:visible />
     </div>
     <div class="absolute bottom-5 left-0 z-20 text-center w-28 hidden sm:block">
-      <p class="text-white">Powerd by
-        <br />OY-DDA</p>
+      <p class="text-white">
+        Powerd by
+        <br />OY-DDA
+      </p>
     </div>
   </body>
 </html>
-
-
diff --git a/src/pages/briefing.astro b/src/pages/briefing.astro
@@ -25,7 +25,7 @@ const airlines = [
 
 <Layout>
   <div class="w-full h-full flex justify-start pt-12 flex-col items-center p-8">
-    <h1 class="text-6xl font-semibold text-black dark:text-white">Briefing</h1>
+    <h1 class="text-6xl font-semibold ">Briefing</h1>
     <br />
     <div class="flex items-center justify-center dark:text-white w-full">
       <div class="flex w-full justify-center items-center flex-col">

diff --git a/src/pages/scenery.astro → src/pages/charts.astro b/src/pages/scenery.astro → src/pages/charts.astro
@@ -4,7 +4,7 @@ import Layout from "../layout/index.astro"
 <Layout>
     <div class="flex justify-center flex-col content-center items-center"> 
         <div class="w-full h-32 flex justify-center">
-            <h1 class="text-6xl font-semibold dark:text-white text-black text-center pt-12">Scenery</h1>
+            <h1 class="text-6xl font-semibold  text-center pt-12">Charts & Navigation</h1>
         </div>
     </div>
 </Layout>
diff --git a/src/pages/competition.astro b/src/pages/competition.astro
@@ -3,7 +3,7 @@ import Layout from "../layout/index.astro"
 ---
 <Layout>
     <div class="w-full h-full flex items-center flex-col pt-12">
-        <h1 class="text-6xl font-semibold dark:text-white text-black ">Competition</h1>
+        <h1 class="text-6xl font-semibold">Competition</h1>
         <span class="mt-32 mb-32"/>
         <h1 class="text-4xl font-semibold dark:text-white text-black ">TBA</h1>
     </div>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,10 +2,6 @@
 import Layout from "../layout/index.astro";
 ---
 <Layout>
-    <div
-    class="w-full h-full bg-[#dfebeb] text-[#dfebeb] flex flex-col justify-center items-center gap-4 bg-[url('/background.jpg')] bg-center bg-cover backdrop-blur"
-  >
-    <div class="w-full h-full backdrop-blur-sm bg-black/30 flex flex-col justify-center items-center gap-4">
       <div class="flex w-64 justify-center items-center dark:text-white flex-col">
         <p class="font-bold text-8xl">CPH</p>
         <div class="flex items-center">
@@ -17,7 +13,7 @@ import Layout from "../layout/index.astro";
       </div>
 
       <div
-        class="hidden sm:flex dark:text-white flex-col items-center pr-2 pl-2 text-center"
+        class="hidden lg:flex dark:text-white flex-col items-center pr-2 pl-2 text-center"
       >
         <p class="text-4xl font-semibold">The time has come once again!</p>
         <p class="text-xl">
@@ -34,6 +30,4 @@ import Layout from "../layout/index.astro";
           Use the navigation options to find what you are looking for
         </p>
       </div>
-    </div>
-  </div>
 </Layout>
diff --git a/src/pages/metar.astro b/src/pages/metar.astro
@@ -4,9 +4,9 @@ import AirportMetar from "../components/Metar.astro"
 ---
 <Layout>
     <div class="w-full h-full flex pt-12 flex-col items-center">
-        <h1 class="text-6xl font-semibold dark:text-white text-black ">Metar</h1>
+        <h1 class="text-6xl font-semibold ">Metar</h1>
         <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 mt-12">
-            <AirportMetar icao="EKCH" airport="Copenhagen Airport"/>
+            <AirportMetar icao="EKCH" airport="Kastrup Airport"/>
             <AirportMetar icao="EKBI" airport="Billund Airport"/>
             <AirportMetar icao="EKAH" airport="Aarhus Airport"/>
             <AirportMetar icao="EKYT" airport="Aalborg Airport"/>

diff --git a/src/pages/stands.astro b/src/pages/stands.astro
@@ -4,7 +4,7 @@ import Layout from "../layout/index.astro"
 <Layout>
     <div class="flex justify-center flex-col content-center items-center"> 
         <div class="w-full h-32 flex justify-center">
-            <h1 class="text-6xl font-semibold text-white text-center pt-12">Stands</h1>
+            <h1 class="text-6xl font-semibold  text-center pt-12">Stands</h1>
         </div>
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-24 mt-12">
             <a target="_blank" href="https://stands.vatsim-scandinavia.org/?icao=EKCH" class="bg-[url('https://files.guidedanmark.org/files/382/282544_Terminal_1.jpg')] bg-cover bg-center rounded w-64 h-64 text-center text-black text-2xl flex flex-col items-center justify-center">