Merge pull request #754 from ArthurHoaro/webdesign2

New default template

.gitignore

@@ -32,3 +32,4 @@ plugins/*/config.php
 # 3rd party themes
 tpl/*
 !tpl/default
+!tpl/vintage

application/Updater.php

@@ -324,6 +324,20 @@ public function updateMethodMoveUserCss()
 
         return rename('inc/user.css', 'data/user.css');
     }
+
+    /**
+     * While the new default theme is in an unstable state
+     * continue to use the vintage theme
+     */
+    public function updateMethodDefaultThemeVintage()
+    {
+        if ($this->conf->get('resource.theme') !== 'default') {
+            return true;
+        }
+        $this->conf->set('resource.theme', 'vintage');
+        $this->conf->write($this->isLoggedIn);
+        return true;
+    }
 }
 
 /**

inc/awesomplete-multiple-tags.js

@@ -1,13 +1,16 @@
 var awp = Awesomplete.$;
-awesomplete = new Awesomplete(awp('input[data-multiple]'), {
-    filter: function(text, input) {
-        return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
-    },
-    replace: function(text) {
-        var before = this.input.value.match(/^.+ \s*|/)[0];
-        this.input.value = before + text + " ";
-    },
-    minChars: 1
+var autocompleteFields = document.querySelectorAll('input[data-multiple]');
+[].forEach.call(autocompleteFields, function(autocompleteField) {
+    awesomplete = new Awesomplete(awp(autocompleteField), {
+        filter: function (text, input) {
+            return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
+        },
+        replace: function (text) {
+            var before = this.input.value.match(/^.+ \s*|/)[0];
+            this.input.value = before + text + " ";
+        },
+        minChars: 1
+    })
 });
 
 /**

inc/awesomplete.js

@@ -12,26 +12,23 @@
 
         // Setup
 
+        this.isOpened = false;
+
         this.input = $(input);
+        this.input.setAttribute("autocomplete", "off");
         this.input.setAttribute("aria-autocomplete", "list");
 
         o = o || {};
 
-        configure.call(this, {
+        configure(this, {
             minChars: 2,
             maxItems: 10,
             autoFirst: false,
+            data: _.DATA,
             filter: _.FILTER_CONTAINS,
             sort: _.SORT_BYLENGTH,
-            item: function (text, input) {
-                return $.create("li", {
-                    innerHTML: text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>"),
-                    "aria-selected": "false"
-                });
-            },
-            replace: function (text) {
-                this.input.value = text;
-            }
+            item: _.ITEM,
+            replace: _.REPLACE
         }, o);
 
         this.index = -1;
@@ -44,7 +41,7 @@
         });
 
         this.ul = $.create("ul", {
-            hidden: "",
+            hidden: "hidden",
             inside: this.container
         });
 
@@ -60,7 +57,7 @@
 
         $.bind(this.input, {
             "input": this.evaluate.bind(this),
-            "blur": this.close.bind(this),
+            "blur": this.close.bind(this, { reason: "blur" }),
             "keydown": function(evt) {
                 var c = evt.keyCode;
 
@@ -72,7 +69,7 @@
                         me.select();
                     }
                     else if (c === 27) { // Esc
-                        me.close();
+                        me.close({ reason: "esc" });
                     }
                     else if (c === 38 || c === 40) { // Down/Up arrow
                         evt.preventDefault();
@@ -82,7 +79,7 @@
             }
         });
 
-        $.bind(this.input.form, {"submit": this.close.bind(this)});
+        $.bind(this.input.form, {"submit": this.close.bind(this, { reason: "submit" })});
 
         $.bind(this.ul, {"mousedown": function(evt) {
             var li = evt.target;
@@ -93,15 +90,16 @@
                     li = li.parentNode;
                 }
 
-                if (li) {
-                    me.select(li);
+                if (li && evt.button === 0) {  // Only select on left click
+                    evt.preventDefault();
+                    me.select(li, evt.target);
                 }
             }
         }});
 
         if (this.input.hasAttribute("list")) {
-            this.list = "#" + input.getAttribute("list");
-            input.removeAttribute("list");
+            this.list = "#" + this.input.getAttribute("list");
+            this.input.removeAttribute("list");
         }
         else {
             this.list = this.input.getAttribute("data-list") || o.list || [];
@@ -122,9 +120,18 @@
                 list = $(list);
 
                 if (list && list.children) {
-                    this._list = slice.apply(list.children).map(function (el) {
-                        return el.innerHTML.trim();
+                    var items = [];
+                    slice.apply(list.children).forEach(function (el) {
+                        if (!el.disabled) {
+                            var text = el.textContent.trim();
+                            var value = el.value || text;
+                            var label = el.label || text;
+                            if (value !== "") {
+                                items.push({ label: label, value: value });
+                            }
+                        }
                     });
+                    this._list = items;
                 }
             }
 
@@ -138,18 +145,24 @@
         },
 
         get opened() {
-            return this.ul && this.ul.getAttribute("hidden") == null;
+            return this.isOpened;
         },
 
-        close: function () {
+        close: function (o) {
+            if (!this.opened) {
+                return;
+            }
+
             this.ul.setAttribute("hidden", "");
+            this.isOpened = false;
             this.index = -1;
 
-            $.fire(this.input, "awesomplete-close");
+            $.fire(this.input, "awesomplete-close", o || {});
         },
 
         open: function () {
             this.ul.removeAttribute("hidden");
+            this.isOpened = true;
 
             if (this.autoFirst && this.index === -1) {
                 this.goto(0);
@@ -160,14 +173,14 @@
 
         next: function () {
             var count = this.ul.children.length;
-
-            this.goto(this.index < count - 1? this.index + 1 : -1);
+            this.goto(this.index < count - 1 ? this.index + 1 : (count ? 0 : -1) );
         },
 
         previous: function () {
             var count = this.ul.children.length;
+            var pos = this.index - 1;
 
-            this.goto(this.selected? this.index - 1 : count - 1);
+            this.goto(this.selected && pos !== -1 ? pos : count - 1);
         },
 
         // Should not be used, highlights specific item without any checks!
@@ -183,28 +196,37 @@
             if (i > -1 && lis.length > 0) {
                 lis[i].setAttribute("aria-selected", "true");
                 this.status.textContent = lis[i].textContent;
-            }
 
-            $.fire(this.input, "awesomplete-highlight");
+                // scroll to highlighted element in case parent's height is fixed
+                this.ul.scrollTop = lis[i].offsetTop - this.ul.clientHeight + lis[i].clientHeight;
+
+                $.fire(this.input, "awesomplete-highlight", {
+                    text: this.suggestions[this.index]
+                });
+            }
         },
 
-        select: function (selected) {
-            selected = selected || this.ul.children[this.index];
+        select: function (selected, origin) {
+            if (selected) {
+                this.index = $.siblingIndex(selected);
+            } else {
+                selected = this.ul.children[this.index];
+            }
 
             if (selected) {
-                var prevented;
+                var suggestion = this.suggestions[this.index];
 
-                $.fire(this.input, "awesomplete-select", {
-                    text: selected.textContent,
-                    preventDefault: function () {
-                        prevented = true;
-                    }
+                var allowed = $.fire(this.input, "awesomplete-select", {
+                    text: suggestion,
+                    origin: origin || selected
                 });
 
-                if (!prevented) {
-                    this.replace(selected.textContent);
-                    this.close();
-                    $.fire(this.input, "awesomplete-selectcomplete");
+                if (allowed) {
+                    this.replace(suggestion);
+                    this.close({ reason: "select" });
+                    $.fire(this.input, "awesomplete-selectcomplete", {
+                        text: suggestion
+                    });
                 }
             }
         },
@@ -218,25 +240,28 @@
                 // Populate list with options that match
                 this.ul.innerHTML = "";
 
-                this._list
+                this.suggestions = this._list
+                    .map(function(item) {
+                        return new Suggestion(me.data(item, value));
+                    })
                     .filter(function(item) {
                         return me.filter(item, value);
                     })
                     .sort(this.sort)
-                    .every(function(text, i) {
-                        me.ul.appendChild(me.item(text, value));
+                    .slice(0, this.maxItems);
 
-                        return i < me.maxItems - 1;
-                    });
+                this.suggestions.forEach(function(text) {
+                    me.ul.appendChild(me.item(text, value));
+                });
 
                 if (this.ul.children.length === 0) {
-                    this.close();
+                    this.close({ reason: "nomatches" });
                 } else {
                     this.open();
                 }
             }
             else {
-                this.close();
+                this.close({ reason: "nomatches" });
             }
         }
     };
@@ -261,27 +286,58 @@
         return a < b? -1 : 1;
     };
 
+    _.ITEM = function (text, input) {
+        var html = input.trim() === '' ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>");
+        return $.create("li", {
+            innerHTML: html,
+            "aria-selected": "false"
+        });
+    };
+
+    _.REPLACE = function (text) {
+        this.input.value = text.value;
+    };
+
+    _.DATA = function (item/*, input*/) { return item; };
+
 // Private functions
 
-    function configure(properties, o) {
+    function Suggestion(data) {
+        var o = Array.isArray(data)
+            ? { label: data[0], value: data[1] }
+            : typeof data === "object" && "label" in data && "value" in data ? data : { label: data, value: data };
+
+        this.label = o.label || o.value;
+        this.value = o.value;
+    }
+    Object.defineProperty(Suggestion.prototype = Object.create(String.prototype), "length", {
+        get: function() { return this.label.length; }
+    });
+    Suggestion.prototype.toString = Suggestion.prototype.valueOf = function () {
+        return "" + this.label;
+    };
+
+    function configure(instance, properties, o) {
         for (var i in properties) {
             var initial = properties[i],
-                attrValue = this.input.getAttribute("data-" + i.toLowerCase());
+                attrValue = instance.input.getAttribute("data-" + i.toLowerCase());
 
             if (typeof initial === "number") {
-                this[i] = +attrValue;
+                instance[i] = parseInt(attrValue);
             }
             else if (initial === false) { // Boolean options must be false by default anyway
-                this[i] = attrValue !== null;
+                instance[i] = attrValue !== null;
             }
             else if (initial instanceof Function) {
-                this[i] = null;
+                instance[i] = null;
             }
             else {
-                this[i] = attrValue;
+                instance[i] = attrValue;
             }
 
-            this[i] = this[i] || o[i] || initial;
+            if (!instance[i] && instance[i] !== 0) {
+                instance[i] = (i in o)? o[i] : initial;
+            }
         }
     }
 
@@ -343,23 +399,29 @@
             evt[j] = properties[j];
         }
 
-        target.dispatchEvent(evt);
+        return target.dispatchEvent(evt);
     };
 
     $.regExpEscape = function (s) {
         return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
-    }
+    };
+
+    $.siblingIndex = function (el) {
+        /* eslint-disable no-cond-assign */
+        for (var i = 0; el = el.previousElementSibling; i++);
+        return i;
+    };
 
 // Initialization
 
     function init() {
         $$("input.awesomplete").forEach(function (input) {
-            new Awesomplete(input);
+            new _(input);
         });
     }
 
 // Are we in a browser? Check for Document constructor
