diff --git a/index.html b/index.html
index cbc1f5a..e7984d3 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,10 @@
+
- Vite + Preact
+ Route planner
diff --git a/src/index.tsx b/src/index.tsx
index 85fa265..915b47b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,59 +1,9 @@
import { render } from 'preact';
-import { useState } from 'preact/hooks';
-import preactLogo from './assets/preact.svg';
import './style.css';
-import { MapComponent } from './map';
+import { RoutePlanner } from './routePlanner';
export function App() {
- const [value, setValue] = useState(0);
-
- return (
-
-
-
-
-
Get Started building Vite-powered Preact Apps
-
- Counter: {value}
-
-
-
-
-
-
- );
-}
-
-function Resource(props: Record<'href' | 'title' | 'description', string>) {
- return (
-
- {props.title}
- {props.description}
-
- );
+ return ();
}
const app = document.getElementById('app');
diff --git a/src/routePlanner/index.tsx b/src/routePlanner/index.tsx
new file mode 100644
index 0000000..da859cf
--- /dev/null
+++ b/src/routePlanner/index.tsx
@@ -0,0 +1,9 @@
+import './style.css';
+import { MapComponent } from "./map"
+
+export const RoutePlanner = () => {
+ return
+}
\ No newline at end of file
diff --git a/src/map.tsx b/src/routePlanner/map.tsx
similarity index 93%
rename from src/map.tsx
rename to src/routePlanner/map.tsx
index 26e469a..428cd32 100644
--- a/src/map.tsx
+++ b/src/routePlanner/map.tsx
@@ -29,5 +29,5 @@ export const MapComponent = () => {
mapRef.current = map;
});
- return ;
+ return ;
};
diff --git a/src/routePlanner/style.css b/src/routePlanner/style.css
new file mode 100644
index 0000000..317a55b
--- /dev/null
+++ b/src/routePlanner/style.css
@@ -0,0 +1,36 @@
+section.route-planner {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ column-gap: 1rem;
+ grid-template-areas: "markers map";
+}
+
+section.route-planner > section.markers {
+ grid-area: markers;
+}
+
+section.route-planner > section.map {
+ grid-area: map;
+}
+
+section.route-planner .map-container {
+ width: 500px;
+ height: 500px;
+}
+
+@media (max-width: 639px) {
+ section.route-planner {
+ grid-template-columns: 1fr;
+ row-gap: 1rem;
+ grid-template-areas:
+ "markers"
+ "map";
+ }
+
+ section.route-planner .map-container {
+ width: 90vw;
+ height: 70vh;
+ }
+}
+
diff --git a/src/style.css b/src/style.css
index cb14c0c..21e599f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,5 +1,5 @@
:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ font-family: system-ui, 'Atkinson Hyperlegible', sans-serif;
line-height: 1.5;
font-weight: 400;
@@ -14,10 +14,9 @@
}
body {
- margin: 0;
+ padding: 1em;
display: flex;
align-items: center;
- min-height: 100vh;
}
#app {
@@ -34,13 +33,6 @@ img:hover {
filter: drop-shadow(0 0 2em #673ab8aa);
}
-section {
- margin-top: 5rem;
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- column-gap: 1.5rem;
-}
-
.resource {
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
@@ -56,17 +48,6 @@ section {
box-shadow: 0 25px 50px -12px #673ab888;
}
-@media (max-width: 639px) {
- #app {
- margin: 2rem;
- }
- section {
- margin-top: 5rem;
- grid-template-columns: 1fr;
- row-gap: 1rem;
- }
-}
-
@media (prefers-color-scheme: dark) {
:root {
color: #ccc;