add some styling to the demo

redxtech · Nov 3, 2020 · c972d7c · c972d7c
1 parent e35da59
commit c972d7c
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2>YouTube Embed</h2>
+		<h2>youtube embed</h2>
 		<vue-plyr>
 			<div class="plyr__video-embed">
 				<iframe