From 6a177e466334086b26689429e3da5a8bfba449de Mon Sep 17 00:00:00 2001
From: Anhgelus Morhtuuzh <anhgelus.morhtuuzh@proton.me>
Date: Sun, 10 Nov 2024 00:43:24 +0100
Subject: [PATCH] feat(link): change color on hover

---
 data.go                     | 18 ++++++++++--------
 example.json                | 14 ++++++++++----
 scss/main.scss              | 26 +++++++++++++++++++++-----
 templates/base/base.gohtml  |  2 +-
 templates/page/index.gohtml |  2 +-
 5 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/data.go b/data.go
index 6bf89af..d085b99 100644
--- a/data.go
+++ b/data.go
@@ -36,10 +36,12 @@ type BackgroundColor struct {
 }
 
 type Link struct {
-	Link      string `json:"link"`
-	Content   string `json:"content"`
-	Color     string `json:"color"`
-	TextColor string `json:"text_color"`
+	Link           string `json:"link"`
+	Content        string `json:"content"`
+	Color          string `json:"color"`
+	TextColor      string `json:"text_color"`
+	ColorHover     string `json:"color_hover"`
+	TextColorHover string `json:"text_color_hover"`
 }
 
 type Legal struct {
@@ -60,17 +62,17 @@ func (d *Data) GetBackground() template.CSS {
 }
 
 func (d *Data) GetBackgroundImage() template.CSS {
-	return template.CSS("background-image: url(" + golatt.GetStaticPath(d.Image) + ");")
+	return template.CSS("--background-image: url(" + golatt.GetStaticPath(d.Image) + ");")
 }
 
 func (d *Data) GetTextColor() template.CSS {
-	return template.CSS("color: " + d.Color.Text + ";")
+	return template.CSS("--text-color: " + d.Color.Text + ";")
 }
 
 func (l *Link) GetLinkColor() template.CSS {
-	return template.CSS("color: " + l.TextColor + ";")
+	return template.CSS("--text-color: " + l.TextColor + ";--text-color-hover: " + l.TextColorHover + ";")
 }
 
 func (l *Link) GetBackground() template.CSS {
-	return template.CSS("background: " + l.Color + ";")
+	return template.CSS("--background: " + l.Color + ";--background-hover: " + l.ColorHover + ";")
 }
diff --git a/example.json b/example.json
index f6b7778..458d5fb 100644
--- a/example.json
+++ b/example.json
@@ -31,20 +31,26 @@
     {
       "link": "https://discord.gg/minecraft",
       "content": "Minecraft's Discord",
-      "color": "#800080FF",
-      "text_color": "#fff"
+      "color": "#800080",
+      "text_color": "#fff",
+      "color_hover": "#680c68",
+      "text_color_hover": "#eee"
     },
     {
       "link": "https://github.com/anhgelus",
       "content": "GitHub",
       "color": "#800080FF",
-      "text_color": "#fff"
+      "text_color": "#fff",
+      "color_hover": "#680c68",
+      "text_color_hover": "#eee"
     },
     {
       "link": "https://youtube.com/@anhgelus",
       "content": "YouTube",
       "color": "#800080FF",
-      "text_color": "#fff"
+      "text_color": "#fff",
+      "color_hover": "#680c68",
+      "text_color_hover": "#eee"
     }
   ],
   "legal": {
diff --git a/scss/main.scss b/scss/main.scss
index 40fbcb4..31e7246 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,15 +1,19 @@
 @use "../node_modules/reset-css/reset.css";
 
+:root {
+  --text-color: #000
+}
+
 body {
+  --background-image: ;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
-  background-position: center;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
+  background: var(--background-image) center fixed no-repeat;
   background-size: cover;
+  color: var(--text-color);
 }
 
 .credits {
@@ -19,7 +23,7 @@ body {
   gap: 1em;
   font-size: 16px;
   & a {
-    color: black;
+    color: var(--text-color);
   }
 }
 
@@ -44,6 +48,7 @@ h2 {
   align-items: center;
   gap: 2rem;
   margin-bottom: 2rem;
+  color: var(--text-color);
 
   &__information {
     display: flex;
@@ -68,6 +73,10 @@ h2 {
 }
 
 .links {
+  --text-color-hover: var(--text-color);
+  --background: #000;
+  --background-hover: var(--background);
+
   display: flex;
   margin-top: 2rem;
   width: 100%;
@@ -78,13 +87,20 @@ h2 {
     justify-content: center;
     width: 33%;
     border-radius: 16px;
+    background: var(--background);
+    &:hover {
+      background: var(--background-hover);
+    }
   }
   & a {
     display: block;
-    color: black;
+    color: var(--text-color);
     text-decoration: none;
     text-align: center;
     padding: 1em;
     width: 100%;
+    &:hover {
+      color: var(--text-color-hover);
+    }
   }
 }
diff --git a/templates/base/base.gohtml b/templates/base/base.gohtml
index 12568ed..003eab1 100644
--- a/templates/base/base.gohtml
+++ b/templates/base/base.gohtml
@@ -9,7 +9,7 @@
         <link rel="stylesheet" href="{{getAssetPath "styles.css"}}" />
         {{template "opengraph-base" .SEO}}
     </head>
-    <body style="{{ .Data.GetBackgroundImage }}">
+    <body style="{{ .Data.GetBackgroundImage }}{{ .Data.GetTextColor }}">
     {{template "body" .Data}}
     <div class="credits">
         <p>Crafted by <a href="https://www.anhgelus.world/" target="_blank">Anhgelus Morhtuuzh</a></p>
diff --git a/templates/page/index.gohtml b/templates/page/index.gohtml
index cfb90ed..fccb7a5 100644
--- a/templates/page/index.gohtml
+++ b/templates/page/index.gohtml
@@ -1,5 +1,5 @@
 {{define "body"}}
-    <main style="{{ .GetBackground }}{{ .GetTextColor }}">
+    <main style="{{ .GetBackground }}">
         <div class="presentation">
             <figure>
                 <img src="{{ getStaticPath .Person.Image }}" alt="{{ .Person.Name }}'s image">