title: Why are the button links in "hacker" GitHub template so small on mobile devices?
body: <p>GitHub has several nice page templates. One of them, AFAIK called "Hacker", has <code>&lt;a&gt;</code> links styled as buttons for download and github link.</p>
  
  <p>This is how the buttons look like compared to page title on desktop:</p>
  
  <p><img src="https://i.stack.imgur.com/BrC9N.png" alt="image description"></p>
  
  <p>This is how it looks on android with landscape view:</p>
  
  <p><img src="https://i.stack.imgur.com/aiuMg.png" alt="image description"></p>
  
  <p>You can see that on second image, the buttons are smaller than subtitle text. They have actually the same pixel size on both images, which is wrong! Keep in mind the screen is about 10cm long, so they're really tricky to hit.</p>
  
  <p>I tried to replace <code>px</code> units with <code>pt</code> units, but it didn't help. Here is the code, note that <strong>my changes are below original CSS</strong>:
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/** Original CSS from github:**/
  .btn {
    display: inline-block;
    background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.3), rgba(35, 35, 35, 0.3) 50%, rgba(10, 10, 10, 0.3) 50%, rgba(0, 0, 0, 0.3));
    background-color:rgb(10, 10, 10); 
    padding: 8px 18px;
    border-radius: 50px;
    border: 2px solid rgba(0, 0, 0, 0.7);
    border-bottom: 2px solid rgba(0, 0, 0, 0.7);
    border-top: 2px solid rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.8);
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  
  .btn .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 1px 8px 0 0;
    float: left;
  }
  
  .btn-github .icon {
    opacity: 0.6;
    background: url("http://darker.github.io/auto-client/images/blacktocat.png") 0 0 no-repeat;
  }
  
  /** My tweaks to the CSS: **/
  .btn {
    padding: 6pt 13.5pt;
    border-radius: 37pt;
    font-size: 10pt;
  }
  .btn .icon {
      display: inline-block;
      width: 12pt;
      height: 12pt;
      margin-top: 0.5pt;
      margin-right: 6pt;
      margin-bottom: 0.5pt;
      margin-left: 0;
  }
  .btn-zip .icon {
      background: rgba(0, 0, 0, 0) url("http://www.stdicon.com/humility/ddd.zip?size=18") no-repeat scroll 0 0;
  }
  .btn-java .icon {
      background: rgba(0, 0, 0, 0) url("http://darker.github.io/auto-client/images/java.gif") no-repeat scroll 0 0;
  }
  .btn-fb .icon {
      background: rgba(0, 0, 0, 0) url("http://darker.github.io/auto-client/images/facebook.png") no-repeat scroll 0 0;
      background-size: contain;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="downloads"&gt;
    &lt;a href="#" class="btn btn-zip"&gt;&lt;span class="icon"&gt;&lt;/span&gt;Download program&lt;/a&gt;
    &lt;a href="#" class="btn btn-java"&gt;&lt;span class="icon"&gt;&lt;/span&gt;Download sourcecode&lt;/a&gt;
    &lt;a href="#" class="btn btn-github"&gt;&lt;span class="icon"&gt;&lt;/span&gt;View on GitHub&lt;/a&gt;
    &lt;a href="#" class="btn btn-fb"&gt;&lt;span class="icon"&gt;&lt;/span&gt;Help (use chat)&lt;/a&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Since many other programmers are probably using this template, I thought I might want to ask how to fix this.</p>