From 891330d98d75b8621bda2dd7528e099af287060c Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Wed, 24 Sep 2025 10:32:25 +0200
Subject: Migrate to tailwind styles

---
 src/components/Datetime.tsx    |  6 +++---
 src/components/Map.tsx         |  5 +----
 src/components/Slider.tsx      | 24 ++++++----------------
 src/pages/history/[date].astro |  1 -
 src/pages/index.astro          |  1 -
 src/styles/geshem.css          | 45 ------------------------------------------
 src/styles/global.css          | 17 +++++++++++++++-
 7 files changed, 26 insertions(+), 73 deletions(-)
 delete mode 100644 src/styles/geshem.css

diff --git a/src/components/Datetime.tsx b/src/components/Datetime.tsx
index 2010f8b..8b66a4f 100644
--- a/src/components/Datetime.tsx
+++ b/src/components/Datetime.tsx
@@ -20,9 +20,9 @@ export function DateTime({ images, slider }: DateTimeProps) {
   const time = datetime ? datetime.toFormat("HH:mm") : "";
 
   return (
-    <div id="datetime">
-      <div id="date">{date}</div>
-      <div id="time">{time}</div>
+    <div id="datetime" className="absolute top-5 left-5 text-white font-mono">
+      <div id="date" className="text-xl">{date}</div>
+      <div id="time" className="text-4xl">{time}</div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 0e39308..070dc5c 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -99,10 +99,7 @@ export function Map({ slider, images }: MapProps) {
 
   return (
     <div>
-      <div ref={mapContainer} className="map-container" style={{
-        height: "100vh",
-        width: "100vw"
-      }} />
+      <div ref={mapContainer} className="map-container h-screen w-screen" />
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index bb1b84f..bdca22c 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -52,30 +52,18 @@ export function Slider({ playback, slider, setSlider }: SliderProps) {
   const percentage = (slider / max) * 100;
 
   return (
-    <div id="slider" style={{ padding: '10px 0' }}>
+    <div id="slider" className="py-2.5 fixed bottom-[8vh] w-[30vw] ml-[35vw] max-[812px]:w-[80vw] max-[812px]:ml-[8vw] max-[812px]:z-10">
       <div
         ref={sliderRef}
-        style={{
-          position: 'relative',
-          height: '20px',
-          backgroundColor: '#3498db',
-          borderRadius: '10px',
-          cursor: 'pointer'
-        }}
+        className="relative h-5 bg-blue-500 rounded-full cursor-pointer"
         onMouseDown={handleMouseDown}
       >
         <div
+          className={`absolute -top-2.5 w-10 h-10 bg-white rounded-full shadow-md z-[1] ${
+            isDragging ? 'cursor-grabbing' : 'cursor-grab'
+          }`}
           style={{
-            position: 'absolute',
-            top: '-10px',
-            left: `calc(${percentage}% - 20px)`,
-            width: '40px',
-            height: '40px',
-            backgroundColor: '#fff',
-            borderRadius: '50%',
-            boxShadow: '.5px .5px 2px 1px rgba(0,0,0,.32)',
-            cursor: isDragging ? 'grabbing' : 'grab',
-            zIndex: 1
+            left: `calc(${percentage}% - 20px)`
           }}
         />
       </div>
diff --git a/src/pages/history/[date].astro b/src/pages/history/[date].astro
index 0bd1e40..8796c14 100644
--- a/src/pages/history/[date].astro
+++ b/src/pages/history/[date].astro
@@ -1,7 +1,6 @@
 ---
 import { Geshem } from '../../components/Geshem';
 import '../../styles/global.css';
-import '../../styles/geshem.css';
 
 export const prerender = false;
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fb90246..d41f1fa 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,6 @@
 ---
 import { Geshem } from '../components/Geshem';
 import '../styles/global.css';
-import '../styles/geshem.css';
 
 const { date } = Astro.params;
 ---
diff --git a/src/styles/geshem.css b/src/styles/geshem.css
deleted file mode 100644
index 2dba79f..0000000
--- a/src/styles/geshem.css
+++ /dev/null
@@ -1,45 +0,0 @@
-#datetime {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  color: white;
-  font-family: monospace;
-}
-
-#date {
-  font-size: 1.4em;
-}
-
-#time {
-  font-size: 2.8em;
-}
-
-#slider {
-  position: fixed;
-  bottom: 8vh;
-  width: 30vw;
-  margin-left: 35vw;
-}
-
-@media only screen and (max-device-width: 812px) {
-  #slider {
-    width: 80vw;
-    margin-left: 8vw;
-    z-index: 10;
-  }
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  overflow: hidden;
-  width: 100vw;
-  height: 100vh;
-  user-select: none;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index a461c50..c81f9a9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1 +1,16 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+
+body {
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  user-select: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
\ No newline at end of file
-- 
cgit v1.3.1