diff options
| author | Aki <please@ignore.pl> | 2021-04-05 22:07:01 +0200 |
|---|---|---|
| committer | Aki <please@ignore.pl> | 2021-04-05 22:07:01 +0200 |
| commit | 7d50c39599d24098fdaa412bc53a57a2f6adf5de (patch) | |
| tree | 34c609cfd8b4455afad082fd34d3cb5dc4b989b2 | |
| parent | 07e4a03b634f5fb8bc7aab33fc3e9442bdb345cc (diff) | |
| download | derelict-prototype-7d50c39599d24098fdaa412bc53a57a2f6adf5de.zip derelict-prototype-7d50c39599d24098fdaa412bc53a57a2f6adf5de.tar.gz derelict-prototype-7d50c39599d24098fdaa412bc53a57a2f6adf5de.tar.bz2 | |
Added toolbar to html layout
| -rw-r--r-- | index.html | 8 | ||||
| -rw-r--r-- | style.css | 17 |
2 files changed, 18 insertions, 7 deletions
@@ -5,6 +5,10 @@ <link rel="stylesheet" type="text/css" href="style.css"> <title>Derelict</title> <body> -<div id="container"></div> -<input type="range" min="0" max="1" value="0" id="timeline"> +<div id="wrapper"> + <div id="container"></div> + <div id="toolbar"> + <input type="range" min="0" max="1" value="0" id="timeline"> + </div> +</div> <script type="module" src="derelict.js"></script> @@ -11,13 +11,20 @@ body { fill: #eee; } -#container { +#wrapper { + display: flex; width: 100vw; height: 100vh; + flex-direction: column; +} + +#container { + position: relative; + overflow: hidden; + flex-grow: 1; } -#timeline { - position: absolute; - width: 50vw; - bottom: 0px; +#toolbar { + background: #eee; + padding: 1em; } |