From 08a660cff8d92e158e366937f5d27e23b1cee49c Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Tue, 25 Jan 2022 20:43:13 +0100
Subject: [PATCH] Add artist credit

---
 src/pages/index.js               |  2 ++
 src/pages/index.module.scss      | 16 ++++++++++++++++
 src/pages/index.module.scss.d.ts |  1 +
 3 files changed, 19 insertions(+)

diff --git a/src/pages/index.js b/src/pages/index.js
index 4a5d751..55cbadf 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -35,6 +35,8 @@ const IndexPage = ({ data }) => <Layout topBarHome={true}>
                     <a href="https://twitter.com/Unkn0wnKevin" target="_blank" rel="noreferrer"><Twitter/> @Unkn0wnKevin</a>
                 </div>
             </div>
+
+            <a className={styles.artCredit} href="https://twitter.com/Pericote9" target="_blank" rel="noopener">Chibi drawn by @Pericote9</a>
         </div>
 </Layout>;
 
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index c5ffee1..51d983e 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -11,6 +11,7 @@ $layoutTwoColBreakpoint: 800px;
     
     
         position: relative;
+        overflow: hidden;
 
         .heroHalo {
             position: absolute;
@@ -114,5 +115,20 @@ $layoutTwoColBreakpoint: 800px;
             clip-path: polygon(14% 4%,95% 1%,88% 96%,2% 89%);
             background-color: var(--color-secondary-lighter);
         }
+
+        .artCredit {
+            position: absolute;
+            bottom: $layoutPadding;
+            left: 50%;
+            padding: 0 $layoutPadding;
+            color: white;
+            opacity: .25;
+            transition: opacity .25s;
+            transform: translate(-150%, 0);
+
+            @media (max-width: $layoutTwoColBreakpoint) {
+                opacity: 0;
+            }
+        }
     }
 
diff --git a/src/pages/index.module.scss.d.ts b/src/pages/index.module.scss.d.ts
index d2e3d5e..0884e7b 100644
--- a/src/pages/index.module.scss.d.ts
+++ b/src/pages/index.module.scss.d.ts
@@ -1,3 +1,4 @@
+export const artCredit: string;
 export const description: string;
 export const hero: string;
 export const heroBox: string;