From 28bb7711d9df2afaeb6064905775275149aa97f8 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 7 Jan 2022 16:15:42 +0100
Subject: [PATCH] feat: add button component

---
 src/components/Button.vue | 52 +++++++++++++++++++++++++++++++++++++++
 src/components/Prose.vue  |  3 ++-
 src/views/Home.vue        | 30 +++++++++++++++++++++-
 3 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Button.vue

diff --git a/src/components/Button.vue b/src/components/Button.vue
new file mode 100644
index 0000000..6e596de
--- /dev/null
+++ b/src/components/Button.vue
@@ -0,0 +1,52 @@
+<template>
+  <a
+    class="btn"
+    :href="href"
+    :download="href.slice(href.lastIndexOf('/') + 1)"
+    v-if="download"
+  >
+    <slot></slot> ⬇️
+  </a>
+  <a class="btn" :href="href" v-else> <slot></slot> ⬇️ </a>
+</template>
+
+<script>
+export default {
+  props: {
+    href: String,
+    download: Boolean,
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/scss/_variables.scss";
+
+.btn {
+  margin: 0.5em 0;
+  padding: 0.5em 1em;
+
+  position: relative;
+  top: 0;
+
+  border-radius: 0.25em;
+  box-shadow: 0 0.5em 0 0 $bg-color-dark;
+
+  transition: all 0.1s ease-out;
+
+  background-color: lighten($bg-color-dark, 5%);
+
+  text-decoration: none;
+  text-align: center;
+
+  &:hover {
+    top: -0.25em;
+    box-shadow: 0 0.75em 0 0 $bg-color-dark;
+  }
+
+  &:active {
+    top: 0.25em;
+    box-shadow: 0 0.25em 0 0 $bg-color-dark;
+  }
+}
+</style>
diff --git a/src/components/Prose.vue b/src/components/Prose.vue
index 9cd3a1d..8c90220 100644
--- a/src/components/Prose.vue
+++ b/src/components/Prose.vue
@@ -14,7 +14,8 @@
   h2,
   h3,
   p,
-  .quickfacts {
+  .quickfacts,
+  .btn-group {
     max-width: 55rem;
     margin: {
       left: 1rem;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3c69b3e..ff81fbd 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -10,15 +10,43 @@
       Want to learn more about this handsome dragon? You've come to the right
       place!
     </p>
+
+    <p>
+      Or if you just want to download the complete ref sheet you can do so here:
+    </p>
+
+    <div class="btn-group flex flex--row flex--wrap">
+      <btn href="/sebin-ref-full-SFW-hires.jpg">Download SFW (10 MB)</btn>
+      <btn href="/sebin-ref-full-NSFW-hires.jpg">Download NSFW (10,2 MB)</btn>
+    </div>
   </prose>
 </template>
 
 <script>
 import Prose from "@/components/Prose.vue";
 import Welcome from "@/components/Welcome.vue";
+import btn from "@/components/Button.vue";
 
 export default {
   name: "Home",
-  components: { Prose, Welcome },
+  components: { Prose, Welcome, btn },
 };
 </script>
+
+<style lang="scss">
+@import "@/scss/base.scss";
+
+.btn-group {
+  justify-content: space-evenly;
+
+  .btn {
+    flex: 1 0 100%;
+
+    margin: 1em 0;
+
+    @include mq-desktop {
+      flex: 0 0 auto;
+    }
+  }
+}
+</style>