Improve annotation card styling and layoutUnverified
1702c76 parent: b421d1f modified
internal/tmpl/partials/annotation-card.html +4 -4 | @@ -1,15 +1,15 @@ | ||
| 1 | 1 | {{define "annotation-card.html"}} |
| 2 | -<div id="annotation-{{.annotation.ID}}" class="bg-spot-surface rounded-xl p-4 shadow-spot"> | |
| 2 | +<div id="annotation-{{.annotation.ID}}" class="bg-spot-surface rounded-xl p-5 border border-spot-divider shadow-sm"> | |
| 3 | 3 | {{if .annotation.ArticleURL}} |
| 4 | - <div class="text-xs text-spot-muted mb-2"> | |
| 4 | + <div class="text-xs mb-3"> | |
| 5 | 5 | <a href="{{.annotation.ArticleURL}}" class="text-spot-secondary hover:text-spot-green transition truncate block">{{.annotation.ArticleURL}}</a> |
| 6 | 6 | </div> |
| 7 | 7 | {{end}} |
| 8 | 8 | {{if .annotation.Quote.Valid}} |
| 9 | - <blockquote class="border-l-2 border-spot-green pl-3 text-sm text-spot-body italic leading-relaxed">{{.annotation.Quote.String}}</blockquote> | |
| 9 | + <blockquote class="border-l-2 border-spot-green pl-4 text-sm text-spot-text leading-relaxed">{{.annotation.Quote.String}}</blockquote> | |
| 10 | 10 | {{end}} |
| 11 | 11 | {{if .annotation.Note.Valid}} |
| 12 | - <p class="text-sm text-spot-body mt-2 leading-relaxed">{{.annotation.Note.String}}</p> | |
| 12 | + <p class="text-sm text-spot-text font-medium leading-relaxed mt-3">{{.annotation.Note.String}}</p> | |
| 13 | 13 | {{end}} |
| 14 | 14 | {{if .annotation.Tags.Valid}} |
| 15 | 15 | <div class="flex gap-1.5 mt-3 flex-wrap"> |
| @@ -1,15 +1,15 @@ | |||
| 1 | {{define "annotation-card.html"}} | 1 | {{define "annotation-card.html"}} |
| 2 | -<div id="annotation-{{.annotation.ID}}" class="bg-spot-surface rounded-xl p-4 shadow-spot"> | 2 | +<div id="annotation-{{.annotation.ID}}" class="bg-spot-surface rounded-xl p-5 border border-spot-divider shadow-sm"> |
| 3 | {{if .annotation.ArticleURL}} | 3 | {{if .annotation.ArticleURL}} |
| 4 | - <div class="text-xs text-spot-muted mb-2"> | 4 | + <div class="text-xs mb-3"> |
| 5 | <a href="{{.annotation.ArticleURL}}" class="text-spot-secondary hover:text-spot-green transition truncate block">{{.annotation.ArticleURL}}</a> | 5 | <a href="{{.annotation.ArticleURL}}" class="text-spot-secondary hover:text-spot-green transition truncate block">{{.annotation.ArticleURL}}</a> |
| 6 | </div> | 6 | </div> |
| 7 | {{end}} | 7 | {{end}} |
| 8 | {{if .annotation.Quote.Valid}} | 8 | {{if .annotation.Quote.Valid}} |
| 9 | - <blockquote class="border-l-2 border-spot-green pl-3 text-sm text-spot-body italic leading-relaxed">{{.annotation.Quote.String}}</blockquote> | 9 | + <blockquote class="border-l-2 border-spot-green pl-4 text-sm text-spot-text leading-relaxed">{{.annotation.Quote.String}}</blockquote> |
| 10 | {{end}} | 10 | {{end}} |
| 11 | {{if .annotation.Note.Valid}} | 11 | {{if .annotation.Note.Valid}} |
| 12 | - <p class="text-sm text-spot-body mt-2 leading-relaxed">{{.annotation.Note.String}}</p> | 12 | + <p class="text-sm text-spot-text font-medium leading-relaxed mt-3">{{.annotation.Note.String}}</p> |
| 13 | {{end}} | 13 | {{end}} |
| 14 | {{if .annotation.Tags.Valid}} | 14 | {{if .annotation.Tags.Valid}} |
| 15 | <div class="flex gap-1.5 mt-3 flex-wrap"> | 15 | <div class="flex gap-1.5 mt-3 flex-wrap"> |