New bookmarklet button

footer.php

@@ -1,10 +1,11 @@
 </div>
-<div class="paragraph desktop-only">
+<div class="paragraph">
-	<h2><?php yourls_e( 'The bookmarklets', 'isq_translation') ?></h2>
+	<h2><?php yourls_e( 'The bookmarklet', 'isq_translation') ?></h2>
-	<p><?php yourls_e( 'To use the bookmarklets drag them to your bookmark bar or simply right click on them and select the appropriate option.', 'isq_translation') ?></p>
 
+	<?php $bookmarkletdialog = yourls__( 'Save this as a bookmark', 'isq_translation') // Can't put it where it belongs as there'd be too much char escaping ?>
+	<p><?php yourls_e( 'Add this to your bookmarks or drag it to your bookmarks bar to quickly access shortening functions:', 'isq_translation') ?> <a href="javascript:(function()%7Bvar%20d=document,w=window,enc=encodeURIComponent,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),s2=((s.toString()=='')?s:enc(s)),f='<?php echo YOURLS_SITE . '/index.php'; ?>',l=d.location,p='?url='+enc(l.href)+'&title='+enc(d.title)+'&keyword='+s2,u=f+p;try%7Bthrow('ozhismygod');%7Dcatch(z)%7Ba=function()%7Bif(!w.open(u))l.href=u;%7D;if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();%7Dvoid(0);%7D)();" onClick="alert('<?php echo $bookmarkletdialog ?>'); return false;" class="bookmarklet"><?php yourls_e( 'Shorten', 'isq_translation') ?></a></p>
 	<p><?php yourls_e( 'This bookmarklet takes the page URL and title and opens a new tab, where you can fill out a CAPTCHA. If you have selected text before using the bookmarklet, that will be used as the keyword.', 'isq_translation') ?></p>
-	<a href="javascript:(function()%7Bvar%20d=document,w=window,enc=encodeURIComponent,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),s2=((s.toString()=='')?s:enc(s)),f='<?php echo YOURLS_SITE . '/index.php'; ?>',l=d.location,p='?url='+enc(l.href)+'&title='+enc(d.title)+'&keyword='+s2,u=f+p;try%7Bthrow('ozhismygod');%7Dcatch(z)%7Ba=function()%7Bif(!w.open(u))l.href=u;%7D;if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();%7Dvoid(0);%7D)();" class="bookmarklet"><?php yourls_e( 'Shorten', 'isq_translation') ?></a>
+	<p><?php yourls_e( 'Support for bookmarklets on mobile varies. For example, they work on Chrome for Android but you have to add and sync them from your desktop.', 'isq_translation') ?></p>
 </div>
 
 <div class="footer">

public/fonts/icons.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icons" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#xe600;" d="M512 221.714q0-7.428-5.428-12.857l-73.143-73.143q-5.428-5.428-12.857-5.428t-12.857 5.428-5.428 12.857v36.572h-109.714v-109.714h36.572q7.428 0 12.857-5.428t5.428-12.857-5.428-12.857l-73.143-73.143q-5.428-5.429-12.857-5.429t-12.857 5.429l-73.143 73.143q-5.428 5.428-5.428 12.857t5.428 12.857 12.857 5.428h36.571v109.714h-109.715v-36.572q0-7.428-5.428-12.857t-12.857-5.428-12.857 5.428l-73.143 73.143q-5.428 5.428-5.428 12.857t5.428 12.857l73.143 73.143q5.428 5.428 12.857 5.428t12.857-5.428 5.428-12.857v-36.571h109.715v109.714h-36.572q-7.428 0-12.857 5.428t-5.429 12.857 5.428 12.857l73.143 73.143q5.429 5.428 12.857 5.428t12.857-5.428l73.143-73.143q5.428-5.429 5.428-12.857t-5.428-12.857-12.857-5.428h-36.572v-109.714h109.714v36.572q0 7.428 5.428 12.857t12.857 5.428 12.857-5.428l73.143-73.143q5.428-5.429 5.428-12.857z" />
+</font></defs></svg>

public/style.css

@@ -29,10 +29,32 @@ a, a:visited, .footer a, .footer a:visited {
 	text-decoration: none;
 }
 
-p {
+p, a {
 	font-size: 1.2em;
 }
 
+@font-face {
+	font-family: 'icons';
+	src:url('fonts/icons.woff') format('woff'),
+		url('fonts/icons.ttf') format('truetype'),
+		url('fonts/icons.svg#icons') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+	font-family: 'icons';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
 /* Structure */
 body {
 	background: #F1F1F1;
@@ -142,22 +164,10 @@ input[type="radio"] {
 	margin-right: 1%;
 }
 
-a.bookmarklet {
+.bookmarklet:before {
-	border-radius: 11px;
+	font-family: 'icons';
-	background: #ddd url(../img/button.png) repeat-x;
+	content: "\e600";
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
+	margin: 2px;
-	background: -moz-linear-gradient(top center, #fff 0%, #ddd 100%);
-	border: 1px solid;
-	border-color: #ddd #bbb #999;
-	cursor: pointer;
-	color: #333;
-	font: bold 12px/1.2 Arial, sans-serif;
-	outline: 0;
-	overflow: visible;
-	padding: 3px 10px 4px;
-	text-shadow: #fff 0 1px 1px;
-	text-decoration: none;
-	margin-right: 2%;
 }
 
 /* Tooltips */