From 879db402d6d22077e17f8bd7bab70f095cf8d768 Mon Sep 17 00:00:00 2001
From: Mike Gerwitz <mtg@gnu.org>
Date: Sat, 29 Jul 2017 08:47:41 -0400
Subject: [PATCH] :Fix HN icon display on mobile

---
 style.css | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/style.css b/style.css
index 0a2c49a..6fc1b0e 100644
--- a/style.css
+++ b/style.css
@@ -299,19 +299,15 @@ body.index footer hr,
 .hn-icon {
     display: block;
 
-    /* note that border won't be visible on default
-       white page background */
     background-color: #ff6600;
-    border: 1px solid white;
 
-    /* 1px border = 42x42 */
-    width: 40px;
-    height: 40px;
+    width: 42px;
+    height: 42px;
 
     font-size: 16px;
     font-weight: bold;
     text-align: center;
-    line-height: 40px;
+    line-height: 42px;
 }
 
 .hn-icon,
@@ -470,6 +466,11 @@ body.article h3 {
     padding: 6px;
   }
 
+  .hn-icon {
+    float: right;
+    margin-left: 2px;
+  }
+
   header, footer,
   body.index footer .bimgs,
   .body-index footer .bimgs,
@@ -500,6 +501,15 @@ body.article h3 {
     max-width: 32px;
     max-height: 32px;
   }
+
+
+  .hn-icon {
+    max-width: 32px;
+    max-height: 32px;
+
+    font-size: 12px;
+    line-height: 32px;
+  }
 }
 
 /* when things start getting odd from 640px */
@@ -513,6 +523,14 @@ body.article h3 {
     max-height: 21px;
   }
 
+  .hn-icon {
+    max-width: 21px;
+    max-height: 21px;
+
+    font-size: 9px;
+    line-height: 21px;
+  }
+
   footer {
     font-size: 0.9em;
   }