Turn jump button-links back into regular-looking hyperlinks when resolution...

Turn jump button-links back into regular-looking hyperlinks when resolution indicates we are not on a mobile device

apps/i2ptunnel/resources/proxy/css/dark/proxy.css

-
 body {
     margin: 5px 0px 0px;
     padding: 0px;
@@ -15,6 +14,26 @@ body {
     background-repeat: initial initial;
 }
 
+#jumplinks h4 {
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+}
+
+#jumplinks a {
+    display: inline-block;
+    padding: 2px 0;
+    line-height: 16px;
+}
+
+#jumplinks a::before {
+    content: "\279F\00A0";
+    font-size: 16pt;
+    display: inline-block;
+    padding: 3px 0;
+    vertical-align: sub;
+    line-height: 16px;
+}
+
 img {
     border: none;
 }
@@ -220,12 +239,15 @@ hr:last-child {
     font-size: 1.1rem;
 }
 
-#jumplinks {
-    text-align: start;
-}
+@media only screen and (max-width: 600px) {
+    /*body {
 
-#jumplinks > a {
-    border: black;
+     }*/
+    #jumplinks {
+        text-align: start;
+    }
+    #jumplinks>a {
+        border: black;
         border-top-style: none;
         border-top-width: medium;
         border-right-style: none;
@@ -234,31 +256,30 @@ hr:last-child {
         border-bottom-width: medium;
         border-left-style: none;
         border-left-width: medium;
-    border-style: outset;
-    margin: 2px;
-    float: none;
-    display: inline-block;
-    width: 96%;
-    border-width: 1px;
-    border-radius: 12px;
-    vertical-align: middle;
-    font-size: 1.1rem;
-    text-align: start;
-    padding-top: 1.5%;
-    padding-bottom: 1.5%;
-    padding-left: 1%;
-}
-
-#jumplinks > a:hover {
-    text-decoration: none;
-    color: #da736b !important;
-    border: 1px solid #da736b !important;
-    box-shadow: inset 0 1px 1px 0 #eff;
-}
-
-#jumplinks > h4 {
-    text-align: left;
-    font-size: 1.1rem;
+        border-style: outset;
+        margin: 2px;
+        float: none;
+        display: inline-block;
+        width: 96%;
+        border-width: 1px;
+        border-radius: 12px;
+        vertical-align: middle;
+        font-size: 1.1rem;
+        text-align: start;
+        padding-top: 1.5%;
+        padding-bottom: 1.5%;
+        padding-left: 1%;
+    }
+    #jumplinks>a:hover {
+        text-decoration: none;
+        color: #da736b !important;
+        border: 1px solid #da736b !important;
+        box-shadow: inset 0 1px 1px 0 #eff;
+    }
+    #jumplinks>h4 {
+        text-align: left;
+        font-size: 1.1rem;
+    }
 }
 
 element {
@@ -282,5 +303,4 @@ td {
     h1 {
         margin-left: 242px !important;
     }
-}
-
+}
\ No newline at end of file

apps/i2ptunnel/resources/proxy/css/light/proxy.css

-
-
 html {
     margin: 0px !important;
 }
@@ -15,6 +13,38 @@ body {
     background-repeat: initial initial;
 }
 
+#jumplinks h3 {
+    margin: 0 0 10px;
+}
+
+#jumplinks a {
+    display: block;
+    padding: 2px 0;
+    line-height: 16px;
+}
+
+#jumplinks a::before {
+    content: "\279F\00A0";
+    font-size: 16pt;
+    display: inline-block;
+    padding: 3px 0;
+    vertical-align: sub;
+    line-height: 16px;
+}
+
+@media screen and (min-width: 1400px) {
+    #jumplinks h4 {
+        font-size: 10.5pt;
+    }
+}
+
+#jumplinks h4 {
+    margin-bottom: 10px;
+    border-color: #7778bf !important;
+    color: #41465f;
+    padding-bottom: 10px;
+}
+
 b {
     color: rgb(65, 70, 95);
 }
@@ -229,12 +259,12 @@ h3 {
     vertical-align: top;
 }
 
-#jumplinks {
-    text-align: start;
-}
-
-#jumplinks > a {
-    border: black;
+@media only screen and (max-width: 600px) {
+    #jumplinks {
+        text-align: start;
+    }
+    #jumplinks>a {
+        border: black;
         border-top-style: none;
         border-top-width: medium;
         border-right-style: none;
@@ -243,38 +273,36 @@ h3 {
         border-bottom-width: medium;
         border-left-style: none;
         border-left-width: medium;
-    border-style: outset;
-    margin: 2px;
-    float: none;
-    display: inline-block;
-    width: 96%;
-    border-width: 1px;
-    border-radius: 12px;
-    vertical-align: middle;
-    font-size: 1.1rem;
-    text-align: start;
-    padding-top: 1.5%;
-    padding-bottom: 1.5%;
-    padding-left: 1%;
-    background: #ddd;
-    background: linear-gradient(to bottom, #eee, #fff);
-}
-
-#jumplinks > a:hover {
-    text-decoration: none;
-    color: #19191f;
-    border: 1px solid #f60 !important;
-    background: #ddd;
-    background: linear-gradient(to bottom, #eee, #fff);
-    box-shadow: inset 0 0 0 1px #fff !important;
-    filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8));
-    transition: ease border 0.7s;
-}
-
-
-#jumplinks > h4 {
-    text-align: left;
-    font-size: 1.1rem;
+        border-style: outset;
+        margin: 2px;
+        float: none;
+        display: inline-block;
+        width: 96%;
+        border-width: 1px;
+        border-radius: 12px;
+        vertical-align: middle;
+        font-size: 1.1rem;
+        text-align: start;
+        padding-top: 1.5%;
+        padding-bottom: 1.5%;
+        padding-left: 1%;
+        background: #ddd;
+        background: linear-gradient(to bottom, #eee, #fff);
+    }
+    #jumplinks>a:hover {
+        text-decoration: none;
+        color: #19191f;
+        border: 1px solid #f60 !important;
+        background: #ddd;
+        background: linear-gradient(to bottom, #eee, #fff);
+        box-shadow: inset 0 0 0 1px #fff !important;
+        filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8));
+        transition: ease border 0.7s;
+    }
+    #jumplinks>h4 {
+        text-align: left;
+        font-size: 1.1rem;
+    }
 }
 
 element {
@@ -301,5 +329,4 @@ td {
     body {
         font-size: 10pt !important;
     }
-}
-
+}
\ No newline at end of file