Fix #8 Make github-buttons hide on mobile

The button will be hidden on mobile portrait mode, they are still visible on landscape mode on most phone.

Signed-off-by: Tao Wang <[email protected]>

Author: twang2218

_layouts/website/page.html

@@ -2,7 +2,14 @@
 
 {% block head %}
     {{ super() }}
+    <style>
+    @media only screen and (max-width: 640px) {
+        .book-header .hidden-mobile {
+            display: none;
+        }
+    }
+    </style>
     <script>
         window["gitbook-plugin-github-buttons"] = {{ config.pluginsConfig['github-buttons']|dump|safe }};
     </script>
-{% endblock %}
+{% endblock %}

src/plugin.js

@@ -15,7 +15,7 @@ require(['gitbook'], function (gitbook) {
         var width = size === "large" ? "170" : "160";
         var height = size === "large" ? "30" : "20";
         var extraParam = type === "watch" ? "&v=2" : "";
-        return `<a class="btn pull-right" aria-label="github">
+        return `<a class="btn pull-right hidden-mobile" aria-label="github">
         <iframe style="display:inline-block;vertical-align:middle;" src="https://ghbtns.com/github-btn.html?user=${user}&repo=${repo}&type=${type}&count=${count}&size=${size}${extraParam}" frameborder="0" scrolling="0" width="${width}px" height="${height}px"></iframe>
         </a>`;
     }