From d57825adb509e08149e2a059dc9a41ea9f628869 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 22 Aug 2018 19:13:14 +0200
Subject: [PATCH] add scrumpy ad

---
 examples/Components/Ad/index.vue  |  7 ++++++
 examples/Components/Ad/style.scss | 42 +++++++++++++++++++++++++++++++
 examples/Components/App/index.vue |  8 ++++++
 3 files changed, 57 insertions(+)
 create mode 100644 examples/Components/Ad/index.vue
 create mode 100644 examples/Components/Ad/style.scss

diff --git a/examples/Components/Ad/index.vue b/examples/Components/Ad/index.vue
new file mode 100644
index 00000000..e48f8e1a
--- /dev/null
+++ b/examples/Components/Ad/index.vue
@@ -0,0 +1,7 @@
+<template>
+	<a class="ad" href="https://scrumpy.io/" target="_blank">
+		<img class="ad__image" src="https://drop.philipp-kuehn.com/api98lPyuw.png" alt="Scrumpy. Agile Planning, Made Simple. Get Started." />
+	</a>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>
diff --git a/examples/Components/Ad/style.scss b/examples/Components/Ad/style.scss
new file mode 100644
index 00000000..9b938444
--- /dev/null
+++ b/examples/Components/Ad/style.scss
@@ -0,0 +1,42 @@
+@import "~variables";
+
+.ad {
+	display: block;
+	padding: 1rem;
+	transition: 0.2s transform;
+	margin: 3rem auto 0 auto;
+	width: 15rem;
+
+	@media (min-width: 1020px) {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		margin-top: 0;
+	}
+
+	&__image {
+		display: block;
+		width: 100%;
+		height: auto;
+		border-radius: 5px;
+		overflow: hidden;
+		transition: 0.2s box-shadow;
+		box-shadow:
+			0 2px 4px 0 rgba(black, 0.05),
+			0 2px 10px 0 rgba(black, 0.07)
+		;
+	}
+
+	&:hover {
+		transform: translateY(-5px);
+	}
+
+	&:hover &__image {
+		box-shadow:
+			0 2px 1px 0 rgba(black, 0.07),
+			0 5px 20px 0 rgba(black, 0.06),
+			0 8px 40px 0 rgba(black, 0.04)
+		;
+	}
+
+}
\ No newline at end of file
diff --git a/examples/Components/App/index.vue b/examples/Components/App/index.vue
index 60679e59..e3e03b1a 100644
--- a/examples/Components/App/index.vue
+++ b/examples/Components/App/index.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="page" spellcheck="false">
+
     <navigation />
+
     <div class="page__content">
       <router-view />
     </div>
+
     <div class="page__footer">
       <a class="page__source-link" :href="$route.meta.githubUrl" target="_blank">
         <icon name="code" />
@@ -12,17 +15,22 @@
         </span>
       </a>
     </div>
+
+    <ad />
+
   </div>
 </template>
 
 <script>
 import Navigation from 'Components/Navigation'
 import Icon from 'Components/Icon'
+import Ad from 'Components/Ad'
 
 export default {
   components: {
     Navigation,
     Icon,
+    Ad,
   },
 }
 </script>