From 29b683271671ea6b9373e3a0049f11a84478a2c3 Mon Sep 17 00:00:00 2001
From: ash lea <ashlea@protonmail.com>
Date: Wed, 25 Jul 2018 16:51:28 -0400
Subject: [PATCH] switch to grid layout

---
 static/site.css      | 24 +++++++++---------------
 templates/emojo.html |  2 +-
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/static/site.css b/static/site.css
index af1f08e..7e10064 100644
--- a/static/site.css
+++ b/static/site.css
@@ -11,34 +11,28 @@ a {
 }
 
 dl.emojo {
-    column-width: 220px;
-    column-gap: 20px;
-    column-rule: 1px solid gray;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15em, max-content));
+    grid-row-gap: 5px;
 }
 
 dl.emojo div {
-    height: 20px;
-    padding-bottom: 5px;
+    cursor: pointer;
 }
 
-dl.emojo dt {
-    width: 28px;
-    height: 20px;
-    display: table-cell;
-    vertical-align: middle;
+dl.emojo div * {
+    display: inline-block;
 }
 
 dl.emojo dt img {
     height: 20px;
-    width: 20px;
+    width: 28px;
     object-fit: contain;
-    margin: -3px 0 0;
 }
 
 dl.emojo dd {
-    height: 20px;
-    display: table-cell;
-    vertical-align: middle;
+    margin-left: 0;
+    padding: 0px 8px;
 }
 
 dl.emojo dd.success {
diff --git a/templates/emojo.html b/templates/emojo.html
index d045f3a..5535f08 100644
--- a/templates/emojo.html
+++ b/templates/emojo.html
@@ -8,7 +8,7 @@
 <dl class="emojo">
     {% for emoj in emojo %}
     <div>
-        <dt><img src="{{ emoj['static_url'] }}" alt=":{{ emoj['shortcode'] }}:"></dt>
+        <dt><img src="{{ emoj.static_url }}" alt=":{{ emoj.shortcode }}:"></dt>
         <dd>:{{ emoj.shortcode }}:</dd>
     </div>
     {% endfor %}