From fa21cc19eba0a673816b87660a60a10bd3ece672 Mon Sep 17 00:00:00 2001
From: Matthew Gaffen <matt@spritz.co>
Date: Wed, 21 Aug 2019 18:09:20 +0100
Subject: [PATCH] Work mostly completed; perhaps investigate rendering text
 link before mount

---
 layouts/home.njk                   | 7 +++++++
 layouts/partials/footer.njk        | 2 +-
 src/content/index.md               | 4 ----
 src/js/components/RecordPlayer.vue | 2 ++
 src/scss/base/_base.scss           | 4 ++++
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/layouts/home.njk b/layouts/home.njk
index 323a04e..2967b68 100644
--- a/layouts/home.njk
+++ b/layouts/home.njk
@@ -3,19 +3,26 @@
 {% block body %}
 <div class="col col--1-3">
   <h2>Simple Vue Component (Why would you do this?)</h2>
+  <p><em>Being a SSR Vue component that does nothing but render from a prop</em></p>
   {% vue { component:"HelloWorld" } %}
   {% vue { component:"HelloWorld", props: { message: "This is a test" } } %}
   {% vue { component:"HelloWorld", props: { message: "Of server rendered Vue components" } } %}
 </div>
 <div class="col col--1-3">
   <h2>Todo List</h2>
+  <p><em>Being a pretty standard interactive component. Also SSR rendered.</em></p>
   {% vue { component:"ListComp"} %}
   {% vue { component:"ListComp", props: { startlist: [{message:"Render Vue in Nunjucks"}, {message:"???"}, {message:"Profit!"}] } } %}
 </div>
 <div class="col col--1-3">
+  <h2>Music Player</h2>
+  <p><em>Being a pretty standard interactive component.</em></p>
   {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/last_time.mp3" } } %}
+  <p>Hearse Pileup: Last Time</p>
   {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/generation_y.mp3" } } %}
+  <p>Hearse Pileup: Generation Y</p>
   {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/pretty_shiny_things.mp3" } } %}
+  <p>Hearse Pileup: Pretty Shiny Things</p>
 </div>
 <div class="col col--1">
   <section id="content" role="main" class="content-wrapper">
diff --git a/layouts/partials/footer.njk b/layouts/partials/footer.njk
index beb1f4d..50aa903 100644
--- a/layouts/partials/footer.njk
+++ b/layouts/partials/footer.njk
@@ -1,3 +1,3 @@
 <p>
-  <a href="https://github.com/Gaffen/Kindling" target="_blank">Kindling</a> by <a href="https://gaffen.co.uk" target="_blank">Gaffen</a>
+  Music by <a href="https://hearsepileup.rip" target="_blank">Hearse Pileup</a>; Demo by <a href="https://gaffen.co.uk" target="_blank">Gaffen</a>
 </p>
diff --git a/src/content/index.md b/src/content/index.md
index a8345b1..af26390 100644
--- a/src/content/index.md
+++ b/src/content/index.md
@@ -3,7 +3,3 @@ layout: "home.njk"
 title: "Home"
 hideheader: true
 ---
-
-## This is your homepage!
-
-This is some _markdown formatted_ **content**.
diff --git a/src/js/components/RecordPlayer.vue b/src/js/components/RecordPlayer.vue
index c3b78de..9b83d9f 100644
--- a/src/js/components/RecordPlayer.vue
+++ b/src/js/components/RecordPlayer.vue
@@ -359,6 +359,7 @@ export default {
       });
     },
     togglePlay: function() {
+      console.log(this);
       if (!this.playing) {
         this.audioElement.play();
         this.playing = !this.playing;
@@ -421,6 +422,7 @@ export default {
   position: relative;
   width: 160px;
   height: 160px;
+  margin: auto;
 }
 
 .disc {
diff --git a/src/scss/base/_base.scss b/src/scss/base/_base.scss
index 8894a0c..7efcfa6 100644
--- a/src/scss/base/_base.scss
+++ b/src/scss/base/_base.scss
@@ -16,6 +16,10 @@ h1 {
   color: $red;
 }
 
+a {
+  color: currentColor;
+}
+
 .site {
   display: flex;
   min-height: 100vh;