diff options
| -rw-r--r-- | src/components/Datetime.tsx | 6 | ||||
| -rw-r--r-- | src/components/Map.tsx | 5 | ||||
| -rw-r--r-- | src/components/Slider.tsx | 24 | ||||
| -rw-r--r-- | src/pages/history/[date].astro | 1 | ||||
| -rw-r--r-- | src/pages/index.astro | 1 | ||||
| -rw-r--r-- | src/styles/geshem.css | 45 | ||||
| -rw-r--r-- | src/styles/global.css | 17 |
7 files changed, 26 insertions, 73 deletions
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 |