From 3dc7e2a2e2158c99cb44d1ea3a3a6ff8738255d2 Mon Sep 17 00:00:00 2001
From: Martin Ashby <martin@ashbysoft.com>
Date: Tue, 3 Jul 2018 12:38:22 +0100
Subject: Better layout with CSS. Changed favicon & title.

---
 src/App.css | 130 ++++++++++++++++++++++++++++++++++++++----------------------
 1 file changed, 83 insertions(+), 47 deletions(-)

(limited to 'src/App.css')

diff --git a/src/App.css b/src/App.css
index c9a3616..92768d0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,81 +1,117 @@
 body {
     background: black;
     color: aliceblue;
-    padding-left: 50px;
-    padding-right: 50px;
+    padding: 10px;
 }
 
 .container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-
-    grid-template-areas: 
-        "header header"
-        "paint liveFeed";
-    grid-gap: 5px;
-        
-}
-
-@media (max-width: 760px) {
-    .container {
-        display: grid;
-        grid-template-columns: 1fr;
-    
-        grid-template-areas: 
-            "header"
-            "paint"
-            "liveFeed";
-    }   
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
 }
 
 .header {
-    grid-area: header;
+    width: 100%;
+    text-align: center;
 }
 
-.paint {
-    grid-area: paint;
+.liveFeed {
+    margin-left: 10px;
 }
 
-.liveFeed {
-    grid-area: liveFeed;
+.framePaintContainer {
+    flex-direction: column;
 }
 
 .paintContainer {
     display: grid;
-    grid-template-columns: 1fr 1fr 1frpx;
-
-    grid-template-areas: 
-        "paint paint tools"
-        "paintCol palette tools";
+    grid-template-columns: 8fr 32fr 5fr;
+    grid-template-rows: 32fr 8fr;
 }
 
 .paint {
-    grid-area: paint;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    grid-row-start: 1;
+    grid-row-end: 2;
+
+    display: grid;
+    grid-template: repeat(16, 1fr) / repeat(16, 1fr);
+}
+
+.paintAreaCell {
+    border: 1px solid grey;
 }
 
+
 .tools {
-    grid-area: tools;
+    grid-column-start: 3;   
+    grid-row-start: 1;
+    grid-row-end: 3;
+
     display: flex;
     flex-direction: column;
-    width: 45px;
+    align-items: center;
+}
+
+.paintCol {
+    grid-row-start: 2;
+    grid-column-start: 1;
 }
 
 .palette {
-    grid-area: palette;
+    background: fuchsia;
+    grid-row-start: 2;
+    grid-column-start: 2;
+
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-template-rows: 1fr 1fr;
+}
+
+.paletteItem {
+    border: 1px solid black;
+}
+
+.paletteItem.selected {
+    border: 1px solid red;
+}
+
+.frameControl {
+    grid-row-start: 3;
+    grid-column-start: 1;
+    grid-column-end: 4;
+
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
 }
 
-.paintCol {
-    grid-area: paintCol;
+.framePreviewWrapper {
+    padding: 5px;
 }
 
-.paintAreaCell {
-    width: "20px";
-    height: "20px";
-    min-width: "20px";
-    min-height: "20px";
-    max-width: "20px";
-    max-height: "20px";
-    border: "1px solid grey";
+.animationPreviewWrapper {
+    padding: 5px;
+}
+
+.framePreviewWrapper.selected { 
+    border: 2px solid red;
+}
+
+.framePreview { 
+    display: grid;
+    grid-template: repeat(16, 1fr) / repeat(16, 1fr);
+}
+.framePreviewCell {
+    width: 4px;
+    height: 4px;
+}
+
+.animationPreview {
+    width: 64px;
+    height: 64px;
+    background-size: 64px 64px;
+    transform: rotate(180deg) scaleX(-1);
 }
\ No newline at end of file
-- 
cgit v1.2.3-ZIG