From c972d7c9f8e23c1626c2657350ebf703445536fd Mon Sep 17 00:00:00 2001
From: Gabe Dunn <gabe@gabedunn.dev>
Date: Mon, 2 Nov 2020 16:37:02 -0800
Subject: [PATCH] add some styling to the demo

---
 examples/shared/audio.vue      |  2 +-
 examples/shared/demo.vue       | 33 ++++++++++++++++++++++++++-------
 examples/shared/video.vue      |  2 +-
 examples/shared/vimeo-np.vue   |  2 +-
 examples/shared/vimeo.vue      |  2 +-
 examples/shared/youtube-np.vue |  2 +-
 examples/shared/youtube.vue    |  2 +-
 7 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/examples/shared/audio.vue b/examples/shared/audio.vue
index 55aef883..bb0398f9 100644
--- a/examples/shared/audio.vue
+++ b/examples/shared/audio.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2>Audio Player</h2>
+		<h2>audio player</h2>
 		<vue-plyr>
 			<audio controls crossorigin playsinline>
 				<source
diff --git a/examples/shared/demo.vue b/examples/shared/demo.vue
index c707926a..ed62322c 100644
--- a/examples/shared/demo.vue
+++ b/examples/shared/demo.vue
@@ -1,6 +1,12 @@
 <template>
-	<div id="app">
-		<h1>vue-plyr demo</h1>
+	<div class="demo">
+		<h1>vue-plyr demo.</h1>
+		<h3>
+			sources can be found at
+			<a href="https://github.com/redxtech/vue-plyr/tree/master/examples">
+				github.com/redxtech/vue-plyr</a
+			>.
+		</h3>
 		<div class="components">
 			<vue-plyr-video />
 			<vue-plyr-audio />
@@ -34,15 +40,28 @@
 </script>
 
 <style>
-	#app {
-		font-family: 'Avenir', Helvetica, Arial, sans-serif;
+	@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
+
+	.demo {
+		font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
-		text-align: center;
-		color: #2c3e50;
+		color: #273849;
+		margin: 0 auto;
+		padding: 0 2rem;
+	}
+
+	.components > div {
+		margin: 2rem 0;
 	}
 
 	h1 {
-		margin: 3rem;
+		font-size: 3rem;
+		margin-bottom: 0;
+	}
+
+	h3 {
+		margin-top: 0;
+		margin-bottom: 2rem;
 	}
 </style>
diff --git a/examples/shared/video.vue b/examples/shared/video.vue
index 43b605b1..a4c74402 100644
--- a/examples/shared/video.vue
+++ b/examples/shared/video.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2>Video Player</h2>
+		<h2>video player</h2>
 		<vue-plyr :options="options">
 			<video
 				controls
diff --git a/examples/shared/vimeo-np.vue b/examples/shared/vimeo-np.vue
index 13341ce1..9b587de5 100644
--- a/examples/shared/vimeo-np.vue
+++ b/examples/shared/vimeo-np.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2>Vimeo (Not Progressive-Enhancement)</h2>
+		<h2>vimeo (not progressive-enhancement)</h2>
 		<vue-plyr>
 			<div data-plyr-provider="vimeo" data-plyr-embed-id="143418951"></div>
 		</vue-plyr>
diff --git a/examples/shared/vimeo.vue b/examples/shared/vimeo.vue
index 19465e74..e99ad71a 100644
--- a/examples/shared/vimeo.vue
+++ b/examples/shared/vimeo.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2>Vimeo Embed</h2>
+		<h2>vimeo embed</h2>
 		<vue-plyr>
 			<div class="plyr__video-embed">
 				<iframe
diff --git a/examples/shared/youtube-np.vue b/examples/shared/youtube-np.vue
index 51ada898..59cd4192 100644
--- a/examples/shared/youtube-np.vue
+++ b/examples/shared/youtube-np.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2>YouTube (Not Progressive-Enhancement)</h2>
+		<h2>youtube (not progressive-enhancement)</h2>
 		<vue-plyr>
 			<div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
 		</vue-plyr>
diff --git a/examples/shared/youtube.vue b/examples/shared/youtube.vue
index 1a362df8..8f795802 100644
--- a/examples/shared/youtube.vue
+++ b/examples/shared/youtube.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2>YouTube Embed</h2>
+		<h2>youtube embed</h2>
 		<vue-plyr>
 			<div class="plyr__video-embed">
 				<iframe