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 (<RoutePlanner />);
    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>
    );
 }
 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;