add scrumpy ad

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>

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)
+		;
+	}
+
+}

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>