(Slightly) repositioned the audio visualizer

ohjay · Oct 15, 2015 · efaff77 · efaff77
1 parent a3f3e72
commit efaff77
Showing 1 changed file with 78 additions and 65 deletions.
diff --git a/css/style.css b/css/style.css
@@ -6,8 +6,39 @@
     font-weight: bold;
 }
 
-div#mp3_player { width:500px; height:60px; background:#000; padding:5px; margin:50px auto; }
-div#mp3_player > canvas{ width:500px; height:50px; background:#000000; float:left; }
+@keyframes blink {
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}
+
+@-webkit-keyframes blink {
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}
+
+@-moz-keyframes blink {
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}
+
+div#mp3_player { 
+    width: 500px; 
+    height: 60px; 
+    background: #000; 
+    padding: 5px; 
+    padding-left: 13.5px; 
+    margin: 50px auto; 
+}
+
+div#mp3_player > canvas { 
+    width: 500px; 
+    height: 50px; 
+    background: #000000; 
+    float: left; 
+}
 
 h1 {
     font-family: 'aight';
@@ -31,57 +62,6 @@ span {
     margin-right: auto;
 }
 
-#directive {
-    border-top: 2px solid #ead06c;
-    padding-top: 7.5px;
-}
-
-#typed {
-    font-family: 'Roboto Condensed';
-    color: #ead06c;
-    font-size: 70px;
-    margin-left: 10px; /* otherwise the cursor makes it look a little off-center */
-}
-
-#drake {
-    position: absolute;
-    left: 10px;
-    top: 360px;
-    cursor: pointer;
-}
-
-#cole {
-    position: absolute;
-    right: 121px;
-    top: 350px;
-    cursor: pointer;
-}
-
-#kanye {
-    position: absolute;
-    right: 0px;
-    top: -20px;
-    cursor: pointer;
-}
-
-#kendrick {
-    position: absolute;
-    left: 10px;
-    top: 50px;
-    cursor: pointer;
-}
-
-#start {
-	height: 50px;
-	border-radius: 1px;
-	border: 0px solid #ead06c;
-	width: 120px;
-	height: 70px;
-	margin: auto;
-	margin-top: 130px;
-	text-align: center;
-}
-
 button {
     background: #ead06c;
     color: black;
@@ -146,20 +126,53 @@ div p {
     animation: blink 0.7s infinite;
 }
 
-@keyframes blink {
-    0% { opacity:1; }
-    50% { opacity:0; }
-    100% { opacity:1; }
+#directive {
+    border-top: 2px solid #ead06c;
+    padding-top: 7.5px;
 }
 
-@-webkit-keyframes blink {
-    0% { opacity:1; }
-    50% { opacity:0; }
-    100% { opacity:1; }
+#typed {
+    font-family: 'Roboto Condensed';
+    color: #ead06c;
+    font-size: 70px;
+    margin-left: 10px; /* otherwise the cursor makes it look a little off-center */
 }
 
-@-moz-keyframes blink {
-    0% { opacity:1; }
-    50% { opacity:0; }
-    100% { opacity:1; }
+#drake {
+    position: absolute;
+    left: 10px;
+    top: 360px;
+    cursor: pointer;
+}
+
+#cole {
+    position: absolute;
+    right: 121px;
+    top: 350px;
+    cursor: pointer;
+}
+
+#kanye {
+    position: absolute;
+    right: 0px;
+    top: -20px;
+    cursor: pointer;
+}
+
+#kendrick {
+    position: absolute;
+    left: 10px;
+    top: 50px;
+    cursor: pointer;
+}
+
+#start {
+	height: 50px;
+	border-radius: 1px;
+	border: 0px solid #ead06c;
+	width: 120px;
+	height: 70px;
+	margin: auto;
+	margin-top: 130px;
+	text-align: center;
 }