Imporve emoji style

- Increase emoji size
- Add colons to emoji alt text and title

renderer/renderer.go

@@ -40,7 +40,7 @@ func emojiFilter(content string, emojis []mastodon.Emoji) string {
 	var replacements []string
 	var r string
 	for _, e := range emojis {
-		r = fmt.Sprintf("<img class=\"status-emoji\" src=\"%s\" alt=\"%s\" title=\"%s\" />",
+		r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" />",
 			e.URL, e.ShortCode, e.ShortCode)
 		replacements = append(replacements, ":"+e.ShortCode+":", r)
 	}
@@ -56,7 +56,7 @@ func statusContentFilter(spoiler string, content string,
 		content = spoiler + "<br />" + content
 	}
 	for _, e := range emojis {
-		r = fmt.Sprintf("<img class=\"status-emoji\" src=\"%s\" alt=\"%s\" title=\"%s\" />",
+		r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" />",
 			e.URL, e.ShortCode, e.ShortCode)
 		replacements = append(replacements, ":"+e.ShortCode+":", r)
 	}

static/style.css

@@ -63,13 +63,6 @@
 	font-size: 10pt;
 }
 
-.status-emoji {
-	height: 20px;
-	margin-bottom: -4px;
-	width: auto;
-	vertical-align: unset !important;
-}
-
 .name-emoji {
 	height: 20px;
 	width: auto;
@@ -324,18 +317,20 @@ a:hover,
   vertical-align: middle;
 }
 
-.emoji {
+.emoji-item {
 	min-width: 220px;
 	display: inline-block;
-	margin-bottom: 2px;
+	margin: 4px 0;
 }
 
-.emoji-img {
-	height: 24px;
-	width: 24px;
+img.emoji {
+	height: 32px;
 	object-fit: contain;
 	vertical-align: middle;
+}
 
+.status-dname img.emoji {
+	height: 24px;
 }
 
 .emoji-shortcode {

templates/emoji.tmpl

@@ -4,8 +4,8 @@
 
 <div class="emoji-list-container">
 	{{range .Emojis}}
-	<div class="emoji">
-		<img class="emoji-img" src="{{.URL}}" alt="{{.ShortCode}}" />
+	<div class="emoji-item">
+		<img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" />
 		<div class="emoji-shortcode">:{{.ShortCode}}:</div>
 	</div>
 	{{end}}