Implement instance tree visualization

assets/index.css

@@ -11,22 +11,29 @@
 html {
   box-sizing: border-box;
   font-family: sans-serif;
+  font-size: 18px;
   text-decoration: none;
   height: 100%;
 }
 
 body {
-  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
+img {
+  max-width:100%;
+  max-height:100%;
+  height: auto;
+}
+
 .root {
   flex: 0 0;
   display: flex;
   flex-direction: column;
-  margin: 0 auto;
+  margin: 0.5rem auto;
   width: 100%;
   max-width: 50rem;
   background-color: #efefef;
@@ -48,8 +55,7 @@ body {
 }
 
 .main-logo {
-  flex: 0 0;
-  width: 10rem;
+  flex: 0 0 10rem;
   margin: 1rem;
 }
 
@@ -71,7 +77,8 @@ body {
   flex: 0 0;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-around;
+  margin: -1rem;
 }
 
 .button {
@@ -79,4 +86,25 @@ body {
   border: 1px solid #666;
   padding: 0.3em 1em;
   margin: 1rem;
+}
+
+.instance {
+  border: 1px solid #666;
+  border-right-style: none;
+  border-bottom-style: none;
+  background-color: #fff;
+  margin-bottom: 0.5rem;
+}
+
+.instance-title {
+  font-size: 1.5rem;
+  padding: 0.5rem;
+}
+
+.instance-properties {
+  padding: 0.5rem;
+}
+
+.instance-children {
+  padding: 0.5rem 0 0.5rem 1rem;
 }