Better handling of background color on #top container

css/style.css

@@ -152,7 +152,6 @@ body {
   padding-top: 10px;
   width: 100%;
   position: fixed;
-  background: black;
   z-index: 999; }
   #top div {
     margin: auto;
@@ -179,14 +178,14 @@ body {
     transition-property: size;
     transition-duration: .2s; }
 
-.small .hideable {
+.small {
+  background: black; }
+  .small .hideable {
     display: none;
     opacity: 0; }
-
-.small img {
+  .small img {
     max-width: 200px; }
-
-.small h2 {
+  .small h2 {
     font-size: 1em; }
 
 .large img {

index.html

@@ -21,6 +21,7 @@
     <style>
         #spaceTakerUpper {
             height: 98vh;
+            background: black;
         }
     </style>
 </head>
@@ -220,9 +221,9 @@
             // var mastHeight = mast.clientHeight;
             // var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
             if (topHeight < 300) {
-                mast.className = "small";
+                topDiv.className = "small";
             } else {
-                mast.className = "large";
+                topDiv.className = "large";
             }
             topDiv.style.height = topHeight + "px";
             // console.log("topheight is " + topHeight + " and topDiv.style.height = " + topDiv.style.height);

sass/style.scss

@@ -38,7 +38,7 @@ body {
     padding-top: 10px;
     width: 100%;
     position: fixed;
-    background: black;
+    // background: black;
     z-index: 999;
     div {
         margin: auto;
@@ -76,6 +76,7 @@ body {
 
 //small and large classes are applied to #top
 .small {
+    background: black;
     .hideable {
         display: none;
         opacity: 0;