main page redesigned

1 year ago · 40fc0d2781
parent 9a5cfaa650
commit 40fc0d2781
6 changed files with 52 additions and 75 deletions
--- a/index.html
+++ b/index.html
@ -3,9 +3,10 @@
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<link href='https://fonts.cdnfonts.com/css/atkinson-hyperlegible' rel='stylesheet'>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta name="color-scheme" content="light dark" />
-		<title>Vite + Preact</title>
+		<title>Route planner</title>
 	</head>
 	<body>
 		<div id="app"></div>
--- 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 (
-        <div>
-            <a href="https://preactjs.com">
-                <img
-                    src={preactLogo}
-                    alt="Preact logo"
-                    height="160"
-                    width="160"
-                />
-            </a>
-            <h1>Get Started building Vite-powered Preact Apps </h1>
-            <section>
-                <div>Counter: {value}</div>
-                <button onClick={() => setValue(value + 1)}>Increment</button>
-                <button onClick={() => setValue(value - 1)}>Decrement</button>
-            </section>
-            <section>
-                <MapComponent />
-            </section>
-            <section>
-                <Resource
-                    title="Learn Preact"
-                    description="If you're new to Preact, try the interactive tutorial to learn important concepts"
-                    href="https://preactjs.com/tutorial"
-                />
-                <Resource
-                    title="Differences to React"
-                    description="If you're coming from React, you may want to check out our docs to see where Preact differs"
-                    href="https://preactjs.com/guide/v10/differences-to-react"
-                />
-                <Resource
-                    title="Learn Vite"
-                    description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
-                    href="https://vitejs.dev"
-                />
-            </section>
-        </div>
-    );
-}
-
-function Resource(props: Record<'href' | 'title' | 'description', string>) {
-    return (
-        <a href={props.href} class="resource">
-            <h2>{props.title}</h2>
-            <p>{props.description}</p>
-        </a>
-    );
+    return (<RoutePlanner />);
 }

 const app = document.getElementById('app');
--- a/src/routePlanner/index.tsx
+++ b/src/routePlanner/index.tsx
@ -0,0 +1,9 @@
+import './style.css';
+import { MapComponent } from "./map"
+
+export const RoutePlanner = () => {
+    return <section class="route-planner">
+        <section class="markers">Markers</section>
+        <section class="map"><MapComponent /></section>
+    </section>
+}
--- a/src/routePlanner/map.tsx
+++ b/src/routePlanner/map.tsx
@ -29,5 +29,5 @@ export const MapComponent = () => {
        mapRef.current = map;
    });

-    return <div ref={mapContainerRef} style="height: 500px" />;
+    return <div ref={mapContainerRef} class="map-container" />;
 };
--- a/src/routePlanner/style.css
+++ 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;
+	}
+}
+
--- 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;