4 files changed, 55 insertions, 8 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 4770b058..e3961fc3 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -25,6 +25,17 @@ body {
     border-radius: .25rem;
 }
 
+@font-face {
+    font-family: 'Roboto Slab';
+    font-weight: 400;
+    font-style: normal;
+    src:
+    local('Fira Sans'),
+    local('Fira-Sans-regular'),
+    url('../fonts/Fira-Sans-regular.woff2') format('woff2'),
+    url('../fonts/Fira-Sans-regular.woff') format('woff');
+}
+
 /**
  * Extends Pure grids responsive to hide items.
  * Use xx-0 to hide an item on xx screen.
@@ -155,7 +166,8 @@ body {
     text-decoration: none;
     z-index: 1;
 
-    /* TODO: font? */
+    font-family: Roboto Slab, Arial, sans-serif;
+    font-size: 1.2em;
 }
 
 #header h1 a:hover {
@@ -307,7 +319,7 @@ body {
  */
 .linklist-item {
     margin: 15px 0;
-    background: #fff;
+    background: #f5f5f5;
     box-shadow: 2px 2px 0.5em #797979;
 }
 
@@ -322,23 +334,31 @@ body {
 }
 
 .linklist-item-title h2 {
-    padding: 2px 10px;
+    padding: 3px 10px 0 10px;
     line-height: 25px;
 }
 
 .linklist-item-title a {
-    font-size: 0.6em;
+    font-size: 0.7em;
     color: #d0fff0;
     text-decoration: none;
     vertical-align: middle;
+    font-family: Roboto Slab, Arial, sans-serif;
 }
 
-.linklist-item-title a:hover {
+.linklist-item-title .linklist-link:visited {
+    color: #ddd;
+}
+
+.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
     color: #fff;
 }
 
+
 .linklist-item-title .label-private {
     border: solid 1px #d0fff0;
+    font-family: Arial, sans-serif;
+    font-size: 0.65em;
 }
 
 .linklist-item-title .fold-button {
@@ -356,6 +376,20 @@ body {
 
 .linklist-item-description {
     padding: 10px;
+    font-family: Roboto Slab, Arial, sans-serif;
+}
+
+.linklist-item-description a {
+    text-decoration: none;
+    color: #1b926c;
+}
+
+.linklist-item-description a:hover {
+    text-shadow: 1px 1px #ddd;
+}
+
+.linklist-item-description a:visited {
+    color: #20b988;
 }
 
 .linklist-item-infos {
@@ -376,6 +410,10 @@ body {
     color: #000;
 }
 
+.linklist-item-tags {
+    margin: 0 0 5px 0;
+}
+
 .linklist-item-infos .label-tag {
     border: 1px solid #505050;
     font-size: 0.9em;
@@ -385,6 +423,11 @@ body {
     border: 1px solid #000;
 }
 
+.linklist-plugin-icon {
+    width: 13px;
+    height: 13px;
+}
+
 .linklist-item-infos-url {
     text-align: right;
     white-space: nowrap;
diff --git a/tpl/default/fonts/Fira-Sans-regular.woff b/tpl/default/fonts/Fira-Sans-regular.woff
new file mode 100644
index 00000000..3ba3c8ab
--- /dev/null
+++ b/tpl/default/fonts/Fira-Sans-regular.woff
diff --git a/tpl/default/fonts/Fira-Sans-regular.woff2 b/tpl/default/fonts/Fira-Sans-regular.woff2
new file mode 100644
index 00000000..c7ada1ba
--- /dev/null
+++ b/tpl/default/fonts/Fira-Sans-regular.woff2
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 2694edfe..cc70cc6a 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -52,7 +52,7 @@
             {/if}
 
             <h2>
-              <a href="{$value.real_url}" id="{$value.shorturl}">
+              <a href="{$value.real_url}" id="{$value.shorturl}" class="linklist-link">
                 {if="strpos($value.url, $value.shorturl) === false"}
                   <i class="fa fa-external-link"></i>
                 {else}
@@ -100,12 +100,16 @@
                   permalink &middot;
                 </a>
 
+                {$link_plugin_counter=count($value.link_plugin)}
                 {loop="$value.link_plugin"}
-                  <span>{$value}</span> &middot;
+                  <span>{$value}</span>
+                  {if="$link_plugin_counter - 1 != $counter"}&middot;{/if}
                 {/loop}
               </div>
               <div class="linklist-item-infos-url pure-u-lg-3-8 pure-u-sm-1">
-                <a href="{$value.real_url}"><span class="linkurl" title="Short link">{$value.url}</span></a>
+                <a href="{$value.real_url}" title="{$value.title}">
+                  <i class="fa fa-link"></i> {$value.url}
+                </a>
               </div>
             </div>
           </div>