optimize for phones

css/style.css

@@ -18,3 +18,8 @@ table tr.optrow {
 }
 
 
+@media only screen and (max-width: 1026px) {
+  .phonehide {
+    display: none;
+  }
+}

index.html

@@ -20,22 +20,22 @@
     <header>
       <div id="lastUpdateElement" style="position:absolute; line-height: 11px;color: #000; right: 37px;top:59px;font-size:10px;"></div>
       <div class="logo">
-        <a class="baselink" href="./"> <img src="images/home-manager-option-search.png"></a>
+        <a class="baselink" href="./"> <img src="images/home-manager-option-search2.png"></a>
       </div>
       <nav class="shortcuts">
-        <li class="" role="">
+        <li style="padding-top:10px;">
           <a href="https://nix-community.github.io/home-manager/" rel="noopener">
-            <i class="fa fa-book"></i> <label>HM Documentation</label>
+            <i class="fa fa-book"></i>&nbsp;<label>HM&nbsp;Documentation</label>
           </a>
         </li>
 
-        <li class="" role="">
+        <li  style="padding-top:10px;">
           <a href="https://github.com/mipmip/home-manager-option-search" rel="noopener">
             <i class="fa fa-github"></i> <label>Source</label>
           </a>
         </li>
 
-        <li class="" style="margin-left:9px;padding-top:4px;" role="">
+        <li style="margin-left:9px;padding-top:14px;">
           <iframe style="width:51px;" src="https://ghbtns.com/github-btn.html?user=mipmip&repo=home-manager-option-search&type=star&count=false&text=true" frameborder="0" scrolling="0" width="150" height="20" title="GitHub"></iframe>
         </li>
       </nav>
@@ -101,7 +101,7 @@
             <tr>
               <th>Title</th>
               <th>Description</th>
-              <th>Type</th>
+              <th class="phonehide">Type</th>
             </tr>
           </thead>
           <tbody>

js/script.js

@@ -70,6 +70,7 @@ var updateOptionsTable = function(options) {
 
     var typeColumn = document.createElement('td');
     typeColumn.innerHTML = option.type;
+    typeColumn.classList.add("phonehide");
 
     var tableRow = document.createElement('tr');