Fix spinner css

Use a rotating css background image instead of a separate element placed 
behind

This allows flexbox to function correctly

lib/components/Spinner.js

@@ -10,23 +10,15 @@ export default class Spinner extends React.Component {
     })
 
     return <div className={classes}>
-
+      <img
-      <div className="spinner-content">
+        alt={this.props.name || this.props.dir}
-
+        src={`/images/${this.props.dir}.png`}
-        <img
+        className="spinner-image" />
-          alt={this.props.name || this.props.dir}
+
-          src={`/images/${this.props.dir}.png`}
+      {this.props.name === null ? null
-          className="spinner-image" />
+        : <div className="spinner-name">{this.props.name}</div>}
-
+      {this.props.size === null ? null
-        {this.props.name === null ? null
+        : <div className="spinner-size">{formatSize(this.props.size)}</div>}
-          : <div className="spinner-name">{this.props.name}</div>}
-        {this.props.size === null ? null
-          : <div className="spinner-size">{formatSize(this.props.size)}</div>}
-
-      </div>
-
-      <img src="/images/pizza.png" className="spinner-background" />
-
     </div>
   }
 

lib/index.styl

@@ -82,10 +82,6 @@ p {
     }
 }
 
-.container {
-    height: 100vh
-}
-
 .page {
     display: flex
     flex-direction: column;
@@ -121,35 +117,32 @@ p {
 }
 
 .spinner {
-    position: relative
-    z-index: -1
     width: 300px
-    height: 300px
+    min-height: 300px
     margin: 0 auto 20px
 
     display: flex
+    flex-direction: column
     align-items: center
+    align-content: center
     justify-content: center
 
-    .spinner-background {
+    &:before {
-        display: block
+        background: url(/images/pizza.png) center center / 300px 300px no-repeat
+        content: ""
+        position: absolute
         width: 300px
         height: 300px
-        position: absolute
-        top: 0
-        left: 0
         transition: transform 1s
         z-index: -1
     }
 
-    &.spinner-animated .spinner-background {
+    &.spinner-animated:before {
         animation: rotate 5s infinite linear
     }
 
     .spinner-image {
-        display: block
+        width: 50%
-        width: 150px
-        margin: 0 auto
     }
 
     .spinner-name {
@@ -160,8 +153,6 @@ p {
         text-overflow: ellipsis
         white-space: nowrap
         margin-top: 10px
-        margin: 0 auto
-        width: 220px
     }
 
     .spinner-size {