updated styleing

Vatsim-Scandinavia · Feb 27, 2024 · 3a21cd4 · 3a21cd4
1 parent f55036d
commit 3a21cd4
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 31 deletions.
diff --git a/public/icons/Barometer.svg b/public/icons/Barometer.svg
diff --git a/public/icons/Binoculars.svg b/public/icons/Binoculars.svg
diff --git a/public/icons/Clouds.svg b/public/icons/Clouds.svg
diff --git a/public/icons/Runway.svg b/public/icons/Runway.svg
diff --git a/public/icons/Temp.svg b/public/icons/Temp.svg
diff --git a/public/icons/Wether.svg b/public/icons/Wether.svg
diff --git a/src/components/Metar.astro b/src/components/Metar.astro
@@ -5,34 +5,39 @@ 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">
-    <p class="text-white text-2xl font-semibold">{airport}</p>
-    <div class="flex">
-        <div class="w-32 h-32  p-4 m-2 rounded flex justify-center items-center flex-col shadow backdrop-blur-sm bg-white/30">
+<div class="flex flex-col items-center bg-gray-100 p-6 rounded-xl">
+    <p class="text-black text-2xl font-semibold uppercase">{airport}</p>
+    <div class="grid grid-cols-3 xl:grid-cols-6 gap-2">
+        <div class="w-32 h-32 lg:p-4 lg:m-2 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="font-bold text-white">Winds</p>
-            <p class="text-white">{metarObject.wind.degrees}° / {metarObject.wind.speed_kts}kt</p>
+            <p class="font-bold text-black">Winds</p>
+            <p class="text-black">{metarObject.wind.degrees}° / {metarObject.wind.speed_kts}kt</p>
         </div>
-        <div class="w-32 h-32 p-4 m-2 rounded flex justify-center items-center flex-col shadow backdrop-blur-sm bg-white/30">
+        <div class="w-32 h-32 lg:p-4 lg:m-2 rounded-lg flex justify-center items-center flex-col shadow-md bg-white">
             <img src="/icons/Binoculars.svg" class="w-16 p-2" />
-            <p class="text-white font-bold">Visibility</p>
-            <p class="text-white">{metarObject.visibility.meters_float}</p>
+            <p class="text-black font-bold">Visibility</p>
+            <p class="text-black">{metarObject.visibility.meters_float}</p>
         </div>
-        <div class="w-32 h-32 p-4 m-2 rounded flex justify-center items-center flex-col shadow backdrop-blur-sm bg-white/30">
+        <div class="w-32 h-32 lg:p-4 lg:m-2 rounded-lg flex justify-center items-center flex-col shadow-md bg-white">
             <img src="/icons/Clouds.svg" class="w-16 p-2" />
-            <p class="text-white font-bold">Clouds</p>
-            <p class="text-white">{metarObject.clouds[0].code}</p>
+            <p class="text-black font-bold">Clouds</p>
+            <p class="text-black">{metarObject.clouds[0].code}</p>
         </div>
-        <div class="w-32 h-32 p-4 m-2 rounded flex justify-center items-center flex-col shadow backdrop-blur-sm bg-white/30">
+        <div class="w-32 h-32 lg:p-4 lg:m-2 rounded-lg flex justify-center items-center flex-col shadow-md bg-white">
             <img src="/icons/Temp.svg" class="w-16 p-2" />
-            <p class="text-white font-bold">Temperature</p>
-            <p class="text-white">{metarObject.temperature.celsius}°C / {metarObject.dewpoint.celsius}°C</p>
+            <p class="text-black font-bold">Temperature</p>
+            <p class="text-black">{metarObject.temperature.celsius}°C / {metarObject.dewpoint.celsius}°C</p>
         </div>
-        <div class="w-32 h-32 p-4 m-2 rounded flex justify-center items-center flex-col shadow backdrop-blur-sm bg-white/30">
+        <div class="w-32 h-32 lg:p-4 lg:m-2 rounded-lg flex justify-center items-center flex-col shadow-md bg-white">
             <img src="/icons/Barometer.svg" class="w-16 p-2" />
-            <p class="text-white font-bold">Barometer</p>
-            <p class="text-white">{metarObject.barometer.mb}</p>
+            <p class="text-black font-bold">Barometer</p>
+            <p class="text-black">{metarObject.barometer.mb}</p>
+        </div>
+        <div class="w-32 h-32 lg:p-4 lg:m-2 rounded-lg flex justify-center items-center flex-col shadow-md bg-white">
+            <img src="/icons/Runway.svg" class="w-16 p-2" />
+            <p class="text-black font-bold">Runway</p>
+            <p class="text-black">TBA</p>
         </div>
     </div>
-    <p class="text-white">Last updated {metarObject.observed}</p>
+    <p class="text-black">Last updated {metarObject.observed}</p>
 </div>