fix(audio): Correct coloring. Add instructions

_includes/session/audio.html

@@ -1,6 +1,3 @@
-{% for audio in include.audio %}
-  <div style='position: relative' class='essential_audio' data-url='{{ audio }}'></div>
-
-  {% assign _size = include.audio | size %}
-  {% if forloop.index != _size %}<hr />{% endif %}
-{% endfor %}
+<div style="padding: 50px 0">
+  <div class='essential_audio' data-url='{{ include.audio }}'></div>
+</div>

_includes/session/sounds.html

@@ -0,0 +1,6 @@
+{% for audio in include.audio %}
+  <div class='essential_audio' data-url='{{ audio }}'></div>
+
+  {%- assign _size = include.audio | size %}
+  {% if forloop.index != _size %}<br /><br />{% endif -%}
+{% endfor %}

_layouts/session.html

@@ -17,7 +17,7 @@
         {%- include session/images.html images=session_data.images -%}
         {%- include session/points.html -%}
         {%- include session/videos.html videos=session_data.videos -%}
-        {%- include session/audio.html audio=session_data.audio -%}
+        {%- include session/sounds.html audio=session_data.audio -%}
         {{ content }}
         {%- if page.dialogue -%}
           {%- include session/conversation.html data=page.dialogue-%}

_sass/_essential-audio.scss

@@ -83,7 +83,7 @@ div.essential_audio > div:nth-child(2):after {
   content: "";
   position: absolute;
   z-index: 0;
-  background-color: var(--color-link);
+  background-color: #000;
   opacity: 0.3;
   mix-blend-mode: multiply;
   top: 0px;
@@ -95,7 +95,7 @@ div.essential_audio > div:nth-child(2):after {
 
 /* 4. The Loading Progress Bar */
 div.essential_audio > div:nth-child(2) div {
-  background-color: #666;
+  background-color: var(--color-link);
   mix-blend-mode: multiply;
 }
 

content/_session/audio-01.md

@@ -1,2 +1,23 @@
 ---
 ---
+
+<hr class='section' />
+
+## Play Audio
+
+Include an `audio` field in your `_data/sessions.yml` to add audio to top of content:
+
+<pre>
+...
+audio:
+  - /assets/music-1.mp3
+  - /assets/speech-2.ogg
+</pre>
+
+To add audio file on-demand use:
+
+<pre>
+{&#37; include session/audio.html audio='/assets/music.mp3' &#37;}
+</pre>
+
+<hr class='logo' />

content/_session/parts/theme_intro.md

@@ -85,6 +85,7 @@ Key         | Description
 `width`     | Optional setting to use screen's width for content (only value: `max`)
 `images`    | Optional array of `src` & `desc` for main image(s) to display
 `videos`    | Optional arrray of YouTube video IDs to render at the top of the session
+`audio`     | Optional array of audio files to render at top of session
 `due`       | OPtional date that this assignment or quiz is due (e.g. `2022-10-10`)
 `points`    | Optional value of this assignment (e.g. `30`)
 `part`      | OPtional partition identifier for current lession (e.g. `1`)