[Task] #77 1st draft layout

Type-Style · Jun 26, 2024 · ef81273 · ef81273
1 parent 951780d
commit ef81273
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 25 deletions.
diff --git 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;
 	}
 }
diff --git 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>
   )
 }