new design, pagination & more

24 files changed, 226 insertions, 349 deletions

diff --git a/tpl/_footer.twig b/tpl/_footer.twig
index b1d7b8d4..a541e6ee 100644
--- a/tpl/_footer.twig
+++ b/tpl/_footer.twig
@@ -1,3 +1,3 @@
-        <footer class="mr2 mt3 smaller">
+        <footer class="w600p center mt3 smaller txtright">
             <p>{% trans "powered by" %} <a href="http://inthepoche.com">poche</a></p>
         </footer>
\ No newline at end of file
diff --git a/tpl/_head.twig b/tpl/_head.twig
index 9e82437f..f25f0471 100644
--- a/tpl/_head.twig
+++ b/tpl/_head.twig
@@ -4,5 +4,6 @@
         <link rel="apple-touch-icon-precomposed" href="./tpl/img/apple-touch-icon-precomposed.png">
         <link rel="stylesheet" href="./tpl/css/knacss.css" media="all">
         <link rel="stylesheet" href="./tpl/css/style.css" media="all">
-        <link rel="stylesheet" href="./tpl/css/style-light.css" media="all" title="light-style">
-        <link rel="stylesheet" href="./tpl/css/messages.css" media="all">
\ No newline at end of file
+        <link rel="stylesheet" href="./tpl/css/style-{{ constant('THEME') }}.css" media="all" title="{{ constant('THEME') }} theme">
+        <link rel="stylesheet" href="./tpl/css/messages.css" media="all">
+        <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
\ No newline at end of file
diff --git a/tpl/_messages.twig b/tpl/_messages.twig
index c9f01b55..679aa098 100644
--- a/tpl/_messages.twig
+++ b/tpl/_messages.twig
@@ -1,5 +1 @@
-            <ul id="messages">
-            {% for message in messages %}
-                <li>{{ message|e }}</li>
-            {% endfor %}
-            </ul>
\ No newline at end of file
+                {{ messages | raw }}
\ No newline at end of file
diff --git a/tpl/_top.twig b/tpl/_top.twig
index daee44fc..ae01cc3f 100644
--- a/tpl/_top.twig
+++ b/tpl/_top.twig
@@ -1,3 +1,3 @@
-        <header>
-            <h1><a href="./"><img src="./tpl/img/logo.png" alt="logo poche" /></a>poche</h1>
+        <header class="w600p center mbm">
+            <h1><a href="./" title="{% trans "back to home" %}" ><img src="./tpl/img/logo.png" alt="logo poche" /></a></h1>
         </header>
\ No newline at end of file
diff --git a/tpl/config.twig b/tpl/config.twig
index a8be93b0..95d5d8cf 100644
--- a/tpl/config.twig
+++ b/tpl/config.twig
@@ -11,49 +11,47 @@
             </ul>
 {% endblock %}
 {% block content %}
-            <div id="content">
-                <h2>{% trans "Bookmarklet" %}</h2>
-                <p>{% trans "Thanks to the bookmarklet, you will be able to easily add a link to your poche." %} {% trans "Have a look to this documentation:" %} <a href="http://inthepoche.com/?pages/Documentation">inthepoche.com</a>.</p>
-                <p>{% trans "Drag & drop this link to your bookmarks bar and have fun with poche." %}</p>
-                <p><a ondragend="this.click();" style="cursor: move; border: 1px dashed grey; background: white;" title="i am a bookmarklet, use me !" href="javascript:if(top['bookmarklet-url@inthepoche.com']){top['bookmarklet-url@inthepoche.com'];}else{(function(){var%20url%20=%20location.href%20||%20url;window.open('{{ poche_url }}?action=add&url='%20+%20btoa(url),'_self');})();void(0);}">{% trans "poche it!" %}</a></p>
+            <h2>{% trans "Bookmarklet" %}</h2>
+            <p>{% trans "Thanks to the bookmarklet, you will be able to easily add a link to your poche." %} {% trans "Have a look to this documentation:" %} <a href="http://inthepoche.com/?pages/Documentation">inthepoche.com</a>.</p>
+            <p>{% trans "Drag & drop this link to your bookmarks bar and have fun with poche." %}</p>
+            <p class="txtcenter"><a ondragend="this.click();" style="cursor: move; border: 1px dashed grey; background: white; padding: 5px;" title="i am a bookmarklet, use me !" href="javascript:if(top['bookmarklet-url@inthepoche.com']){top['bookmarklet-url@inthepoche.com'];}else{(function(){var%20url%20=%20location.href%20||%20url;window.open('{{ poche_url }}?action=add&url='%20+%20btoa(url),'_self');})();void(0);}">{% trans "poche it!" %}</a></p>
 
