feat(tag): style on hover

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 + ";")
+}

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")
         })
     })
 

schema.json

@@ -72,13 +72,17 @@
         },
         "text": {
           "type": "string"
+        },
+        "tag_hover": {
+          "type": "string"
         }
       },
       "additionalProperties": false,
       "required": [
         "background",
         "buttons",
-        "text"
+        "text",
+        "tag_hover"
       ]
     },
     "description": {

scss/main.scss

@@ -73,6 +73,7 @@ main {
   transition: .3s;
   max-height: 75vh;
   overflow: auto;
+  scrollbar-width: thin;
   & h1, h2, h3 {
     margin: 0;
   }

scss/tag.scss

@@ -16,21 +16,18 @@
     }
   }
   & p {
-    display: none;
-    @media only screen and (max-width: vars.$bp-little) {
     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;
+    }
+  }
 }

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>