From f3367d920d151727bf5703a364c7d39ae24071d7 Mon Sep 17 00:00:00 2001
From: r <r@freesoftwareextremist.com>
Date: Sun, 24 May 2020 05:46:54 +0000
Subject: [PATCH] Imporve emoji style

- Increase emoji size
- Add colons to emoji alt text and title
---
 renderer/renderer.go |  4 ++--
 static/style.css     | 19 +++++++------------
 templates/emoji.tmpl |  4 ++--
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/renderer/renderer.go b/renderer/renderer.go
index 41b3ea4..4d35ba7 100644
--- a/renderer/renderer.go
+++ b/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)
 	}
diff --git a/static/style.css b/static/style.css
index 838a3c4..64ca7b1 100644
--- a/static/style.css
+++ b/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 {
diff --git a/templates/emoji.tmpl b/templates/emoji.tmpl
index 3e9f0f0..cbffc7b 100644
--- a/templates/emoji.tmpl
+++ b/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}}