-                <h2>{% trans "Updating poche" %}</h2>
-                <p><ul>
-                    <li>{% trans "your version" %} : <strong>{{ constant('POCHE_VERSION') }}</strong></li>
-                    <li>{% trans "latest stable version" %} : {{ prod }}. {% if compare_prod == -1 %}<strong><a href="http://inthepoche.com/?pages/T%C3%A9l%C3%A9charger-poche">{% trans "a more recent stable version is available." %}</a></strong>{% else %}{% trans "you are up to date." %}{% endif %}</li>
-                    <li>{% trans "latest dev version" %} : {{ dev }}. {% if compare_dev == -1 %}<strong><a href="http://inthepoche.com/?pages/T%C3%A9l%C3%A9charger-poche">{% trans "a more recent development version is available." %}</a></strong>{% else %}{% trans "you are up to date." %}{% endif %}</li>
-                </ul>
-                </p>
+            <h2>{% trans "Updating poche" %}</h2>
+            <p><ul>
+                <li>{% trans "your version" %} : <strong>{{ constant('POCHE_VERSION') }}</strong></li>
+                <li>{% trans "latest stable version" %} : {{ prod }}. {% if compare_prod == -1 %}<strong><a href="http://inthepoche.com/?pages/T%C3%A9l%C3%A9charger-poche">{% trans "a more recent stable version is available." %}</a></strong>{% else %}{% trans "you are up to date." %}{% endif %}</li>
+                <li>{% trans "latest dev version" %} : {{ dev }}. {% if compare_dev == -1 %}<strong><a href="http://inthepoche.com/?pages/T%C3%A9l%C3%A9charger-poche">{% trans "a more recent development version is available." %}</a></strong>{% else %}{% trans "you are up to date." %}{% endif %}</li>
+            </ul>
+            </p>
 
-                <h2>{% trans "Change your password" %}</h2>
-                    <form method="post" action="?config" name="loginform">
-                        <fieldset class="w500p">
-                            <div class="row">
-                                <label class="col w150p" for="password">{% trans "New password" %}</label>
-                                <input class="col" type="password" id="password" name="password" placeholder="{% trans "Password" %}" tabindex="2">
-                            </div>
-                            <div class="row">
-                                <label class="col w150p" for="password_repeat">{% trans "Repeat your new password" %}</label>
-                                <input class="col" type="password" id="password_repeat" name="password_repeat" placeholder="{% trans "Password" %}" tabindex="3">
-                            </div>
-                            <div class="row mts txtcenter">
-                                <button class="bouton" type="submit" tabindex="4">{% trans "Update" %}</button>
-                            </div>
-                        </fieldset>
-                        <input type="hidden" name="returnurl" value="{{ referer }}">
-                        <input type="hidden" name="token" value="{{ token }}">
-                    </form>
+            <h2>{% trans "Change your password" %}</h2>
+            <form method="post" action="?config" name="loginform">
+                <fieldset class="w500p">
+                    <div class="row">
+                        <label class="col w150p" for="password">{% trans "New password:" %}</label>
+                        <input class="col" type="password" id="password" name="password" placeholder="{% trans "Password" %}" tabindex="2">
+                    </div>
+                    <div class="row">
+                        <label class="col w150p" for="password_repeat">{% trans "Repeat your new password:" %}</label>
+                        <input class="col" type="password" id="password_repeat" name="password_repeat" placeholder="{% trans "Password" %}" tabindex="3">
+                    </div>
+                    <div class="row mts txtcenter">
+                        <button class="bouton" type="submit" tabindex="4">{% trans "Update" %}</button>
+                    </div>
+                </fieldset>
+                <input type="hidden" name="returnurl" value="{{ referer }}">
+                <input type="hidden" name="token" value="{{ token }}">
+            </form>
 
-                <h2>{% trans "Import" %}</h2>
-                <p>{% trans "Please execute the import script locally, it can take a very long time." %}</p>
-                <p>{% trans "More infos in the official doc:" %} <a href="http://inthepoche.com/?pages/Documentation">inthepoche.com</a></p>
-                <p><ul>
-                <li><a href="./?import&from=pocket">{% trans "import from Pocket" %}</a> (you must have a "ril_export.html" file on your server)</li>
-                <li><a href="./?import&from=readability">{% trans "import from Readability" %}</a>  (you must have a "readability" file on your server)</li>
-                <li><a href="./?import&from=instapaper">{% trans "import from Instapaper" %}</a>  (you must have a "instapaper-export.html" file on your server)</li>
-                </ul></p>
+            <h2>{% trans "Import" %}</h2>
+            <p>{% trans "Please execute the import script locally, it can take a very long time." %}</p>
+            <p>{% trans "More infos in the official doc:" %} <a href="http://inthepoche.com/?pages/Documentation">inthepoche.com</a></p>
+            <p><ul>
+            <li><a href="./?import&from=pocket">{% trans "import from Pocket" %}</a> (you must have a "ril_export.html" file on your server)</li>
+            <li><a href="./?import&from=readability">{% trans "import from Readability" %}</a>  (you must have a "readability" file on your server)</li>
+            <li><a href="./?import&from=instapaper">{% trans "import from Instapaper" %}</a>  (you must have a "instapaper-export.html" file on your server)</li>
+            </ul></p>
 
