From 7362dc790fd8f7c808342336838e32c13a68f77f Mon Sep 17 00:00:00 2001
From: vrifox <vrifox@vrifox.cc>
Date: Wed, 15 Mar 2023 11:42:08 +0100
Subject: [PATCH] make scroll hint clickable

---
 assets/scss/home.scss      | 19 +++++++++++++------
 assets/scss/main.scss      |  1 +
 assets/scss/variables.scss |  1 +
 layouts/index.html         |  3 ++-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index a787dc6..b8254b6 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -36,17 +36,24 @@
     p {
         letter-spacing: 0.15rem;
     }
-    &::after {
-        content: "­☟";
+    #scroll-down {
         font-size: 4.8rem;
         position: absolute;
         bottom: 2rem;
         animation: 1s ease-in infinite alternate scrollDown;
         font-family: serif;
-    }
-    @keyframes scrollDown {
-        from { transform: translateY(0); }
-        to { transform: translateY(1rem); }
+        text-decoration: none;
+        color: var(--vriish-gradient-text);
+        transition: color 0.2s ease-in-out;
+
+        &:hover {
+            color: var(--vriish-gradient-text-hover);
+        }
+
+        @keyframes scrollDown {
+            from { transform: translateY(0); }
+            to { transform: translateY(1rem); }
+        }
     }
 }
 
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 7a819b1..c171566 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -2,6 +2,7 @@
 	box-sizing: border-box;
 	scrollbar-color: var(--vriish-rose) var(--background);
 	scrollbar-width: thin;
+	scroll-behavior: smooth;
 	&::-webkit-scrollbar {
 		background: var(--background);
 		width: 6px;
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 48b43e8..a2f6ef7 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -45,6 +45,7 @@
 	--vriish-gradient: linear-gradient(-35deg, var(--primary-light-300) -50%, var(--primary-dark-300) 150%);
 	--vriish-gradient-shadow: 2px 2px 10px var(--background);
 	--vriish-gradient-text: var(--primary-light-950);
+	--vriish-gradient-text-hover: var(--primary-light-900);
 
 	--vriish-waves: 
 		radial-gradient(2.64rem at 50% calc(100% - 3.67rem),#000 99%,#0000 101%) calc(50% - 3rem) 0/6rem 100%,
diff --git a/layouts/index.html b/layouts/index.html
index b7daa08..e634951 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,11 +7,12 @@
 <header id="introduction" class="global-header">
     <h1>{{ i18n "introduction-heading" }}</h1>
     <p>{{ i18n "introduction-sub" }}</p>
+    <a href="#main" id="scroll-down">☟</a>
 </header>
 {{ end }}
 
 {{- define "main" }}
-    <main>
+    <main id="main">
         {{ .Content }}
     </main>
 {{- end }}