Finishing temporary cleanup for SplashViz

Author: skipjack

components/splash-file/splash-file-style.scss

@@ -2,7 +2,6 @@
 
 .splash-file {
   display:block;
-  flex:0 0 60%;
   margin-bottom:0.5em;
 
   &__img {

components/splash-viz/splash-viz-style.scss

@@ -6,25 +6,12 @@
   display:flex;
   height:calc(100vh - 55px);
   min-height:320px;
-  max-height:960px;
+  max-height:720px;
   background:getColor(elephant);
 
   &__modules,
   &__output { 
-    flex:0 0 43.25%;
-  }
-
-  &__icon {
-    display:flex;
-    flex:1 1 auto;
-    align-items:center;
-    justify-content:center;
-  }
-    
-  &__cube {
-    img {
-      width:100%;
-    }
+    flex:0 0 45%;
   }
 
   &__modules {
@@ -33,18 +20,36 @@
     @include break {
       display:flex;
       align-items:center;
-      justify-content:center;
+      justify-content: flex-end;
+
+      img {
+        margin-right:10%;
+        width:40%;
+        max-width:400px;
+      }
     }
   }
 
+  &__icon {
+    display:flex;
+    flex:1 1 auto;
+    align-items:center;
+
+    img { width:100%; }
+  }
+
   &__output {
     display:none;
 
     @include break {
       display:flex;
-      flex-wrap:wrap;
-      align-content:center;
-      justify-content:center;
+      align-items:center;
     }
   }
+
+  &__files {
+    width:40%;
+    max-width:400px;
+    margin-left:10%;
+  }
 }

components/splash-viz/splash-viz.jsx

@@ -32,11 +32,13 @@ export default class SplashViz extends React.Component {
         </div>
 
         <div className="splash-viz__output">
-          {
-            this.state.files.map((file, i) => (
-              <SplashFile key={ i } { ...file } />
-            ))
-          }
+          <div className="splash-viz__files">
+            {
+              this.state.files.map((file, i) => (
+                <SplashFile key={ i } { ...file } />
+              ))
+            }
+          </div>
         </div>
       </section>
     );