-                <h2>{% trans "Export your poche datas" %}</h2>
-                <p><a href="./?export" target="_blank">{% trans "Click here" %}</a> {% trans "to export your poche datas." %}</p>
-            </div>
+            <h2>{% trans "Export your poche datas" %}</h2>
+            <p><a href="./?export" target="_blank">{% trans "Click here" %}</a> {% trans "to export your poche datas." %}</p>
 {% endblock %}
\ No newline at end of file
diff --git a/tpl/css/messages.css b/tpl/css/messages.css
index 702fac49..9222bb88 100755
--- a/tpl/css/messages.css
+++ b/tpl/css/messages.css
@@ -1,4 +1,4 @@
-.messages { width: 100%; -moz-border-radius: 4px; border-radius: 4px; display: block; padding: 10px 0; margin: 10px auto 10px; clear: both; }

+.messages { width: 400px; -moz-border-radius: 4px; border-radius: 4px; display: block; padding: 10px 0; margin: 10px auto 10px; clear: both; }

 .messages a.closeMessage { margin: -14px -8px 0 0; display:none; width: 16px; height: 16px; float: right; background: url(../img/messages/close.png) no-repeat; }

 /*.messages:hover a.closeMessage { visibility:visible; }*/

 .messages p { margin: 3px 0 3px 10px !important; padding: 0 10px 0 23px !important; font-size: 14px; line-height: 16px; }

diff --git a/tpl/css/style-dark.css b/tpl/css/style-dark.css
deleted file mode 100644
index 49fe1011..00000000
--- a/tpl/css/style-dark.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/*** GENERAL ***/
-body {
-    color: #fff;
-    background-color: #0d0d0d;
-}
-
-a, a:hover, a:visited {
-    color: #fff;
-}
-
-#main ul#links li a.current {
-    background-color: #000;
-    color: #fff;
-}
-
-#links a:hover, .backhome a:hover, .support a:hover{
-    background-color: #fff;
-    color: #000;
-}
-
-input[type=submit].delete {
-    background : url('../img/dark/remove.png') no-repeat center center;
-    color : transparent;
-}
-
-#main .entrie {
-    color: #fff;
-    background-color: #000;
-    border: 1px solid #fff;
-}
-
-#main .entrie h2 a:hover {
-    color: #29B1E3;
-}
-
-a.fav span {
-    background: url('../img/dark/star-on.png') no-repeat;
-}
-
-a.fav span:hover {
-    background: url('../img/dark/star-off.png') no-repeat;
-}
-
-a.fav-off span {
-    background: url('../img/dark/star-off.png') no-repeat;
-}
-
-a.fav-off span:hover {
-    background: url('../img/dark/star-on.png') no-repeat;
-}
-
-a.archive span {
-    background: url('../img/dark/checkmark-on.png') no-repeat;
-}
-
-a.archive span:hover {
-    background: url('../img/dark/checkmark-off.png') no-repeat;
-}
-
-a.archive-off span {
-    background: url('../img/dark/checkmark-off.png') no-repeat;
-}
-
-a.archive-off span:hover {
-    background: url('../img/dark/checkmark-on.png') no-repeat;
-}
-
-a.twitter span {
-    background: url('../img/dark/twitter.png') no-repeat;
-}
-
-/*** ***/
-/*** ARTICLE PAGE ***/
-
-body.article {
-        color: #fff;
-    background-color: #0d0d0d;
-}
-
-#article header {
-    border-bottom: 1px solid #222222;
-}
-
-#article article {
-    border-bottom: 1px solid #222222;
-}
-
-.vieworiginal a {
-    color: #888888;
-}
-
-.entrie {
-    background-color: #fff;
-}
diff --git a/tpl/css/style-light.css b/tpl/css/style-light.css
index 5d584eb3..9ea7955a 100644
--- a/tpl/css/style-light.css
+++ b/tpl/css/style-light.css
@@ -1,47 +1,12 @@
-/*** GENERAL ***/
-body {
-    color: #222222;
-    background-color: #F1F1F1;
-}
-
-a, a:hover, a:visited {
-    color: #000;
-}
-
-.bouton {
-        background-color: #000;
-    color: #fff;
-    border: none;
-}
-.bouton:hover {
-        background-color: #222222;
-    color: #F1F1F1;
-}
 
