adding canvas, drawing tick timestamps based on zoom

1 files changed, 20 insertions, 24 deletions

diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index 028f6c2..bd561ad 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -1,38 +1,34 @@
 * {
 
 }
-.index {
+.body {
   width: 100%;
   height: 100%;
   background: linear-gradient(
-      -45deg,
+      0deg,
       rgba(0, 0, 64, 0.5),
-      rgba(128, 0, 64, 0.5)
+      rgba(64, 64, 128, 0.5)
     );
-  padding: 1rem;
+  padding: 0;
 }
-.index > div {
-  display: inline-block;
-  padding: 1rem;
-  max-height: calc(100% - 2rem);
-  overflow: scroll;
-  background: rgba(64,12,64,0.9);
-  box-shadow: 3px 3px 6px rgba(0,0,0,0.4),
-    inset 0 0 60px rgba(128,255,255,0.1);
+canvas {
+  display: block;
 }
-.graphIndex {
-  min-width: 20rem;
-  display: flex;
-  flex-direction: column;
+.timeline {
+  border-top: 1px solid #333;
 }
-.graphIndex > * {
-  margin-bottom: 0.5rem;
+
+
+.ticks {
+  position: relative;
 }
-.graphIndex > div {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between
+.ticks .tick {
+  position: absolute;
+  top: 0;
+  height: 4px;
 }
-.graphIndex > div > a:first-child {
-  color: #fff;
+.ticks .tickLabel {
+  position: absolute;
+  top: 4px;
+  font-size: 0.75rem;
 }
\ No newline at end of file