From 1bae69e5b0a7a243173d085e511b29635923dc8a Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Mon, 1 Jul 2019 03:56:09 +0200
Subject: [PATCH] Fix image/gif properly

---
 public/style.css     | 15 ++++++++++++---
 src/views/tweet.nimf |  4 ++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/public/style.css b/public/style.css
index 6542428..45d89b1 100644
--- a/public/style.css
+++ b/public/style.css
@@ -67,7 +67,7 @@ a:hover {
     padding: 0;
     vertical-align: bottom;
     flex-basis: 100%;
-    margin-bottom: .5em;
+    margin-bottom: .2em;
 }
 
 .media-heading a {
@@ -200,7 +200,7 @@ nav {
 }
 
 .attachments {
-    margin-top: .5em;
+    margin-top: .35em;
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -257,7 +257,7 @@ video {
 }
 
 .media-gif {
-    display: table-cell;
+    display: inline-block;
     background-color: unset;
 }
 
@@ -294,6 +294,15 @@ video {
     flex-basis: 300px;
 }
 
+.image {
+    display: inline-block;
+}
+
+.single-image {
+    display: inline-block;
+    width: unset;
+}
+
 .avatar {
     float: left;
     margin-top: 3px;
diff --git a/src/views/tweet.nimf b/src/views/tweet.nimf
index 90e8fc8..8087f5e 100644
--- a/src/views/tweet.nimf
+++ b/src/views/tweet.nimf
@@ -63,9 +63,9 @@
 #
 #proc renderMediaGroup(tweet: Tweet): string =
 #let groups = if tweet.photos.len > 2: tweet.photos.distribute(2) else: @[tweet.photos]
-#let display = if groups.len == 1 and groups[0].len == 1: "display: table-cell;" else: ""
+#let class = if groups.len == 1 and groups[0].len == 1: "single-image" else: ""
 #var first = true
-<div class="attachments" style="${display}">
+<div class="attachments ${class}">
 #for photos in groups:
   #let margin = if not first: "margin-top: .25em;" else: ""
   #let flex = if photos.len > 1 or groups.len > 1: "display: flex;" else: ""