From 7c5376cd8c13277439f6045c71e96586b1bdc680 Mon Sep 17 00:00:00 2001
From: Nathan Upchurch <nathan@upchur.ch>
Date: Sat, 20 Jan 2024 15:11:24 -0600
Subject: [PATCH] Add css custom property to audioPlayer

---
 assets/css/main.css                   | 11 ++++++++++-
 components/audioPlayer/audioPlayer.js | 23 ++++++++++++++++-------
 index.html                            |  4 ++++
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 69ae20f..0e1ff2d 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,7 +1,16 @@
+audio-player {
+	--background: radial-gradient(circle, rgba(8,5,34,1) 3%, rgba(9,3,62,1) 34%, rgba(15,62,109,1) 57%, rgba(69,130,191,1) 82%, rgba(146,172,226,1) 100%);
+	color: white;
+}
+body {
+	font-family: sans-serif;
+}
 header {
 	margin-bottom: 5rem;
 }
-
+h3 {
+	font-size: 1.5rem;
+}
 main {
 	margin: auto;
 	width: 45rem;
diff --git a/components/audioPlayer/audioPlayer.js b/components/audioPlayer/audioPlayer.js
index 254f48f..0f91a0e 100644
--- a/components/audioPlayer/audioPlayer.js
+++ b/components/audioPlayer/audioPlayer.js
@@ -3,13 +3,20 @@ const template = document.createElement('template');
 template.innerHTML = `
 <style>
   audio {
-    border-radius: 0px 0px 10px 10px;
+    height: 2rem;
+    margin: .5rem;
+  }
+  .round-corners {
+    border-radius: 10px;
+  }
+  .small-shadow {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
   }
   #audioPlayerContainer {
-    border-radius: 10px;
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
+  background: var(--background);
     display: flex;
     flex-flow: column nowrap;
+    height: 13.5rem;
   }
   #audioDetailsContainer {
     display: flex;
@@ -17,24 +24,26 @@ template.innerHTML = `
   }
   #audioTextContainer {
     padding: 0 1rem 0 1rem;
+    height: 10rem;
+    overflow-y: scroll;
   }
   img {
-    border-radius: 10px 0px 0px 0px;
     height: 10rem;
+    margin: .5rem 0rem 0rem .5rem;
     object-fit: cover;
     width: 10rem;
   }
 </style>
 
-  <div id="audioPlayerContainer">
+  <div id="audioPlayerContainer" class="small-shadow round-corners">
     <div id="audioDetailsContainer">
-      <img src="" alt="">
+      <img src="" alt="" class="small-shadow round-corners">
       <div id="audioTextContainer">
         <slot name="title"><h3>TITLE</h3></slot>
         <slot name="description"><p>DESCRIPTION</p></slot>
       </div>
     </div>
-    <audio controls>
+    <audio class="small-shadow round-corners" controls>
       <source src="">
       Your browser does not support the audio element.
     </audio>
diff --git a/index.html b/index.html
index 904daed..47ea346 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,10 @@
                 <li>title: title for the audio file</li>
                 <li>description: a description of the audio file</li>
             </ul>
+            <p>CSS Custom Properties:</p>
+            <ul>
+                <li>--background</li>
+            </ul>
             <p>Example usage:</p>
             <pre>
                 <code>