Added a music player, a song for testing, and changed the 'start' sections background gif

Author: beacrea

app/styles/__sections.scss

@@ -10,8 +10,9 @@ Default Section
 .container_sections {
   flex-grow: 1;
   height: 100%;
-  background: rgba(0,0,0,0.5);
+  background: rgba(0,0,0,1);
   -webkit-backdrop-filter: blur(20px);
+  box-shadow: 0 0 1rem rgba(0,0,0,1);
 }
 
 
@@ -21,9 +22,15 @@ Other Sections
 [class^="section_"] {
   height: 100%;
   padding: 1rem;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
   * {
     z-index: 2;
   }
+  audio {
+    display: block;
+  }
 }
 
 @import "section-start";

app/styles/_section-start.scss

@@ -4,4 +4,5 @@ Default Section
 .section_start {
   //background-color: rgba(255,255,255,0.05);
   min-height: 400px;
+  background-image: url('../img/jazz_street.gif');
 }

app/styles/_sidebar.scss

@@ -10,11 +10,10 @@ Base Styling
 .component_sidebar {
   $width: 250px;
   flex: 0 0 $width;
-  background-color: rgba(20,20,20,0.9);
+  background-color: rgba(20,20,20,0.95);
   color: white;
   padding: 1rem;
   -webkit-backdrop-filter: blur(20px);
-  box-shadow: 0 0 1rem rgba(0,0,0,0.5);
   // TODO: Make this animated, with a hamburger animation to toggle.
   &.hidden {
     margin-left: -$width;

app/templates/start.hbs

@@ -1,4 +1,8 @@
 <section class="section_start">
   <span>'Ello!</span>
+  <audio autoplay controls>
+    <source src="audio/HankMobley-1960-SoulStation-05-SoulStation.mp3" type="audio/mpeg" loop="true" autoplay="true">
+    Your browser does not support the audio element.
+  </audio>
   {{outlet}}
 </section>