-#main ul#links li a.current {
-    background-color: #000;
-    color: #fff;
+a.back span {
+    background: url('../img/light/left.png') no-repeat;
 }
 
-#links a:hover, .backhome a:hover, .support a:hover{
-    background-color: #040707;
-    color: #F1F1F1;
+a.top span {
+    background: url('../img/light/top.png') no-repeat;
 }
 
-input[type=submit].delete {
-    background : url('../img/light/remove.png') no-repeat center center;
-    color : transparent;
-}
-
-#main .entrie {
-    color: #2e2e2e;
-    background-color: #ffffff;
-    border: 1px solid #000;
-}
-
-#main .entrie h2 a:hover {
-    color: #F5BE00;
-}
 
 a.fav span {
     background: url('../img/light/star-on.png') no-repeat;
@@ -83,26 +48,6 @@ a.email span {
     background: url('../img/light/envelop.png') no-repeat;
 }
 
-/*** ***/
-/*** ARTICLE PAGE ***/
-
-body.article {
-        color: #222222;
-    background-color: #F1F1F1;
-}
-
-#article header {
-    border-bottom: 1px solid #222222;
-}
-
-#article article {
-    border-bottom: 1px solid #222222;
-}
-
-.vieworiginal a {
-    color: #888888;
-}
-
-.entrie {
-    background-color: #fff;
-}
+a.delete span {
+    background: url('../img/light/remove.png') no-repeat;
+}
\ No newline at end of file
diff --git a/tpl/css/style.css b/tpl/css/style.css
index 333a0b77..8808b7ed 100644
--- a/tpl/css/style.css
+++ b/tpl/css/style.css
@@ -1,6 +1,6 @@
-/*** GENERAL ***/
 body {
-    font: 20px/1.3em Palatino,Georgia,serif;
+    font-size: 16px;
+    font-family: 'Roboto', sans-serif;
     margin: 10px;
 }
 
@@ -16,6 +16,10 @@ header h1 {
         border-radius: 2px;
 }
 
+#main {
+    margin: 0 auto;
+}
+
 #main ul#links {
     padding: 0;
     list-style-type: none;
@@ -36,6 +40,7 @@ header h1 {
     padding: 0;
     list-style-type: none;
     text-align: center;
+    opacity: 0.5;
 }
 
 #main ul#sort li {
@@ -47,31 +52,16 @@ header h1 {
     cursor: pointer;
 }
 
-ul#messages {
-    
-}
 
-#main, #article {
-    margin: 0 auto;
-}
-
-#links a, .backhome a, .support a{
+#links a{
     text-decoration: none;
     padding: 5px 10px;
 }
-#links a:hover, .backhome a:hover, .support a:hover{
+#links a:hover{
     -webkit-border-radius: 2px;
     border-radius: 2px;
 }
 
-.support {
-    font-size: 14px;
-}
-
-footer {
-    text-align: right;
-}
-
 /*** ***/
 /*** LINKS DISPLAY ***/
 
@@ -80,33 +70,41 @@ footer {
     cursor: pointer;
 }
 
-input[type=submit].delete {
-    width : 16px;
-    height :16px;
-    border : none;
-    cursor: pointer;
-    font-size : 0;
-}
-
 #main #content {
     margin-top: 20px;
 }
 
-#main .entrie {
-    padding: 15px;
-    min-height: 8em;
-    border: 1px solid;
+#main #content h2 {
+    font-size: 1.3em;
+    text-decoration: none;
+}
+
+#main #content .entrie {
+    border-bottom: 1px solid #222222;
 }
 
 #main .entrie h2 a {
     text-decoration: none;
 }
 
+#main .entrie ul.tools {
+    list-style-type: none;
+}
+
+#main .entrie ul.tools li {
+    /*display: inline;*/
+}
+
 .tools {
     float: right;
     text-align: right;
+    opacity: 0.5;
 }
 
+.tools p {
+    font-size: 0.8em;}
+
+/*
 .tools ul {
     padding: 0; margin: 0;
     list-style-type: none;
@@ -118,19 +116,7 @@ input[type=submit].delete {
 
 .tools a.tool {
     cursor: pointer;
-}
-
-#article .tools {
-    position: relative;
-    display: inline;
-    top: 0px;
-    right: 0px;
-    width: 100%;
-}
-
-#article .tools ul li{
-    display: inline;
-}
+}*/
 
 #main .entrie .tools a.tool span, #article .tools a.tool span {
     display: inline-block;
