feat(tag): style on hover

6 files changed, 23 insertions, 10 deletions

diff --git a/data.go b/data.go
index 06ac7e2..7c976e7 100644
--- a/data.go
+++ b/data.go
@@ -31,6 +31,7 @@ type Color struct {
 	Background *BackgroundColor `json:"background"`
 	Button     *ButtonColor     `json:"buttons"`
 	Text       string           `json:"text"`
+	TagHover   string           `json:"tag_hover"`
 }
 
 type BackgroundColor struct {
@@ -87,3 +88,7 @@ func (b *ButtonColor) GetTextColor() template.CSS {
 func (b *ButtonColor) GetBackground() template.CSS {
 	return template.CSS("--background: " + b.Background + ";--background-hover: " + b.BackgroundHover + ";")
 }
+
+func (t *Color) GetTagColor() template.CSS {
+	return template.CSS("--tag-hover: " + t.TagHover + ";")
+}
diff --git a/index.ts b/index.ts
index 598de5c..77a004a 100644
--- a/index.ts
+++ b/index.ts
@@ -1,7 +1,7 @@
 function setupEvents() {
     document.querySelectorAll<HTMLElement>(".tag")?.forEach(t => {
         t.addEventListener("click", _ => {
-            t.classList.toggle("active")
+            // t.classList.toggle("active")
         })
     })
 
diff --git a/schema.json b/schema.json
index d84d5b2..d73f3db 100644
--- a/schema.json
+++ b/schema.json
@@ -72,13 +72,17 @@
         },
         "text": {
           "type": "string"
+        },
+        "tag_hover": {
+          "type": "string"
         }
       },
       "additionalProperties": false,
       "required": [
         "background",
         "buttons",
-        "text"
+        "text",
+        "tag_hover"
       ]
     },
     "description": {
diff --git a/scss/main.scss b/scss/main.scss
index 6ce00b3..f53f6d4 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -73,6 +73,7 @@ main {
   transition: .3s;
   max-height: 75vh;
   overflow: auto;
+  scrollbar-width: thin;
   & h1, h2, h3 {
     margin: 0;
   }
diff --git a/scss/tag.scss b/scss/tag.scss
index 02539fa..3b1376c 100644
--- a/scss/tag.scss
+++ b/scss/tag.scss
@@ -16,21 +16,18 @@
     }
   }
   & p {
-    display: none;
-    @media only screen and (max-width: vars.$bp-little) {
-      display: block;
-    }
+    display: block;
+    margin-top: 0.5rem;
   }
 }
 
 .tag {
   cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 16px;
   @media only screen and (max-width: vars.$bp-little) {
     cursor: auto;
   }
-  & h4:hover {
-    text-decoration: underline;
-  }
   &.active {
     & h4 {
       margin-bottom: 0.5rem;
@@ -39,4 +36,10 @@
       display: block;
     }
   }
+  &:hover {
+    background: var(--tag-hover);
+    & h4 {
+      font-weight: bold;
+    }
+  }
 }
diff --git a/templates/page/tags.gohtml b/templates/page/tags.gohtml
index dc13916..4713ff4 100644
--- a/templates/page/tags.gohtml
+++ b/templates/page/tags.gohtml
@@ -1,7 +1,7 @@
 {{define "body"}}
     <main style="{{ .GetBackground }}">
         <h2>Tags</h2>
-        <div class="tags">
+        <div class="tags" style="{{ .Color.GetTagColor }}">
             {{ range $tag := .Person.Tags }}
                 <div class="tag">
                     <h4>{{ .Name }}</h4>