From ef81273ecb8ad5bfe24d552ad9e28bbd3bdec1ca Mon Sep 17 00:00:00 2001
From: Type-Style <github@type-style.de>
Date: Wed, 26 Jun 2024 17:00:01 +0200
Subject: [PATCH] [Task] #77 1st draft layout

---
 src/client/css/start.css   | 56 +++++++++++++++++++++++++++-----------
 src/client/pages/Start.tsx | 15 ++++------
 2 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/client/css/start.css b/src/client/css/start.css
index a5548f6..233801d 100644
--- a/src/client/css/start.css
+++ b/src/client/css/start.css
@@ -5,30 +5,54 @@
 }
 
 .start {
+	/* theming */
 	--text: color-mix(in oklch, var(--neutral) 50%, black);
-
 	[data-mui-color-scheme="dark"] & {
 		--text: var(--main);
 	}
+	color: var(--text);
 
-	min-height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-wrap: wrap;
 
-	color: var(--text);
+	/* grid layout */
+	height: 100%;
+	display: grid;
+  grid-template-columns: 1fr 40vmin;
+	grid-template-rows: 3rem 1fr 1fr 1fr 3rem;
+
+
+}
+
+.grid-item {
+	background-color: aqua;
+
+	&.info {
+		background-color: bisque;
+
+	}
+
+	&.map {
+		grid-column: 1;
+		grid-row: 2 / span 3;
+		background-color: darkkhaki;
+	}
+
+	&.status {
+		grid-column: 2;
+		grid-row: 1 / span 2;
+		background-color: gold;
+	}
+
+	&.image {
+		grid-column: 2;
+		background-color: moccasin;
+	}
 
-	.headline {
-		margin-inline: auto;
-		padding-block: max(1em, 10dvh);
-		text-align: center;
-		font-size: clamp(4rem, 5dvmax, 10rem);
-		flex-basis: 100%;
+	&.image+.image {
+		background-color: lightgoldenrodyellow;
 	}
 
-	a {
-		display: block;
-		font-size: 2rem;
+	&.subinfo {
+		grid-column: 1 / -1;
+		background-color: peachpuff;
 	}
 }
\ No newline at end of file
diff --git a/src/client/pages/Start.tsx b/src/client/pages/Start.tsx
index 377955e..9a518ce 100644
--- a/src/client/pages/Start.tsx
+++ b/src/client/pages/Start.tsx
@@ -1,18 +1,15 @@
 import React from 'react'
-import { Button, Typography } from '@mui/material';
 import "../css/start.css";
 
 function Start() {
   return (
     <div className="start">
-      <h1 className="headline">Hello, React!!</h1>
-      <Typography variant='h1'>Test Headline </Typography>
-      <Button variant='contained' size='large'>Test</Button>
-      <Button variant='contained' size='large' disabled={true}>Test2</Button>
-
-      <svg className="bg-pattern" xmlns="http://www.w3.org/2000/svg">
-        <rect width="100%" height="100%" fill="url(#repeatingGradient)" />
-      </svg>
+      <div className="grid-item info">info</div>
+      <div className="grid-item map">map</div>
+      <div className="grid-item status">status</div>
+      <div className="grid-item image">image1</div>
+      <div className="grid-item image">image2</div>
+      <div className="grid-item subinfo">subinfo</div>
     </div>
   )
 }