@@ -146,10 +132,9 @@ input[type=submit].delete {
 /*** ***/
 /*** ARTICLE PAGE ***/
 
-body.article {
-    font: 20px/1.3em Palatino,Georgia,serif;
+#article {
+    margin: 0 auto;
 }
-
 #article header {
     text-align: left;
 }
@@ -158,58 +143,106 @@ body.article {
     text-decoration: none;
 }
 
-.vieworiginal a {
+.vieworiginal a, .vieworiginal a:hover, .vieworiginal a:visited {
     text-decoration: none;
+    color: #888888;
 }
 
 .backhome {
     display: inline;
 }
 
+#article .tools {
+    position: relative;
+    display: inline;
+    top: 0px;
+    right: 0px;
+    width: 100%;
+}
+
+#article .tools ul li{
+    display: inline;
+}
+
+
+/*** GENERAL ***/
+body {
+    color: #000;
+}
+
+a, a:hover, a:visited {
+    color: #000;
+}
+
+.bouton {
+    background-color: #000;
+    color: #fff;
+    border: none;
+}
+.bouton:hover {
+    background-color: #222222;
+    color: #F1F1F1;
+}
+
+#main ul#links li a.current {
+    background-color: #000;
+    color: #fff;
+}
+
+#links a:hover{
+    background-color: #040707;
+    color: #F1F1F1;
+}
+
+
 /*** ***/
+/*** ARTICLE PAGE ***/
 
-#main
-{
-    max-width: 60em; /* 960 px */
-    margin: 0 auto;
+#article header, #article article {
+    border-bottom: 1px solid #222222;
 }
