From 589c8239b2085815405329e0dc46d12d763cb32b Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Fri, 14 May 2021 12:07:47 +0200
Subject: editor layout

---
 pages/_app.tsx    |  1 +
 pages/editor.tsx  | 21 +++++++++++++++++++++
 pages/index.tsx   | 17 -----------------
 styles/editor.css | 40 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 62 insertions(+), 17 deletions(-)
 create mode 100644 pages/editor.tsx
 delete mode 100644 pages/index.tsx
 create mode 100644 styles/editor.css

diff --git a/pages/_app.tsx b/pages/_app.tsx
index fecbad0..7bb0076 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,7 @@
 import Head from 'next/head';
 
 import '../styles/colors.css';
+import '../styles/editor.css';
 import '../styles/globals.css';
 import '../styles/keyframes.css';
 import '../styles/paper.css';
diff --git a/pages/editor.tsx b/pages/editor.tsx
new file mode 100644
index 0000000..3377149
--- /dev/null
+++ b/pages/editor.tsx
@@ -0,0 +1,21 @@
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+
+import { PressureIcon } from '../components/icons';
+
+export default function Index() {
+	return <>
+		<div className='appGrid posabs a0'>
+			<AppBar position='static' color='transparent' elevation={0}>
+				<Toolbar>
+					<PressureIcon />
+					<h1>pressure</h1>
+				</Toolbar>
+			</AppBar>
+			<div className='settings'></div>
+			<div className='viewer'></div>
+			<div className='tools'></div>
+			<div className='timeline'></div>
+		</div>
+	</>;
+}
diff --git a/pages/index.tsx b/pages/index.tsx
deleted file mode 100644
index 2865e64..0000000
--- a/pages/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-
-import { PressureIcon } from '../components/icons';
-import Loop from '../components/loop';
-
-export default function Index() {
-	return <>
-		<AppBar position='static' color='transparent' elevation={0}>
-			<Toolbar>
-				<PressureIcon />
-				<h1>pressure</h1>
-			</Toolbar>
-		</AppBar>
-		<Loop width={100} />
-	</>;
-}
diff --git a/styles/editor.css b/styles/editor.css
new file mode 100644
index 0000000..cfffb71
--- /dev/null
+++ b/styles/editor.css
@@ -0,0 +1,40 @@
+.appGridWrapper {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.appGrid {
+	display: grid;
+	grid-template-columns: 240px 1fr;
+	grid-template-rows: auto 1fr 210px;
+}
+
+.appGrid header {
+	grid-row: 1;
+	grid-column: 1/3;
+}
+
+.appGrid .settings {
+	grid-column: 1;
+	grid-row: 2;
+	background-color: var(--c400);
+}
+
+.appGrid .viewer {
+	grid-column: 2;
+	grid-row: 2;
+	background-color: var(--c200);
+}
+
+.appGrid .tools {
+	grid-column: 1;
+	grid-row: 3;
+	background-color: var(--c300);
+}
+
+.appGrid .timeline {
+	grid-column: 2;
+	grid-row: 3;
+	background-color: var(--c100);
+}
-- 
cgit v1.2.3