diff options
| -rw-r--r-- | data.go | 5 | ||||
| -rw-r--r-- | index.ts | 2 | ||||
| -rw-r--r-- | schema.json | 6 | ||||
| -rw-r--r-- | scss/main.scss | 1 | ||||
| -rw-r--r-- | scss/tag.scss | 17 | ||||
| -rw-r--r-- | templates/page/tags.gohtml | 2 |
6 files changed, 23 insertions, 10 deletions
@@ -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 + ";") +} @@ -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> |