From 82ada5b2f58362cf800781c6bef4413174e18cff Mon Sep 17 00:00:00 2001
From: Dawid Potocki <dpot@disroot.org>
Date: Tue, 6 Aug 2019 10:12:35 +1200
Subject: [PATCH] Fix icons looking out of place on smaller screens

Fixes #905
---
 _includes/cardv2.html | 60 +++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/_includes/cardv2.html b/_includes/cardv2.html
index 45906aed..86f6e3f0 100644
--- a/_includes/cardv2.html
+++ b/_includes/cardv2.html
@@ -7,41 +7,45 @@
       <img src="{{include.image}}" height="120" width="120" class="panel-pic" alt="{{include.title}}">
       {{include.description}}
     </p>
-    <a href="{{include.website}}" class="btn btn-primary"><i class="fas fa-external-link-alt fa-fw"></i> Website</a>
-    {% if include.forum %}
-    <a href="{{include.forum}}" class="btn btn-success"><i class="fab fa-discourse fa-fw"></i> Forum</a>
-    {% endif %}
-    {% if include.tor %}
-    <a class="mb-1" data-toggle="tooltip" data-placement="bottom" data-original-title="Requires specific software to access: torproject.org" href="{{include.tor}}"><img alt="Tor" src="/assets/img/layout/tor.png" width="35" height="35"></a>
-    {% endif %}
+    <div class="d-flex justify-content-between flex-column flex-md-row align-items-start align-items-md-center">
+      <div class="flex-shrink-0 mr-2">
+        <a href="{{include.website}}" class="btn btn-primary mt-1"><i class="fas fa-external-link-alt fa-fw"></i> Website</a>
+        {% if include.forum %}
+        <a href="{{include.forum}}" class="btn btn-success mt-1"><i class="fab fa-discourse fa-fw"></i> Forum</a>
+        {% endif %}
+        {% if include.tor %}
+        <a data-toggle="tooltip" data-placement="bottom" data-original-title="Requires specific software to access: torproject.org" href="{{include.tor}}"><img class="mt-2" alt="Tor" src="/assets/img/layout/tor.png" width="35" height="35"></a>
+        {% endif %}
+      </div>
 
-    <div class="float-right">
-        {% if include.windows %}<i class="fab fa-windows fa-2x fa-fw"></i>{% endif %}
-        {% if include.mac %}<i class="fab fa-apple fa-2x fa-fw"></i>{% endif %}
-        {% if include.linux %}<i class="fab fa-linux fa-2x fa-fw"></i>{% endif %}
-        {% if include.bsd %}<i class="fab fa-freebsd fa-2x fa-fw"></i>{% endif %}
+      <div class="mt-2">
+          {% if include.windows %}<i class="fab fa-windows fa-2x fa-fw d-inline pr-1"></i>{% endif %}
+          {% if include.mac %}<i class="fab fa-apple fa-2x fa-fw d-inline pr-1"></i>{% endif %}
+          {% if include.linux %}<i class="fab fa-linux fa-2x fa-fw d-inline pr-1"></i>{% endif %}
+          {% if include.bsd %}<i class="fab fa-freebsd fa-2x fa-fw d-inline pr-1"></i>{% endif %}
 
-        {% if include.firefox %}<i class="fab fa-firefox fa-2x fa-fw"></i>{% endif %}
-        {% if include.chrome %}<i class="fab fa-chrome fa-2x fa-fw"></i>{% endif %}
-        {% if include.safari %}<i class="fab fa-safari fa-2x fa-fw"></i>{% endif %}
-        {% if include.opera %}<i class="fab fa-opera fa-2x fa-fw"></i>{% endif %}
-        {% if include.edge %}<i class="fab fa-edge fa-2x fa-fw"></i>{% endif %}
+          {% if include.firefox %}<i class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i>{% endif %}
+          {% if include.chrome %}<i class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i>{% endif %}
+          {% if include.safari %}<i class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i>{% endif %}
+          {% if include.opera %}<i class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i>{% endif %}
+          {% if include.edge %}<i class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i>{% endif %}
 
-        {% if include.android %}<i class="fab fa-android fa-2x fa-fw"></i>{% endif %}
-        {% if include.ios %}<i class="fab fa-app-store-ios fa-2x fa-fw"></i>{% endif %}
-        {% if include.fire %}<i class="fas fa-fire fa-2x fa-fw"></i>{% endif %}
+          {% if include.android %}<i class="fab fa-android fa-2x fa-fw d-inline pr-1"></i>{% endif %}
+          {% if include.ios %}<i class="fab fa-app-store-ios fa-2x fa-fw d-inline pr-1"></i>{% endif %}
+          {% if include.fire %}<i class="fas fa-fire fa-2x fa-fw d-inline pr-1"></i>{% endif %}
 
-        {% if include.web %}<i class="fas fa-desktop fa-2x fa-fw"></i>{% endif %}
+          {% if include.web %}<i class="fas fa-desktop fa-2x fa-fw d-inline pr-1"></i>{% endif %}
 
-        {{include.icon1}}
-        {{include.icon2}}
-        {{include.icon3}}
+          {{include.icon1}}
+          {{include.icon2}}
+          {{include.icon3}}
 
-        {% if include.github %}<a href="{{include.github}}"><i class="fab fa-github fa-2x fa-fw"></i></a>{% endif %}
-        {% if include.gitlab %}<a href="{{include.gitlab}}"><i class="fab fa-gitlab fa-2x fa-fw"></i></a>{% endif %}
-        {% if include.git %}<a href="{{include.git}}"><i class="fab fa-git-square fa-2x fa-fw"></i></a>{% endif %}
-        {% if include.source %}<a href="{{include.source}}"><i class="fas fa-code-branch fa-2x fa-fw"></i></a>{% endif %}
+          {% if include.github %}<a href="{{include.github}}"><i class="fab fa-github fa-2x fa-fw d-inline"></i></a>{% endif %}
+          {% if include.gitlab %}<a href="{{include.gitlab}}"><i class="fab fa-gitlab fa-2x fa-fw d-inline"></i></a>{% endif %}
+          {% if include.git %}<a href="{{include.git}}"><i class="fab fa-git-square fa-2x fa-fw d-inline"></i></a>{% endif %}
+          {% if include.source %}<a href="{{include.source}}"><i class="fas fa-code-branch fa-2x fa-fw d-inline"></i></a>{% endif %}
 
+      </div>
     </div>
 
   </div>