-#content
-{
-    width: 103.125%; /* 990px */
-    overflow: hidden;
-    margin-left: -1.562%; /* 15px */
-    margin-bottom: -1.875em; /* 30px */
-}
-
-.entrie
-{
-    width: 30.303%; /* 300px */
-    background-color: #fff;
-    float: left;
-    margin: 0 1.515% 1.875em; /* 15px 30px */
-}
-
-@media only screen and ( max-width: 40em ) /* 640px */
-{
-    .entrie
-    {
-        width: 46.876%; /* 305px */
-        margin-bottom: 0.938em; /* 15px */
-    }
-}
-
-@media only screen and ( max-width: 20em ) /* 320px */
-{
-    #content
-    {
-        width: 100%;
-        margin-left: 0;
-    }
-
-    .entrie
-    {
-        width: 100%;
-        margin-left: 0;
-        margin-right: 0;
-    }
+
+
+/* Pagination */
+.pagination {
+    clear: both;
+    padding-bottom: 20px;
+    padding-top: 10px;
+    text-align: right;
+}
+.pagination a {
+    border: 1px solid #D5D5D5;
+    color: #333;
+    font-size: 11px;
+    font-weight: bold;
+    height: 25px;
+    padding: 4px 8px;
+    text-decoration: none;
+    margin:2px;
+}
+.pagination a:hover, .pagination a:active {
+    background:#efefef;
+}
+.pagination span.current {
+    background-color: #ccc;
+    border: 1px solid #D5D5D5;
+    color: #000;
+    font-size: 11px;
+    font-weight: bold;
+    height: 25px;
+    padding: 4px 8px;
+    text-decoration: none;
+    margin:2px;
+}
+.pagination span.disabled {
+    border: 1px solid #EEEEEE;
+    color: #DDDDDD;
+    margin:2px;
+    padding: 4px 8px;
+    font-size: 11px;
+    font-weight: bold;
+}
+
+footer {
+    clear: both;
 }
\ No newline at end of file
diff --git a/tpl/home.twig b/tpl/home.twig
index 6d0f1a66..3cccbb76 100644
--- a/tpl/home.twig
+++ b/tpl/home.twig
@@ -5,39 +5,29 @@
 {% endblock %}
 {% block precontent %}
             <ul id="sort">
-                <li><a href="./?sort=ia"><img src="./tpl/img/up.png" title="{% trans "by date asc" %}" /></a> {% trans "by date" %} <a href="./?sort=id"><img src="./tpl/img/down.png" title="{% trans "by date desc" %}" /></a></li>
-                <li><a href="./?sort=ta"><img src="./tpl/img/up.png" title="{% trans "by title asc" %}" /></a> {% trans "by title" %} <a href="./?sort=td"><img src="./tpl/img/down.png" title="{% trans "by title desc" %}" /></a></li>
+                <li><a href="./?sort=ia&view={{ view }}"><img src="./tpl/img/{{ constant('THEME') }}/top.png" alt="{% trans "by date asc" %}" title="{% trans "by date asc" %}" /></a> {% trans "by date" %} <a href="./?sort=id&view={{ view }}"><img src="./tpl/img/{{ constant('THEME') }}/down.png" alt="{% trans "by date desc" %}" title="{% trans "by date desc" %}" /></a></li>
+                <li><a href="./?sort=ta&view={{ view }}"><img src="./tpl/img/{{ constant('THEME') }}/top.png" alt="{% trans "by title asc" %}" title="{% trans "by title asc" %}" /></a> {% trans "by title" %} <a href="./?sort=td&view={{ view }}"><img src="./tpl/img/{{ constant('THEME') }}/down.png" alt="{% trans "by title desc" %}" title="{% trans "by title desc" %}" /></a></li>
             </ul>
 {% endblock %}
-{% block messages %}
-{% include '_messages.twig' %}
-{% endblock %}
 {% block content %}
-            <div id="content">
-                {% for entry in entries %}
-                    <div id="entry-{{ entry.id|e }}" class="entrie mb2">
-                        <span class="content">
-                            <h2 class="h6-like">
-                                <a href="index.php?view=view&id={{ entry.id|e }}">{{ entry.title|e }}</a>
-                            </h2>
-                            <div class="tools">
-                                <ul>
-                                    <li>
-                                        <a title="{% trans "toggle mark as read" %}" class="tool archive {% if entry.is_read == 0 %}archive-off{% endif %}" href="./?action=toggle_archive&id={{ entry.id|e }}"><span></span></a></li>
-                                        <li><a title="{% trans "toggle favorite" %}" class="tool fav {% if entry.is_fav == 0 %}fav-off{% endif %}" href="./?action=toggle_fav&id={{ entry.id|e }}"><span></span></a></li>
-                                        <li><form method="post" style="display: inline;"><input type="hidden" name="token" id="token" value="{{ token }}" /><input type="hidden" id="action" name="action" value="delete" /><input type="hidden" id="view" name="view" value="{{ view }}" /><input type="hidden" id="id" name="id" value="{{ entry.id|e }}" /><input type="submit" class="delete" title="{% trans "toggle delete" %}" /></form>
-                                    </li>
-                                </ul>
-                            </div>
-                            <div class="url">{{ entry.url | e | getDomain }}</div>
-                        </span>
-                    </div>
-                {% endfor %}
+            {{ page_links | raw }}
+            {% for entry in entries %}
+            <div id="entry-{{ entry.id|e }}" class="entrie">
+                <h2><a href="index.php?view=view&id={{ entry.id|e }}">{{ entry.title|e }}</a></h2>
+                <ul class="tools">
+                    <li>
+                        <a title="{% trans "toggle mark as read" %}" class="tool archive {% if entry.is_read == 0 %}archive-off{% endif %}" href="./?action=toggle_archive&id={{ entry.id|e }}"><span></span></a></li>
+                        <li><a title="{% trans "toggle favorite" %}" class="tool fav {% if entry.is_fav == 0 %}fav-off{% endif %}" href="./?action=toggle_fav&id={{ entry.id|e }}"><span></span></a></li>
+                        <li><a title="{% trans "delete" %}" class="tool delete" href="./?action=delete&id={{ entry.id|e }}"><span></span></a></li>
+                    </li>
+                </ul>
+                <p>{{ entry.content|striptags|slice(0, 300) }}...</p>
+                <p class="vieworiginal txtright small"><a href="{{ entry.url|e }}" target="_blank" title="{% trans "original" %} : {{ entry.title|e }}">{{ entry.url | e | getDomain }}</a></p>
             </div>
+            {% endfor %}
+            {{ page_links | raw }}
 {% endblock %}
 
 {% block js %}
             <script type="text/javascript" src="./tpl/js/jquery-1.9.1.min.js"></script>
-            <script type="text/javascript" src="./tpl/js/jquery.masonry.min.js"></script>
-            <script type="text/javascript">$(window).load(function(){var e=3,t=function(){e=$(window).width()>640?3:$(window).width()>320?2:1};t();$(window).resize(t);$("#content").masonry({itemSelector:".entrie",columnWidth:function(t){return t/e}})})</script>
 {% endblock %}
\ No newline at end of file
diff --git a/tpl/img/dark/checkmark-off.png b/tpl/img/dark/checkmark-off.png
deleted file mode 100644
index efc3439f..00000000
--- a/tpl/img/dark/checkmark-off.png
+++ /dev/null
diff --git a/tpl/img/dark/checkmark-on.png b/tpl/img/dark/checkmark-on.png
deleted file mode 100644
index 24391c2e..00000000
--- a/tpl/img/dark/checkmark-on.png
+++ /dev/null
diff --git a/tpl/img/dark/down.png b/tpl/img/dark/down.png
deleted file mode 100644
index 41ea9604..00000000
--- a/tpl/img/dark/down.png
+++ /dev/null
diff --git a/tpl/img/dark/logo.png b/tpl/img/dark/logo.png
deleted file mode 100644
index 9fba0642..00000000
--- a/tpl/img/dark/logo.png
+++ /dev/null
diff --git a/tpl/img/dark/remove.png b/tpl/img/dark/remove.png
deleted file mode 100644
index 41786fd7..00000000
--- a/tpl/img/dark/remove.png
+++ /dev/null
diff --git a/tpl/img/dark/star-off.png b/tpl/img/dark/star-off.png
deleted file mode 100644
index 90651b54..00000000
--- a/tpl/img/dark/star-off.png
+++ /dev/null
diff --git a/tpl/img/dark/star-on.png b/tpl/img/dark/star-on.png
deleted file mode 100644
index 7fc14477..00000000
--- a/tpl/img/dark/star-on.png
+++ /dev/null
diff --git a/tpl/img/dark/twitter.png b/tpl/img/dark/twitter.png
deleted file mode 100755
index 4595affb..00000000
--- a/tpl/img/dark/twitter.png
+++ /dev/null
diff --git a/tpl/img/dark/up.png b/tpl/img/dark/up.png
deleted file mode 100644
index 1679e18f..00000000
--- a/tpl/img/dark/up.png
+++ /dev/null
diff --git a/tpl/img/down.png b/tpl/img/light/down.png
index b9d536a7..b9d536a7 100644
--- a/tpl/img/down.png
+++ b/tpl/img/light/down.png
diff --git a/tpl/img/light/left.png b/tpl/img/light/left.png
new file mode 100755
index 00000000..a0a53631
--- /dev/null
+++ b/tpl/img/light/left.png
diff --git a/tpl/img/up.png b/tpl/img/light/top.png
index 954a8c0a..954a8c0a 100644..100755
--- a/tpl/img/up.png
+++ b/tpl/img/light/top.png
diff --git a/tpl/layout.twig b/tpl/layout.twig
index 9dc83efe..e4b5f5b3 100644
--- a/tpl/layout.twig
+++ b/tpl/layout.twig
@@ -12,13 +12,17 @@
         {% include '_head.twig' %}
         {% include '_bookmarklet.twig' %}
     </head>
-    <body class="light-style">
+    <body>
         {% include '_top.twig' %}
         <div id="main">
             {% block menu %}{% endblock %}
             {% block precontent %}{% endblock %}
-            {% block messages %}{% endblock %}
+            {% block messages %}
+            {% include '_messages.twig' %}
+            {% endblock %}
+            <div id="content" class="w600p center">
             {% block content %}{% endblock %}
+            </div>
             {% block js %}{% endblock %}
         </div>
         {% include '_footer.twig' %}
diff --git a/tpl/view.twig b/tpl/view.twig
index 692f9555..d0d85f8b 100644
--- a/tpl/view.twig
+++ b/tpl/view.twig
@@ -1,18 +1,17 @@
 {% extends "layout.twig" %}
 {% block title %}{% trans "home" %}{% endblock %}
-{% block messages %}
-{% include '_messages.twig' %}
-{% endblock %}
 {% block content %}
-        <div id="article" class="w600p">
+        <div id="article">
             <div class="tools">
-                <ul>
-                    <li><a href="./" title="{% trans "back to home" %}" class="tool">&larr;</a></li>
-                    <li><a title="{% trans "toggle mark as read" %}" class="tool archive {% if entry.is_read == 0 %}archive-off{% endif %}" href="./?action=toggle_archive&id={{ entry.id|e }}"><span></span></a></li>
-                    <li><a title="{% trans "toggle favorite" %}" class="tool fav {% if entry.is_fav == 0 %}fav-off{% endif %}" href="./?action=toggle_fav&id={{ entry.id|e }}"><span></span></a></li>
-                    <li><form method="post" style="display: inline;" action="index.php"><input type="hidden" name="token" id="token" value="{{ token }}" /><input type="hidden" id="view" name="view" value="index" /><input type="hidden" id="action" name="action" value="delete" /><input type="hidden" id="id" name="id" value="{{ entry.id|e }}" /><input type="submit" class="delete" title="{% trans "toggle delete" %}" /></form></li>
-                    {% if constant('SHARE_TWITTER') == 1 %}<li><a href="https://twitter.com/home?status={{entry.title}}%20{{ entry.url|e }}%20via%20@getpoche" target="_blank" class="tool twitter"><span></span></a></li>{% endif %}
-                    {% if constant('SHARE_MAIL') == 1 %}<li><a href="mailto:?subject={{ entry.title|e }}&body={{ entry.url|e }} via @getpoche" class="tool email"><span></span></a></li>{% endif %}
+                <ul class="tools">
+                    <li>
+                        <li><a href="{{ referer }}" title="{% trans "back to home" %}" class="tool back"><span></span></a></li>
+                        <a title="{% trans "toggle mark as read" %}" class="tool archive {% if entry.is_read == 0 %}archive-off{% endif %}" href="./?action=toggle_archive&id={{ entry.id|e }}"><span></span></a></li>
+                        <li><a title="{% trans "toggle favorite" %}" class="tool fav {% if entry.is_fav == 0 %}fav-off{% endif %}" href="./?action=toggle_fav&id={{ entry.id|e }}"><span></span></a></li>
+                        <li><a title="{% trans "delete" %}" class="tool delete" href="./?action=delete&id={{ entry.id|e }}"><span></span></a></li>
+                        {% if constant('SHARE_TWITTER') == 1 %}<li><a href="https://twitter.com/home?status={{entry.title}}%20{{ entry.url|e }}%20via%20@getpoche" target="_blank" class="tool twitter" title="{% trans "tweet" %}"><span></span></a></li>{% endif %}
+                        {% if constant('SHARE_MAIL') == 1 %}<li><a href="mailto:?subject={{ entry.title|e }}&body={{ entry.url|e }} via @getpoche" class="tool email" title="{% trans "email" %}"><span></span></a></li>{% endif %}
+                    </li>
                 </ul>
             </div>
             <header class="mbm">
@@ -20,17 +19,22 @@
                 <div class="vieworiginal txtright small"><a href="{{ entry.url|e }}" target="_blank" title="{% trans "original" %} : {{ entry.title|e }}">{{ entry.url | e | getDomain }}</a></div>
             </header>
             <article>
-                <div id="readityourselfcontent">
-                    {{ content | raw }}
-                </div>
+                {{ content | raw }}
+                <div class="vieworiginal txtright small"><a href="{{ entry.url|e }}" target="_blank" title="{% trans "original" %} : {{ entry.title|e }}">{{ entry.url | e | getDomain }}</a></div>
             </article>
-            <div class="vieworiginal txtright small"><a href="{{ entry.url|e }}" target="_blank" title="{% trans "original" %} : {{ entry.title|e }}">{{ entry.url | e | getDomain }}</a></div>
-            <div class="backhome">
-                <a href="./" title="{% trans "back to home" %}">&larr;</a>
-                <a href="#" title="{% trans "back to top" %}">&uarr;</a>
-            </div>
-            <div class="support">
-                {% trans "this article appears wrong?" %} <a href="https://github.com/inthepoche/poche/issues/new">{% trans "create an issue" %}</a> {% trans "or" %} <a href="mailto:support@inthepoche.com?subject=Wrong display in poche&body={{ entry.url|e }}">{% trans "contact us by mail" %}</a>
+            <div class="tools">
+                <ul class="tools">
+                    <li>
+                        <li><a href="{{ referer }}" title="{% trans "back to home" %}" class="tool back"><span></span></a></li>
+                        <li><a href="#" title="{% trans "back to top" %}" class="tool top"><span></span></a></li>
+                        <a title="{% trans "toggle mark as read" %}" class="tool archive {% if entry.is_read == 0 %}archive-off{% endif %}" href="./?action=toggle_archive&id={{ entry.id|e }}"><span></span></a></li>
+                        <li><a title="{% trans "toggle favorite" %}" class="tool fav {% if entry.is_fav == 0 %}fav-off{% endif %}" href="./?action=toggle_fav&id={{ entry.id|e }}"><span></span></a></li>
+                        <li><a title="{% trans "delete" %}" class="tool delete" href="./?action=delete&id={{ entry.id|e }}"><span></span></a></li>
+                        {% if constant('SHARE_TWITTER') == 1 %}<li><a href="https://twitter.com/home?status={{entry.title}}%20{{ entry.url|e }}%20via%20@getpoche" target="_blank" class="tool twitter" title="{% trans "tweet" %}"><span></span></a></li>{% endif %}
+                        {% if constant('SHARE_MAIL') == 1 %}<li><a href="mailto:?subject={{ entry.title|e }}&body={{ entry.url|e }} via @getpoche" class="tool email" title="{% trans "email" %}"><span></span></a></li>{% endif %}
+                    </li>
+                </ul>
+                <p>{% trans "this article appears wrong?" %} <a href="https://github.com/inthepoche/poche/issues/new">{% trans "create an issue" %}</a> {% trans "or" %} <a href="mailto:support@inthepoche.com?subject=Wrong display in poche&body={{ entry.url|e }}">{% trans "contact us by mail" %}</a></p>
             </div>
         </div>
 {% endblock %}