-    if (typeof Document !== 'undefined') {
+    if (typeof Document !== "undefined") {
         // DOM already loaded?
         if (document.readyState !== "loading") {
             init();
@@ -374,12 +436,12 @@
     _.$$ = $$;
 
 // Make sure to export Awesomplete on self when in a browser
-    if (typeof self !== 'undefined') {
+    if (typeof self !== "undefined") {
         self.Awesomplete = _;
     }
 
 // Expose Awesomplete as a CJS module
-    if (typeof exports === 'object') {
+    if (typeof module === "object" && module.exports) {
         module.exports = _;
     }
 

inc/plugin_admin.js

@@ -22,14 +22,22 @@ function changePos(elem, toPos)
 function changeOrder(pos, move)
 {
     var newpos = parseInt(pos) + move;
-    var line = document.querySelector('[data-order="'+ pos +'"]');
-    var changeline = document.querySelector('[data-order="'+ newpos +'"]');
-    var parent = changeline.parentNode;
+    var lines = document.querySelectorAll('[data-order="'+ pos +'"]');
+    var changelines = document.querySelectorAll('[data-order="'+ newpos +'"]');
+
+    // If we go down reverse lines to preserve the rows order
+    if (move > 0) {
+        lines = [].slice.call(lines).reverse();
+    }
+
+    for (var i = 0 ; i < lines.length ; i++) {
+        var parent = changelines[0].parentNode;
+        changePos(lines[i], newpos);
+        changePos(changelines[i], parseInt(pos));
+        var changeItem = move < 0 ? changelines[0] : changelines[changelines.length - 1].nextSibling;
+        parent.insertBefore(lines[i], changeItem);
+    }
 
-    changePos(line, newpos);
-    changePos(changeline, parseInt(pos));
-    var changeItem = move < 0 ? changeline : changeline.nextSibling;
-    parent.insertBefore(line, changeItem);
 }
 
 /**

plugins/markdown/markdown.css

@@ -150,7 +150,7 @@
     box-shadow: 0 -1px 0 #e5e5e5,0 0 1px rgba(0,0,0,0.12),0 1px 1px rgba(0,0,0,0.24);
 }
 
-.md_help {
+#pageheader .md_help {
     color: white;
 }
 

tests/Updater/UpdaterTest.php

@@ -466,4 +466,44 @@ public function testDefaultThemeWithCustomTheme()
         unlink('sandbox/'. $theme .'/linklist.html');
         rmdir('sandbox/'. $theme);
     }
+
+    /**
+     * Test updateMethodDefaultThemeVintage with the default theme enabled.
+     */
+    public function testSetDefaultThemeToVintage()
+    {
+        $sandboxConf = 'sandbox/config';
+        copy(self::$configFile . '.json.php', $sandboxConf . '.json.php');
+        $this->conf = new ConfigManager($sandboxConf);
+
+        $this->conf->set('resource.theme', 'default');
+        $updater = new Updater([], [], $this->conf, true);
+        $this->assertTrue($updater->updateMethodDefaultThemeVintage());
+        $this->assertEquals('vintage', $this->conf->get('resource.theme'));
+
+        // reload from file
+        $this->conf = new ConfigManager($sandboxConf);
+        $this->assertEquals('vintage', $this->conf->get('resource.theme'));
+    }
+
+    /**
+     * Test updateMethodDefaultThemeVintage with custom theme enabled => nothing to do.
+     */
+    public function testSetDefaultThemeNothingToDo()
+    {
+        $sandboxConf = 'sandbox/config';
+        copy(self::$configFile . '.json.php', $sandboxConf . '.json.php');
+        $this->conf = new ConfigManager($sandboxConf);
+
+        $theme = 'myawesometheme';
+        $this->conf->set('resource.theme', $theme);
+        $this->conf->write(true);
+        $updater = new Updater([], [], $this->conf, true);
+        $this->assertTrue($updater->updateMethodDefaultThemeVintage());
+        $this->assertEquals($theme, $this->conf->get('resource.theme'));
+
+        // reload from file
+        $this->conf = new ConfigManager($sandboxConf);
+        $this->assertEquals($theme, $this->conf->get('resource.theme'));
+    }
 }

tpl/default/404.html

@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html>
 <head>
-    {include="includes"}
+  {include="includes"}
 </head>
 <body>
 <div id="pageheader">
-    {include="page.header"}
-</div>
-<div class="error-container">
-    <h1>404 Not found <small>Oh crap!</small></h1>
-    <p>{$error_message}</p>
-    <p>Would you mind <a href="?">clicking here</a>?</p>
+  {include="page.header"}
+<div class="center" id="page404">
+  <h2>{'Sorry, nothing to see here.'|t}</h2>
+  <img src="img/sad_star.png">
+  <p>{$error_message}</p>
 </div>
 {include="page.footer"}
 </body>

tpl/default/addlink.html

@@ -1,15 +1,23 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
-<body onload="document.addform.post.focus();">
-<div id="pageheader">
-	{include="page.header"}
-	<div id="headerform">
-		<form method="GET" action="" name="addform" class="addform">
-			<input type="text" name="post" class="linkurl">
-			<input type="submit" value="Add link" class="bigbutton">
-		</form>
-	</div>
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div id="addlink-form" class="page-form  page-form-light pure-u-lg-1-3 pure-u-22-24">
+    <h2 class="window-title">{"Shaare a new link"|t}</h2>
+    <form method="GET" action="#" name="addform" class="addform">
+      <div>
+        <input type="text" name="post" placeholder="{'URL or leave empty to post a note'|t}" class="autofocus">
+      </div>
+      <div>
+        <input type="submit" value="{'Add link'|t}">
+      </div>
+    </form>
+  </div>
 </div>
 {include="page.footer"}
 </body>

tpl/default/changepassword.html

@@ -1,14 +1,27 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
-<body onload="document.changepasswordform.oldpassword.focus();">
-<div id="pageheader">
-	{include="page.header"}
-	<form method="POST" action="#" name="changepasswordform" id="changepasswordform">
-	Old password: <input type="password" name="oldpassword">&nbsp; &nbsp;
-	New password: <input type="password" name="setpassword">
-	<input type="hidden" name="token" value="{$token}">
-	<input type="submit" name="Save" value="Save password" class="bigbutton"></form>
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div id="addlink-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24">
+    <h2 class="window-title">{"Change password"|t}</h2>
+    <form method="POST" action="#" name="changepasswordform" id="changepasswordform">
+      <div>
+        <input type="password" name="oldpassword" placeholder="{'Current password'|t}" class="autofocus">
+      </div>
+      <div>
+        <input type="password" name="setpassword" placeholder="{'New password'|t}">
+      </div>
+      <input type="hidden" name="token" value="{$token}">
+      <div>
+        <input type="submit" value="{'Change'|t}">
+      </div>
+    </form>
+  </div>
 </div>
 {include="page.footer"}
 </body>

tpl/default/changetag.html

@@ -1,33 +1,37 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}
-    <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
-    <script src="inc/awesomplete.min.js#"></script>
+<head>
+  {include="includes"}
 </head>
-<body onload="document.changetag.fromtag.focus();">
-<div id="pageheader">
-	{include="page.header"}
-	<form method="POST" action="" name="changetag" id="changetag">
-        <input type="hidden" name="token" value="{$token}">
-        <div>
-            <label for="fromtag">Tag:</label>
-        </div>
-        <div>
-            <input type="text" name="fromtag" id="fromtag" list="tagsList" autocomplete="off" class="awesomplete" data-minChars="1"  />
-            <datalist id="tagsList">
-                {loop="$tags"}<option>{$key}</option>{/loop}
-            </datalist>
-        </div>
-
-        <div>
-            <input type="text" name="totag" id="totag">
-            <input type="submit" name="renametag" value="Rename tag" class="bigbutton">
-	&nbsp;&nbsp;or&nbsp; <input type="submit" name="deletetag" value="Delete tag" class="bigbutton" onClick="return confirmDeleteTag();">
-        </div>
+<body>
+{include="page.header"}
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div id="addlink-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24">
+    <h2 class="window-title">{"Manage tags"|t}</h2>
+    <form method="POST" action="#" name="changetag" id="changetag">
+      <div>
+        <input type="text" name="fromtag" placeholder="{'Tag'|t}"
+               list="tagsList" autocomplete="off" class="awesomplete autofocus" data-minChars="1">
+        <datalist id="tagsList">
+          {loop="$tags"}<option>{$key}</option>{/loop}
+        </datalist>
+      </div>
+      <div>
+        <input type="text" name="totag" placeholder="{'New name'|t}"
+               list="toTagsList" autocomplete="off" class="awesomplete" data-minChars="1">
+        <datalist id="toTagsList">
+          {loop="$tags"}<option>{$key}</option>{/loop}
+        </datalist>
+      </div>
+      <div><i class="fa fa-info-circle"></i> {'Case sensitive'|t}</div>
+      <input type="hidden" name="token" value="{$token}">
+      <div>
+        <input type="submit" value="{'Rename'|t}" name="renametag">
+        <input type="submit" value="{'Delete'|t}" name="deletetag" class="button button-red confirm-delete">
+      </div>
     </form>
-    <div class="clear white">(Case sensitive)</div>
-</div>
-<script>function confirmDeleteTag() { var agree=confirm("Are you sure you want to delete this tag from all links ?"); if (agree) return true ; else return false ; }</script>
+  </div>
 </div>
 {include="page.footer"}
 </body>

tpl/default/configure.html

@@ -1,121 +1,240 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
-<body onload="document.configform.title.focus();">
-<div id="pageheader">
-  {include="page.header"}
-  {$timezone_js}
-  <form method="POST" action="#" name="configform" id="configform">
-    <input type="hidden" name="token" value="{$token}">
-    <table id="configuration_table">
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
 
-      <tr>
-        <td><b>Page title:</b></td>
-        <td><input type="text" name="title" id="title" size="50" value="{$title}"></td>
-      </tr>
+{$ratioLabel='5-12'}
+{$ratioLabelMobile='7-8'}
+{$ratioInput='7-12'}
+{$ratioInputMobile='1-8'}
 
-      <tr>
-        <td><b>Title link:</b></td>
-        <td><input type="text" name="titleLink" id="titleLink" size="50" value="{$titleLink}"><br/><label
-            for="titleLink">(default value is: ?)</label></td>
-      </tr>
-
-      <tr>
-        <td><b>Theme:</b></td>
-        <td>
-          <select name="theme" id="theme">
-            {loop="$theme_available"}
-              <option value="{$value}" {if="$value===$theme"}selected{/if}>
-                {$value|ucfirst}
-              </option>
-            {/loop}
-          </select>
-        </td>
-      </tr>
-
-      <tr>
-        <td><b>Timezone:</b></td>
-        <td>{$timezone_form}</td>
-      </tr>
-
-      <tr>
-        <td><b>Redirector</b></td>
-        <td>
-          <input type="text" name="redirector" id="redirector" size="50" value="{$redirector}"><br>
-          (e.g. <i>http://anonym.to/?</i> will mask the HTTP_REFERER)
-        </td>
-      </tr>
-
-      <tr>
-        <td><b>Security:</b></td>
-        <td>
-          <input type="checkbox" name="disablesessionprotection" id="disablesessionprotection"
+<form method="POST" action="#" name="configform" id="configform">
+  <div class="pure-g">
+    <div class="pure-u-lg-1-8 pure-u-1-24"></div>
+    <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-complete">
+      <h2 class="window-title">{'Configure'|t}</h2>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="title">
+              <span class="label-name">Shaarli {'title'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-7-12 pure-u-1">
+          <div class="form-input">
+            <input type="text" name="title" id="title" size="50" value="{$title}">
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="titleLink">
+              <span class="label-name">{'Title link'|t}</span><br>
+              <span class="label-desc">{'Default value'|t}: ?</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-1">
+          <div class="form-input">
+            <input type="text" name="titleLink" id="titleLink" size="50" value="{$titleLink}">
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="titleLink">
+              <span class="label-name">{'Theme'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-1">
+          <div class="form-input">
+            <select name="theme" id="theme">
+              {loop="$theme_available"}
+                <option value="{$value}"
+                  {if="$value===$theme"}
+                    selected="selected"
+                  {/if}
+                >
+                  {$value|ucfirst}
+                </option>
+              {/loop}
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
+          <div class="form-label">
+            <label>
+              <span class="label-name">{'Timezone'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
+          <div class="form-input">
+            {ignore}FIXME! too hackish, needs to be fixed upstream{/ignore}
+            <div class="timezone" id="timezone-remove">{$timezone_form}</div>
+            <div class="timezone" id="timezone-add"></div>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
+          <div class="form-label">
+            <label for="redirector">
+              <span class="label-name">{'Redirector'|t}</span><br>
+              <span class="label-desc">{'e. g.'|t} <i>http://anonym.to/?</i> {'will mask the HTTP_REFERER'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
+          <div class="form-input">
+            <input type="text" name="redirector" id="redirector" size="50" value="{$redirector}">
+          </div>
+        </div>
+      </div>
+      <div class="clear"></div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} ">
+          <div class="form-label">
+            <label for="disablesessionprotection">
+              <span class="label-name">{'Disable session cookie hijacking protection'|t}</span><br>
+               <span class="label-desc">
+                 {'Check this if you get disconnected or if your IP address changes often'|t}
+               </span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile} ">
+          <div class="form-input">
+            <input type="checkbox" name="disablesessionprotection" id="disablesessionprotection"
                    {if="$session_protection_disabled"}checked{/if}>
-          <label
-            for="disablesessionprotection">&nbsp;Disable session cookie hijacking protection (Check this if you get
-            disconnected often or if your IP address changes often.)</label>
-        </td>
-      </tr>
-
-      <tr>
-        <td valign="top"><b>New link:</b></td>
-        <td>
-          <input type="checkbox" name="privateLinkByDefault" id="privateLinkByDefault"
-                 {if="$private_links_default"}checked{/if}/>
-          <label for="privateLinkByDefault">
-            &nbsp;All new links are private by default
-          </label>
-        </td>
-      </tr>
-      <tr>
-        <td valign="top"><b>RSS direct links</b></td>
-        <td>
-          <input type="checkbox" name="enableRssPermalinks" id="enableRssPermalinks"
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} ">
+          <div class="form-label">
+            <label for="privateLinkByDefault">
+              <span class="label-name">{'Private links by default'|t}</span><br>
+              <span class="label-desc">{'All new links are private by default'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile} ">
+          <div class="form-input">
+            <input type="checkbox" name="privateLinkByDefault" id="privateLinkByDefault"
+                   {if="$private_links_default"}checked{/if}/>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} ">
+          <div class="form-label">
+            <label for="enableRssPermalinks">
+              <span class="label-name">{'RSS direct links'|t}</span><br>
+              <span class="label-desc">{'Check this to use direct URL instead of permalink in feeds'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile} ">
+          <div class="form-input">
+            <input type="checkbox" name="enableRssPermalinks" id="enableRssPermalinks"
                  {if="$enable_rss_permalinks"}checked{/if}/>
-          <label for="enableRssPermalinks">
-            &nbsp;Disable it to use permalinks in RSS feed instead of direct links to your shaared links. Currently <b>
-            {if="$enable_rss_permalinks"}enabled{else}disabled{/if}.</b>
-          </label>
-        </td>
-      </tr>
-      <tr>
-        <td valign="top"><b>Hide public links</b></td>
-        <td>
-          <input type="checkbox" name="hidePublicLinks" id="hidePublicLinks"
-                 {if="$hide_public_links"}checked{/if}/>
-          <label for="hidePublicLinks">&nbsp;Do not show any links if the user is not logged in.</label>
-        </td>
-      </tr>
-      <tr>
-        <td valign="top"><b>Update:</b></td>
-        <td>
-          <input type="checkbox" name="updateCheck" id="updateCheck"
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
+          <div class="form-label">
+            <label for="hidePublicLinks">
+              <span class="label-name">{'Hide public links'|t}</span><br>
+              <span class="label-desc">{'Do not show any links if the user is not logged in'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
+          <div class="form-input">
+            <input type="checkbox" name="hidePublicLinks" id="hidePublicLinks"
+                   {if="$hide_public_links"}checked{/if}/>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
+          <div class="form-label">
+            <label for="hidePublicLinks">
+              <span class="label-name">{'Check updates'|t}</span><br>
+              <span class="label-desc">{'Notify me when a new release is ready'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
+          <div class="form-input">
+            <input type="checkbox" name="updateCheck" id="updateCheck"
                  {if="$enable_update_check"}checked{/if}/>
-          <label for="updateCheck">&nbsp;Notify me when a new release is ready</label>
-        </td>
-      </tr>
-      <tr>
-        <td valign="top"><b>Enable REST API</b></td>
-        <td>
-          <input type="checkbox" name="apiEnabled" id="apiEnabled"
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
+          <div class="form-label">
+            <label for="apiEnabled">
+              <span class="label-name">{'Enable REST API'|t}</span><br>
+              <span class="label-desc">{'Allow third party software to use Shaarli such as mobile application'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
+          <div class="form-input">
+            <input type="checkbox" name="apiEnabled" id="apiEnabled"
                  {if="$api_enabled"}checked{/if}/>
-          <label for="apiEnabled">&nbsp;Allow third party software to use Shaarli such as mobile application.</label>
-        </td>
-      </tr>
-      <tr>
-        <td valign="top"><b>API secret</b></td>
-        <td>
-          <input type="text" name="apiSecret" id="apiSecret" size="50" value="{$api_secret}" />
-        </td>
-      </tr>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="apiSecret">
+              <span class="label-name">{'API secret'|t}</span><br>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-input">
+            <input type="text" name="apiSecret" id="apiSecret" size="50" value="{$api_secret}">
+          </div>
+        </div>
+      </div>
+      <div class="center">
+        <input type="submit" value="{'Save'|t}" name="save">
+      </div>
+    </div>
+  </div>
+  <input type="hidden" name="token" value="{$token}">
+</form>
 
-      <tr>
-        <td></td>
-        <td class="right"><input type="submit" name="Save" value="Save config" class="bigbutton"></td>
-      </tr>
-    </table>
-  </form>
-</div>
 {include="page.footer"}
+
+<script>
+  (function (window, document) {
+    var toRemove = document.getElementById('timezone-remove');
+    var firstSelect = toRemove.getElementsByTagName('select')[0];
+    var secondSelect = toRemove.getElementsByTagName('select')[1];
+    toRemove.parentNode.removeChild(toRemove);
+    var toAdd = document.getElementById('timezone-add');
+    var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>';
+    newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>';
+    toAdd.innerHTML = newTimezone;
+  })(this, this.document);
+</script>
 </body>
 </html>
+

tpl/default/css/grids-responsive.css

@@ -0,0 +1,861 @@
+/*!
+Pure v0.6.0
+Copyright 2014 Yahoo! Inc. All rights reserved.
+Licensed under the BSD License.
+https://github.com/yahoo/pure/blob/master/LICENSE.md
+*/
+@media screen and (min-width: 35.5em) {
+    .pure-u-sm-1,
+    .pure-u-sm-1-1,
+    .pure-u-sm-1-2,
+    .pure-u-sm-1-3,
+    .pure-u-sm-2-3,
+    .pure-u-sm-1-4,
+    .pure-u-sm-3-4,
+    .pure-u-sm-1-5,
+    .pure-u-sm-2-5,
+    .pure-u-sm-3-5,
+    .pure-u-sm-4-5,
+    .pure-u-sm-5-5,
+    .pure-u-sm-1-6,
+    .pure-u-sm-5-6,
+    .pure-u-sm-1-8,
+    .pure-u-sm-3-8,
+    .pure-u-sm-5-8,
+    .pure-u-sm-7-8,
+    .pure-u-sm-1-12,
+    .pure-u-sm-5-12,
+    .pure-u-sm-7-12,
+    .pure-u-sm-11-12,
+    .pure-u-sm-1-24,
+    .pure-u-sm-2-24,
+    .pure-u-sm-3-24,
+    .pure-u-sm-4-24,
+    .pure-u-sm-5-24,
+    .pure-u-sm-6-24,
+    .pure-u-sm-7-24,
+    .pure-u-sm-8-24,
+    .pure-u-sm-9-24,
+    .pure-u-sm-10-24,
+    .pure-u-sm-11-24,
+    .pure-u-sm-12-24,
+    .pure-u-sm-13-24,
+    .pure-u-sm-14-24,
+    .pure-u-sm-15-24,
+    .pure-u-sm-16-24,
+    .pure-u-sm-17-24,
+    .pure-u-sm-18-24,
+    .pure-u-sm-19-24,
+    .pure-u-sm-20-24,
+    .pure-u-sm-21-24,
+    .pure-u-sm-22-24,
+    .pure-u-sm-23-24,
+    .pure-u-sm-24-24 {
+        display: inline-block;
+        *display: inline;
+        zoom: 1;
+        letter-spacing: normal;
+        word-spacing: normal;
+        vertical-align: top;
+        text-rendering: auto;
+    }
+
+    .pure-u-sm-1-24 {
+        width: 4.1667%;
+        *width: 4.1357%;
+    }
+
+    .pure-u-sm-1-12,
+    .pure-u-sm-2-24 {
+        width: 8.3333%;
+        *width: 8.3023%;
+    }
+
+    .pure-u-sm-1-8,
+    .pure-u-sm-3-24 {
+        width: 12.5000%;
+        *width: 12.4690%;
+    }
+
+    .pure-u-sm-1-6,
+    .pure-u-sm-4-24 {
+        width: 16.6667%;
+        *width: 16.6357%;
+    }
+
+    .pure-u-sm-1-5 {
+        width: 20%;
+        *width: 19.9690%;
+    }
+
+    .pure-u-sm-5-24 {
+        width: 20.8333%;
+        *width: 20.8023%;
+    }
+
+    .pure-u-sm-1-4,
+    .pure-u-sm-6-24 {
+        width: 25%;
+        *width: 24.9690%;
+    }
+
+    .pure-u-sm-7-24 {
+        width: 29.1667%;
+        *width: 29.1357%;
+    }
+
+    .pure-u-sm-1-3,
+    .pure-u-sm-8-24 {
+        width: 33.3333%;
+        *width: 33.3023%;
+    }
+
+    .pure-u-sm-3-8,
+    .pure-u-sm-9-24 {
+        width: 37.5000%;
+        *width: 37.4690%;
+    }
+
+    .pure-u-sm-2-5 {
+        width: 40%;
+        *width: 39.9690%;
+    }
+
+    .pure-u-sm-5-12,
+    .pure-u-sm-10-24 {
+        width: 41.6667%;
+        *width: 41.6357%;
+    }
+
+    .pure-u-sm-11-24 {
+        width: 45.8333%;
+        *width: 45.8023%;
+    }
+
+    .pure-u-sm-1-2,
+    .pure-u-sm-12-24 {
+        width: 50%;
+        *width: 49.9690%;
+    }
+
+    .pure-u-sm-13-24 {
+        width: 54.1667%;
+        *width: 54.1357%;
+    }
+
+    .pure-u-sm-7-12,
+    .pure-u-sm-14-24 {
+        width: 58.3333%;
+        *width: 58.3023%;
+    }
+
+    .pure-u-sm-3-5 {
+        width: 60%;
+        *width: 59.9690%;
+    }
+
+    .pure-u-sm-5-8,
+    .pure-u-sm-15-24 {
+        width: 62.5000%;
+        *width: 62.4690%;
+    }
+
+    .pure-u-sm-2-3,
+    .pure-u-sm-16-24 {
+        width: 66.6667%;
+        *width: 66.6357%;
+    }
+
+    .pure-u-sm-17-24 {
+        width: 70.8333%;
+        *width: 70.8023%;
+    }
+
+    .pure-u-sm-3-4,
+    .pure-u-sm-18-24 {
+        width: 75%;
+        *width: 74.9690%;
+    }
+
+    .pure-u-sm-19-24 {
+        width: 79.1667%;
+        *width: 79.1357%;
+    }
+
+    .pure-u-sm-4-5 {
+        width: 80%;
+        *width: 79.9690%;
+    }
+
+    .pure-u-sm-5-6,
+    .pure-u-sm-20-24 {
+        width: 83.3333%;
+        *width: 83.3023%;
+    }
+
+    .pure-u-sm-7-8,
+    .pure-u-sm-21-24 {
+        width: 87.5000%;
+        *width: 87.4690%;
+    }
+
+    .pure-u-sm-11-12,
+    .pure-u-sm-22-24 {
+        width: 91.6667%;
+        *width: 91.6357%;
+    }
+
+    .pure-u-sm-23-24 {
+        width: 95.8333%;
+        *width: 95.8023%;
+    }
+
+    .pure-u-sm-1,
+    .pure-u-sm-1-1,
+    .pure-u-sm-5-5,
+    .pure-u-sm-24-24 {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 48em) {
+    .pure-u-md-1,
+    .pure-u-md-1-1,
+    .pure-u-md-1-2,
+    .pure-u-md-1-3,
+    .pure-u-md-2-3,
+    .pure-u-md-1-4,
+    .pure-u-md-3-4,
+    .pure-u-md-1-5,
+    .pure-u-md-2-5,
+    .pure-u-md-3-5,
+    .pure-u-md-4-5,
+    .pure-u-md-5-5,
+    .pure-u-md-1-6,
+    .pure-u-md-5-6,
+    .pure-u-md-1-8,
+    .pure-u-md-3-8,
+    .pure-u-md-5-8,
+    .pure-u-md-7-8,
+    .pure-u-md-1-12,
+    .pure-u-md-5-12,
+    .pure-u-md-7-12,
+    .pure-u-md-11-12,
+    .pure-u-md-1-24,
+    .pure-u-md-2-24,
+    .pure-u-md-3-24,
+    .pure-u-md-4-24,
+    .pure-u-md-5-24,
+    .pure-u-md-6-24,
+    .pure-u-md-7-24,
+    .pure-u-md-8-24,
+    .pure-u-md-9-24,
+    .pure-u-md-10-24,
+    .pure-u-md-11-24,
+    .pure-u-md-12-24,
+    .pure-u-md-13-24,
+    .pure-u-md-14-24,
+    .pure-u-md-15-24,
+    .pure-u-md-16-24,
+    .pure-u-md-17-24,
+    .pure-u-md-18-24,
+    .pure-u-md-19-24,
+    .pure-u-md-20-24,
+    .pure-u-md-21-24,
+    .pure-u-md-22-24,
+    .pure-u-md-23-24,
+    .pure-u-md-24-24 {
+        display: inline-block;
+        *display: inline;
+        zoom: 1;
+        letter-spacing: normal;
+        word-spacing: normal;
+        vertical-align: top;
+        text-rendering: auto;
+    }
+
+    .pure-u-md-1-24 {
+        width: 4.1667%;
+        *width: 4.1357%;
+    }
+
+    .pure-u-md-1-12,
+    .pure-u-md-2-24 {
+        width: 8.3333%;
+        *width: 8.3023%;
+    }
+
+    .pure-u-md-1-8,
+    .pure-u-md-3-24 {
+        width: 12.5000%;
+        *width: 12.4690%;
+    }
+
+    .pure-u-md-1-6,
+    .pure-u-md-4-24 {
+        width: 16.6667%;
+        *width: 16.6357%;
+    }
+
+    .pure-u-md-1-5 {
+        width: 20%;
+        *width: 19.9690%;
+    }
+
+    .pure-u-md-5-24 {
+        width: 20.8333%;
+        *width: 20.8023%;
+    }
+
+    .pure-u-md-1-4,
+    .pure-u-md-6-24 {
+        width: 25%;
+        *width: 24.9690%;
+    }
+
+    .pure-u-md-7-24 {
+        width: 29.1667%;
+        *width: 29.1357%;
+    }
+
+    .pure-u-md-1-3,
+    .pure-u-md-8-24 {
+        width: 33.3333%;
+        *width: 33.3023%;
+    }
+
+    .pure-u-md-3-8,
+    .pure-u-md-9-24 {
+        width: 37.5000%;
+        *width: 37.4690%;
+    }
+
+    .pure-u-md-2-5 {
+        width: 40%;
+        *width: 39.9690%;
+    }
+
+    .pure-u-md-5-12,
+    .pure-u-md-10-24 {
+        width: 41.6667%;
+        *width: 41.6357%;
+    }
+
+    .pure-u-md-11-24 {
+        width: 45.8333%;
+        *width: 45.8023%;
+    }
+
+    .pure-u-md-1-2,
+    .pure-u-md-12-24 {
+        width: 50%;
+        *width: 49.9690%;
+    }
+
+    .pure-u-md-13-24 {
+        width: 54.1667%;
+        *width: 54.1357%;
+    }
+
+    .pure-u-md-7-12,
+    .pure-u-md-14-24 {
+        width: 58.3333%;
+        *width: 58.3023%;
+    }
+
+    .pure-u-md-3-5 {
+        width: 60%;
+        *width: 59.9690%;
+    }
+
+    .pure-u-md-5-8,
+    .pure-u-md-15-24 {
+        width: 62.5000%;
+        *width: 62.4690%;
+    }
+
+    .pure-u-md-2-3,
+    .pure-u-md-16-24 {
+        width: 66.6667%;
+        *width: 66.6357%;
+    }
+
+    .pure-u-md-17-24 {
+        width: 70.8333%;
+        *width: 70.8023%;
+    }
+
+    .pure-u-md-3-4,
+    .pure-u-md-18-24 {
+        width: 75%;
+        *width: 74.9690%;
+    }
+
+    .pure-u-md-19-24 {
+        width: 79.1667%;
+        *width: 79.1357%;
+    }
+
+    .pure-u-md-4-5 {
+        width: 80%;
+        *width: 79.9690%;
+    }
+
+    .pure-u-md-5-6,
+    .pure-u-md-20-24 {
+        width: 83.3333%;
+        *width: 83.3023%;
+    }
+
+    .pure-u-md-7-8,
+    .pure-u-md-21-24 {
+        width: 87.5000%;
+        *width: 87.4690%;
+    }
+
+    .pure-u-md-11-12,
+    .pure-u-md-22-24 {
+        width: 91.6667%;
+        *width: 91.6357%;
+    }
+
+    .pure-u-md-23-24 {
+        width: 95.8333%;
+        *width: 95.8023%;
+    }
+
+    .pure-u-md-1,
+    .pure-u-md-1-1,
+    .pure-u-md-5-5,
+    .pure-u-md-24-24 {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 64em) {
+    .pure-u-lg-1,
+    .pure-u-lg-1-1,
+    .pure-u-lg-1-2,
+    .pure-u-lg-1-3,
+    .pure-u-lg-2-3,
+    .pure-u-lg-1-4,
+    .pure-u-lg-3-4,
+    .pure-u-lg-1-5,
+    .pure-u-lg-2-5,
+    .pure-u-lg-3-5,
+    .pure-u-lg-4-5,
+    .pure-u-lg-5-5,
+    .pure-u-lg-1-6,
+    .pure-u-lg-5-6,
+    .pure-u-lg-1-8,
+    .pure-u-lg-3-8,
+    .pure-u-lg-5-8,
+    .pure-u-lg-7-8,
+    .pure-u-lg-1-12,
+    .pure-u-lg-5-12,
+    .pure-u-lg-7-12,
+    .pure-u-lg-11-12,
+    .pure-u-lg-1-24,
+    .pure-u-lg-2-24,
+    .pure-u-lg-3-24,
+    .pure-u-lg-4-24,
+    .pure-u-lg-5-24,
+    .pure-u-lg-6-24,
+    .pure-u-lg-7-24,
+    .pure-u-lg-8-24,
+    .pure-u-lg-9-24,
+    .pure-u-lg-10-24,
+    .pure-u-lg-11-24,
+    .pure-u-lg-12-24,
+    .pure-u-lg-13-24,
+    .pure-u-lg-14-24,
+    .pure-u-lg-15-24,
+    .pure-u-lg-16-24,
+    .pure-u-lg-17-24,
+    .pure-u-lg-18-24,
+    .pure-u-lg-19-24,
+    .pure-u-lg-20-24,
+    .pure-u-lg-21-24,
+    .pure-u-lg-22-24,
+    .pure-u-lg-23-24,
+    .pure-u-lg-24-24 {
+        display: inline-block;
+        *display: inline;
+        zoom: 1;
+        letter-spacing: normal;
+        word-spacing: normal;
+        vertical-align: top;
+        text-rendering: auto;
+    }
+
+    .pure-u-lg-1-24 {
+        width: 4.1667%;
+        *width: 4.1357%;
+    }
+
+    .pure-u-lg-1-12,
+    .pure-u-lg-2-24 {
+        width: 8.3333%;
+        *width: 8.3023%;
+    }
+
+    .pure-u-lg-1-8,
+    .pure-u-lg-3-24 {
+        width: 12.5000%;
+        *width: 12.4690%;
+    }
+
+    .pure-u-lg-1-6,
+    .pure-u-lg-4-24 {
+        width: 16.6667%;
+        *width: 16.6357%;
+    }
+
+    .pure-u-lg-1-5 {
+        width: 20%;
+        *width: 19.9690%;
+    }
+
+    .pure-u-lg-5-24 {
+        width: 20.8333%;
+        *width: 20.8023%;
+    }
+
+    .pure-u-lg-1-4,
+    .pure-u-lg-6-24 {
+        width: 25%;
+        *width: 24.9690%;
+    }
+
+    .pure-u-lg-7-24 {
+        width: 29.1667%;
+        *width: 29.1357%;
+    }
+
+    .pure-u-lg-1-3,
+    .pure-u-lg-8-24 {
+        width: 33.3333%;
+        *width: 33.3023%;
+    }
+
+    .pure-u-lg-3-8,
+    .pure-u-lg-9-24 {
+        width: 37.5000%;
+        *width: 37.4690%;
+    }
+
+    .pure-u-lg-2-5 {
+        width: 40%;
+        *width: 39.9690%;
+    }
+
+    .pure-u-lg-5-12,
+    .pure-u-lg-10-24 {
+        width: 41.6667%;
+        *width: 41.6357%;
+    }
+
+    .pure-u-lg-11-24 {
+        width: 45.8333%;
+        *width: 45.8023%;
+    }
+
+    .pure-u-lg-1-2,
+    .pure-u-lg-12-24 {
+        width: 50%;
+        *width: 49.9690%;
+    }
+
+    .pure-u-lg-13-24 {
+        width: 54.1667%;
+        *width: 54.1357%;
+    }
+
+    .pure-u-lg-7-12,
+    .pure-u-lg-14-24 {
+        width: 58.3333%;
+        *width: 58.3023%;
+    }
+
+    .pure-u-lg-3-5 {
+        width: 60%;
+        *width: 59.9690%;
+    }
+
+    .pure-u-lg-5-8,
+    .pure-u-lg-15-24 {
+        width: 62.5000%;
+        *width: 62.4690%;
+    }
+
+    .pure-u-lg-2-3,
+    .pure-u-lg-16-24 {
+        width: 66.6667%;
+        *width: 66.6357%;
+    }
+
+    .pure-u-lg-17-24 {
+        width: 70.8333%;
+        *width: 70.8023%;
+    }
+
+    .pure-u-lg-3-4,
+    .pure-u-lg-18-24 {
+        width: 75%;
+        *width: 74.9690%;
+    }
+
+    .pure-u-lg-19-24 {
+        width: 79.1667%;
+        *width: 79.1357%;
+    }
+
+    .pure-u-lg-4-5 {
+        width: 80%;
+        *width: 79.9690%;
+    }
+
+    .pure-u-lg-5-6,
+    .pure-u-lg-20-24 {
+        width: 83.3333%;
+        *width: 83.3023%;
+    }
+
+    .pure-u-lg-7-8,
+    .pure-u-lg-21-24 {
+        width: 87.5000%;
+        *width: 87.4690%;
+    }
+
+    .pure-u-lg-11-12,
+    .pure-u-lg-22-24 {
+        width: 91.6667%;
+        *width: 91.6357%;
+    }
+
+    .pure-u-lg-23-24 {
+        width: 95.8333%;
+        *width: 95.8023%;
+    }
+
+    .pure-u-lg-1,
+    .pure-u-lg-1-1,
+    .pure-u-lg-5-5,
+    .pure-u-lg-24-24 {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 80em) {
+    .pure-u-xl-1,
+    .pure-u-xl-1-1,
+    .pure-u-xl-1-2,
+    .pure-u-xl-1-3,
+    .pure-u-xl-2-3,
+    .pure-u-xl-1-4,
+    .pure-u-xl-3-4,
+    .pure-u-xl-1-5,
+    .pure-u-xl-2-5,
+    .pure-u-xl-3-5,
+    .pure-u-xl-4-5,
+    .pure-u-xl-5-5,
+    .pure-u-xl-1-6,
+    .pure-u-xl-5-6,
+    .pure-u-xl-1-8,
+    .pure-u-xl-3-8,
+    .pure-u-xl-5-8,
+    .pure-u-xl-7-8,
+    .pure-u-xl-1-12,
+    .pure-u-xl-5-12,
+    .pure-u-xl-7-12,
+    .pure-u-xl-11-12,
+    .pure-u-xl-1-24,
+    .pure-u-xl-2-24,
+    .pure-u-xl-3-24,
+    .pure-u-xl-4-24,
+    .pure-u-xl-5-24,
+    .pure-u-xl-6-24,
+    .pure-u-xl-7-24,
+    .pure-u-xl-8-24,
+    .pure-u-xl-9-24,
+    .pure-u-xl-10-24,
+    .pure-u-xl-11-24,
+    .pure-u-xl-12-24,
+    .pure-u-xl-13-24,
+    .pure-u-xl-14-24,
+    .pure-u-xl-15-24,
+    .pure-u-xl-16-24,
+    .pure-u-xl-17-24,
+    .pure-u-xl-18-24,
+    .pure-u-xl-19-24,
+    .pure-u-xl-20-24,
+    .pure-u-xl-21-24,
+    .pure-u-xl-22-24,
+    .pure-u-xl-23-24,
+    .pure-u-xl-24-24 {
+        display: inline-block;
+        *display: inline;
+        zoom: 1;
+        letter-spacing: normal;
+        word-spacing: normal;
+        vertical-align: top;
+        text-rendering: auto;
+    }
+
+    .pure-u-xl-1-24 {
+        width: 4.1667%;
+        *width: 4.1357%;
+    }
+
+    .pure-u-xl-1-12,
+    .pure-u-xl-2-24 {
+        width: 8.3333%;
+        *width: 8.3023%;
+    }
+
+    .pure-u-xl-1-8,
+    .pure-u-xl-3-24 {
+        width: 12.5000%;
+        *width: 12.4690%;
+    }
+
+    .pure-u-xl-1-6,
+    .pure-u-xl-4-24 {
+        width: 16.6667%;
+        *width: 16.6357%;
+    }
+
+    .pure-u-xl-1-5 {
+        width: 20%;
+        *width: 19.9690%;
+    }
+
+    .pure-u-xl-5-24 {
+        width: 20.8333%;
+        *width: 20.8023%;
+    }
+
+    .pure-u-xl-1-4,
+    .pure-u-xl-6-24 {
+        width: 25%;
+        *width: 24.9690%;
+    }
+
+    .pure-u-xl-7-24 {
+        width: 29.1667%;
+        *width: 29.1357%;
+    }
+
+    .pure-u-xl-1-3,
+    .pure-u-xl-8-24 {
+        width: 33.3333%;
+        *width: 33.3023%;
+    }
+
+    .pure-u-xl-3-8,
+    .pure-u-xl-9-24 {
+        width: 37.5000%;
+        *width: 37.4690%;
+    }
+
+    .pure-u-xl-2-5 {
+        width: 40%;
+        *width: 39.9690%;
+    }
+
+    .pure-u-xl-5-12,
+    .pure-u-xl-10-24 {
+        width: 41.6667%;
+        *width: 41.6357%;
+    }
+
+    .pure-u-xl-11-24 {
+        width: 45.8333%;
+        *width: 45.8023%;
+    }
+
+    .pure-u-xl-1-2,
+    .pure-u-xl-12-24 {
+        width: 50%;
+        *width: 49.9690%;
+    }
+
+    .pure-u-xl-13-24 {
+        width: 54.1667%;
+        *width: 54.1357%;
+    }
+
+    .pure-u-xl-7-12,
+    .pure-u-xl-14-24 {
+        width: 58.3333%;
+        *width: 58.3023%;
+    }
+
+    .pure-u-xl-3-5 {
+        width: 60%;
+        *width: 59.9690%;
+    }
+
+    .pure-u-xl-5-8,
+    .pure-u-xl-15-24 {
+        width: 62.5000%;
+        *width: 62.4690%;
+    }
+
+    .pure-u-xl-2-3,
+    .pure-u-xl-16-24 {
+        width: 66.6667%;
+        *width: 66.6357%;
+    }
+
+    .pure-u-xl-17-24 {
+        width: 70.8333%;
+        *width: 70.8023%;
+    }
+
+    .pure-u-xl-3-4,
+    .pure-u-xl-18-24 {
+        width: 75%;
+        *width: 74.9690%;
+    }
+
+    .pure-u-xl-19-24 {
+        width: 79.1667%;
+        *width: 79.1357%;
+    }
+
+    .pure-u-xl-4-5 {
+        width: 80%;
+        *width: 79.9690%;
+    }
+
+    .pure-u-xl-5-6,
+    .pure-u-xl-20-24 {
+        width: 83.3333%;
+        *width: 83.3023%;
+    }
+
+    .pure-u-xl-7-8,
+    .pure-u-xl-21-24 {
+        width: 87.5000%;
+        *width: 87.4690%;
+    }
+
+    .pure-u-xl-11-12,
+    .pure-u-xl-22-24 {
+        width: 91.6667%;
+        *width: 91.6357%;
+    }
+
+    .pure-u-xl-23-24 {
+        width: 95.8333%;
+        *width: 95.8023%;
+    }
+
+    .pure-u-xl-1,
+    .pure-u-xl-1-1,
+    .pure-u-xl-5-5,
+    .pure-u-xl-24-24 {
+        width: 100%;
+    }
+}

tpl/default/css/pure-extras.css

@@ -0,0 +1,262 @@
+/* Images */
+.pure-img-eliptical {
+	border-radius: 80%;
+}
+.pure-img-rounded {
+	border-radius: 3px;
+}
+.pure-img-bordered {
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    padding: 5px;
+}
+
+
+/* Thumbnails */
+.pure-thumbnails li {
+    text-align: center;
+    display: inline-block;
+    *display: inline;
+    /* IE7 inline-block hack */
+    *zoom: 1;
+    vertical-align: top;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0.5em;
+}
+.pure-thumbnails {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.pure-thumbnails a:focus {
+    outline: 0 none;
+}
+
+.pure-thumb {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+.pure-thumb img {
+    max-width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    vertical-align: middle; /* this will remove a thin line below the image */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.pure-thumb-bordered {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+}
+.pure-thumb .caption {
+    text-align: left;
+    display: block;
+    margin: 0 5px 6px;
+
+}
+.pure-thumb .caption p {
+    margin: 0.3em 0 0;
+    font-size: 75%;
+}
+.pure-thumb .caption .caption-head {
+    font-weight: bold;
+    margin-top: 0.3em;
+}
+
+.pure-thumb-eliptical img {
+	border-radius: 50%;
+}
+.pure-thumb-rounded img {
+	border-radius: 3px;
+}
+
+/* Badges/Pills */
+.pure-badge,
+.pure-badge-error,
+.pure-badge-warning,
+.pure-badge-success,
+.pure-badge-info,
+.pure-badge-inverse {
+    padding: 0.35em 0.9em 0.35em;
+    background-color: #9D988E;
+    color: #fff;
+    display: inline-block;
+    font-size: 11.844px;
+    font-weight: bold;
+    line-height: 1.2em;
+    vertical-align: baseline;
+    white-space: nowrap;
+    border-radius: 20px;
+    margin: 0.2em;
+}
+.pure-badge-error {
+    background-color: #D13C38;
+}
+.pure-badge-warning {
+    background-color: #E78C05;
+}
+.pure-badge-success {
+    background-color: rgb(83, 180, 79);
+}
+.pure-badge-info {
+    background-color: rgb(18, 169, 218);
+}
+.pure-badge-inverse {
+    background-color: #4D370C;
+}
+
+/* Alerts */
+.pure-alert {
+    position: relative;
+    margin-bottom: 1em;
+    padding: 1em;
+    background: #ccc;
+    border-radius: 3px;
+}
+
+.pure-alert label {
+    display: inline-block;
+    *display: inline;
+    /* IE7 inline-block hack */
+    *zoom: 1;
+    white-space: nowrap;
+}
+
+.pure-alert {
+    background-color: rgb(209, 235, 238);
+    color: rgb(102, 131, 145);
+}
+.pure-alert-error {
+    background-color: #D13C38;
+    color: #fff;
+}
+
+.pure-alert-warning {
+    background-color: rgb(250, 191, 103);
+    color: rgb(151, 96, 13);
+}
+
+.pure-alert-success {
+    background-color: rgb(83, 180, 79);
+    color: #fff;
+}
+
+
+/* Contextual Modals */
+
+.pure-popover {
+    position: relative;
+    width: 300px;
+    background-color: #f0f1f3;
+    color: #2f3034;
+    padding: 15px;
+    border: 1px solid #bfc0c8;
+    border-radius: 2px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-padding: border-box;
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+
+.pure-arrow-border, .pure-arrow {
+    border-style: solid;
+    border-width: 10px;
+    height:0;
+    width:0;
+    position:absolute;
+}
+
+
+/* POPOVER ARROW POSITIONING BOTTOM */
+
+.pure-popover.bottom .pure-arrow-border {
+    border-color: #bfc0c8 transparent transparent transparent;
+    bottom: -20px;
+    left: 50%;
+}
+.pure-popover.bottom .pure-arrow {
+    border-color: #f0f1f3 transparent transparent transparent;
+    bottom:-19px;
+    left: 50%;
+}
+
+/* POPOVER ARROW POSITIONING TOP*/
+
+.pure-popover.top .pure-arrow-border {
+    border-color: transparent transparent #bfc0c8 transparent;
+    top: -21px;
+    left: 50%;
+}
+.pure-popover.top .pure-arrow {
+    border-color: transparent transparent #f0f1f3 transparent;
+    top:-20px;
+    left: 50%;
+}
+
+/* POPOVER ARROW POSITIONING RIGHT*/
+
+.pure-popover.right .pure-arrow-border {
+    border-color: transparent transparent transparent #bfc0c8;
+    top: 45%;
+    right: -21px;
+}
+.pure-popover.right .pure-arrow {
+    border-color: transparent transparent transparent #f0f1f3;
+    top:45%;
+    right: -20px;
+}
+
+
+/* POPOVER ARROW POSITIONING LEFT*/
+
+.pure-popover.left .pure-arrow-border {
+    border-color: transparent #bfc0c8 transparent transparent;
+    top: 45%;
+    left: -21px;
+}
+.pure-popover.left .pure-arrow {
+    border-color: transparent #f0f1f3 transparent transparent;
+    top:45%;
+    left: -20px;
+}
+
+
+/* BUTTON IMPROVEMENTS */
+.pure-button-block {
+    display: block;
+}
+.pure-button-small {
+    padding: .6em 2em .65em;
+    font-size:70%;
+}
+.pure-button-large {
+    padding: .8em 5em .9em;
+    font-size:110%;
+}
+.pure-button-selected {
+    background-color: #345fcb;
+    color: #fff;
+}
+.pure-button-secondary {
+    background: rgb(161, 195, 238);
+    color: rgb(26, 88, 122);
+}
+.pure-button-error {
+    background: rgb(214, 86, 75);
+    color: white;
+}
+.pure-button-success {
+    background: rgb(54, 197, 71);
+    color: white;
+}
+.pure-button-warning {
+    background: rgb(255, 163, 0);
+    color: white;
+}
+

tpl/default/daily.html

@@ -1,101 +1,113 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
+<head>
+  {include="includes"}
+</head>
 <body>
-<div id="pageheader">
-    {include="page.header"}
-</div>
-<div class="daily">
-    <div id="plugin_zone_start_picwall" class="plugin_zone">
-        {loop="$plugin_start_zone"}
+{include="page.header"}
+
+<div class="pure-g">
+  <div class="pure-u-lg-1-6 pure-u-1-24"></div>
+  <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor" id="daily">
+    <h2 class="window-title">
+      {'The Daily Shaarli'|t}
+      <a href="?do=dailyrss" title="{'1 RSS entry per day'|t}"><i class="fa fa-rss"></i></a>
+    </h2>
+
+    <div id="plugin_zone_start_daily" class="plugin_zone">
+      {loop="$plugin_start_zone"}
+        {$value}
+      {/loop}
+    </div>
+
+    <div class="daily-about">
+
+      <div class="pure-g">
+        <div class="pure-u-lg-1-3 pure-u-1 center">
+          {if="$previousday"}
+            <a href="?do=daily&amp;day={$previousday}">
+              <i class="fa fa-arrow-left"></i>
+              {'Previous day'|t}
+            </a>
+          {/if}
+        </div>
+        <div class="daily-desc pure-u-lg-1-3 pure-u-1 center">
+          {'All links of one day in a single page.'|t}
+        </div>
+        <div class="pure-u-lg-1-3 pure-u-1 center">
+          {if="$nextday"}
+            <a href="?do=daily&amp;day={$nextday}">
+              {'Next day'|t}
+              <i class="fa fa-arrow-right"></i>
+            </a>
+          {/if}
+        </div>
+      </div>
+      <div>
+        <h3 class="window-subtitle">{function="strftime('%A %d, %B %Y', $day)"}</h3>
+
+        <div id="plugin_zone_about_daily" class="plugin_zone">
+          {loop="$daily_about_plugin"}
             {$value}
-        {/loop}
+          {/loop}
+        </div>
+      </div>
     </div>
 
-    <div class="dailyAbout">
-        All links of one day<br>in a single page.<br>
-        {if="$previousday"} <a href="?do=daily&amp;day={$previousday}"><b>&lt;</b>Previous day</a>{else}<b>&lt;</b>Previous day{/if}
-        -
-        {if="$nextday"}<a href="?do=daily&amp;day={$nextday}">Next day<b>&gt;</b></a>{else}Next day<b>&gt;</b>{/if}
-        <br>
-
-        {loop="$daily_about_plugin"}
-            {$value}
-        {/loop}
-
-        <br>
-        <a href="?do=dailyrss" title="1 RSS entry per day"><img src="images/feed-icon-14x14.png#" alt="rss_feed">Daily RSS Feed</a>
-    </div>
-
-    <div class="dailyTitle">
-        <img src="images/floral_left.png" width="51" height="50" class="nomobile" alt="floral_left">
-        The Daily Shaarli
-        <img src="images/floral_right.png" width="51" height="50" class="nomobile" alt="floral_right">
-    </div>
-
-    <div class="dailyDate">
-        <span class="nomobile">&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;</span>
-        {function="strftime('%A %d, %B %Y', $day)"}
-        <span class="nomobile">&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;</span>
-    </div>
-
-    <div class="clear"></div>
 
     {if="$linksToDisplay"}
+      <div class="pure-g">
         {loop="$cols"}
-            {if="isset($value[0])"}
-            <div id="daily_col{$counter+1}">
-                {loop="$value"}
-                    {$link=$value}
-                    <div class="dailyEntry">
-                        <div class="dailyEntryPermalink">
-                            <a href="?{$value.shorturl}">
-                                <img src="images/squiggle.png" width="25" height="26" title="permalink" alt="permalink">
-                            </a>
-                        </div>
-                        {if="!$hide_timestamps || isLoggedIn()"}
-                            <div class="dailyEntryLinkdate">
-                                <a href="?{$value.shorturl}">{function="strftime('%c', $link.timestamp)"}</a>
-                            </div>
-                        {/if}
-                        {if="$link.tags"}
-                            <div class="dailyEntryTags">
-                                {loop="$link.taglist"}
-                                    {$value} -
-                                {/loop}
-                            </div>
-                        {/if}
-                        <div class="dailyEntryTitle">
-                            <a href="{$link.real_url}">{$link.title}</a>
-                        </div>
-                        {if="$link.thumbnail"}
-                            <div class="dailyEntryThumbnail">{$link.thumbnail}</div>
-                        {/if}
-                        <div class="dailyEntryDescription">{$link.formatedDescription}</div>
-
-                        <div class="dailyEntryFooter">
-                            {loop="$link.link_plugin"}
-                                {$value}
-                            {/loop}
-                        </div>
+          {if="isset($value[0])"}
+            <div class="pure-u-lg-1-3 pure-u-1">
+              {loop="value"}
+                {$link=$value}
+                <div class="daily-entry">
+                  <div class="daily-entry-title center">
+                    <a href="?{$link.shorturl}" title="{'Permalink'|t}">
+                      <i class="fa fa-link"></i>
+                    </a>
+                    <a href="{$link.real_url}">{$link.title}</a>
+                  </div>
+                  {$thumb=thumbnail($value.url)}
+                  {if="$thumb!=false"}
+                    <div class="daily-entry-thumbnail">{$thumb}</div>
+                  {/if}
+                  <div class="daily-entry-description">{$link.formatedDescription}</div>
+                  {if="$link.tags"}
+                    <div class="daily-entry-tags center">
+                      {loop="link.taglist"}
+                        <span class="label label-tag" title="Add tag">
+                          {$value}
+                        </span>
+                      {/loop}
                     </div>
-                {/loop}
+                  {/if}
+                  <div class="dailyEntryFooter">
+                    {loop="$link.link_plugin"}
+                      {$value}
+                    {/loop}
+                  </div>
+                </div>
+              {/loop}
             </div>
-            {/if}
+          {/if}
         {/loop}
+      </div>
     {else}
-         <div class="dailyNoEntry">No articles on this day.</div>
+      <div class="dailyNoEntry">No articles on this day.</div>
     {/if}
 
     <div class="clear"></div>
 
     <div id="plugin_zone_end_picwall" class="plugin_zone">
-        {loop="$plugin_end_zone"}
-            {$value}
-        {/loop}
+      {loop="$plugin_end_zone"}
+        {$value}
+      {/loop}
     </div>
-    <div id="closing"><img src="images/squiggle_closing.png" width="66" height="61" alt="-"></div>
+  </div>
 </div>
 {include="page.footer"}
 </body>
 </html>
+

tpl/default/dailyrss.html

@@ -4,7 +4,7 @@
     <link>{$absurl}</link>
     <pubDate>{$rssdate}</pubDate>
     <description><![CDATA[
-        {loop="$links"}
+        {loop="links"}
         	<h3><a href="{$value.url}">{$value.title}</a></h3>
         	<small>{if="!$hide_timestamps"}{function="strftime('%c', $value.timestamp)"} - {/if}{if="$value.tags"}{$value.tags}{/if}<br>
         	{$value.url}</small><br>

tpl/default/editlink.html

@@ -1,63 +1,91 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}
-    <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
+<head>
+  {include="includes"}
 </head>
-<body
-{if="$link.title==''"}onload="document.linkform.lf_title.focus();"
-{elseif="$link.description==''"}onload="document.linkform.lf_description.focus();"
-{else}onload="document.linkform.lf_tags.focus();"{/if} >
-<div id="pageheader">
-    {if="$source !== 'firefoxsocialapi'"}
+<body>
+  {if="$source !== 'firefoxsocialapi' && $source !== 'bookmarklet'"}
     {include="page.header"}
-    {else}
-    <div id="shaarli_title"><a href="{$titleLink}">{$shaarlititle}</a></div>
-    {/if}
-    <div id="editlinkform">
-        <form method="post" name="linkform">
-            <input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
-          {if="isset($link.id)"}
-	          <input type="hidden" name="lf_id" value="{$link.id}">
-          {/if}
-            <label for="lf_url"><i>URL</i></label><br><input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input"><br>
-            <label for="lf_title"><i>Title</i></label><br><input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input"><br>
-            <label for="lf_description"><i>Description</i></label><br><textarea name="lf_description" id="lf_description" rows="4" cols="25">{$link.description}</textarea><br>
-            <label for="lf_tags"><i>Tags</i></label><br>
-            <input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input"
-                data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" ><br>
+  {else}
+    <div class="center">Shaare to: {$shaarlititle}</div>
+  {/if}
+  <div id="editlinkform" class="pure-g">
+    <div class="pure-u-lg-1-5 pure-u-1-24"></div>
+    <form method="post" name="linkform" class="page-form pure-u-lg-3-5 pure-u-22-24 page-form page-form-light">
+      <h2 class="window-title">{'Shaare'|t}</h2>
+      <input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
+      {if="isset($link.id)"}
+        <input type="hidden" name="lf_id" value="{$link.id}">
+      {/if}
+      <div>
+        <label for="lf_url">{'URL'|t}</label>
+      </div>
+      <div>
+        <input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input">
+      </div>
+      <div>
+      <label for="lf_title">{'Title'|t}</label>
+      </div>
+      <div>
+        <input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input">
+      </div>
+      <div>
+        <label for="lf_description">{'Description'|t}</label>
+      </div>
+      <div>
+        <textarea name="lf_description" id="lf_description">{$link.description}</textarea>
+      </div>
+      <div>
+        <label for="lf_tags">{'Tags'|t}</label>
+      </div>
+      <div>
+        <input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input"
+          data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" >
+      </div>
 
-            {loop="$edit_link_plugin"}
-                {$value}
-            {/loop}
+      <div>
+        <input type="checkbox"  name="lf_private" id="lf_private"
+        {if="($link_is_new && $default_private_links || $link.private == true)"}
+          checked="checked"
+        {/if}>
+        &nbsp;<label for="lf_private">{'Private'|t}</label>
+      </div>
 
-            {if="($link_is_new && $default_private_links) || $link.private == true"}
-            <input type="checkbox" checked="checked" name="lf_private" id="lf_private">
-            &nbsp;<label for="lf_private"><i>Private</i></label><br>
-            {else}
-            <input type="checkbox"  name="lf_private" id="lf_private">
-            &nbsp;<label for="lf_private"><i>Private</i></label><br><br>
-            {/if}
-            <input type="submit" value="Save" name="save_edit" class="bigbutton">
-            <input type="submit" value="Cancel" name="cancel_edit" class="bigbutton">
-            {if="!$link_is_new && isset($link.id)"}
-              <a href="?delete_link&amp;lf_linkdate={$link.id}&amp;token={$token}"
-                 name="delete_link" class="bigbutton"
-                 onClick="return confirmDeleteLink();">
-                {'Delete'|t}
-              </a>
-            {/if}
-            <input type="hidden" name="token" value="{$token}">
-            {if="$http_referer"}<input type="hidden" name="returnurl" value="{$http_referer}">{/if}
-        </form>
-    </div>
-</div>
-{if="$source !== 'firefoxsocialapi'"}
-{include="page.footer"}
-{/if}
-<script src="inc/awesomplete.min.js#"></script>
-<script src="inc/awesomplete-multiple-tags.js#"></script>
+      <div id="editlink-plugins">
+        {loop="$edit_link_plugin"}
+          {$value}
+        {/loop}
+      </div>
+
+
+      <div class="submit-buttons center">
+        <input type="submit" value="{'Save'|t}" name="save_edit" class="">
+        {if="!$link_is_new"}
+        <a href="?delete_link&amp;lf_linkdate={$link.id}&amp;token={$token}"
+           title="" name="delete_link" class="button button-red confirm-delete">
+          {'Delete'|t}
+        </a>
+        {/if}
+      </div>
+
+      <input type="hidden" name="token" value="{$token}">
+      {if="$http_referer"}
+        <input type="hidden" name="returnurl" value="{$http_referer}">
+      {/if}
+    </form>
+  </div>
+  {if="$source !== 'firefoxsocialapi' && $source !== 'bookmarklet'"}
+    {include="page.footer"}
+  {/if}
 <script>
-    awesompleteUniqueTag('#lf_tags');
+  awesompleteUniqueTag('#lf_tags');
+  if (!document.linkform.lf_title.value) {
+    document.linkform.lf_title.focus();
+  } else if (!document.linkform.lf_description.value) {
+    document.linkform.lf_description.focus();
+  } else {
+    document.linkform.lf_tags.focus();
+  }
 </script>
 </body>
 </html>

tpl/default/export.bookmarks.html

@@ -5,6 +5,6 @@
      Do Not Edit! -->{ignore}The RainTPL loop is formatted to avoid generating extra newlines{/ignore}
 <TITLE>{$pagetitle}</TITLE>
 <H1>Shaarli export of {$selection} bookmarks on {$date}</H1>
-<DL><p>{loop="$links"}
+<DL><p>{loop="links"}
 <DT><A HREF="{$value.url}" ADD_DATE="{$value.timestamp}" PRIVATE="{$value.private}" TAGS="{$value.taglist}">{$value.title}</A>{if="$value.description"}{$eol}<DD>{$value.description}{/if}{/loop}
 </DL><p>

tpl/default/export.html

@@ -1,28 +1,68 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
+<head>
+  {include="includes"}
+</head>
 <body>
-  <div id="pageheader">
-    {include="page.header"}
-    <div id="toolsdiv">
-      <form method="GET">
-        <input type="hidden" name="do" value="export">
-        Selection:<br>
-        <input type="radio" name="selection" value="all" checked="true"> All<br>
-        <input type="radio" name="selection" value="private"> Private<br>
-        <input type="radio" name="selection" value="public"> Public<br>
-        <br>
-        <input type="checkbox" name="prepend_note_url" id="prepend_note_url">
-        <label for="prepend_note_url">
-          Prepend note permalinks with this Shaarli instance's URL
-          <em>(useful to import bookmarks in a web browser)</em>
-        </label>
-        <br><br>
-        <input class="bigbutton" type="submit" value="Export">
-      </form>
-      <div class="clear"></div>
+{include="page.header"}
+
+<form method="GET" action="#" name="exportform" id="exportform">
+  <div class="pure-g">
+    <div class="pure-u-lg-1-4 pure-u-1-24"></div>
+    <div class="pure-u-lg-1-2 pure-u-22-24 page-form page-form-complete">
+      <div>
+        <h2 class="window-title">{"Export Database"|t}</h2>
+      </div>
+      <input type="hidden" name="do" value="export">
+      <input type="hidden" name="token" value="{$token}">
+
+      <div class="pure-g">
+        <div class="pure-u-lg-1-2 pure-u-1">
+          <div class="form-label">
+            <label><span class="label-name">{'Selection'|t}</span></label>
+          </div>
+        </div>
+        <div class="pure-u-lg-1-2 pure-u-1">
+          <div class="radio-buttons">
+            <div>
+              <input type="radio" name="selection" value="all" checked="checked">
+              {'All'|t}
+            </div>
+            <div>
+              <input type="radio" name="selection" value="private">
+              {'Private'|t}
+            </div>
+            <div>
+              <input type="radio" name="selection" value="public">
+              {'Public'|t}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="pure-g">
+        <div class="pure-u-lg-1-2 pure-u-7-8">
+          <div class="form-label">
+            <label for="prepend_note_url">
+              <span class="label-name">{'Prepend note permalinks with this Shaarli instance\'s URL'|t}</span><br>
+              <span class="label-desc">{'Useful to import bookmarks in a web browser'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-1-2 pure-u-1-8">
+          <div class="form-input">
+            <input type="checkbox" name="prepend_note_url" id="prepend_note_url">
+          </div>
+        </div>
+      </div>
+
+      <div class="center">
+        <input type="submit" value="{'Export'|t}">
+      </div>
     </div>
   </div>
-  {include="page.footer"}
+</form>
+
+{include="page.footer"}
 </body>
 </html>

tpl/default/feed.atom.html

@@ -6,9 +6,7 @@
     <updated>{$last_update}</updated>
   {/if}
   <link rel="self" href="{$self_link}#" />
-  <link rel="search" type="application/opensearchdescription+xml" href="{$index_url}?do=opensearch#"
-             title="Shaarli search - {$shaarlititle}" />
-  {loop="$feed_plugins_header"}
+  {loop="$plugins_feed_header"}
     {$value}
   {/loop}
   <author>

tpl/default/feed.rss.html

@@ -8,9 +8,7 @@
     <copyright>{$index_url}</copyright>
     <generator>Shaarli</generator>
     <atom:link rel="self" href="{$self_link}"  />
-    <atom:link rel="search" type="application/opensearchdescription+xml" href="{$index_url}?do=opensearch#"
-               title="Shaarli search - {$shaarlititle}" />
-    {loop="$feed_plugins_header"}
+    {loop="$plugins_feed_header"}
       {$value}
     {/loop}
     {loop="$links"}

tpl/default/import.html

@@ -1,33 +1,85 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
-<body onload="document.uploadform.filetoupload.focus();">
-<div id="pageheader">
-  {include="page.header"}
-  <div id="uploaddiv">
-    Import Netscape HTML bookmarks (as exported from Firefox/Chrome/Opera/Delicious/Diigo...) (Max: {$maxfilesize} bytes).
-    <form method="POST" action="?do=import" enctype="multipart/form-data"
-          name="uploadform" id="uploadform">
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+
+<form method="POST" action="?do=import" enctype="multipart/form-data" name="uploadform" id="uploadform">
+  <div class="pure-g">
+    <div class="pure-u-lg-1-4 pure-u-1-24"></div>
+    <div class="pure-u-lg-1-2 pure-u-22-24 page-form page-form-complete">
+      <div>
+        <h2 class="window-title">{"Import Database"|t}</h2>
+      </div>
+
       <input type="hidden" name="token" value="{$token}">
-      <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize}">
-      <input type="file" name="filetoupload">
-      <input type="submit" name="import_file" value="Import" class="bigbutton"><br>
+      <div class="center" id="import-field">
+        <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize}">
+        <input type="file" name="filetoupload">
+      </div>
 
-      <label for="privacy">&nbsp;Visibility:</label><br>
-      <input type="radio" name="privacy" value="default" checked="true">
-      &nbsp;Use values from the imported file, default to public<br>
-      <input type="radio" name="privacy" value="private">
-      &nbsp;Import all bookmarks as private<br>
-      <input type="radio" name="privacy" value="public">
-      &nbsp;Import all bookmarks as public<br>
+      <div class="pure-g">
+        <div class="pure-u-lg-1-3 pure-u-1">
+          <div class="form-label">
+            <label><span class="label-name">{'Visibility'|t}</span></label>
+          </div>
+        </div>
+        <div class="pure-u-lg-2-3 pure-u-1">
+          <div class="radio-buttons">
+            <div>
+              <input type="radio" name="privacy" value="default" checked="checked">
+              Use values from the imported file, default to public
+            </div>
+            <div>
+              <input type="radio" name="privacy" value="private">
+              Import all bookmarks as private
+            </div>
+            <div>
+              <input type="radio" name="privacy" value="public">
+              Import all bookmarks as public
+            </div>
+          </div>
+        </div>
+      </div>
 
-      <input type="checkbox" name="overwrite" id="overwrite">
-      <label for="overwrite">&nbsp;Overwrite existing bookmarks</label><br>
-      <label for="default_tags">&nbsp;Add default tags</label>
-      <input type="text" name="default_tags" id="default_tags">
-    </form>
+      <div class="pure-g">
+        <div class="pure-u-lg-1-3 pure-u-7-8">
+          <div class="form-label">
+            <label for="overwrite">
+              <span class="label-name">{'Overwrite existing bookmarks'|t}</span><br>
+              <span class="label-desc">{'Duplicates based on URL'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-2-3 pure-u-1-8">
+          <div class="form-input">
+            <input type="checkbox" name="overwrite" id="overwrite">
+          </div>
+        </div>
+      </div>
+
+      <div class="pure-g">
+        <div class="pure-u-lg-1-3 pure-u-1">
+          <div class="form-label">
+            <label for="default_tags"><span class="label-name">{'Add default tags'|t}</span></label>
+          </div>
+        </div>
+        <div class="pure-u-lg-2-3 pure-u-1">
+          <div class="form-input">
+            <input type="text" name="default_tags" id="default_tags" placeholder="{'Tag'|t}">
+          </div>
+        </div>
+      </div>
+
+      <div class="center">
+        <input type="submit" name="import_file" value="{'Import'|t}">
+      </div>
+    </div>
   </div>
-</div>
+</form>
+
 {include="page.footer"}
 </body>
 </html>

tpl/default/includes.html

@@ -1,15 +1,20 @@
 <title>{$pagetitle}</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="format-detection" content="telephone=no" />
-<meta name="viewport" content="width=device-width,initial-scale=1.0" />
-<meta name="referrer" content="same-origin">
-<link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" />
-<link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" />
-<link type="text/css" rel="stylesheet" href="css/reset.css" />
+<link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
+<link href="img/favicon.png" rel="shortcut icon" type="image/png" />
+<link type="text/css" rel="stylesheet" href="css/pure.min.css" />
+<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css">
+<link type="text/css" rel="stylesheet" href="css/pure-extras.css">
+<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
+<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
 <link type="text/css" rel="stylesheet" href="css/shaarli.css" />
-{if="is_file('data/user.css')"}<link type="text/css" rel="stylesheet" href="data/user.css#" />{/if}
+{if="is_file('inc/user.css')"}
+  <link type="text/css" rel="stylesheet" href="data/user.css#" />
+{/if}
 {loop="$plugins_includes.css_files"}
-<link type="text/css" rel="stylesheet" href="{$value}#"/>
+  <link type="text/css" rel="stylesheet" href="{$value}#"/>
 {/loop}
-<link rel="search" type="application/opensearchdescription+xml" href="?do=opensearch#" title="Shaarli search - {$shaarlititle|htmlspecialchars}"/>
+<link rel="search" type="application/opensearchdescription+xml" href="?do=opensearch#" title="Shaarli search - {$shaarlititle}"/>

tpl/default/install.html

@@ -1,35 +1,122 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}{$timezone_js}</head>
-<body onload="document.installform.setlogin.focus();">
-<div id="install">
-    <h1>Shaarli</h1>
-    It looks like it's the first time you run Shaarli. Please configure it:<br>
-    <form method="POST" action="#" name="installform" id="installform">
-        <table>
-            <tr><td><b>Login:</b></td><td><input type="text" name="setlogin" size="30"></td></tr>
-            <tr><td><b>Password:</b></td><td><input type="password" name="setpassword" size="30"></td></tr>
-            {$timezone_html}
-            <tr><td><b>Page title:</b></td><td><input type="text" name="title" size="30"></td></tr>
-            <tr><td valign="top"><b>Update:</b></td><td>
-                <input type="checkbox" name="updateCheck" id="updateCheck" checked="checked"><label for="updateCheck">&nbsp;Notify me when a new release is ready</label></td>
-            </tr>
-            <tr>
-                <td valign="top">
-                    <b>API:</b>
-                </td>
-                <td>
-                    <input type="checkbox" name="enableApi" id="enableApi" checked="checked">
-                    <label for="enableApi">
-                        &nbsp;Enable Shaarli's REST API.
-                        Allow third party software to use Shaarli such as mobile application.
-                    </label>
-                </td>
-            </tr>
-            <tr><td colspan="2"><input type="submit" name="Save" value="Save config" class="bigbutton"></td></tr>
-        </table>
-    </form>
+<head>
+  {include="includes"}
+</head>
+<body>
+
+{$ratioLabel='1-4'}
+{$ratioInput='3-4'}
+
+<form method="POST" action="#" name="installform" id="installform">
+<div class="pure-g">
+  <div class="pure-u-lg-1-6 pure-u-1-24"></div>
+  <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-complete">
+    <h2 class="window-title">{'Install Shaarli'|t}</h2>
+
+    <div class="center">
+      {'It looks like it\'s the first time you run Shaarli. Please configure it.'|t}
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+        <div class="form-label">
+          <label for="username">
+            <span class="label-name">{'Username'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
+        <div class="form-input">
+          <input type="text" name="setlogin" id="username">
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+        <div class="form-label">
+          <label for="password">
+            <span class="label-name">{'Password'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
+        <div class="form-input">
+          <input type="text" name="setpassword" id="password">
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
+        <div class="form-label">
+          <label>
+            <span class="label-name">{'Timezone'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
+        <div class="form-input">
+          {ignore}FIXME! too hackish, needs to be fixed upstream{/ignore}
+          <div class="timezone" id="timezone-remove">{$timezone_html}</div>
+          <div class="timezone" id="timezone-add"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+        <div class="form-label">
+          <label for="title">
+            <span class="label-name">{'Shaarli title'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
+        <div class="form-input">
+          <input type="text" name="title" id="title" placeholder="{'My links'|t}">
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-7-8">
+        <div class="form-label">
+          <label for="update">
+            <span class="label-name">{'Check updates'|t}</span><br>
+            <span class="label-desc">
+              {'Notify me when a new release is ready'|t}
+            </span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1-8">
+        <div class="form-input">
+          <input type="checkbox" name="updateCheck" id="update" checked="checked">
+        </div>
+      </div>
+    </div>
+
+    <div class="center">
+      <input type="submit" value="{'Install'|t}" name="Save">
+    </div>
+  </div>
 </div>
+</form>
 {include="page.footer"}
+<script>
+  // FIXME!
+  (function (window, document) {
+    var toRemove = document.getElementById('timezone-remove');
+    var firstSelect = toRemove.getElementsByTagName('select')[0];
+    var secondSelect = toRemove.getElementsByTagName('select')[1];
+    toRemove.parentNode.removeChild(toRemove);
+    var toAdd = document.getElementById('timezone-add');
+    var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>';
+    newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>';
+    toAdd.innerHTML = newTimezone;
+  })(this, this.document);
+</script>
 </body>
 </html>

tpl/default/js/shaarli.js

@@ -0,0 +1,262 @@
+window.onload = function () {
+
+    /**
+     * Retrieve an element up in the tree from its class name.
+     */
+    function getParentByClass(el, className) {
+        var p = el.parentNode;
+        if (p == null || p.classList.contains(className)) {
+            return p;
+        }
+        return getParentByClass(p, className);
+    }
+
+
+    /**
+     * Handle responsive menu.
+     * Source: http://purecss.io/layouts/tucked-menu-vertical/
+     */
+    (function (window, document) {
+        var menu = document.getElementById('shaarli-menu'),
+            WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
+
+        function toggleHorizontal() {
+            [].forEach.call(
+                document.getElementById('shaarli-menu').querySelectorAll('.menu-transform'),
+                function(el){
+                    el.classList.toggle('pure-menu-horizontal');
+                }
+            );
+        };
+
+        function toggleMenu() {
+            // set timeout so that the panel has a chance to roll up
+            // before the menu switches states
+            if (menu.classList.contains('open')) {
+                setTimeout(toggleHorizontal, 500);
+            }
+            else {
+                toggleHorizontal();
+            }
+            menu.classList.toggle('open');
+            document.getElementById('menu-toggle').classList.toggle('x');
+        };
+
+        function closeMenu() {
+            if (menu.classList.contains('open')) {
+                toggleMenu();
+            }
+        }
+
+        document.getElementById('menu-toggle').addEventListener('click', function (e) {
+            toggleMenu();
+        });
+
+        window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
+    })(this, this.document);
+
+    /**
+     * Fold/Expand shaares description and thumbnail.
+     */
+    var foldAllButtons = document.getElementsByClassName('fold-all');
+    var foldButtons = document.getElementsByClassName('fold-button');
+
+    [].forEach.call(foldButtons, function (foldButton) {
+        // Retrieve description
+        var description = null;
+        var thumbnail = null;
+        var linklistItem = getParentByClass(foldButton, 'linklist-item');
+        if (linklistItem != null) {
+            description = linklistItem.querySelector('.linklist-item-description');
+            thumbnail = linklistItem.querySelector('.linklist-item-thumbnail');
+            if (description != null || thumbnail != null) {
+                foldButton.style.display = 'inline';
+            }
+        }
+
+        foldButton.addEventListener('click', function (event) {
+            event.preventDefault();
+            toggleFold(event.target, description, thumbnail);
+        });
+    });
+
+    if (foldAllButtons != null) {
+        [].forEach.call(foldAllButtons, function (foldAllButton) {
+            foldAllButton.addEventListener('click', function (event) {
+                event.preventDefault();
+                var state = foldAllButton.firstElementChild.getAttribute('class').indexOf('down') != -1 ? 'down' : 'up';
+                [].forEach.call(foldButtons, function (foldButton) {
+                    if (foldButton.firstElementChild.classList.contains('fa-chevron-up') && state == 'down'
+                        || foldButton.firstElementChild.classList.contains('fa-chevron-down') && state == 'up'
+                    ) {
+                        return;
+                    }
+                    // Retrieve description
+                    var description = null;
+                    var thumbnail = null;
+                    var linklistItem = getParentByClass(foldButton, 'linklist-item');
+                    if (linklistItem != null) {
+                        description = linklistItem.querySelector('.linklist-item-description');
+                        thumbnail = linklistItem.querySelector('.linklist-item-thumbnail');
+                        if (description != null || thumbnail != null) {
+                            foldButton.style.display = 'inline';
+                        }
+                    }
+
+                    toggleFold(foldButton.firstElementChild, description, thumbnail);
+                });
+                foldAllButton.firstElementChild.classList.toggle('fa-chevron-down');
+                foldAllButton.firstElementChild.classList.toggle('fa-chevron-up');
+            });
+        });
+    }
+
+    function toggleFold(button, description, thumb)
+    {
+        // Switch fold/expand - up = fold
+        if (button.classList.contains('fa-chevron-up')) {
+            button.title = 'Expand';
+            if (description != null) {
+                description.style.display = 'none';
+            }
+            if (thumb != null) {
+                thumb.style.display = 'none';
+            }
+        }
+        else {
+            button.title = 'Fold';
+            if (description != null) {
+                description.style.display = 'block';
+            }
+            if (thumb != null) {
+                thumb.style.display = 'block';
+            }
+        }
+        button.classList.toggle('fa-chevron-down');
+        button.classList.toggle('fa-chevron-up');
+    }
+
+    /**
+     * Confirmation message before deletion.
+     */
+    var deleteLinks = document.querySelectorAll('.confirm-delete');
+    [].forEach.call(deleteLinks, function(deleteLink) {
+        deleteLink.addEventListener('click', function(event) {
+            if(! confirm('Are you sure you want to delete this link ?')) {
+                event.preventDefault();
+            }
+        });
+    });
+
+    /**
+     * Close alerts
+     */
+    var closeLinks = document.querySelectorAll('.pure-alert-close');
+    [].forEach.call(closeLinks, function(closeLink) {
+        closeLink.addEventListener('click', function(event) {
+            var alert = getParentByClass(event.target, 'pure-alert-closable');
+            alert.style.display = 'none';
+        });
+    });
+
+    /**
+     * New version dismiss.
+     * Hide the message for one week using localStorage.
+     */
+    var newVersionDismiss = document.getElementById('new-version-dismiss');
+    var newVersionMessage = document.querySelector('.new-version-message');
+    if (newVersionMessage != null
+        && localStorage.getItem('newVersionDismiss') != null
+        && parseInt(localStorage.getItem('newVersionDismiss')) + 7*24*60*60*1000 > (new Date()).getTime()
+    ) {
+        newVersionMessage.style.display = 'none';
+    }
+    if (newVersionDismiss != null) {
+        newVersionDismiss.addEventListener('click', function () {
+            localStorage.setItem('newVersionDismiss', (new Date()).getTime());
+        });
+    }
+
+    var hiddenReturnurl = document.getElementsByName('returnurl');
+    if (hiddenReturnurl != null) {
+        hiddenReturnurl.value = window.location.href;
+    }
+
+    /**
+     * Autofocus text fields
+     */
+    var autofocusElements = document.querySelector('.autofocus');
+    if (autofocusElements != null) {
+        autofocusElements.focus();
+    }
+
+    /**
+     * Handle sub menus/forms
+     */
+    var openers = document.getElementsByClassName('subheader-opener');
+    if (openers != null) {
+        [].forEach.call(openers, function(opener) {
+             opener.addEventListener('click', function(event) {
+                 event.preventDefault();
+
+                 var id = opener.getAttribute('data-open-id');
+                 var sub = document.getElementById(id);
+
+                 if (sub != null) {
+                    [].forEach.call(document.getElementsByClassName('subheader-form'), function (element) {
+                        if (element != sub) {
+                            removeClass(element, 'open')
+                        }
+                     });
+
+                     sub.classList.toggle('open');
+                 }
+             });
+        });
+    }
+
+    function removeClass(element, classname) {
+        element.className = element.className.replace(new RegExp('(?:^|\\s)'+ classname + '(?:\\s|$)'), ' ');
+    }
+
+    /**
+     * Remove CSS target padding (for fixed bar)
+     */
+    if (location.hash != '') {
+        var anchor = document.querySelector(location.hash);
+        if (anchor != null) {
+            var padsize = anchor.clientHeight;
+            console.log(document.querySelector(location.hash).clientHeight);
+            this.window.scroll(0, this.window.scrollY - padsize);
+            anchor.style.paddingTop = 0;
+        }
+    }
+
+    /**
+     * Text area resizer
+     */
+    var description = document.getElementById('lf_description');
+    var observe = function (element, event, handler) {
+        element.addEventListener(event, handler, false);
+    };
+    function init () {
+        function resize () {
+            description.style.height = 'auto';
+            description.style.height = description.scrollHeight+10+'px';
+        }
+        /* 0-timeout to get the already changed text */
+        function delayedResize () {
+            window.setTimeout(resize, 0);
+        }
+        observe(description, 'change',  resize);
+        observe(description, 'cut',     delayedResize);
+        observe(description, 'paste',   delayedResize);
+        observe(description, 'drop',    delayedResize);
+        observe(description, 'keydown', delayedResize);
+
+        resize();
+    }
+    if (description != null) {
+        init();
+    }
+};

tpl/default/linklist.html

@@ -1,151 +1,246 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
-    {include="includes"}
+  {include="includes"}
 </head>
 <body>
-<div id="pageheader">
-    {include="page.header"}
+{include="page.header"}
 
-    <div id="headerform" class="search">
-        <form method="GET" class="searchform" name="searchform">
-            <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text"
-               {if="!empty($search_term)"}
-                    value="{$search_term}"
-               {/if}
-            >
-            <input type="submit" value="Search" class="bigbutton">
-        </form>
-        <form method="GET" class="tagfilter" name="tagfilter">
-            <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag"
-                {if="!empty($search_tags)"}
-                    value="{$search_tags}"
-                {/if}
-                autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
-                data-list="{loop="$tags"}{$key}, {/loop}"
-            >
-            <input type="submit" value="Search" class="bigbutton">
-        </form>
-        {loop="$plugins_header.fields_toolbar"}
-            <form
-                {loop="$value.attr"}
-                    {$key}="{$value}"
-                {/loop}>
-                {loop="$value.inputs"}
-                    <input
-                    {loop="$value"}
-                        {$key}="{$value}"
-                    {/loop}>
-                {/loop}
-            </form>
-        {/loop}
-    </div>
+<div class="linkcount pure-u-0 pure-u-lg-visible">
+  {if="!empty($linkcount)"}
+  <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
+  {if="$privateLinkcount>0"}
+  <br><span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
+  {/if}
+  {/if}
 </div>
 
+<div id="search-linklist">
+
+  <div class="pure-g">
+    <div class="pure-u-1 pure-u-lg-1-2">
+      <form method="GET" class="searchform" name="searchform">
+        <input type="text" tabindex="1" name="searchterm" placeholder="{'Search text'|t}"
+               {if="!empty($search_term)"}
+               value="{$search_term}"
+               {/if}
+        >
+        <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+      </form>
+    </div>
+    <div class="pure-u-1 pure-u-lg-1-2">
+      <form method="GET" class="tagfilter" name="tagfilter">
+        <input type="text" tabindex="2" name="searchtags" placeholder="{'Filter by tag'|t}"
+               {if="!empty($search_tags)"}
+               value="{$search_tags}"
+               {/if}
+        autocomplete="off" data-multiple data-minChars="1"
+        data-list="{loop="$tags"}{$key}, {/loop}"
+        >
+        <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+      </form>
+    </div>
+  </div>
+</div>
+
+{loop="$plugins_header.fields_toolbar"}
+  <form
+    {loop="$value.attr"}
+      {$key}="{$value}"
+    {/loop}>
+    <div class="toolbar-plugin pure-u-lg-1">
+      {loop="$value.inputs"}
+        <input
+          {loop="$value"}
+          {$key}="{$value}"
+          {/loop}>
+      {/loop}
+    </div>
+  </form>
+{/loop}
+
 <div id="linklist">
+  <div class="pure-g">
+    <div class="pure-u-lg-2-24 pure-u-1-24"></div>
+    <div class="pure-u-lg-20-24 pure-u-22-24">
+      <div class="linkcount pure-u-lg-0 center">
+        {if="!empty($linkcount)"}
+        <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
+        {if="$privateLinkcount>0"}
+        &middot; <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
+        {/if}
+        {/if}
+      </div>
 
-    {include="linklist.paging"}
+      {include="linklist.paging"}
 
-    <div id="plugin_zone_start_linklist" class="plugin_zone">
+      <div id="plugin_zone_start_linklist" class="plugin_zone">
         {loop="$plugin_start_zone"}
-            {$value}
+          {$value}
         {/loop}
+      </div>
     </div>
+  </div>
 
-    {if="count($links)==0"}
-        <div id="searchcriteria">Nothing found.</div>
-    {elseif="!empty($search_term) or !empty($search_tags)"}
-        <div id="searchcriteria">
-            {$result_count} results
-            {if="!empty($search_term)"}
-                for <em>{$search_term}</em>
-            {/if}
-            {if="!empty($search_tags)"}
-                {$exploded_tags=explode(' ', $search_tags)}
-                tagged
-                {loop="$exploded_tags"}
-                    <span class="linktag" title="Remove tag">
-                        <a href="?removetag={function="urlencode($value)"}">{$value} <span class="remove">x</span></a>
-                    </span>
-                {/loop}
-            {/if}
-        </div>
-    {/if}
-    <ul>
-        {loop="$links"}
-        <li{if="$value.class"} class="{$value.class}"{/if}>
-            <a id="{$value.shorturl}"></a>
-            <div class="thumbnail">{$value.url|thumbnail}</div>
-            <div class="linkcontainer">
-                {if="isLoggedIn()"}
-                    <div class="linkeditbuttons">
-                        <form method="GET" class="buttoneditform">
-                            <input type="hidden" name="edit_link" value="{$value.id}">
-                            <input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit">
-                        </form><br>
-                        <form method="GET" class="buttoneditform">
-                            <input type="hidden" name="lf_linkdate" value="{$value.id}">
-                            <input type="hidden" name="token" value="{$token}">
-                            <input type="hidden" name="delete_link">
-                            <input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete"
-                                   class="button_delete" onClick="return confirmDeleteLink();">
-                        </form>
-                    </div>
+  {if="count($links)==0"}
+    <div class="pure-g pure-alert pure-alert-error search-result">
+      <div class="pure-u-2-24"></div>
+      <div class="pure-u-20-24">
+        <div id="searchcriteria">{'Nothing found.'|t}</div>
+      </div>
+    </div>
+  {elseif="!empty($search_term) or !empty($search_tags)"}
+    <div class="pure-g pure-alert pure-alert-success search-result">
+      <div class="pure-u-2-24"></div>
+      <div class="pure-u-20-24">
+        {function="t('%s result', '%s results', $result_count)"}
+        {if="!empty($search_term)"}
+          {'for'|t} <em><strong>{$search_term}</strong></em>
+        {/if}
+        {if="!empty($search_tags)"}
+          {$exploded_tags=explode(' ', $search_tags)}
+          {'tagged'|t}
+          {loop="$exploded_tags"}
+              <span class="label label-tag" title="{'Remove tag'|t}">
+                <a href="?removetag={function="urlencode($value)"}">{$value}<span class="remove"><i class="fa fa-times"></i></span></a>
+              </span>
+          {/loop}
+        {/if}
+      </div>
+    </div>
+  {/if}
+
+  <div class="pure-g">
+    <div class="pure-u-lg-2-24 pure-u-1-24"></div>
+    <div class="pure-u-lg-20-24 pure-u-22-24">
+      {loop="links"}
+        <div class="anchor" id="{$value.shorturl}"></div>
+        <div class="linklist-item{if="$value.class"} {$value.class}{/if}">
+
+          <div class="linklist-item-title">
+            {if="isLoggedIn()"}
+              <div class="linklist-item-editbuttons">
+                {if="$value.private"}
+                  <span class="label label-private">{'Private'|t}</span>
                 {/if}
-                <span class="linktitle">
-                    <a href="{$value.real_url}">{$value.title}</a>
-                </span>
-                <br>
-                {if="$value.description"}<div class="linkdescription">{$value.description}</div>{/if}
-                {if="!$hide_timestamps || isLoggedIn()"}
-                    {$updated=$value.updated_timestamp ? 'Edited: '. strftime('%c', $value.updated_timestamp) : 'Permalink'}
-                    <span class="linkdate" title="Permalink">
-                        <a href="?{$value.shorturl}">
-                            <span title="{$updated}">
-                                {function="strftime('%c', $value.timestamp)"}
-                                {if="$value.updated_timestamp"}*{/if}
-                            </span>
-                            - permalink
-                        </a> -
-                    </span>
+                <!-- FIXME! JS translation -->
+                <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a>
+                <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
+              </div>
+            {/if}
+
+            <h2>
+              <a href="{$value.real_url}">
+                {if="strpos($value.url, $value.shorturl) === false"}
+                  <i class="fa fa-external-link"></i>
                 {else}
-                    <span class="linkdate" title="Short link here"><a href="?{$value.shorturl}">permalink</a> - </span>
+                  <i class="fa fa-sticky-note"></i>
                 {/if}
 
-                {loop="$value.link_plugin"}
-                    <span>{$value}</span> -
-                {/loop}
-
-                <a href="{$value.real_url}"><span class="linkurl" title="Short link">{$value.url}</span></a><br>
-                {if="$value.tags"}
-                    <div class="linktaglist">
-                    {loop="$value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value}</a></span> {/loop}
-                    </div>
-                {/if}
+                <span class="linklist-link">{$value.title}</span>
+              </a>
+            </h2>
+          </div>
 
+          {$thumb=thumbnail($value.url)}
+          {if="$thumb!=false"}
+            <div class="linklist-item-thumbnail">{$thumb}</div>
+          {/if}
 
+          {if="$value.description"}
+            <div class="linklist-item-description">
+              {$value.description}
             </div>
-        </li>
-    {/loop}
-    </ul>
+          {/if}
 
-    <div id="plugin_zone_end_linklist" class="plugin_zone">
-        {loop="$plugin_end_zone"}
-            {$value}
-        {/loop}
+          <div class="linklist-item-infos clear">
+            {if="$value.tags"}
+              <div class="linklist-item-tags">
+                <i class="fa fa-tags"></i>
+                {$tag_counter=count($value.taglist)}
+                {loop="value.taglist"}
+                  <span class="label label-tag" title="Add tag">
+                    <a href="?addtag={$value|urlencode}">{$value}</a>
+                  </span>
+                  {if="$tag_counter - 1 != $counter"}&middot;{/if}
+                {/loop}
+              </div>
+            {/if}
+
+            <div class="pure-g">
+              <div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-1">
+                <a href="?{$value.shorturl}" title="{'Permalink'|t}">
+                  {if="!$hide_timestamps || isLoggedIn()"}
+                    {$updated=$value.updated_timestamp ? 'Edited: '. strftime('%c', $value.updated_timestamp) : 'Permalink'}
+                    <span class="linkdate" title="{$updated}">
+                      <i class="fa fa-clock-o"></i>
+                      {function="strftime('%c', $value.timestamp)"}{if="$value.updated_timestamp"}*{/if}
+                      &middot;
+                    </span>
+                  {/if}
+                  {'permalink'|t}
+                </a>
+
+                <div class="pure-u-0 pure-u-lg-visible">
+                  {if="isset($value.link_plugin)"}
+                    &middot;
+                    {$link_plugin_counter=count($value.link_plugin)}
+                    {loop="$value.link_plugin"}
+                      {$value}
+                      {if="$link_plugin_counter - 1 != $counter"}&middot;{/if}
+                    {/loop}
+                  {/if}
+                </div>
+              </div><div
+                {ignore}do not add space or line break between these div - Firefox issue{/ignore}
+                class="linklist-item-infos-url pure-u-lg-5-8 pure-u-1">
+                <a href="{$value.real_url}" title="{$value.title}">
+                  <i class="fa fa-link"></i> {$value.url}
+                </a>
+                {if="isLoggedIn()"}
+                  <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
+                     title="{'Delete'|t}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
+                    <i class="fa fa-trash"></i>
+                  </a>
+                {/if}
+              </div>
+              <div class="mobile-buttons pure-u-1 pure-u-lg-0">
+                {if="isset($value.link_plugin)"}
+                  {$link_plugin_counter=count($value.link_plugin)}
+                  {loop="$value.link_plugin"}
+                    {$value}
+                    {if="$link_plugin_counter - 1 != $counter"}&middot;{/if}
+                  {/loop}
+                {/if}
+                {if="isLoggedIn()"}
+                  &middot;
+                  <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
+                     title="{'Delete'|t}" class="delete-link confirm-delete">
+                    <i class="fa fa-trash"></i>
+                  </a>
+                {/if}
+              </div>
+            </div>
+          </div>
+        </div>
+      {/loop}
     </div>
-
-    {include="linklist.paging"}
-
+  </div>
 </div>
 
-    {include="page.footer"}
+  <div id="plugin_zone_end_linklist" class="plugin_zone">
+    {loop="$plugin_end_zone"}
+    {$value}
+    {/loop}
+  </div>
 
-<script src="inc/awesomplete.min.js#"></script>
-<script src="inc/awesomplete-multiple-tags.js#"></script>
-<script>
-    awesompleteUniqueTag('#tagfilter_value');
-</script>
+<div class="pure-g">
+  <div class="pure-u-lg-2-24 pure-u-1-24"></div>
+  <div class="pure-u-lg-20-24 pure-u-22-24">
+    {include="linklist.paging"}
+  </div>
+</div>
+
+{include="page.footer"}
 </body>
 </html>

tpl/default/linklist.paging.html

@@ -1,32 +1,58 @@
-<div class="paging">
-{if="isLoggedIn()"}
-    <div class="paging_privatelinks">
-        <a href="?privateonly">
-		{if="$privateonly"}
-		<img src="images/private_16x16_active.png#" width="16" height="16" title="Click to see all links" alt="Click to see all links">
-		{else}
-		<img src="images/private_16x16.png#" width="16" height="16" title="Click to see only private links" alt="Click to see only private links">
-		{/if}
-		</a>
-
-
-    </div>
-{/if}
-    {loop="$action_plugin"}
-      <div class="paging_privatelinks">
-        <a
-          {loop="$value.attr"}
-            {$key}="{$value}"
-          {/loop}>
-          {$value.html}
+<div class="linklist-paging">
+  <div class="paging pure-g">
+    <div class="linklist-filters pure-u-1-3">
+      {if="isLoggedIn() or !empty($action_plugin)"}
+        <span class="linklist-filters-text pure-u-0 pure-u-lg-visible">
+          {'Filters'|t}
+        </span>
+        {if="isLoggedIn()"}
+          <a href="?privateonly" title="{'Filter private links'|t}"
+             class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
+          ><i class="fa fa-key"></i></a>
+        {/if}
+        <a href="#" class="filter-off fold-all pure-u-lg-0" title="Fold all">
+          <i class="fa fa-chevron-up"></i>
         </a>
-      </div>
-    {/loop}
-    <div class="paging_linksperpage">
-        Links per page: <a href="?linksperpage=20">20</a> <a href="?linksperpage=50">50</a> <a href="?linksperpage=100">100</a>
-        <form method="GET" class="linksperpage"><input type="text" name="linksperpage" size="2"></form>
+        {loop="$action_plugin"}
+          {$value.attr.class=isset($value.attr.class) ? $value.attr.class : ''}
+          {$value.attr.class=!empty($value.on) ? $value.attr.class .' filter-on' : $value.attr.class .' filter-off'}
+          <a
+            {loop="$value.attr"}
+              {$key}="{$value}"
+            {/loop}>
+            {$value.html}
+          </a>
+        {/loop}
+      {/if}
     </div>
-    {if="$previous_page_url"} <a href="{$previous_page_url}" class="paging_older">&#x25C4;Older</a> {/if}
-    <div class="paging_current">page {$page_current} / {$page_max} </div>
-    {if="$next_page_url"} <a href="{$next_page_url}" class="paging_newer">Newer&#x25BA;</a> {/if}
+
+
+    <div class="linklist-pages pure-u-1-3">
+      {if="$next_page_url"}
+        <a href="{$next_page_url}" class="paging_newer">
+          <i class="fa fa-arrow-circle-left"></i>
+        </a>
+      {/if}
+      {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if}
+      {if="$previous_page_url"}
+        <a href="{$previous_page_url}" class="paging_older">
+          <i class="fa fa-arrow-circle-right"></i>
+        </a>
+      {/if}
+
+    </div>
+
+    <div class="linksperpage pure-u-1-3">
+      <div class="pure-u-0 pure-u-lg-visible">{'Links per page'|t}</div>
+      <a href="?linksperpage=20">20</a>
+      <a href="?linksperpage=50">50</a>
+      <a href="?linksperpage=100">100</a>
+      <form method="GET" class="pure-u-0 pure-u-lg-visible">
+        <input type="text" name="linksperpage" placeholder="133">
+      </form>
+      <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" title="Fold all">
+        <i class="fa fa-chevron-up"></i>
+      </a>
+    </div>
+  </div>
 </div>

tpl/default/loginform.html

@@ -1,38 +1,59 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
-<body
-{if="ban_canLogin($conf)"}
-  {if="empty($username)"}
-    onload="document.loginform.login.focus();"
-  {else}
-    onload="document.loginform.password.focus();"
-  {/if}
-{/if}>
-<div id="pageheader">
-  {include="page.header"}
-
-  <div id="headerform">
-    {if="!ban_canLogin($conf)"}
-      You have been banned from login after too many failed attempts. Try later.
-    {else}
+<head>
+  {include="includes"}
+</head>
+<body>
+{include="page.header"}
+{if="!ban_canLogin($conf)"}
+<div class="pure-g pure-alert pure-alert-error pure-alert-closable center">
+  <div class="pure-u-2-24"></div>
+  <div class="pure-u-20-24">
+    {'You have been banned after too many failed login attempts. Try again later.'|t}
+  </div>
+  <div class="pure-u-2-24">
+    <i class="fa fa-times pure-alert-close"></i>
+  </div>
+</div>
+{else}
+  <div class="pure-g">
+    <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+    <div id="login-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24">
       <form method="post" name="loginform">
-        <label for="login">Login: <input type="text" id="login" name="login" tabindex="1"
-           {if="!empty($username)"}value="{$username}"{/if}>
-        </label>
-        <label for="password">Password: <input type="password" id="password" name="password" tabindex="2">
-        </label>
-        <input type="submit" value="Login" class="bigbutton" tabindex="4">
-        <label for="longlastingsession">
-          <input type="checkbox" name="longlastingsession" id="longlastingsession" tabindex="3">
-          Stay signed in (Do not check on public computers)</label>
+        <h2 class="window-title">{'Login'|t}</h2>
+        <div>
+          <input type="text" name="login" placeholder="{'Username'|t}"
+             {if="!empty($username)"}value="{$username}"{/if} class="autofocus" tabindex="20">
+        </div>
+        <div>
+          <input type="password" name="password" placeholder="{'Password'|t}" tabindex="21">
+        </div>
+        <div class="remember-me">
+          <input type="checkbox" name="longlastingsession" id="longlastingsessionform"
+             checked="checked" tabindex="22">
+          <label for="longlastingsessionform">{'Remember me'|t}</label>
+        </div>
+        <div>
+          <input type="submit" value="{'Login'|t}" class="bigbutton" tabindex="23">
+        </div>
         <input type="hidden" name="token" value="{$token}">
         {if="$returnurl"}<input type="hidden" name="returnurl" value="{$returnurl}">{/if}
       </form>
-    {/if}
+    </div>
+    <div class="pure-u-lg-1-3 pure-u-1-8"></div>
   </div>
-</div>
+{/if}
 
 {include="page.footer"}
+<script>
+  {if="ban_canLogin($conf) && ! empty($username)"}
+    // Focus password on load if the username is set.
+    var passwords = document.getElementsByName('password');
+    if (passwords.length == 2) {
+        passwords[1].focus();
+    }
+  {/if}
+</script>
 </body>
 </html>
+

tpl/default/page.footer.html

@@ -1,31 +1,25 @@
-<div id="footer">
-  <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong>
-  - The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community
-  - <a href="doc/Home.html" rel="nofollow">Help/documentation</a>
-    {loop="$plugins_footer.text"}
-        {$value}
-    {/loop}
 </div>
 
+<div class="pure-g">
+  <div class="pure-u-2-24"></div>
+  <div id="footer" class="pure-u-20-24">
+    <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong> &middot;
+    The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community &middot;
+    <a href="doc/Home.html" rel="nofollow">Documentation</a>
+      {loop="$plugins_footer.text"}
+          {$value}
+      {/loop}
+  </div>
+  <div class="pure-u-2-24"></div>
+</div>
 {loop="$plugins_footer.endofpage"}
     {$value}
 {/loop}
 
-{if="$newVersion"}
-<div id="newversion">
-  <span id="version_id">&#x25CF;</span> Shaarli {$newVersion} is
-  <a href="https://github.com/shaarli/Shaarli/releases">available</a>.
-</div>
-{/if}
-{if="$versionError"}
-<div id="newversion">
-  Error: {$versionError}
-</div>
-{/if}
-{if="isLoggedIn()"}
-<script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
-{/if}
-
 {loop="$plugins_footer.js_files"}
 	<script src="{$value}#"></script>
 {/loop}
+
+<script src="js/shaarli.js"></script>
+<script src="inc/awesomplete.js#"></script>
+<script src="inc/awesomplete-multiple-tags.js#"></script>

tpl/default/page.header.html

@@ -1,59 +1,174 @@
-
-<div id="logo" title="Share your links !" onclick="document.location='?';"></div>
-
-<div id="linkcount" class="nomobile">
-    {if="!empty($linkcount)"}{$linkcount} links{/if}<br>
-    {if="!empty($privateLinkcount)"}{$privateLinkcount} private links{/if}
-</div>
-
-<div id="menu">
-  <ul>
-      <li><span id="shaarli_title">
-        <a href="{$titleLink}">{$shaarlititle}</a>
-    </span>
-    </li>
-
-{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}
-    {ignore} When called as a popup from bookmarklet, do not display menu. {/ignore}
-{else}
-<li><a href="?" class="nomobile">Home</a></li>
-    {if="isLoggedIn()"}
-    <li><a href="?do=logout">Logout</a></li>
-    <li><a href="?do=tools">Tools</a></li>
-    <li><a href="?do=addlink">Add link</a></li>
-    {elseif="$openshaarli"}
-    <li><a href="?do=tools">Tools</a></li>
-    <li><a href="?do=addlink">Add link</a></li>
-    {else}
-    <li><a href="?do=login">Login</a></li>
-    {/if}
-    <li><a href="{$feedurl}?do=rss{$searchcrits}" class="nomobile">RSS Feed</a></li>
-    {if="$showatom"}
-    <li><a href="{$feedurl}?do=atom{$searchcrits}" class="nomobile">ATOM Feed</a></li>
-    {/if}
-    <li><a href="?do=tagcloud">Tag cloud</a></li>
-    <li><a href="?do=picwall{$searchcrits}">Picture wall</a></li>
-    <li><a href="?do=daily">Daily</a></li>
-    {loop="$plugins_header.buttons_toolbar"}
-        <li><a
-            {loop="$value.attr"}
+<div class="shaarli-menu pure-g" id="shaarli-menu">
+  <div class="pure-u-lg-0 pure-u-1">
+    <div class="pure-menu">
+      <a href="{$titleLink}" class="pure-menu-link">
+        <i class="fa fa-home"></i>
+        {$shaarlititle}
+      </a>
+      <a href="#" class="menu-toggle" id="menu-toggle"><s class="bar"></s><s class="bar"></s></a>
+    </div>
+  </div>
+  <div class="pure-u-1">
+    <div class="pure-menu menu-transform pure-menu-horizontal pure-g">
+      <ul class="pure-menu-list pure-u-lg-5-6 pure-u-1">
+        <li class="pure-menu-item pure-u-0 pure-u-lg-visible">
+          <a href="{$titleLink}" class="pure-menu-link">
+            <img src="img/icon.png" width="16" height="16" class="head-logo" alt="logo" />
+            {$shaarlititle}
+          </a>
+        </li>
+        {if="isLoggedIn() || $openshaarli"}
+          <li class="pure-menu-item">
+            <a href="?do=addlink" class="pure-menu-link">
+              <i class="fa fa-plus" ></i> {'Shaare'|t}
+            </a>
+          </li>
+          <li class="pure-menu-item">
+            <a href="?do=tools" class="pure-menu-link">{'Tools'|t}</a>
+          </li>
+        {/if}
+        <li class="pure-menu-item">
+          <a href="?do=tagcloud" class="pure-menu-link">{'Tag cloud'|t}</a>
+        </li>
+        <li class="pure-menu-item">
+          <a href="?do=picwall{$searchcrits}" class="pure-menu-link">{'Picture wall'|t}</a>
+        </li>
+        <li class="pure-menu-item">
+          <a href="?do=daily" class="pure-menu-link">{'Daily'|t}</a>
+        </li>
+        {loop="$plugins_header.buttons_toolbar"}
+          <li class="pure-menu-item">
+            <a
+              {$value.attr.class=isset($value.class) ? $value.attr.class . ' pure-menu-link' : 'pure-menu-link'}
+              {loop="$value.attr"}
                 {$key}="{$value}"
-            {/loop}>
-            {$value.html}
-        </a></li>
-    {/loop}
-{/if}
-  </ul>
+              {/loop}>
+              {$value.html}
+            </a>
+          </li>
+        {/loop}
+        <li class="pure-menu-item pure-u-lg-0">
+          <a href="?do=atom{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a>
+        </li>
+        {if="isLoggedIn()"}
+          <li class="pure-menu-item pure-u-lg-0">
+            <a href="?do=logout" class="pure-menu-link">{'Logout'|t}</a>
+          </li>
+        {else}
+          <li class="pure-menu-item pure-u-lg-0">
+            <a href="?do=login" class="pure-menu-link">{'Login'|t}</a>
+          </li>
+        {/if}
+      </ul>
+      <div class="header-buttons pure-u-lg-1-6 pure-u-0 pure-u-lg-visible">
+        <ul class="pure-menu-list">
+          <li class="pure-menu-item">
+            <a href="#" class="pure-menu-link subheader-opener"
+               data-open-id="search"
+               id="search-button" title="{'Search'|t}">
+              <i class="fa fa-search"></i>
+            </a>
+          </li>
+          <li class="pure-menu-item">
+            <a href="?do=atom{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}">
+              <i class="fa fa-rss"></i>
+            </a>
+          </li>
+          {if="!isLoggedIn()"}
+          <li class="pure-menu-item">
+            <a href="?do=login" class="pure-menu-link"
+               data-open-id="header-login-form"
+               id="login-button" title="{'Login'|t}">
+              <i class="fa fa-user"></i>
+            </a>
+          </li>
+          {else}
+          <li class="pure-menu-item">
+            <a href="?do=logout" class="pure-menu-link" title="{'Logout'|t}">
+              <i class="fa fa-sign-out"></i>
+            </a>
+          </li>
+          {/if}
+        </ul>
+      </div>
+    </div>
+  </div>
 </div>
 
+<div id="content">
+  <div id="search" class="subheader-form">
+    <div class="pure-g">
+      <div class="pure-u-1 pure-u-lg-1-2">
+        <form method="GET" class="searchform" name="searchform">
+          <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="{'Search text'|t}"
+                 {if="!empty($search_term)"}
+                 value="{$search_term}"
+                 {/if}
+          >
+          <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+        </form>
+      </div>
+      <div class="pure-u-1 pure-u-lg-1-2">
+        <form method="GET" class="tagfilter" name="tagfilter">
+          <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="{'Filter by tag'|t}"
+                 {if="!empty($search_tags)"}
+                 value="{$search_tags}"
+                 {/if}
+          autocomplete="off" data-multiple data-minChars="1"
+          data-list="{loop="$tags"}{$key}, {/loop}"
+          >
+          <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+        </form>
+      </div>
+    </div>
+  </div>
+  {if="!isLoggedIn()"}
+    <form method="post" name="loginform">
+      <div class="subheader-form" id="header-login-form">
+        <input type="text" name="login" placeholder="{'Username'|t}" tabindex="3">
+        <input type="password" name="password" placeholder="{'Password'|t}" tabindex="5">
+        <div class="remember-me">
+          <input type="checkbox" name="longlastingsession" id="longlastingsession" tabindex="6" checked>
+          <label for="longlastingsession">{'Remember me'|t}</label>
+        </div>
+        <input type="hidden" name="token" value="{$token}">
+        <input type="hidden" name="returnurl">
+        <input type="submit" value="Login" tabindex="7">
+      </div>
+    </form>
+  {/if}
+{if="!empty($newVersion) || !empty($versionError)"}
+  <div class="pure-g new-version-message pure-alert pure-alert-warning pure-alert-closable">
+    <div class="pure-u-2-24"></div>
+    {if="$newVersion"}
+      <div class="pure-u-20-24">
+        Shaarli {$newVersion}
+        <a href="https://github.com/shaarli/Shaarli/releases">{'is available'|t}</a>.
+      </div>
+    {/if}
+    {if="$versionError"}
+      <div class="pure-u-20-24">
+        {'Error'|t}: {$versionError}
+      </div>
+    {/if}
+    <div class="pure-u-2-24">
+      <i id="new-version-dismiss" class="fa fa-times pure-alert-close"></i>
+    </div>
+  </div>
+{/if}
+
 {if="!empty($plugin_errors) && isLoggedIn()"}
-    <ul class="errors">
-        {loop="$plugin_errors"}
-            <li>{$value}</li>
+  <div class="pure-g new-version-message pure-alert pure-alert-error pure-alert-closable">
+    <div class="pure-u-2-24"></div>
+    <div class="pure-u-20-24">
+        {loop="plugin_errors"}
+            <p>{$value}</p>
         {/loop}
-    </ul>
+    </div>
+    <div class="pure-u-2-24">
+      <i class="fa fa-times pure-alert-close"></i>
+    </div>
+  </div>
 {/if}
 
-<div class="clear"></div>
-
-
+  <div class="clear"></div>

tpl/default/picwall.html

@@ -1,44 +1,50 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}
-<script src="inc/blazy-1.3.1.min.js#"></script>
+<head>
+  {include="includes"}
 </head>
 <body>
-<div id="pageheader">{include="page.header"}</div>
+{include="page.header"}
 
-<div id="plugin_zone_start_picwall" class="plugin_zone">
-    {loop="$plugin_start_zone"}
+<div class="pure-g">
+  <div class="pure-u-lg-1-6 pure-u-1-24"></div>
+  <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
+    {$countPics=count($linksToDisplay)}
+    <h2 class="window-title">{'Picture Wall'|t} - {$countPics} {'pics'|t}</h2>
+
+    <div id="plugin_zone_start_picwall" class="plugin_zone">
+      {loop="$plugin_start_zone"}
         {$value}
-    {/loop}
-</div>
+      {/loop}
+    </div>
 
-<div class="center">
-        <div id="picwall_container">
-            {loop="$linksToDisplay"}
-            <div class="picwall_pictureframe">
-        	    {$value.thumbnail}<a href="{$value.real_url}"><span class="info">{$value.title}</span></a>
-                {loop="$value.picwall_plugin"}
-                    {$value}
-                {/loop}
-            </div>
-            {/loop}
+    <div id="picwall_container">
+      {loop="$linksToDisplay"}
+        <div class="picwall_pictureframe">
+          {$value.thumbnail}<a href="{$value.real_url}"><span class="info">{$value.title}</span></a>
+          {loop="$value.picwall_plugin"}
+            {$value}
+          {/loop}
         </div>
-</div>
+      {/loop}
+      <div class="clear"></div>
+    </div>
 
-<div class="clear"></div>
-
-<div id="plugin_zone_end_picwall" class="plugin_zone">
-    {loop="$plugin_end_zone"}
+    <div id="plugin_zone_end_picwall" class="plugin_zone">
+      {loop="$plugin_end_zone"}
         {$value}
-    {/loop}
+      {/loop}
+    </div>
+  </div>
 </div>
 
 {include="page.footer"}
-
+<script src="inc/blazy-1.3.1.min.js#"></script>
 <script>
-window.onload = function() {
-  var bLazy = new Blazy();
-}
+  window.onload = function() {
+    var bLazy = new Blazy();
+  }
 </script>
 </body>
 </html>
+

tpl/default/pluginsadmin.html

@@ -1,134 +1,182 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
+<head>
+  {include="includes"}
+</head>
 <body>
-<div id="pageheader">
-  {include="page.header"}
-</div>
+{include="page.header"}
 
 <noscript>
-  <div>
-    <ul class="errors">
-      <li>You need to enable Javascript to change plugin loading order.</li>
-    </ul>
+  <div class="pure-g new-version-message pure-alert pure-alert-warning">
+    <div class="pure-u-2-24"></div>
+    <div class="pure-u-20-24">
+      {'You need to enable Javascript to change plugin loading order.'|t}
+    </div>
   </div>
   <div class="clear"></div>
 </noscript>
 
-<div id="pluginsadmin">
-  <form action="?do=save_pluginadmin" method="POST">
-    <section id="enabled_plugins">
-      <h1>Enabled Plugins</h1>
+<form method="POST" action="?do=save_pluginadmin" name="pluginform" id="pluginform">
+  <div class="pure-g">
+    <div class="pure-u-lg-1-8 pure-u-1-24"></div>
+    <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-complete">
+      <h2 class="window-title">{'Plugin administration'|t}</h2>
 
-      <div>
-        {if="count($enabledPlugins)==0"}
-          <p>No plugin enabled.</p>
-        {else}
+      <section id="enabled_plugins">
+        <h3 class="window-subtitle">{'Enabled Plugins'|t}</h3>
+
+        <div>
+          {if="count($enabledPlugins)==0"}
+          <p>{'No plugin enabled.'|t}</p>
+          {else}
           <table id="plugin_table">
             <thead>
-            <tr>
-              <th class="center">Disable</th>
-              <th class="center">Order</th>
-              <th>Name</th>
-              <th>Description</th>
-            </tr>
+              <tr>
+                <th class="center">{'Disable'|t}</th>
+                <th>{'Name'|t}</th>
+                <th><div class="pure-u-0 pure-u-lg-visible">{'Description'|t}</div></th>
+                <th class="center">{'Order'|t}</th>
+              </tr>
             </thead>
             <tbody>
-            {loop="$enabledPlugins"}
-              <tr data-line="{$key}" data-order="{$counter}">
-                <td class="center"><input type="checkbox" name="{$key}" id="{$key}" checked="checked"></td>
-                <td class="center">
-                  <a href="#" class="arrow"
-                     onclick="return orderUp(this.parentNode.parentNode.getAttribute('data-order'));">
-                    ▲
-                  </a>
-                  <a href="#" class="arrow"
-                     onclick="return orderDown(this.parentNode.parentNode.getAttribute('data-order'));">
-                    ▼
-                  </a>
-                  <input type="hidden" name="order_{$key}" value="{$counter}">
-                </td>
-                <td><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
-                <td><label for="{$key}">{$value.description}</label></td>
-              </tr>
-            {/loop}
+              {loop="$enabledPlugins"}
+                <tr data-line="{$key}" data-order="{$counter}" class="main-row">
+                  <td class="center"><input type="checkbox" name="{$key}" id="{$key}" checked="checked"></td>
+                  <td class="center">
+                    <label for="{$key}"><strong>{function="str_replace('_', ' ', $key)"}</strong></label>
+                  </td>
+                  <td><div class="pure-u-0 pure-u-lg-visible"><label for="{$key}">{$value.description}</label></div></td>
+                  <td class="center">
+                    {if="count($enabledPlugins)>1"}
+                    <a href="#" class="order"
+                       onclick="return orderUp(this.parentNode.parentNode.getAttribute('data-order'));">
+                      ▲
+                    </a>
+                    <a href="#" class="order"
+                       onclick="return orderDown(this.parentNode.parentNode.getAttribute('data-order'));">
+                      ▼
+                    </a>
+                    {/if}
+                    <input type="hidden" name="order_{$key}" value="{$counter}">
+                  </td>
+                </tr>
+                <tr data-line="{$key}" data-order="{$counter}" class="pure-u-lg-0 mobile-row">
+                  <td colspan="4"><label for="{$key}">{$value.description}</label></td>
+                </tr>
+              {/loop}
             </tbody>
-          </table>
-        {/if}
-      </div>
-    </section>
-
-    <section id="disabled_plugins">
-      <h1>Disabled Plugins</h1>
-
-      <div>
-        {if="count($disabledPlugins)==0"}
-          <p>No plugin disabled.</p>
-        {else}
-          <table>
-            <tr>
-              <th class="center">Enable</th>
-              <th>Name</th>
-              <th>Description</th>
-            </tr>
-            {loop="$disabledPlugins"}
+            <tfoot>
               <tr>
-                <td class="center"><input type="checkbox" name="{$key}" id="{$key}"></td>
-                <td><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
-                <td><label for="{$key}">{$value.description}</label></td>
+                <th class="center">{'Disable'|t}</th>
+                <th>{'Name'|t}</th>
+                <th><div class="pure-u-0 pure-u-lg-visible">{'Description'|t}</div></th>
+                <th class="center">{'Order'|t}</th>
               </tr>
-            {/loop}
+            </tfoot>
           </table>
-        {/if}
-      </div>
+          {/if}
+        </div>
+      </section>
 
+      <section id="disabled_plugins">
+        <h3 class="window-subtitle">{'Disabled Plugins'|t}</h3>
+
+        <div>
+          {if="count($disabledPlugins)==0"}
+          <p>{'No plugin disabled.'|t}</p>
+          {else}
+          <table>
+            <thead>
+              <tr>
+                <th class="center">{'Enable'|t}</th>
+                <th>{'Name'|t}</th>
+                <th><div class="pure-u-0 pure-u-lg-visible">{'Description'|t}</div></th>
+              </tr>
+            </thead>
+            <tbody>
+              {loop="$disabledPlugins"}
+                <tr class="main-row">
+                  <td class="center"><input type="checkbox" name="{$key}" id="{$key}"></td>
+                  <td class="center">
+                    <label for="{$key}"><strong>{function="str_replace('_', ' ', $key)"}</strong></label>
+                  </td>
+                  <td><div class="pure-u-0 pure-u-lg-visible">
+                    <label for="{$key}">{$value.description}</label>
+                  </div></td>
+                </tr>
+                <tr class="pure-u-lg-0 mobile-row">
+                  <td colspan="3"><label for="{$key}">{$value.description}</label></td>
+                </tr>
+              {/loop}
+            </tbody>
+            <tfoot>
+              <tr>
+                <th class="center">{'Enable'|t}</th>
+                <th>{'Name'|t}</th>
+                <th><div class="pure-u-0 pure-u-lg-visible">{'Description'|t}</div></th>
+              </tr>
+            </tfoot>
+          </table>
+          {/if}
+        </div>
+      </section>
+
+      <div class="center more">
+        More plugins available
+        <a href="doc/Community-&-Related-software.html#third-party-plugins">in the documentation</a>.
+      </div>
       <div class="center">
-        <input type="submit" value="Save"/>
+        <input type="submit" value="{'Save'|t}" name="save">
       </div>
-    </section>
-  </form>
+    </div>
+  </div>
+  <input type="hidden" name="token" value="{$token}">
+</form>
 
-  <form action="?do=save_pluginadmin" method="POST">
-    <section id="plugin_parameters">
-      <h1>Enabled Plugin Parameters</h1>
-
-      <div>
-        {if="count($enabledPlugins)==0"}
-          <p>No plugin enabled.</p>
-        {else}
-          {loop="$enabledPlugins"}
-            {if="count($value.parameters) > 0"}
-              <div class="plugin_parameters">
-                <h2>{function="str_replace('_', ' ', $key)"}</h2>
-                {loop="$value.parameters"}
+<form action="?do=save_pluginadmin" method="POST">
+  <div class="pure-g">
+    <div class="pure-u-lg-1-8 pure-u-1-24"></div>
+    <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-light">
+      <h2 class="window-title">{'Plugin configuration'|t}</h2>
+      <section id="plugin_parameters">
+        <div>
+          {if="count($enabledPlugins)==0"}
+            <p>{'No plugin enabled.'|t}</p>
+          {else}
+            {loop="$enabledPlugins"}
+              {if="count($value.parameters) > 0"}
+                <div class="plugin_parameters">
+                  <h3 class="window-subtitle">{function="str_replace('_', ' ', $key)"}</h3>
+                  {loop="$value.parameters"}
                   <div class="plugin_parameter">
-                    <div class="float_label">
+                    <p class="float_label">
                       <label for="{$key}">
-                        <code>{$key}</code><br>
+                        <code>{$key}</code>
                         {if="isset($value.desc)"}
-                          {$value.desc}
+                          &middot; {$value.desc}
                         {/if}
                       </label>
-                    </div>
+                    </p>
                     <div class="float_input">
-                      <input name="{$key}" value="{$value.value}" id="{$key}"/>
+                      <input name="{$key}" value="{$value.value}" id="{$key}" type="text" />
                     </div>
                   </div>
-                {/loop}
-              </div>
-            {/if}
-          {/loop}
-        {/if}
-        <div class="center">
-          <input type="submit" name="parameters_form" value="Save"/>
+                  {/loop}
+                </div>
+              {/if}
+            {/loop}
+          {/if}
+          <div class="center">
+            <input type="submit" name="parameters_form" value="{'Save'|t}"/>
+          </div>
         </div>
-      </div>
-    </section>
-  </form>
+      </section>
+    </div>
+  </div>
+</form>
 
-</div>
 {include="page.footer"}
-
 <script src="inc/plugin_admin.js#"></script>
+
 </body>
 </html>

tpl/default/tagcloud.html

@@ -1,31 +1,42 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
+<head>
+  {include="includes"}
+</head>
 <body>
-	<div id="pageheader">{include="page.header"}</div>
-<div class="center">
+{include="page.header"}
+
+<div class="pure-g">
+  <div class="pure-u-lg-1-6 pure-u-1-24"></div>
+  <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
+    {$countTags=count($tags)}
+    <h2 class="window-title">{'Tag cloud'|t} - {$countTags} {'tags'|t}</h2>
+
     <div id="plugin_zone_start_tagcloud" class="plugin_zone">
-        {loop="$plugin_start_zone"}
-            {$value}
-        {/loop}
+      {loop="$plugin_start_zone"}
+        {$value}
+      {/loop}
     </div>
 
     <div id="cloudtag">
-        {loop="$tags"}
-            <span class="count">{$value.count}</span><a
-                href="?searchtags={$key|urlencode}" style="font-size:{$value.size}em;">{$key}</a>
-            {loop="$value.tag_plugin"}
-                {$value}
-            {/loop}
+      {loop="tags"}
+        <a href="?searchtags={$key|urlencode}" style="font-size:{$value.size}em;">{$key}</a
+        ><span class="count">{$value.count}</span>
+        {loop="$value.tag_plugin"}
+          {$value}
         {/loop}
+      {/loop}
     </div>
 
     <div id="plugin_zone_end_tagcloud" class="plugin_zone">
-        {loop="$plugin_end_zone"}
-            {$value}
-        {/loop}
+      {loop="$plugin_end_zone"}
+        {$value}
+      {/loop}
     </div>
+  </div>
 </div>
+
 {include="page.footer"}
 </body>
 </html>
+

tpl/default/tools.html

@@ -1,98 +1,179 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}</head>
+<head>
+  {include="includes"}
+</head>
 <body>
-<div id="pageheader">
-	{include="page.header"}
-	<div id="toolsdiv">
-		<a href="?do=configure"><b>Configure your Shaarli</b><span>: Change Title, timezone...</span></a>
-		<br><br>
-		<a href="?do=pluginadmin"><b>Plugin administration</b><span>: Enable, disable and configure plugins.</span></a>
-    <br><br>
-		{if="!$openshaarli"}<a href="?do=changepasswd"><b>Change password</b><span>: Change your password.</span></a>
-    <br><br>{/if}
-		<a href="?do=changetag"><b>Rename/delete tags</b><span>: Rename or delete a tag in all links</span></a>
-    <br><br>
-		<a href="?do=import"><b>Import</b><span>: Import Netscape html bookmarks (as exported from Firefox, Chrome, Opera, delicious...)</span></a>
-    <br><br>
-		<a href="?do=export"><b>Export</b><span>: Export Netscape html bookmarks (which can be imported in Firefox, Chrome, Opera, delicious...)</span></a>
-    <br><br>
-		<a class="smallbutton"
-		   onclick="return alertBookmarklet();"
-		   href="javascript:(
-			function(){
-				var%20url%20=%20location.href;
-				var%20title%20=%20document.title%20||%20url;
-				window.open(
-					'{$pageabsaddr}?post='%20+%20encodeURIComponent(url)+
-					'&amp;title='%20+%20encodeURIComponent(title)+
-					'&amp;description='%20+%20encodeURIComponent(document.getSelection())+
-					'&amp;source=bookmarklet','_blank','menubar=no,height=390,width=600,toolbar=no,scrollbars=no,status=no,dialog=1'
-				);
-			}
-		)();"><b>✚Shaare link</b></a>
-		<a href="#" onclick="return alertBookmarklet();">
-			<span>
-				&#x21D0; Drag this link to your bookmarks toolbar (or right-click it and choose Bookmark This Link....).<br>
-				&nbsp;&nbsp;&nbsp;&nbsp;Then click "✚Shaare link" button in any page you want to share.
-			</span>
-		</a><br><br>
-		<a class="smallbutton"
-		   	onclick="return alertBookmarklet();"
-		   	href="?private=1&amp;post="><b>✚Add Note</b></a>
-		<a href="#" onclick="return alertBookmarklet();">
-			<span>
-				&#x21D0; Drag this link to your bookmarks toolbar (or right-click it and choose Bookmark This Link....).<br>
-				&nbsp;&nbsp;&nbsp;&nbsp;Then click "✚Add Note" button anytime to start composing a private Note (text post) to your Shaarli.
-			</span>
-		</a><br><br>
+{include="page.header"}
 
-		{if="$sslenabled"}
-		<a class="smallbutton" onclick="activateFirefoxSocial(this)"><b>✚Add to Firefox social</b></a>
-		<a href="#">
-			<span>&#x21D0; Click on this button to add Shaarli to the "Share this page" button in Firefox.</span>
-		</a><br><br>
-		{/if}
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
+    <h2 class="window-title">{'Settings'|t}</h2>
+    <div class="tools-item">
+      <a href="?do=configure" title="{'Change Shaarli settings: title, timezone, etc.'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Configure your Shaarli'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="?do=pluginadmin" title="{'Enable, disable and configure plugins'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Plugin administration'|t}</span>
+      </a>
+    </div>
+    {if="!$openshaarli"}
+      <div class="tools-item">
+        <a href="?do=changepasswd" title="{'Change your password'|t}">
+          <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Change password'|t}</span>
+        </a>
+      </div>
+    {/if}
+    <div class="tools-item">
+      <a href="?do=changetag" title="{'Rename or delete a tag in all links'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Manage tags'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="?do=import"
+         title="{'Import Netscape HTML bookmarks (as exported from Firefox, Chrome, Opera, delicious...)'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Import links'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="?do=export"
+         title="{'Export Netscape HTML bookmarks (which can be imported in Firefox, Chrome, Opera, delicious...)'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">{'Export database'|t}</span>
+      </a>
+    </div>
 
-		{loop="$tools_plugin"}
-            {$value}
-        {/loop}
+    {loop="$tools_plugin"}
+      <div class="tools-item">
+        {$value}
+      </div>
+    {/loop}
+  </div>
 
-		<div class="clear"></div>
 
-		<script>
-			{if="$sslenabled"}
-			function activateFirefoxSocial(node) {
-				var loc = location.href;
-				var baseURL = loc.substring(0, loc.lastIndexOf("/"));
-
-				// Keeping the data separated (ie. not in the DOM) so that it's maintainable and diffable.
-				var data = {
-					name: "{$shaarlititle}",
-					description: "The personal, minimalist, super-fast, no-database delicious clone.",
-					author: "Shaarli",
-					version: "1.0.0",
-
-					iconURL: baseURL + "/images/favicon.ico",
-					icon32URL: baseURL + "/images/favicon.ico",
-					icon64URL: baseURL + "/images/favicon.ico",
-
-					shareURL: baseURL + "{noparse}?post=%{url}&title=%{title}&description=%{text}&source=firefoxsocialapi{/noparse}",
-					homepageURL: baseURL
-				};
-				node.setAttribute("data-service", JSON.stringify(data));
-
-				var activate = new CustomEvent("ActivateSocialFeature");
-				node.dispatchEvent(activate);
-			}
-			{/if}
-			function alertBookmarklet() {
-				alert('Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link...');
-				return false;
-			}
-		</script>
-	</div>
+  <div class="clear"></div>
 </div>
+
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
+    <h2 class="window-title">Bookmarklets</h2>
+    <p>
+      {'Drag one of these button to your bookmarks toolbar or right-click it and "Bookmark This Link"'|t},
+      {'then click on the bookmarklet in any page you want to share.'|t}
+    </p>
+    <div class="tools-item">
+      <a title="{'Drag this link to your bookmarks toolbar or right-click it and Bookmark This Link'|t},
+                {'then click ✚Shaare link button in any page you want to share'|t}"
+         onclick="return alertBookmarklet();"
+         href="javascript:(
+          function(){
+            var%20url%20=%20location.href;
+            var%20title%20=%20document.title%20||%20url;
+            window.open(
+              '{$pageabsaddr}?post='%20+%20encodeURIComponent(url)+
+              '&amp;title='%20+%20encodeURIComponent(title)+
+              '&amp;description='%20+%20encodeURIComponent(document.getSelection())+
+              '&amp;source=bookmarklet','_blank','menubar=no,height=800,width=600,toolbar=no,scrollbars=yes,status=no,dialog=1'
+            );
+          }
+        )();">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Shaare link'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a title="{'Drag this link to your bookmarks toolbar or right-click it and Bookmark This Link'|t},
+                {'Then click ✚Add Note button anytime to start composing a private Note (text post) to your Shaarli'|t}"
+         onclick="return alertBookmarklet();"
+         href="?private=1&amp;post=">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Add Note'|t}</span>
+      </a>
+    </div>
+  </div>
+</div>
+
+{if="$sslenabled"}
+  <div class="pure-g">
+    <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+    <div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
+      <h2 class="window-title">Firefox Social API</h2>
+      <p>{'You need to browse your Shaarli over <strong>HTTPS</strong> to use this functionality.'|t}</p>
+
+      <div class="tools-item">
+        <a title="{'Click on this button to add Shaarli to the 'Share this page' button in Firefox"
+           onclick="activateFirefoxSocial(this)">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Add to'|t} Firefox Social</span>
+        </a>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<div class="pure-g">
+  <div class="pure-u-lg-1-3 pure-u-1-24"></div>
+  <div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
+    <h2 class="window-title">{'3rd party'|t}</h2>
+    <div class="tools-item">
+      <a href="https://addons.mozilla.org/fr/firefox/addon/shaarli/" title="Firefox {'Plugin'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Firefox {'plugin'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="https://chrome.google.com/webstore/detail/shiny-shaarli/hajdfkmbdmadjmmpkkbbcnllepomekin"
+         title="Chrome {'Plugin'|t}">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Chrome {'plugin'|t}</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="https://play.google.com/store/apps/details?id=com.dimtion.shaarlier&hl=fr"
+         title="Android">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">Android</span>
+      </a>
+    </div>
+    <div class="tools-item">
+      <a href="https://itunes.apple.com/app/ShaarliOS/id1027441388?mt=8"
+         title="iOS">
+        <span class="pure-button pure-u-lg-2-3 pure-u-3-4">iOS</span>
+      </a>
+    </div>
+  </div>
+</div>
+
 {include="page.footer"}
+
+<script>
+  {if="$sslenabled"}
+    function activateFirefoxSocial(node) {
+      var loc = location.href;
+      var baseURL = loc.substring(0, loc.lastIndexOf("/"));
+
+      // Keeping the data separated (ie. not in the DOM) so that it's maintainable and diffable.
+      var data = {
+        name: "{$shaarlititle}",
+        description: "The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community.",
+        author: "Shaarli",
+        version: "1.0.0",
+
+        iconURL: baseURL + "/images/favicon.ico",
+        icon32URL: baseURL + "/images/favicon.ico",
+        icon64URL: baseURL + "/images/favicon.ico",
+
+        shareURL: baseURL + "{noparse}?post=%{url}&title=%{title}&description=%{text}&source=firefoxsocialapi{/noparse}",
+        homepageURL: baseURL
+      };
+      node.setAttribute("data-service", JSON.stringify(data));
+
+      var activate = new CustomEvent("ActivateSocialFeature");
+      node.dispatchEvent(activate);
+    }
+  {/if}
+  function alertBookmarklet() {
+    alert({"'Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link'"|t});
+    return false;
+  }
+</script>
 </body>
 </html>
+

tpl/vintage/404.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    {include="includes"}
+</head>
+<body>
+<div id="pageheader">
+    {include="page.header"}
+</div>
+<div class="error-container">
+    <h1>404 Not found <small>Oh crap!</small></h1>
+    <p>{$error_message}</p>
+    <p>Would you mind <a href="?">clicking here</a>?</p>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/vintage/addlink.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body onload="document.addform.post.focus();">
+<div id="pageheader">
+	{include="page.header"}
+	<div id="headerform">
+		<form method="GET" action="" name="addform" class="addform">
+			<input type="text" name="post" class="linkurl">
+			<input type="submit" value="Add link" class="bigbutton">
+		</form>
+	</div>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/vintage/changepassword.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body onload="document.changepasswordform.oldpassword.focus();">
+<div id="pageheader">
+	{include="page.header"}
+	<form method="POST" action="#" name="changepasswordform" id="changepasswordform">
+	Old password: <input type="password" name="oldpassword">&nbsp; &nbsp;
+	New password: <input type="password" name="setpassword">
+	<input type="hidden" name="token" value="{$token}">
+	<input type="submit" name="Save" value="Save password" class="bigbutton"></form>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/vintage/changetag.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}
+    <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
+    <script src="inc/awesomplete.min.js#"></script>
+</head>
+<body onload="document.changetag.fromtag.focus();">
+<div id="pageheader">
+	{include="page.header"}
+	<form method="POST" action="" name="changetag" id="changetag">
+        <input type="hidden" name="token" value="{$token}">
+        <div>
+            <label for="fromtag">Tag:</label>
+        </div>
+        <div>
+            <input type="text" name="fromtag" id="fromtag" list="tagsList" autocomplete="off" class="awesomplete" data-minChars="1"  />
+            <datalist id="tagsList">
+                {loop="$tags"}<option>{$key}</option>{/loop}
+            </datalist>
+        </div>
+
+        <div>
+            <input type="text" name="totag" id="totag">
+            <input type="submit" name="renametag" value="Rename tag" class="bigbutton">
+	&nbsp;&nbsp;or&nbsp; <input type="submit" name="deletetag" value="Delete tag" class="bigbutton" onClick="return confirmDeleteTag();">
+        </div>
+    </form>
+    <div class="clear white">(Case sensitive)</div>
+</div>
+<script>function confirmDeleteTag() { var agree=confirm("Are you sure you want to delete this tag from all links ?"); if (agree) return true ; else return false ; }</script>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/vintage/configure.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body onload="document.configform.title.focus();">
+<div id="pageheader">
+  {include="page.header"}
+  {$timezone_js}
+  <form method="POST" action="#" name="configform" id="configform">
+    <input type="hidden" name="token" value="{$token}">
+    <table id="configuration_table">
+
+      <tr>
+        <td><b>Page title:</b></td>
+        <td><input type="text" name="title" id="title" size="50" value="{$title}"></td>
+      </tr>
+
+      <tr>
+        <td><b>Title link:</b></td>
+        <td><input type="text" name="titleLink" id="titleLink" size="50" value="{$titleLink}"><br/><label
+            for="titleLink">(default value is: ?)</label></td>
+      </tr>
+
+      <tr>
+        <td><b>Theme:</b></td>
+        <td>
+          <select name="theme" id="theme">
+            {loop="$theme_available"}
+              <option value="{$value}" {if="$value===$theme"}selected{/if}>
+                {$value|ucfirst}
+              </option>
+            {/loop}
+          </select>
+        </td>
+      </tr>
+
+      <tr>
+        <td><b>Timezone:</b></td>
+        <td>{$timezone_form}</td>
+      </tr>
+
+      <tr>
+        <td><b>Redirector</b></td>
+        <td>
+          <input type="text" name="redirector" id="redirector" size="50" value="{$redirector}"><br>
+          (e.g. <i>http://anonym.to/?</i> will mask the HTTP_REFERER)
+        </td>
+      </tr>
+
+      <tr>
+        <td><b>Security:</b></td>
+        <td>
+          <input type="checkbox" name="disablesessionprotection" id="disablesessionprotection"
+                   {if="$session_protection_disabled"}checked{/if}>
+          <label
+            for="disablesessionprotection">&nbsp;Disable session cookie hijacking protection (Check this if you get
+            disconnected often or if your IP address changes often.)</label>
+        </td>
+      </tr>
+
+      <tr>
+        <td valign="top"><b>New link:</b></td>
+        <td>
+          <input type="checkbox" name="privateLinkByDefault" id="privateLinkByDefault"
+                 {if="$private_links_default"}checked{/if}/>
+          <label for="privateLinkByDefault">
+            &nbsp;All new links are private by default
+          </label>
+        </td>
+      </tr>
+      <tr>
+        <td valign="top"><b>RSS direct links</b></td>
+        <td>
+          <input type="checkbox" name="enableRssPermalinks" id="enableRssPermalinks"
+                 {if="$enable_rss_permalinks"}checked{/if}/>
+          <label for="enableRssPermalinks">
+            &nbsp;Disable it to use permalinks in RSS feed instead of direct links to your shaared links. Currently <b>
+            {if="$enable_rss_permalinks"}enabled{else}disabled{/if}.</b>
+          </label>
+        </td>
+      </tr>
+      <tr>
+        <td valign="top"><b>Hide public links</b></td>
+        <td>
+          <input type="checkbox" name="hidePublicLinks" id="hidePublicLinks"
+                 {if="$hide_public_links"}checked{/if}/>
+          <label for="hidePublicLinks">&nbsp;Do not show any links if the user is not logged in.</label>
+        </td>
+      </tr>
+      <tr>
+        <td valign="top"><b>Update:</b></td>
+        <td>
+          <input type="checkbox" name="updateCheck" id="updateCheck"
+                 {if="$enable_update_check"}checked{/if}/>
+          <label for="updateCheck">&nbsp;Notify me when a new release is ready</label>
+        </td>
+      </tr>
+      <tr>
+        <td valign="top"><b>Enable REST API</b></td>
+        <td>
+          <input type="checkbox" name="apiEnabled" id="apiEnabled"
+                 {if="$api_enabled"}checked{/if}/>
+          <label for="apiEnabled">&nbsp;Allow third party software to use Shaarli such as mobile application.</label>
+        </td>
+      </tr>
+      <tr>
+        <td valign="top"><b>API secret</b></td>
+        <td>
+          <input type="text" name="apiSecret" id="apiSecret" size="50" value="{$api_secret}" />
+        </td>
+      </tr>
+
+      <tr>
+        <td></td>
+        <td class="right"><input type="submit" name="Save" value="Save config" class="bigbutton"></td>
+      </tr>
+    </table>
+  </form>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/vintage/daily.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+<div id="pageheader">
+    {include="page.header"}
+</div>
+<div class="daily">
+    <div id="plugin_zone_start_picwall" class="plugin_zone">
+        {loop="$plugin_start_zone"}
+            {$value}
+        {/loop}
+    </div>
+
+    <div class="dailyAbout">
+        All links of one day<br>in a single page.<br>
+        {if="$previousday"} <a href="?do=daily&amp;day={$previousday}"><b>&lt;</b>Previous day</a>{else}<b>&lt;</b>Previous day{/if}
+        -
+        {if="$nextday"}<a href="?do=daily&amp;day={$nextday}">Next day<b>&gt;</b></a>{else}Next day<b>&gt;</b>{/if}
+        <br>
+
+        {loop="$daily_about_plugin"}
+            {$value}
+        {/loop}
+
+        <br>
+        <a href="?do=dailyrss" title="1 RSS entry per day"><img src="images/feed-icon-14x14.png#" alt="rss_feed">Daily RSS Feed</a>
+    </div>
+
+    <div class="dailyTitle">
+        <img src="images/floral_left.png" width="51" height="50" class="nomobile" alt="floral_left">
+        The Daily Shaarli
+        <img src="images/floral_right.png" width="51" height="50" class="nomobile" alt="floral_right">
+    </div>
+
+    <div class="dailyDate">
+        <span class="nomobile">&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;</span>
+        {function="strftime('%A %d, %B %Y', $day)"}
+        <span class="nomobile">&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;</span>
+    </div>
+
+    <div class="clear"></div>
+
+    {if="$linksToDisplay"}
+        {loop="$cols"}
+            {if="isset($value[0])"}
+            <div id="daily_col{$counter+1}">
+                {loop="$value"}
+                    {$link=$value}
+                    <div class="dailyEntry">
+                        <div class="dailyEntryPermalink">
+                            <a href="?{$value.shorturl}">
+                                <img src="images/squiggle.png" width="25" height="26" title="permalink" alt="permalink">
+                            </a>
+                        </div>
+                        {if="!$hide_timestamps || isLoggedIn()"}
+                            <div class="dailyEntryLinkdate">
+                                <a href="?{$value.shorturl}">{function="strftime('%c', $link.timestamp)"}</a>
+                            </div>
+                        {/if}
+                        {if="$link.tags"}
+                            <div class="dailyEntryTags">
+                                {loop="$link.taglist"}
+                                    {$value} -
+                                {/loop}
+                            </div>
+                        {/if}
+                        <div class="dailyEntryTitle">
+                            <a href="{$link.real_url}">{$link.title}</a>
+                        </div>
+                        {if="$link.thumbnail"}
+                            <div class="dailyEntryThumbnail">{$link.thumbnail}</div>
+                        {/if}
+                        <div class="dailyEntryDescription">{$link.formatedDescription}</div>
+
+                        <div class="dailyEntryFooter">
+                            {loop="$link.link_plugin"}
+                                {$value}
+                            {/loop}
+                        </div>
+                    </div>
+                {/loop}
+            </div>
+            {/if}
+        {/loop}
+    {else}
+         <div class="dailyNoEntry">No articles on this day.</div>
+    {/if}
+
+    <div class="clear"></div>
+
+    <div id="plugin_zone_end_picwall" class="plugin_zone">
+        {loop="$plugin_end_zone"}
+            {$value}
+        {/loop}
+    </div>
+    <div id="closing"><img src="images/squiggle_closing.png" width="66" height="61" alt="-"></div>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/vintage/dailyrss.html

@@ -0,0 +1,16 @@
+<item>
+    <title>{$title} - {function="strftime('%A %e %B %Y', $daydate)"}</title>
+    <guid>{$absurl}</guid>
+    <link>{$absurl}</link>
+    <pubDate>{$rssdate}</pubDate>
+    <description><![CDATA[
+        {loop="$links"}
+        	<h3><a href="{$value.url}">{$value.title}</a></h3>
+        	<small>{if="!$hide_timestamps"}{function="strftime('%c', $value.timestamp)"} - {/if}{if="$value.tags"}{$value.tags}{/if}<br>
+        	{$value.url}</small><br>
+        	{if="$value.thumbnail"}{$value.thumbnail}{/if}<br>
+        	{if="$value.description"}{$value.formatedDescription}{/if}
+        	<br><br><hr>
+        {/loop}
+    ]]></description>
+</item>

tpl/vintage/editlink.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}
+    <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
+</head>
+<body
+{if="$link.title==''"}onload="document.linkform.lf_title.focus();"
+{elseif="$link.description==''"}onload="document.linkform.lf_description.focus();"
+{else}onload="document.linkform.lf_tags.focus();"{/if} >
+<div id="pageheader">
+    {if="$source !== 'firefoxsocialapi'"}
+    {include="page.header"}
+    {else}
+    <div id="shaarli_title"><a href="{$titleLink}">{$shaarlititle}</a></div>
+    {/if}
+    <div id="editlinkform">
+        <form method="post" name="linkform">
+            <input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
+          {if="isset($link.id)"}
+	          <input type="hidden" name="lf_id" value="{$link.id}">
+          {/if}
+            <label for="lf_url"><i>URL</i></label><br><input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input"><br>
+            <label for="lf_title"><i>Title</i></label><br><input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input"><br>
+            <label for="lf_description"><i>Description</i></label><br><textarea name="lf_description" id="lf_description" rows="4" cols="25">{$link.description}</textarea><br>
+            <label for="lf_tags"><i>Tags</i></label><br>
+            <input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input"
+                data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" ><br>
+
+            {loop="$edit_link_plugin"}
+                {$value}
+            {/loop}
+
+            {if="($link_is_new && $default_private_links) || $link.private == true"}
+            <input type="checkbox" checked="checked" name="lf_private" id="lf_private">
+            &nbsp;<label for="lf_private"><i>Private</i></label><br>
+            {else}
+            <input type="checkbox"  name="lf_private" id="lf_private">
+            &nbsp;<label for="lf_private"><i>Private</i></label><br><br>
+            {/if}
+            <input type="submit" value="Save" name="save_edit" class="bigbutton">
+            <input type="submit" value="Cancel" name="cancel_edit" class="bigbutton">
+            {if="!$link_is_new && isset($link.id)"}
+              <a href="?delete_link&amp;lf_linkdate={$link.id}&amp;token={$token}"
+                 name="delete_link" class="bigbutton"
+                 onClick="return confirmDeleteLink();">
+                {'Delete'|t}
+              </a>
+            {/if}
+            <input type="hidden" name="token" value="{$token}">
+            {if="$http_referer"}<input type="hidden" name="returnurl" value="{$http_referer}">{/if}
+        </form>
+    </div>
+</div>
+{if="$source !== 'firefoxsocialapi'"}
+{include="page.footer"}
+{/if}
+<script src="inc/awesomplete.min.js#"></script>
+<script src="inc/awesomplete-multiple-tags.js#"></script>
+<script>
+    awesompleteUniqueTag('#lf_tags');
+</script>
+</body>
+</html>

tpl/vintage/export.bookmarks.html

@@ -0,0 +1,10 @@
+<!DOCTYPE NETSCAPE-Bookmark-file-1>
+<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
+<!-- This is an automatically generated file.
+     It will be read and overwritten.
+     Do Not Edit! -->{ignore}The RainTPL loop is formatted to avoid generating extra newlines{/ignore}
+<TITLE>{$pagetitle}</TITLE>
+<H1>Shaarli export of {$selection} bookmarks on {$date}</H1>
+<DL><p>{loop="$links"}
+<DT><A HREF="{$value.url}" ADD_DATE="{$value.timestamp}" PRIVATE="{$value.private}" TAGS="{$value.taglist}">{$value.title}</A>{if="$value.description"}{$eol}<DD>{$value.description}{/if}{/loop}
+</DL><p>

tpl/vintage/export.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+  <div id="pageheader">
+    {include="page.header"}
+    <div id="toolsdiv">
+      <form method="GET">
+        <input type="hidden" name="do" value="export">
+        Selection:<br>
+        <input type="radio" name="selection" value="all" checked="true"> All<br>
+        <input type="radio" name="selection" value="private"> Private<br>
+        <input type="radio" name="selection" value="public"> Public<br>
+        <br>
+        <input type="checkbox" name="prepend_note_url" id="prepend_note_url">
+        <label for="prepend_note_url">
+          Prepend note permalinks with this Shaarli instance's URL
+          <em>(useful to import bookmarks in a web browser)</em>
+        </label>
+        <br><br>
+        <input class="bigbutton" type="submit" value="Export">
+      </form>
+      <div class="clear"></div>
+    </div>
+  </div>
+  {include="page.footer"}
+</body>
+</html>

tpl/vintage/feed.atom.html

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>{$pagetitle}</title>
+  <subtitle>Shaared links</subtitle>
+  {if="$show_dates"}
+    <updated>{$last_update}</updated>
+  {/if}
+  <link rel="self" href="{$self_link}#" />
+  <link rel="search" type="application/opensearchdescription+xml" href="{$index_url}?do=opensearch#"
+             title="Shaarli search - {$shaarlititle}" />
+  {loop="$feed_plugins_header"}
+    {$value}
+  {/loop}
+  <author>
+    <name>{$index_url}</name>
+    <uri>{$index_url}</uri>
+  </author>
+  <id>{$index_url}</id>
+  <generator>Shaarli</generator>
+  {loop="$links"}
+    <entry>
+      <title>{$value.title}</title>
+      {if="$usepermalinks"}
+        <link href="{$value.guid}#" />
+      {else}
+        <link href="{$value.url}#" />
+      {/if}
+      <id>{$value.guid}</id>
+      {if="$show_dates"}
+        <published>{$value.pub_iso_date}</published>
+        <updated>{$value.up_iso_date}</updated>
+      {/if}
+      <content type="html" xml:lang="{$language}"><![CDATA[{$value.description}]]></content>
+      {loop="$value.taglist"}
+        <category scheme="{$index_url}?searchtags=" term="{$value|strtolower}" label="{$value}" />
+      {/loop}
+      {loop="$value.feed_plugins"}
+        {$value}
+      {/loop}
+    </entry>
+  {/loop}
+</feed>

tpl/vintage/feed.rss.html

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{$pagetitle}</title>
+    <link>{$index_url}</link>
+    <description>Shaared links</description>
+    <language>{$language}</language>
+    <copyright>{$index_url}</copyright>
+    <generator>Shaarli</generator>
+    <atom:link rel="self" href="{$self_link}"  />
+    <atom:link rel="search" type="application/opensearchdescription+xml" href="{$index_url}?do=opensearch#"
+               title="Shaarli search - {$shaarlititle}" />
+    {loop="$feed_plugins_header"}
+      {$value}
+    {/loop}
+    {loop="$links"}
+      <item>
+        <title>{$value.title}</title>
+        <guid isPermaLink="{if="$usepermalinks"}true{else}false{/if}">{$value.guid}</guid>
+        {if="$usepermalinks"}
+          <link>{$value.guid}</link>
+        {else}
+          <link>{$value.url}</link>
+        {/if}
+        {if="$show_dates"}
+          <pubDate>{$value.pub_iso_date}</pubDate>
+          <atom:modified>{$value.up_iso_date}</atom:modified>
+        {/if}
+        <description><![CDATA[{$value.description}]]></description>
+        {loop="$value.taglist"}
+          <category domain="{$index_url}?searchtags=">{$value}</category>
+        {/loop}
+        {loop="$value.feed_plugins"}
+          {$value}
+        {/loop}
+      </item>
+    {/loop}
+  </channel>
+</rss>

tpl/vintage/import.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body onload="document.uploadform.filetoupload.focus();">
+<div id="pageheader">
+  {include="page.header"}
+  <div id="uploaddiv">
+    Import Netscape HTML bookmarks (as exported from Firefox/Chrome/Opera/Delicious/Diigo...) (Max: {$maxfilesize} bytes).
+    <form method="POST" action="?do=import" enctype="multipart/form-data"
+          name="uploadform" id="uploadform">
+      <input type="hidden" name="token" value="{$token}">
+      <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize}">
+      <input type="file" name="filetoupload">
+      <input type="submit" name="import_file" value="Import" class="bigbutton"><br>
+
+      <label for="privacy">&nbsp;Visibility:</label><br>
+      <input type="radio" name="privacy" value="default" checked="true">
+      &nbsp;Use values from the imported file, default to public<br>
+      <input type="radio" name="privacy" value="private">
+      &nbsp;Import all bookmarks as private<br>
+      <input type="radio" name="privacy" value="public">
+      &nbsp;Import all bookmarks as public<br>
+
+      <input type="checkbox" name="overwrite" id="overwrite">
+      <label for="overwrite">&nbsp;Overwrite existing bookmarks</label><br>
+      <label for="default_tags">&nbsp;Add default tags</label>
+      <input type="text" name="default_tags" id="default_tags">
+    </form>
+  </div>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/vintage/includes.html

@@ -0,0 +1,15 @@
+<title>{$pagetitle}</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="format-detection" content="telephone=no" />
+<meta name="viewport" content="width=device-width,initial-scale=1.0" />
+<meta name="referrer" content="same-origin">
+<link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
+<link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" />
+<link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" />
+<link type="text/css" rel="stylesheet" href="css/reset.css" />
+<link type="text/css" rel="stylesheet" href="css/shaarli.css" />
+{if="is_file('data/user.css')"}<link type="text/css" rel="stylesheet" href="data/user.css#" />{/if}
+{loop="$plugins_includes.css_files"}
+<link type="text/css" rel="stylesheet" href="{$value}#"/>
+{/loop}
+<link rel="search" type="application/opensearchdescription+xml" href="?do=opensearch#" title="Shaarli search - {$shaarlititle|htmlspecialchars}"/>

tpl/vintage/install.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}{$timezone_js}</head>
+<body onload="document.installform.setlogin.focus();">
+<div id="install">
+    <h1>Shaarli</h1>
+    It looks like it's the first time you run Shaarli. Please configure it:<br>
+    <form method="POST" action="#" name="installform" id="installform">
+        <table>
+            <tr><td><b>Login:</b></td><td><input type="text" name="setlogin" size="30"></td></tr>
+            <tr><td><b>Password:</b></td><td><input type="password" name="setpassword" size="30"></td></tr>
+            {$timezone_html}
+            <tr><td><b>Page title:</b></td><td><input type="text" name="title" size="30"></td></tr>
+            <tr><td valign="top"><b>Update:</b></td><td>
+                <input type="checkbox" name="updateCheck" id="updateCheck" checked="checked"><label for="updateCheck">&nbsp;Notify me when a new release is ready</label></td>
+            </tr>
+            <tr>
+                <td valign="top">
+                    <b>API:</b>
+                </td>
+                <td>
+                    <input type="checkbox" name="enableApi" id="enableApi" checked="checked">
+                    <label for="enableApi">
+                        &nbsp;Enable Shaarli's REST API.
+                        Allow third party software to use Shaarli such as mobile application.
+                    </label>
+                </td>
+            </tr>
+            <tr><td colspan="2"><input type="submit" name="Save" value="Save config" class="bigbutton"></td></tr>
+        </table>
+    </form>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/vintage/linklist.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
+    {include="includes"}
+</head>
+<body>
+<div id="pageheader">
+    {include="page.header"}
+
+    <div id="headerform" class="search">
+        <form method="GET" class="searchform" name="searchform">
+            <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text"
+               {if="!empty($search_term)"}
+                    value="{$search_term}"
+               {/if}
+            >
+            <input type="submit" value="Search" class="bigbutton">
+        </form>
+        <form method="GET" class="tagfilter" name="tagfilter">
+            <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag"
+                {if="!empty($search_tags)"}
+                    value="{$search_tags}"
+                {/if}
+                autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
+                data-list="{loop="$tags"}{$key}, {/loop}"
+            >
+            <input type="submit" value="Search" class="bigbutton">
+        </form>
+        {loop="$plugins_header.fields_toolbar"}
+            <form
+                {loop="$value.attr"}
+                    {$key}="{$value}"
+                {/loop}>
+                {loop="$value.inputs"}
+                    <input
+                    {loop="$value"}
+                        {$key}="{$value}"
+                    {/loop}>
+                {/loop}
+            </form>
+        {/loop}
+    </div>
+</div>
+
+<div id="linklist">
+
+    {include="linklist.paging"}
+
+    <div id="plugin_zone_start_linklist" class="plugin_zone">
+        {loop="$plugin_start_zone"}
+            {$value}
+        {/loop}
+    </div>
+
+    {if="count($links)==0"}
+        <div id="searchcriteria">Nothing found.</div>
+    {elseif="!empty($search_term) or !empty($search_tags)"}
+        <div id="searchcriteria">
+            {$result_count} results
+            {if="!empty($search_term)"}
+                for <em>{$search_term}</em>
+            {/if}
+            {if="!empty($search_tags)"}
+                {$exploded_tags=explode(' ', $search_tags)}
+                tagged
+                {loop="$exploded_tags"}
+                    <span class="linktag" title="Remove tag">
+                        <a href="?removetag={function="urlencode($value)"}">{$value} <span class="remove">x</span></a>
+                    </span>
+                {/loop}
+            {/if}
+        </div>
+    {/if}
+    <ul>
+        {loop="$links"}
+        <li{if="$value.class"} class="{$value.class}"{/if}>
+            <a id="{$value.shorturl}"></a>
+            <div class="thumbnail">{$value.url|thumbnail}</div>
+            <div class="linkcontainer">
+                {if="isLoggedIn()"}
+                    <div class="linkeditbuttons">
+                        <form method="GET" class="buttoneditform">
+                            <input type="hidden" name="edit_link" value="{$value.id}">
+                            <input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit">
+                        </form><br>
+                        <form method="GET" class="buttoneditform">
+                            <input type="hidden" name="lf_linkdate" value="{$value.id}">
+                            <input type="hidden" name="token" value="{$token}">
+                            <input type="hidden" name="delete_link">
+                            <input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete"
+                                   class="button_delete" onClick="return confirmDeleteLink();">
+                        </form>
+                    </div>
+                {/if}
+                <span class="linktitle">
+                    <a href="{$value.real_url}">{$value.title}</a>
+                </span>
+                <br>
+                {if="$value.description"}<div class="linkdescription">{$value.description}</div>{/if}
+                {if="!$hide_timestamps || isLoggedIn()"}
+                    {$updated=$value.updated_timestamp ? 'Edited: '. strftime('%c', $value.updated_timestamp) : 'Permalink'}
+                    <span class="linkdate" title="Permalink">
+                        <a href="?{$value.shorturl}">
+                            <span title="{$updated}">
+                                {function="strftime('%c', $value.timestamp)"}
+                                {if="$value.updated_timestamp"}*{/if}
+                            </span>
+                            - permalink
+                        </a> -
+                    </span>
+                {else}
+                    <span class="linkdate" title="Short link here"><a href="?{$value.shorturl}">permalink</a> - </span>
+                {/if}
+
+                {loop="$value.link_plugin"}
+                    <span>{$value}</span> -
+                {/loop}
+
+                <a href="{$value.real_url}"><span class="linkurl" title="Short link">{$value.url}</span></a><br>
+                {if="$value.tags"}
+                    <div class="linktaglist">
+                    {loop="$value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value}</a></span> {/loop}
+                    </div>
+                {/if}
+
+
+            </div>
+        </li>
+    {/loop}
+    </ul>
+
+    <div id="plugin_zone_end_linklist" class="plugin_zone">
+        {loop="$plugin_end_zone"}
+            {$value}
+        {/loop}
+    </div>
+
+    {include="linklist.paging"}
+
+</div>
+
+    {include="page.footer"}
+
+<script src="inc/awesomplete.min.js#"></script>
+<script src="inc/awesomplete-multiple-tags.js#"></script>
+<script>
+    awesompleteUniqueTag('#tagfilter_value');
+</script>
+</body>
+</html>

tpl/vintage/linklist.paging.html

@@ -0,0 +1,32 @@
+<div class="paging">
+{if="isLoggedIn()"}
+    <div class="paging_privatelinks">
+        <a href="?privateonly">
+		{if="$privateonly"}
+		<img src="images/private_16x16_active.png#" width="16" height="16" title="Click to see all links" alt="Click to see all links">
+		{else}
+		<img src="images/private_16x16.png#" width="16" height="16" title="Click to see only private links" alt="Click to see only private links">
+		{/if}
+		</a>
+
+
+    </div>
+{/if}
+    {loop="$action_plugin"}
+      <div class="paging_privatelinks">
+        <a
+          {loop="$value.attr"}
+            {$key}="{$value}"
+          {/loop}>
+          {$value.html}
+        </a>
+      </div>
+    {/loop}
+    <div class="paging_linksperpage">
+        Links per page: <a href="?linksperpage=20">20</a> <a href="?linksperpage=50">50</a> <a href="?linksperpage=100">100</a>
+        <form method="GET" class="linksperpage"><input type="text" name="linksperpage" size="2"></form>
+    </div>
+    {if="$previous_page_url"} <a href="{$previous_page_url}" class="paging_older">&#x25C4;Older</a> {/if}
+    <div class="paging_current">page {$page_current} / {$page_max} </div>
+    {if="$next_page_url"} <a href="{$next_page_url}" class="paging_newer">Newer&#x25BA;</a> {/if}
+</div>

tpl/vintage/loginform.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body
+{if="ban_canLogin($conf)"}
+  {if="empty($username)"}
+    onload="document.loginform.login.focus();"
+  {else}
+    onload="document.loginform.password.focus();"
+  {/if}
+{/if}>
+<div id="pageheader">
+  {include="page.header"}
+
+  <div id="headerform">
+    {if="!ban_canLogin($conf)"}
+      You have been banned from login after too many failed attempts. Try later.
+    {else}
+      <form method="post" name="loginform">
+        <label for="login">Login: <input type="text" id="login" name="login" tabindex="1"
+           {if="!empty($username)"}value="{$username}"{/if}>
+        </label>
+        <label for="password">Password: <input type="password" id="password" name="password" tabindex="2">
+        </label>
+        <input type="submit" value="Login" class="bigbutton" tabindex="4">
+        <label for="longlastingsession">
+          <input type="checkbox" name="longlastingsession" id="longlastingsession" tabindex="3">
+          Stay signed in (Do not check on public computers)</label>
+        <input type="hidden" name="token" value="{$token}">
+        {if="$returnurl"}<input type="hidden" name="returnurl" value="{$returnurl}">{/if}
+      </form>
+    {/if}
+  </div>
+</div>
+
+{include="page.footer"}
+</body>
+</html>

tpl/vintage/opensearch.html

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+    <ShortName>Shaarli search - {$pagetitle}</ShortName>
+    <Description>Shaarli search - {$pagetitle}</Description>
+    <Url type="text/html" template="{$serverurl}?searchterm={searchTerms}" />
+    <Url type="application/atom+xml" template="{$serverurl}?do=atom&amp;searchterm={searchTerms}"/>
+    <Url type="application/rss+xml" template="{$serverurl}?do=rss&amp;searchterm={searchTerms}"/>
+    <InputEncoding>UTF-8</InputEncoding>
+    <Developer>Shaarli Community - https://github.com/shaarli/Shaarli/</Developer>
+    <Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAHRklE
+        QVRIx5WWaWxU5xWG3++7986dfYYZb+MN2xiMDRiDFePUiQsNoiwpUNpAmhInJVEqpa0oQUlbJVKq
+        olaiqpLKUtOKhAJRm1BKRVWctuykpFjAgPcFx/uMl5mxPTOeuXPv3O3rjyiV0lIpfX+dc36c55xf
+        70vwP9TZ2fFpSQCwT5u6unX4f0QeNLx27RoMQwfRveTd11T23M+8S9w+Z3NRma1W4Hk6/nEimFpM
+        Xnun9Xpmz1MPY+feOhBi/fwAAOjq7iJEqmQqCZf5i7NvyNZ/bJPYgAjCiJc2Zmhyw68SM/T1+NlK
+        uf61BPoH+tHU1PT5ACMjI8RXvACvpZ5NT0+fmrG+2TKqtDLV0BgA2AUfXS3+UtfDX2ixCf73E+oA
+        rat92CTkv9fRBwEkSaLDt/JZR/v0Q7qjb8dQ5hjSqmYSOCkzBbogL+ij2RN8bik9wK88Al9tH4tG
+        ow88lvb19yEyPwfGGLq6OungYD9fUlosrqwoQVVVUeOU8qE/mU0ZTq6KNvreNort+5hugkayQUgY
+        qQld/u6qnVRhkciscOdOkNy5E0RnZ+e/AbwsZxAaHyORZA+prW01CTlnGppOqAcwUnCmlDAkAyin
+        Dapb2t7lNeRijpwvTGlJROXugoKS+upz/S19Kj9lJjxXGY1VU49tGevt7WOCSMHTeAXclePsQts9
+        Jq9oLR7rPVkHxpUYkK2c07ZDiieRNcAx3ZlNphcnsxbiMuEsXFSTZpabp+VVS17UNSV/8n7+gN75
+        +C1DM6VEjkgatiz/5IOCAheiUdeyr+198keKZXLzTKYjMDk/ZzGJhkV9AiPSdWaYIAY4U7TYNJMR
+        pugMqgHcXTiJqDK8ycMv2+TPWyWtKFw3KEdtJxNz8u8+/PNYIqeUgY/Oz+Z7q5X3gtqvG7qip8yM
+        HqdZg5kGgwGACoQQQkEMQ2DMIFnGE04xCRQTZFaexUT6jEEImJ2njjxx9fr13hfqfULTQ4apHept
+        lxf4mrqS3Tek0w1toTc1K6WcXfAwnyWH8kSkIueEhdhNrzUAv16fSCUzNwR3vr/G2lKWojMqbxF4
+        FWlLPDvBR+RBNpTsNqfkV7htuUe/UVq456qdzzvFh2KjdSH0I6ODs1ps9NHcw2jMfRYcEQyOCiox
+        aWR0fOQWVLFNUuOnrXJxfIPnpXLRKzocLpsJanhUU/bfjJ4gfwm/ys3JGX1cuS3UBvauLa/MBe9z
+        5c/xGRdSKpiVmhhN98JK/w4DGgg4uLh8u1NfPhWbmzszeH3G1rxv3dL7+qXyGaXHJi46s4QQophp
+        TKSDkHWGlAqmGCbAGAUA3sY5LlRZv3w44Dhnm0iFzbnsGfJR5E+EEsppTBVXuBptL5b8YQMlwnO+
+        Z2wtea4cl8Rc3KXJ4zShRm0CFaCaGhSDwGSMlbtLhSr7FnVhKhscC4+AO3L0x5PSFBdfE9i40SE6
+        xLSWRCIbJ6phIqEysqvk+2aJ0vhB1NK353zyaL3GS76NgRbVYykkt2OXuaQqMwuxkk0FT+OJpS+z
+        piXPRP1KzRvz4dRvO68PaWCMEQAIDcbqFiLJtyaSA/Ef3NnMGttgvHS7mUUWw7cTMemtY/cPsw3n
+        oe2+4mGXpt7VGWPJ6zOn1V2Xfaz5AxgvBzexodmeGWmCbWWTDOGpSZIIqeAe2/IYvnXgWbomUj2T
+        lNlwUP7bV64lzuRIeoodqDxi1OKRs/e0i08dH/6JPWtk6KKaZd3xj2jAXkY3BvZGK1xrhZvRNktP
+        fNA0ubQrxyxV4jHpSkWoXJPKYqBetxeRpgsMWwE5b/bxaYxUDSWmzCLbStqQuy02LY4/cWLsqH8i
+        HYNbyEeJczkJSzH2855DwsXp932F9hXEKQSQ1UHa568iRAa3uFyeNVolMBmeIrzT4cTXm37KMuvA
+        xb8XXTqiDELRgKg8h/dGWwP9iSDaIzcYJSCbA/uNR3N2sNahV/hbsSA70vEdW66tCOOpj8FRkIgU
+        Q5ybLUopiTzeTpFWUoTXdR3knwQMzLANOyQX50fWhDktLeAX3UcIA2EEQHPgi6TBsrWzaLGm7emC
+        H7bY+GPlV6YumiEpDhslxGBgROApz+yyhROzduIEzwngDh48iD3jO0nBRAUUXtHcoq+ZWbI5EWWa
+        WTieFjoKsaVoN92T88J4vlz+asXqpb+hEcdotbdueZ47vyiqhpA2UoRQwpoLtpNHxR0382jR8RzT
+        k8xYMyCMMfR33Uc8rxdrA9tpuHPyS7pPOTRPZ1arepa4rUsybiWnnU9a39ZXxdur+XoGAGMdoXLi
+        M789axnfNxDr8omiDcvF1f3OhPf18efjF/nfz6PGvv6zlrlwWwYBgcBZbKH4WKHODLHEURDxbHDF
+        QWGePftHUlZWjsy8guYnH2EgwORfZ5cuavEqgGhLnL6+sycvRP1Fbux/fheIn3wCCN4N/qdPMwA4
+        2fYOeoe7kc6kcfCbh8n+r7YwAOjs6QCl9DNx5t7dew+MOf8CcuqqoLxlhwgAAAAASUVORK5CYII=
+    </Image>
+</OpenSearchDescription>

tpl/vintage/page.footer.html

@@ -0,0 +1,31 @@
+<div id="footer">
+  <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong>
+  - The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community
+  - <a href="doc/Home.html" rel="nofollow">Help/documentation</a>
+    {loop="$plugins_footer.text"}
+        {$value}
+    {/loop}
+</div>
+
+{loop="$plugins_footer.endofpage"}
+    {$value}
+{/loop}
+
+{if="$newVersion"}
+<div id="newversion">
+  <span id="version_id">&#x25CF;</span> Shaarli {$newVersion} is
+  <a href="https://github.com/shaarli/Shaarli/releases">available</a>.
+</div>
+{/if}
+{if="$versionError"}
+<div id="newversion">
+  Error: {$versionError}
+</div>
+{/if}
+{if="isLoggedIn()"}
+<script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
+{/if}
+
+{loop="$plugins_footer.js_files"}
+	<script src="{$value}#"></script>
+{/loop}

tpl/vintage/page.header.html

@@ -0,0 +1,59 @@
+
+<div id="logo" title="Share your links !" onclick="document.location='?';"></div>
+
+<div id="linkcount" class="nomobile">
+    {if="!empty($linkcount)"}{$linkcount} links{/if}<br>
+    {if="!empty($privateLinkcount)"}{$privateLinkcount} private links{/if}
+</div>
+
+<div id="menu">
+  <ul>
+      <li><span id="shaarli_title">
+        <a href="{$titleLink}">{$shaarlititle}</a>
+    </span>
+    </li>
+
+{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}
+    {ignore} When called as a popup from bookmarklet, do not display menu. {/ignore}
+{else}
+<li><a href="?" class="nomobile">Home</a></li>
+    {if="isLoggedIn()"}
+    <li><a href="?do=logout">Logout</a></li>
+    <li><a href="?do=tools">Tools</a></li>
+    <li><a href="?do=addlink">Add link</a></li>
+    {elseif="$openshaarli"}
+    <li><a href="?do=tools">Tools</a></li>
+    <li><a href="?do=addlink">Add link</a></li>
+    {else}
+    <li><a href="?do=login">Login</a></li>
+    {/if}
+    <li><a href="{$feedurl}?do=rss{$searchcrits}" class="nomobile">RSS Feed</a></li>
+    {if="$showatom"}
+    <li><a href="{$feedurl}?do=atom{$searchcrits}" class="nomobile">ATOM Feed</a></li>
+    {/if}
+    <li><a href="?do=tagcloud">Tag cloud</a></li>
+    <li><a href="?do=picwall{$searchcrits}">Picture wall</a></li>
+    <li><a href="?do=daily">Daily</a></li>
+    {loop="$plugins_header.buttons_toolbar"}
+        <li><a
+            {loop="$value.attr"}
+                {$key}="{$value}"
+            {/loop}>
+            {$value.html}
+        </a></li>
+    {/loop}
+{/if}
+  </ul>
+</div>
+
+{if="!empty($plugin_errors) && isLoggedIn()"}
+    <ul class="errors">
+        {loop="$plugin_errors"}
+            <li>{$value}</li>
+        {/loop}
+    </ul>
+{/if}
+
+<div class="clear"></div>
+
+

tpl/vintage/picwall.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}
+<script src="inc/blazy-1.3.1.min.js#"></script>
+</head>
+<body>
+<div id="pageheader">{include="page.header"}</div>
+
+<div id="plugin_zone_start_picwall" class="plugin_zone">
+    {loop="$plugin_start_zone"}
+        {$value}
+    {/loop}
+</div>
+
+<div class="center">
+        <div id="picwall_container">
+            {loop="$linksToDisplay"}
+            <div class="picwall_pictureframe">
+        	    {$value.thumbnail}<a href="{$value.real_url}"><span class="info">{$value.title}</span></a>
+                {loop="$value.picwall_plugin"}
+                    {$value}
+                {/loop}
+            </div>
+            {/loop}
+        </div>
+</div>
+
+<div class="clear"></div>
+
+<div id="plugin_zone_end_picwall" class="plugin_zone">
+    {loop="$plugin_end_zone"}
+        {$value}
+    {/loop}
+</div>
+
+{include="page.footer"}
+
+<script>
+window.onload = function() {
+  var bLazy = new Blazy();
+}
+</script>
+</body>
+</html>

tpl/vintage/pluginsadmin.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+<div id="pageheader">
+  {include="page.header"}
+</div>
+
+<noscript>
+  <div>
+    <ul class="errors">
+      <li>You need to enable Javascript to change plugin loading order.</li>
+    </ul>
+  </div>
+  <div class="clear"></div>
+</noscript>
+
+<div id="pluginsadmin">
+  <form action="?do=save_pluginadmin" method="POST">
+    <section id="enabled_plugins">
+      <h1>Enabled Plugins</h1>
+
+      <div>
+        {if="count($enabledPlugins)==0"}
+          <p>No plugin enabled.</p>
+        {else}
+          <table id="plugin_table">
+            <thead>
+            <tr>
+              <th class="center">Disable</th>
+              <th class="center">Order</th>
+              <th>Name</th>
+              <th>Description</th>
+            </tr>
+            </thead>
+            <tbody>
+            {loop="$enabledPlugins"}
+              <tr data-line="{$key}" data-order="{$counter}">
+                <td class="center"><input type="checkbox" name="{$key}" id="{$key}" checked="checked"></td>
+                <td class="center">
+                  <a href="#" class="arrow"
+                     onclick="return orderUp(this.parentNode.parentNode.getAttribute('data-order'));">
+                    ▲
+                  </a>
+                  <a href="#" class="arrow"
+                     onclick="return orderDown(this.parentNode.parentNode.getAttribute('data-order'));">
+                    ▼
+                  </a>
+                  <input type="hidden" name="order_{$key}" value="{$counter}">
+                </td>
+                <td><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
+                <td><label for="{$key}">{$value.description}</label></td>
+              </tr>
+            {/loop}
+            </tbody>
+          </table>
+        {/if}
+      </div>
+    </section>
+
+    <section id="disabled_plugins">
+      <h1>Disabled Plugins</h1>
+
+      <div>
+        {if="count($disabledPlugins)==0"}
+          <p>No plugin disabled.</p>
+        {else}
+          <table>
+            <tr>
+              <th class="center">Enable</th>
+              <th>Name</th>
+              <th>Description</th>
+            </tr>
+            {loop="$disabledPlugins"}
+              <tr>
+                <td class="center"><input type="checkbox" name="{$key}" id="{$key}"></td>
+                <td><label for="{$key}">{function="str_replace('_', ' ', $key)"}</label></td>
+                <td><label for="{$key}">{$value.description}</label></td>
+              </tr>
+            {/loop}
+          </table>
+        {/if}
+      </div>
+
+      <div class="center">
+        <input type="submit" value="Save"/>
+      </div>
+    </section>
+  </form>
+
+  <form action="?do=save_pluginadmin" method="POST">
+    <section id="plugin_parameters">
+      <h1>Enabled Plugin Parameters</h1>
+
+      <div>
+        {if="count($enabledPlugins)==0"}
+          <p>No plugin enabled.</p>
+        {else}
+          {loop="$enabledPlugins"}
+            {if="count($value.parameters) > 0"}
+              <div class="plugin_parameters">
+                <h2>{function="str_replace('_', ' ', $key)"}</h2>
+                {loop="$value.parameters"}
+                  <div class="plugin_parameter">
+                    <div class="float_label">
+                      <label for="{$key}">
+                        <code>{$key}</code><br>
+                        {if="isset($value.desc)"}
+                          {$value.desc}
+                        {/if}
+                      </label>
+                    </div>
+                    <div class="float_input">
+                      <input name="{$key}" value="{$value.value}" id="{$key}"/>
+                    </div>
+                  </div>
+                {/loop}
+              </div>
+            {/if}
+          {/loop}
+        {/if}
+        <div class="center">
+          <input type="submit" name="parameters_form" value="Save"/>
+        </div>
+      </div>
+    </section>
+  </form>
+
+</div>
+{include="page.footer"}
+
+<script src="inc/plugin_admin.js#"></script>
+</body>
+</html>

tpl/vintage/tagcloud.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+	<div id="pageheader">{include="page.header"}</div>
+<div class="center">
+    <div id="plugin_zone_start_tagcloud" class="plugin_zone">
+        {loop="$plugin_start_zone"}
+            {$value}
+        {/loop}
+    </div>
+
+    <div id="cloudtag">
+        {loop="$tags"}
+            <span class="count">{$value.count}</span><a
+                href="?searchtags={$key|urlencode}" style="font-size:{$value.size}em;">{$key}</a>
+            {loop="$value.tag_plugin"}
+                {$value}
+            {/loop}
+        {/loop}
+    </div>
+
+    <div id="plugin_zone_end_tagcloud" class="plugin_zone">
+        {loop="$plugin_end_zone"}
+            {$value}
+        {/loop}
+    </div>
+</div>
+{include="page.footer"}
+</body>
+</html>

tpl/vintage/tools.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>{include="includes"}</head>
+<body>
+<div id="pageheader">
+	{include="page.header"}
+	<div id="toolsdiv">
+		<a href="?do=configure"><b>Configure your Shaarli</b><span>: Change Title, timezone...</span></a>
+		<br><br>
+		<a href="?do=pluginadmin"><b>Plugin administration</b><span>: Enable, disable and configure plugins.</span></a>
+    <br><br>
+		{if="!$openshaarli"}<a href="?do=changepasswd"><b>Change password</b><span>: Change your password.</span></a>
+    <br><br>{/if}
+		<a href="?do=changetag"><b>Rename/delete tags</b><span>: Rename or delete a tag in all links</span></a>
+    <br><br>
+		<a href="?do=import"><b>Import</b><span>: Import Netscape html bookmarks (as exported from Firefox, Chrome, Opera, delicious...)</span></a>
+    <br><br>
+		<a href="?do=export"><b>Export</b><span>: Export Netscape html bookmarks (which can be imported in Firefox, Chrome, Opera, delicious...)</span></a>
+    <br><br>
+		<a class="smallbutton"
+		   onclick="return alertBookmarklet();"
+		   href="javascript:(
+			function(){
+				var%20url%20=%20location.href;
+				var%20title%20=%20document.title%20||%20url;
+				window.open(
+					'{$pageabsaddr}?post='%20+%20encodeURIComponent(url)+
+					'&amp;title='%20+%20encodeURIComponent(title)+
+					'&amp;description='%20+%20encodeURIComponent(document.getSelection())+
+					'&amp;source=bookmarklet','_blank','menubar=no,height=390,width=600,toolbar=no,scrollbars=no,status=no,dialog=1'
+				);
+			}
+		)();"><b>✚Shaare link</b></a>
+		<a href="#" onclick="return alertBookmarklet();">
+			<span>
+				&#x21D0; Drag this link to your bookmarks toolbar (or right-click it and choose Bookmark This Link....).<br>
+				&nbsp;&nbsp;&nbsp;&nbsp;Then click "✚Shaare link" button in any page you want to share.
+			</span>
+		</a><br><br>
+		<a class="smallbutton"
+		   	onclick="return alertBookmarklet();"
+		   	href="?private=1&amp;post="><b>✚Add Note</b></a>
+		<a href="#" onclick="return alertBookmarklet();">
+			<span>
+				&#x21D0; Drag this link to your bookmarks toolbar (or right-click it and choose Bookmark This Link....).<br>
+				&nbsp;&nbsp;&nbsp;&nbsp;Then click "✚Add Note" button anytime to start composing a private Note (text post) to your Shaarli.
+			</span>
+		</a><br><br>
+
+		{if="$sslenabled"}
+		<a class="smallbutton" onclick="activateFirefoxSocial(this)"><b>✚Add to Firefox social</b></a>
+		<a href="#">
+			<span>&#x21D0; Click on this button to add Shaarli to the "Share this page" button in Firefox.</span>
+		</a><br><br>
+		{/if}
+
+		{loop="$tools_plugin"}
+            {$value}
+        {/loop}
+
+		<div class="clear"></div>
+
+		<script>
+			{if="$sslenabled"}
+			function activateFirefoxSocial(node) {
+				var loc = location.href;
+				var baseURL = loc.substring(0, loc.lastIndexOf("/"));
+
+				// Keeping the data separated (ie. not in the DOM) so that it's maintainable and diffable.
+				var data = {
+					name: "{$shaarlititle}",
+					description: "The personal, minimalist, super-fast, no-database delicious clone.",
+					author: "Shaarli",
+					version: "1.0.0",
+
+					iconURL: baseURL + "/images/favicon.ico",
+					icon32URL: baseURL + "/images/favicon.ico",
+					icon64URL: baseURL + "/images/favicon.ico",
+
+					shareURL: baseURL + "{noparse}?post=%{url}&title=%{title}&description=%{text}&source=firefoxsocialapi{/noparse}",
+					homepageURL: baseURL
+				};
+				node.setAttribute("data-service", JSON.stringify(data));
+
+				var activate = new CustomEvent("ActivateSocialFeature");
+				node.dispatchEvent(activate);
+			}
+			{/if}
+			function alertBookmarklet() {
+				alert('Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link...');
+				return false;
+			}
+		</script>
+	</div>
+</div>
+{include="page.footer"}
+</body>
+</html>