From 5175cb315060fad768651f162a04523b18bc3d15 Mon Sep 17 00:00:00 2001
From: nikurasu <publicmail@nikurasu.gay>
Date: Fri, 21 Oct 2022 16:00:48 +0200
Subject: [PATCH] styling of links

---
 src/public/util/colors.scss       |  2 ++
 src/public/util/simple-basic.scss | 22 ++++++++++++++++++++--
 src/views/index.ejs               |  4 +++-
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 src/public/util/colors.scss

diff --git a/src/public/util/colors.scss b/src/public/util/colors.scss
new file mode 100644
index 0000000..06fa1a6
--- /dev/null
+++ b/src/public/util/colors.scss
@@ -0,0 +1,2 @@
+$no_alpha: #00000000;
+$white: #FFFFFF;
\ No newline at end of file
diff --git a/src/public/util/simple-basic.scss b/src/public/util/simple-basic.scss
index 84937fc..9ddcefd 100644
--- a/src/public/util/simple-basic.scss
+++ b/src/public/util/simple-basic.scss
@@ -1,3 +1,5 @@
+@import "colors.scss";
+
 body {
     min-height: 100vh;
 }
@@ -26,8 +28,24 @@ body {
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    >a{
+        >button {
+            font-family: monospace;
+            font-size: 1rem;
+            font-weight: 600;
+            background-color: $no_alpha;
+            color: $white;
+            border: 4px solid $white;
+            width: 750px;
+            height: 3rem;
+            cursor: pointer;
+            transition: background-color .25s ease-in-out, color .25s ease-in-out;
 
-    >button {
-        background-color: #000;
+            &:hover {
+                background-color: $white;
+                color: #ff9601;
+                background-position: 2rem;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 236d020..5963695 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -9,7 +9,9 @@
     </div>
     <div class="linkbox">
         <% links.forEach(link => { %>
-        <button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
+        <a href="<%= link.hyperlink %>"> 
+            <button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
+        </a>
         <% }) %>
     </div>
 </div>