diff options
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/editor.tsx | 21 | ||||
| -rw-r--r-- | pages/index.tsx | 17 | ||||
| -rw-r--r-- | styles/editor.css | 40 |
4 files changed, 62 insertions, 17 deletions
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); +} |