[add] courgette theme

2024-06-27 01:20:34 +00:00 · 2014-01-08 11:28:46 +01:00 · 2014-01-08 11:28:46 +01:00 · 5ed8050791
parent 8905191413
commit 5ed8050791
56 changed files with 1181 additions and 0 deletions
--- a/themes/courgette/README.md
+++ b/themes/courgette/README.md
@ -0,0 +1,3 @@
+# Courgette Theme
+
+theme created by Thomas LEBEAU alias Courgette http://thomaslebeau.fr/
--- a/themes/courgette/_bookmarklet.twig
+++ b/themes/courgette/_bookmarklet.twig
@ -0,0 +1,3 @@
+        <script type="text/javascript">
+          top["bookmarklet-url@inthepoche.com"]=""+"<!DOCTYPE html>"+"<html>"+"<head>"+"<title>poche it !</title>"+'<link rel="icon" href="{{poche_url}}tpl/img/favicon.ico" />'+"</head>"+"<body>"+"<script>"+"window.onload=function(){"+"window.setTimeout(function(){"+"history.back();"+"},250);"+"};"+"</scr"+"ipt>"+"</body>"+"</html>"
+        </script>
--- a/themes/courgette/_footer.twig
+++ b/themes/courgette/_footer.twig
@ -0,0 +1,4 @@
+        <footer class="w600p center mt3 mb3 smaller txtright">
+            <p>{% trans "powered by" %} <a href="http://inthepoche.com">poche</a></p>
+            {% if constant('DEBUG_POCHE') == 1 %}<p><strong>{% trans "debug mode is on so cache is off." %} {% trans "your poche version:" %}{{constant('POCHE_VERSION')}}. {% trans "storage:" %} {{constant('STORAGE')}}</strong></p>{% endif %}
+        </footer>
--- a/themes/courgette/_head.twig
+++ b/themes/courgette/_head.twig
@ -0,0 +1,11 @@
+        <link rel="shortcut icon" type="image/x-icon" href="{{ poche_url }}/themes/{{theme}}/img/favicon.ico" />
+        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ poche_url }}/themes/{{theme}}/img/apple-touch-icon-144x144-precomposed.png">
+        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ poche_url }}/themes/{{theme}}/img/apple-touch-icon-72x72-precomposed.png">
+        <link rel="apple-touch-icon-precomposed" href="{{ poche_url }}/themes/{{theme}}/img/apple-touch-icon-precomposed.png">
+        <link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/font.css" media="all">
+        <link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/style.css" media="all">
+        <link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/messages.css" media="all">
+        <link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/print.css" media="print">
+        <link href='//fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+        <script src="//codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
+        <script src="{{ poche_url }}/themes/{{theme}}/js/init.js"></script>
--- a/themes/courgette/_menu.twig
+++ b/themes/courgette/_menu.twig
@ -0,0 +1,9 @@
+            <div id="menuContainer">
+              <ul id="links">
+                  <li><a href="./" {% if view == 'home' %}class="current"{% endif %}>{% trans "home" %}</a></li>
+                  <li><a href="./?view=fav" {% if view == 'fav' %}class="current"{% endif %}>{% trans "favorites" %}</a></li>
+                  <li><a href="./?view=archive" {% if view == 'archive' %}class="current"{% endif %}>{% trans "archive" %}</a></li>
+                  <li><a href="./?view=config" {% if view == 'config' %}class="current"{% endif %}>{% trans "config" %}</a></li>
+                  <li><a href="./?logout" title="{% trans "logout" %}">{% trans "logout" %}</a></li>
+              </ul>
+            </div>
--- a/themes/courgette/_messages.twig
+++ b/themes/courgette/_messages.twig
@ -0,0 +1 @@
+                {{ messages | raw }}
--- a/themes/courgette/_top.twig
+++ b/themes/courgette/_top.twig
@ -0,0 +1,9 @@
+        <header>
+            <h1>
+                {% if view == 'home' %}{% block logo %}<img src="{{ poche_url }}/themes/{{ constant('DEFAULT_THEME') }}/img/logo.png" alt="logo poche" />{% endblock %}
+                {% elseif view == 'fav' %}<a href="./" title="{% trans "back to home" %}" >{{ block('logo') }} <span>Favoris</span></a>
+                {% elseif view == 'archive' %}<a href="./" title="{% trans "back to home" %}" >{{ block('logo') }} <span>Archive</span></a>
+                {% else %}<a href="./" title="{% trans "back to home" %}" >{{ block('logo') }}</a>
+                {% endif %}
+            </h1>
+        </header>
--- a/themes/courgette/config.twig
+++ b/themes/courgette/config.twig
@ -0,0 +1,82 @@
+{% extends "layout.twig" %}
+
+{% block title %}{% trans "config" %}{% endblock %}
+{% block menu %}
+{% include '_menu.twig' %}
+{% endblock %}
+{% block content %}
+        <div id="config">
+            <h2>{% trans "Poching a link" %}</h2>
+            <p>{% trans "You can poche a link by several methods:" %} (<a class="special" href="http://inthepoche.com/doc" title="{% trans "read the documentation" %}">?</a>)</p>
+            <ul>
+                <li>firefox: <a href="https://bitbucket.org/jogaulupeau/poche/downloads/poche.xpi" title="download the firefox extension">{% trans "download the extension" %}</a></li>
+                <li>chrome: <a href="https://bitbucket.org/jogaulupeau/poche/downloads/poche.crx" title="download the chrome extension">{% trans "download the extension" %}</a></li>
+                <li>android: <a href="https://bitbucket.org/jogaulupeau/poche/downloads/Poche.apk" title="download the application">{% trans "download the application" %}</a></li>
+                <li>
+                    <form method="get" action="index.php">
+                        <label class="addurl" for="plainurl">{% trans "by filling this field" %}:</label>
+                        <input required placeholder="Ex:mywebsite.com/article" class="addurl" id="plainurl" name="plainurl" type="url" />
+                        <input type="submit" value="{% trans "poche it!" %}" />
+                    </form>
+                </li>
+                <li>{% trans "bookmarklet: drag & drop this link to your bookmarks bar" %} <a id="bookmarklet" ondragend="this.click();" 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></li>
+            </ul>
+
+            <h2>{% trans "Updating poche" %}</h2>
+            <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/">{% trans "a more recent stable version is available." %}</a></strong>{% else %}{% trans "you are up to date." %}{% endif %}</li>
+                {% if constant('DEBUG_POCHE') == 1 %}<li>{% trans "latest dev version" %} : {{ dev }}. {% if compare_dev == -1 %}<strong><a href="http://inthepoche.com/">{% trans "a more recent development version is available." %}</a></strong>{% else %}{% trans "you are up to date." %}{% endif %}</li>{% endif %}
+            </ul>
+            
+            <h2>{% trans "Change your theme" %}</h2>
+            <form method="post" action="?updatetheme" name="changethemeform">
+                <fieldset class="w500p">
+                    <div class="row">
+                        <label class="col w150p" for="theme">{% trans "Theme:" %}</label>
+                        <select class="col" id="theme" name="theme">
+                            {% for theme in themes %}
+                            <option value="{{ theme.name }}" {{ theme.current ? 'selected' : '' }}>{{ theme.name }}</option>
+                            {% endfor %}
+                        </select>
+                    </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/doc">inthepoche.com</a></p>
+            <ul>
+                <li><a href="./?import&amp;from=pocket">{% trans "import from Pocket" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('POCKET_FILE')) }}</li>
+            <li><a href="./?import&amp;from=readability">{% trans "import from Readability" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('READABILITY_FILE')) }}</li>
+            <li><a href="./?import&amp;from=instapaper">{% trans "import from Instapaper" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('INSTAPAPER_FILE')) }}</li>
+            </ul>
+
+            <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>
+{% endblock %}
--- a/themes/courgette/css/.DS_Store
+++ b/themes/courgette/css/.DS_Store
--- a/themes/courgette/css/font.css
+++ b/themes/courgette/css/font.css
@ -0,0 +1,10 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot?97381924');
+  src: url('../font/fontello.eot?97381924#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff?97381924') format('woff'),
+       url('../font/fontello.ttf?97381924') format('truetype'),
+       url('../font/fontello.svg?97381924#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
--- a/themes/courgette/css/knacss.css
+++ b/themes/courgette/css/knacss.css
--- a/themes/courgette/css/messages.css
+++ b/themes/courgette/css/messages.css
@ -0,0 +1,75 @@
+.messages {
+    display: block;
+    clear: both;
+    width: 400px;
+    margin: 10px auto 10px;
+    padding: 10px 0;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.messages a.closeMessage {
+    display: none;
+    float: right;
+    width: 16px;
+    height: 16px;
+    margin: -14px -8px 0 0;
+    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;
+}
+
+.messages.error {
+    border: 1px solid #c42608;
+    color: #c00 !important;
+    background: #fff0ef;
+}
+
+.messages.error p {
+    color: #c00 !important;
+    background: url(../img/messages/cross.png) no-repeat 0 50%;
+}
+
+.messages.success {
+    border: 1px solid #6dc70c;
+    background: #e0fbcc;
+}
+
+.messages.success p {
+    color: #2b6301 !important;
+    background: url(../img/messages/tick.png) no-repeat 0 50%;
+}
+
+.messages.warning {
+    border: 1px solid #ebcd41;
+    color: #000;
+    background: #fffcd3;
+}
+
+.messages.warning p {
+    color: #5f4e01;
+    background: url(../img/messages/warning.png) no-repeat 0 50%;
+}
+
+.messages.information,
+.messages.info {
+    border: 1px solid #82aee7;
+    background: #dfebfb;
+}
+
+.messages.information p,
+.messages.info p {
+    color: #064393;
+    background: url(../img/messages/help.png) no-repeat 0 50%;
+}
+
+.messages.information a {
+    text-decoration: underline;
+}
--- a/themes/courgette/css/print.css
+++ b/themes/courgette/css/print.css
@ -0,0 +1,48 @@
+/* ### Layout ### */
+
+body {
+    font-family: Serif;
+    background-color: #fff;
+}
+
+@page {
+    margin: 1cm;
+}
+
+img {
+    max-width: 100% !important;
+}
+
+/* ### Content ### */
+
+/* Hide useless blocks */
+body > header,
+#links,
+#sort,
+body > footer,
+.top_link,
+div.tools,
+header div,
+.messages,
+.entrie + .results {
+    display: none !important;
+}
+
+article {
+    border: none !important;
+}
+
+/* Add URL after links */
+.vieworiginal a:after {
+    content: " (" attr(href) ")";
+}
+
+/* Add explanation after abbr */
+abbr[title]:after {
+    content: " (" attr(title) ")";
+}
+
+/* Change border on current pager item */
+.pagination span.current {
+    border-style: dashed;
+}
--- a/themes/courgette/css/style-default.css
+++ b/themes/courgette/css/style-default.css
@ -0,0 +1,59 @@
+a.back span {
+    background-image: url('../img/default/left.png');
+}
+
+a.top span {
+    background-image: url('../img/default/top.png');
+}
+
+a.fav span,
+a.fav-off span:hover {
+    background-image: url('../img/default/star-on.png');
+}
+
+a.fav span:hover,
+a.fav-off span {
+    background-image: url('../img/default/star-off.png');
+}
+
+a.archive span,
+a.archive-off span:hover {
+    background-image: url('../img/default/checkmark-on.png');
+}
+
+a.archive span:hover,
+a.archive-off span {
+    background-image: url('../img/default/checkmark-off.png');
+}
+
+a.twitter span {
+    background-image: url('../img/default/twitter.png');
+}
+
+a.shaarli span {
+    background-image: url('../img/default/shaarli.png');
+}
+
+a.flattr span {
+    background-image: url('../img/default/flattr.png');
+}
+
+a.email span {
+    background-image: url('../img/default/envelop.png');
+}
+
+a.delete span {
+    background-image: url('../img/default/remove.png');
+}
+
+a.link span {
+    background-image: url('../img/default/link.png');
+}
+
+a.bad-display span {
+    background-image: url('../img/default/bad-display.png');
+}
+
+a.reading-time span {
+    background-image: url('../img/default/clock.png');
+}
--- a/themes/courgette/css/style.css
+++ b/themes/courgette/css/style.css
@ -0,0 +1,620 @@
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 10px;
+  font-family: 'Roboto',Verdana,Geneva,sans-serif;
+  font-size: 16px;
+  color: #000;
+}
+
+h1 span {
+  color #FFF;
+  background: #000;
+  display: inline-block;
+  padding: 0.2em 1em 0.2em 1.2em;
+  font-size: 0.7em;
+  position: relative;
+  top: -1em;
+  left: -1em;
+}
+
+h1 a {
+  color: #FFF;
+  text-decoration: none;
+}
+
+#menu {
+  font-family: 'fontello';
+  position:fixed;
+  z-index: 11;
+  top: 0.7em;
+  right: 0.5em;
+  border:0;
+  font-size: 2em;
+  background: #000;
+  color:#FFF;
+  height: 58px;
+  width: 58px;
+  line-height:58px;
+  border-radius:120px;
+}
+
+#menu:hover, #menu:focus {
+  background: #FFF;
+  color:#000;
+  cursor: pointer;
+}
+
+#menu span {
+  position: absolute;
+  top: -99999px;
+}
+
+#menuContainer ul, #article_toolbar ul {
+  position:fixed;
+  top: 0;
+  left:0;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  text-align:center;
+  height:80px;
+}
+
+/*Inspired by http://tympanus.net/Tutorials/AnimatedBorderMenus/index.html */
+
+#menuContainer, #article_toolbar {
+  position: fixed;
+  top: 0;
+  left:0;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  border-width:0;
+  border-style: solid;
+  border-color:#000;
+  background-color: transparent;
+  -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
+  -moz-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
+  transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
+}
+
+#article_toolbar ul {
+  padding: 1.7em;
+}
+
+#menuContainer.open, #article_toolbar.open {
+  border-width:80px;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  -webkit-transition: border-width 0.3s, background-color 0.3s;
+  -moz-transition: border-width 0.3s, background-color 0.3s;
+  transition: border-width 0.3s, background-color 0.3s;
+  z-index: 1;
+}
+
+#links li, #article_toolbar li {
+  list-style: none;
+  display: inline-block;
+}
+
+#links li a, #article_toolbar a {
+  color:#FFF;
+  display: block;
+  position:relative;
+  top: -200px;
+  -webkit-transition: top 0.3s ease;
+  -moz-transition: top 0.3s ease;
+  transition: top 0.3s ease;
+  padding:1.85em 1em;
+}
+
+#links li a {
+  text-decoration:none;
+  text-transform:uppercase;
+}
+
+#links li a:hover, #links li a:focus {
+  background: #FFF;
+  color:#000;
+}
+
+#menuContainer.open li a, #article_toolbar.open a {
+  top: 0;
+  -webkit-transition: top 0.3s ease;
+  -moz-transition: top 0.3s ease;
+  transition: top 0.3s ease;
+  -webkit-transition-delay:0.25ms;
+  -moz-transition-delay:0.25ms;
+  transition-delay:0.25ms;
+}
+
+#menuContainer.open li:nth-child(2) a {
+  -webkit-transition-delay:0.50ms;
+  -moz-transition-delay:0.50ms;
+  transition-delay:0.50ms;
+}
+
+#menuContainer.open li:nth-child(3) a {
+  -webkit-transition-delay:1ms;
+  -moz-transition-delay:1ms;
+  transition-delay:1ms;
+}
+
+#menuContainer.open li:nth-child(4) a {
+  -webkit-transition-delay:1.25ms;
+  -moz-transition-delay:1.25ms;
+  transition-delay:1.25ms;
+}
+
+#menuContainer.open li:nth-child(5) a {
+  -webkit-transition-delay:1.55ms;
+  -moz-transition-delay:1.55ms;
+  transition-delay:1.55ms;
+}
+
+#menu:before {
+  content: "\e801";
+  display: block;
+  text-indent: 0;
+}
+
+body > header {
+  position: fixed;
+  top: 0;
+  left: 1em;
+  z-index: 10;
+}
+
+#main {
+  padding:6em;
+}
+
+/* ==========================================================================
+   entrie
+   ========================================================================== */
+
+.entrie, #article {
+  width: 45em;
+  margin: auto;
+  position:relative;
+  padding: 0 0 1em 0;
+  margin-bottom: 1.5em;
+}
+
+#article a {
+  text-decoration: underline;
+  color:#000;
+}
+
+#article a:hover, #article a:focus {
+  text-decoration: none;
+}
+
+.entrie:after {
+  content:"";
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background: #000;
+  bottom:0;
+  left: -1em;
+}
+
+.entrie p {
+  padding:0 0 0 1.5em;
+}
+
+.entrie:before {
+  content:'';
+  position: absolute;
+  top: 0;
+  left: -1em;
+  width: 4px;
+  height: 100%;
+  background: #000;
+}
+
+.entrie h2:after {
+  content:"";
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: #000;
+  border-width:7px;
+  border-color:transparent transparent transparent #000;
+  border-style: solid;
+  position: absolute;
+  top: 0.8em;
+  right: -0.58em;
+}
+
+.entrie h2 {
+  margin:0;
+  display: inline-block;
+  position: relative;
+  max-width: 78%;
+}
+
+.entrie h2 a {
+  color:#000;
+  text-decoration:none;
+  display: block;
+  background: #000;
+  padding: 0.4em 1em;
+  color:#FFF;
+  margin-left: -0.5em;
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.entrie h2 a:hover, .entrie h2 a:focus {
+  padding:0.4em 1em 0.4em 2em;
+}
+
+ul {
+  padding:0;
+  margin:0;
+}
+
+ul li {
+  list-style: none;
+}
+
+.tools {
+  display: inline-block;
+  margin-left: 1em;
+  vertical-align: top;
+  padding-top: 1em;
+}
+
+.tools a span {
+  position:absolute;
+  top: -99999px;
+}
+
+.tools li {
+  display: inline-block;
+}
+
+.tools a {
+  display: block;
+  color:#FFF;
+  background: #000;
+  text-decoration:none;
+  height: 1.5em;
+  width: 1.5em;
+  text-align: center;
+  line-height:1.5em;
+  border-radius: 90px;
+}
+
+.tools a:hover, .tools a:focus {
+  background: #FFF;
+  color:#000;
+}
+
+.tools a:before { display: block; font-family: 'fontello'; }
+
+
+.fav-off:before, .fav:before { content: '\e805'; } /* '' */
+.archive-off:before, .archive:before { content: '\e804'; } /* '' */
+.tools .archive, .tools .fav {
+  background: #FFF;
+  color:#000;
+}
+.link:before { content: '\e800'; } /* '' */
+.delete:before { content: '\e803'; } /* '' */
+.reading-time:before { content: '\e802'; } /* '' */
+
+#article_toolbar a:before {
+  display: block;
+  font-family: 'fontello'; 
+}
+
+#article_toolbar a {
+  display: block;
+  color:#000;
+  background: #FFF;
+  text-decoration:none;
+  height: 1.5em;
+  width: 1.5em;
+  text-align: center;
+  line-height:1.5em;
+  border-radius: 90px;
+  padding: 0;
+}
+
+#article_toolbar a:hover, #article_toolbar a:focus {
+  background: #000;
+  color:#FFF;
+}
+
+#article_toolbar span {
+  position: absolute;
+  top: -99999px;
+}
+
+.email:before { content: '\e80a'; } /* '' */
+.icon-check:before { content: '\e804'; } /* '' */
+.back:before { content: '\e806'; } /* '' */
+.bad-display:before { content: '\e808'; } /* '' */
+.twitter:before { content: '\e807'; } /* '' */
+
+#article_toolbar .flattrli {
+  display: none;
+}
+
+#article_toolbar li {
+  margin: 0 0 0 1em;
+}
+
+
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 0 2%;
+  left: 0;
+  text-align:right;
+  font-size: 0.8em;
+  font-style: italic;
+  background: rgba(255,255,255,0.5);
+}
+
+footer a {
+  color:#000;
+}
+
+footer a:hover,footer a:focus {
+  text-decoration: none;
+}
+
+footer p:first-child {
+  float:left;
+}
+
+#loginForm fieldset {
+  border:5px solid #000;
+  padding: 1.5em;
+}
+
+fieldset {
+  border:0;
+  padding: 0;
+}
+
+#loginForm {
+  max-width: 25em;
+  margin: auto;
+}
+
+#loginForm .row {
+  margin-bottom: 0.5em;
+}
+
+form h2 {
+  margin-top: 0;
+}
+
+form label {
+  width: 40%;
+  display: inline-block;
+}
+
+form input[type="text"], form input[type="password"], form input[type='url'], form select {
+  border:1px solid #000;
+  padding:0.5em 1em;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0){
+  form select{
+    -webkit-appearance: none;
+    background: url(../img/bg-select.png) no-repeat right center;
+    padding-right: 2.2em;
+    border-radius: 0;
+  }
+}
+
+form button, form input[type="submit"] {
+  background: #000;
+  color:#FFF;
+  border:0;
+  font-size:1em;
+  padding:0.5em 1em;
+  margin-top: 1em;
+  cursor: pointer;
+}
+
+form button:hover, form button:focus, form input[type="submit"]:hover, form input[type="submit"]:focus {
+  background: #FFF;
+  color: #000;
+}
+
+/* ==========================================================================
+   Config
+   ========================================================================== */
+
+#config {
+  max-width: 60%;
+  margin: auto;
+}
+
+#config a {
+  background: #000;
+  text-decoration: none;
+  color:#FFF;
+  padding: 0.2em 1em;
+}
+
+#config .special {
+  background: none;
+  padding:0;
+  color: #000;
+}
+
+#config a:hover, #config a:focus {
+  background: #FFF;
+  color:#000;
+}
+
+#config li {
+  margin-bottom: 1em;
+}
+
+#plainurl {
+  font-size: 1em;
+}
+
+#config label {
+  width: 20%;
+}
+
+.results {
+  max-width: 62.5%;
+  font-style:italic;
+  margin: 1em auto 2.5em;
+}
+
+#sort {
+  max-width: 62.5%;
+  margin: 0 auto -2.5em;
+  text-align: right;
+  border-bottom:1px dotted #000;
+}
+
+#sort li {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  top: -0.1em;
+  margin-left: 1em;
+}
+
+#sort li img {
+  display: none;
+}
+
+#sort a {
+  display: inline-block;
+  font-family: 'fontello'; 
+  color:#000;
+  text-decoration: none;
+}
+
+#sort a:hover, #sort a:focus {
+  text-decoration: underline;
+}
+
+#sort a:before {
+  display: block;
+}
+
+#sort li a:first-child:before {
+  content: '\e809';
+}
+
+#sort li a:first-child + a:before {
+  content: '\e80b';
+}
+
+@media screen and (max-width: 860px) {
+  .entrie, #article {
+    width: 30em;
+  }
+}
+
+@media screen and (max-width: 650px) {
+  #menuContainer ul, #article_toolbar ul {
+    width: 120px;
+    height: 100%;
+  }
+
+  body > header {
+    position: static;
+  }
+
+  #main {
+    padding: 0 0.5em 6em;
+  }
+
+  #menu {
+    display: none;
+  }
+
+  #main:before {
+    content:none;
+  }
+
+  #menuContainer, #article_toolbar, #menuContainer ul, #article_toolbar ul {
+    position: static;
+    width: 100%;
+    height: auto;
+  }
+
+  #links li a, #article_toolbar a {
+    position: static;
+    color: #000;
+  }
+
+  #links li a {
+    padding: 1em;
+    min-width: 120px;
+    text-align: left;
+  }
+
+  #article_toolbar li {
+    margin-bottom: 1em;
+    margin-left: 0.5em;
+  }
+
+}
+
+@media screen and (max-width: 500px) {
+  .entrie, #article {
+    width: 17em;
+  } 
+  .entrie h2 {
+    width: 100%;
+    max-width: none;
+  }
+  .entrie h2 a:hover, .entrie h2 a:focus {
+    padding-left: 1em;
+    background: #FFF;
+    color: #000;
+  }
+  .entrie h2:after {
+    content:none;
+  }
+
+  .messages {
+    width: 100%!important;
+  }
+
+  #sort {
+    margin: 3em auto 0;
+    max-width: none;
+    text-align: center;
+  }
+  #config {
+    margin: 7em auto 0;
+    max-width: none;
+  }
+  #config label { width: 100%; }
+  .results {
+    max-width: none;
+    margin-bottom: 1em;
+  }
+
+  footer p:first-child {
+    float: none;
+  }
+  footer {
+    position:static;
+  }
+}
--- a/themes/courgette/error.twig
+++ b/themes/courgette/error.twig
@ -0,0 +1,6 @@
+{% extends "layout.twig" %}
+{% block title %}{% trans "plop" %}{% endblock %}
+{% block content %}
+        {{ msg|raw }}
+        <p>Don't forget <a href="http://inthepoche.com/doc">the documentation</a>.</p>
+{% endblock %}
--- a/themes/courgette/export.twig
+++ b/themes/courgette/export.twig
@ -0,0 +1 @@
+{{ export }}
--- a/themes/courgette/font/fontello.eot
+++ b/themes/courgette/font/fontello.eot
--- a/themes/courgette/font/fontello.svg
+++ b/themes/courgette/font/fontello.svg
@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2013 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="mail" unicode="&#xe80a;" d="m929 11v428q-18-20-39-37q-149-114-238-188q-28-24-46-38t-48-27t-57-13h-2q-26 0-57 13t-48 27t-46 38q-88 74-238 188q-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7t-1 7t-3 5t-5 4t-8 2h-822q-7 0-12-6t-6-12q0-94 82-159q108-85 224-177q4-2 20-16t25-21t25-18t28-15t24-5h2q11 0 24 5t28 15t25 18t25 21t20 16q116 92 224 177q30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z" horiz-adv-x="1000" />
+<glyph glyph-name="up-open" unicode="&#xe80b;" d="m0 174l352 352l148 148l148-148l352-352l-148-148l-352 351l-352-351z" horiz-adv-x="1000" />
+<glyph glyph-name="star" unicode="&#xe805;" d="m440 790l120-336l320 0l-262-196l94-348l-272 208l-272-208l94 348l-262 196l320 0z" horiz-adv-x="880" />
+<glyph glyph-name="check" unicode="&#xe804;" d="m249 0q-34 0-56 28l-180 236q-16 24-12 52t26 46t51 14t47-28l118-154l296 474q16 24 43 30t53-8q24-16 30-43t-8-53l-350-560q-20-32-56-32z" horiz-adv-x="667" />
+<glyph glyph-name="link" unicode="&#xe800;" d="m294 116q14 14 34 14t36-14q32-34 0-70l-42-40q-56-56-132-56q-78 0-134 56t-56 132q0 78 56 134l148 148q70 68 144 77t128-43q16-16 16-36t-16-36q-36-32-70 0q-50 48-132-34l-148-146q-26-26-26-64t26-62q26-26 63-26t63 26z m450 574q56-56 56-132q0-78-56-134l-158-158q-74-72-150-72q-62 0-112 50q-14 14-14 34t14 36q14 14 35 14t35-14q50-48 122 24l158 156q28 28 28 64q0 38-28 62q-24 26-56 31t-60-21l-50-50q-16-14-36-14t-34 14q-34 34 0 70l50 50q54 54 127 51t129-61z" horiz-adv-x="800" />
+<glyph glyph-name="reply" unicode="&#xe806;" d="m900 10q-86 152-208 197t-330 45l0-218l-362 334l362 322l0-192q90 0 168-27t131-70t96-95t69-104t44-95t24-69z" horiz-adv-x="900" />
+<glyph glyph-name="menu" unicode="&#xe801;" d="m857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
+<glyph glyph-name="clock" unicode="&#xe802;" d="m460 810q190 0 325-135t135-325t-135-325t-325-135t-325 135t-135 325t135 325t325 135z m0-820q150 0 255 106t105 254q0 150-105 255t-255 105q-148 0-254-105t-106-255q0-148 106-254t254-106z m36 620l0-244l150-150l-50-50l-170 170l0 274l70 0z" horiz-adv-x="920" />
+<glyph glyph-name="block" unicode="&#xe808;" d="m480 830q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m258-220z m-622-260q0-132 82-230l514 514q-100 82-232 82q-152 0-258-107t-106-259z m106-258z m258-106q152 0 259 107t107 257q0 130-82 232l-514-514q98-82 230-82z" horiz-adv-x="960" />
+<glyph glyph-name="twitter" unicode="&#xe807;" d="m920 636q-36-54-94-98l0-24q0-130-60-250t-186-203t-290-83q-160 0-290 84q14-2 46-2q132 0 234 80q-62 2-110 38t-66 94q10-4 34-4q26 0 50 6q-66 14-108 66t-42 120l0 2q36-20 84-24q-84 58-84 158q0 48 26 94q154-188 390-196q-6 18-6 42q0 78 55 133t135 55q82 0 136-58q60 12 120 44q-20-66-82-104q56 8 108 30z" horiz-adv-x="920" />
+<glyph glyph-name="down-open" unicode="&#xe809;" d="m0 526l148 148l352-351l352 351l148-148l-352-352l-148-148l-148 148z" horiz-adv-x="1000" />
+<glyph glyph-name="trash" unicode="&#xe803;" d="m50 458q122-70 330-70t330 70l-54-486q-2-14-35-36t-100-43t-141-21t-140 21t-100 43t-36 36z m488 300q94-18 158-55t64-71l0-10q0-58-112-99t-268-41t-268 41t-112 99l0 10q0 34 64 71t158 55l42 48q22 26 70 26l92 0q52 0 70-26z m-54-112l84 0q-92 110-104 126q-14 16-32 16l-102 0q-22 0-32-16l-106-126l84 0l64 66l82 0z" horiz-adv-x="760" />
+</font>
+</defs>
+</svg>
--- a/themes/courgette/font/fontello.ttf
+++ b/themes/courgette/font/fontello.ttf
--- a/themes/courgette/font/fontello.woff
+++ b/themes/courgette/font/fontello.woff
--- a/themes/courgette/home.twig
+++ b/themes/courgette/home.twig
@ -0,0 +1,49 @@
+{% extends "layout.twig" %}
+{% block title %}
+{% if view == 'fav' %}
+{% trans "favoris" %}
+{% elseif view == 'archive' %}
+{% trans "archive" %}
+{% else %}
+{% trans "unread" %}
+{% endif %}
+{% endblock %}
+{% block menu %}
+{% include '_menu.twig' %}
+{% endblock %}
+{% block precontent %}
+            {% if entries|length > 1 %}
+            <ul id="sort">
+                <li><a href="./?sort=ia&amp;view={{ view }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/top.png" alt="{% trans "by date asc" %}" title="{% trans "by date asc" %}" /></a> {% trans "by date" %} <a href="./?sort=id&amp;view={{ view }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/down.png" alt="{% trans "by date desc" %}" title="{% trans "by date desc" %}" /></a></li>
+                <li><a href="./?sort=ta&amp;view={{ view }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/top.png" alt="{% trans "by title asc" %}" title="{% trans "by title asc" %}" /></a> {% trans "by title" %} <a href="./?sort=td&amp;view={{ view }}"><img src="{{ poche_url }}/themes/{{ theme }}/img/{{ theme }}/down.png" alt="{% trans "by title desc" %}" title="{% trans "by title desc" %}" /></a></li>
+            </ul>
+            {% endif %}
+{% endblock %}
+{% block content %}
+            {% if entries is empty %}
+            <div class="messages warning"><p>{% trans "No link available here!" %}</p></div>
+            {% else %}
+                {% block pager %}
+                    {% if nb_results > 1 %}
+                <div class="results">
+                    <div class="nb-results">{{ nb_results }} {% trans "results" %}</div>
+                        {{ page_links | raw }}
+                </div>
+                    {% endif %}
+                {% endblock %}
+                {% for entry in entries %}
+            <div id="entry-{{ entry.id|e }}" class="entrie">
+                <h2><a href="index.php?view=view&amp;id={{ entry.id|e }}">{{ entry.title|raw }}</a></h2>
+                <ul class="tools">
+                    <li><a title="{% trans "toggle mark as read" %}" class="tool {% if entry.is_read == 0 %}archive-off{% else %}archive{% endif %}" href="./?action=toggle_archive&amp;id={{ entry.id|e }}"><span>{% trans "toggle mark as read" %}</span></a></li>
+                    <li><a title="{% trans "toggle favorite" %}" class="tool {% if entry.is_fav == 0 %}fav-off{% else %}fav{% endif %}" href="./?action=toggle_fav&amp;id={{ entry.id|e }}"><span>{% trans "toggle favorite" %}</span></a></li>
+                    <li><a title="{% trans "delete" %}" class="tool delete" href="./?action=delete&amp;id={{ entry.id|e }}"><span>{% trans "delete" %}</span></a></li>
+                    <li><a href="{{ entry.url|e }}" target="_blank" title="{% trans "original" %} : {{ entry.title|e }}" class="tool link"><span>{{ entry.url | e | getDomain }}</span></a></li>
+                    <li><a target="_blank" title="{% trans "estimated reading time:" %} {{ entry.content| getReadingTime }} min" class="tool reading-time"><span>{{ entry.content| getReadingTime }} min</span></a></li>
+                </ul>
+                <p>{{ entry.content|striptags|slice(0, 300) }}...</p>
+            </div>
+                {% endfor %}
+            {% endif %}
+            {{ block('pager') }}
+{% endblock %}
--- a/themes/courgette/img/apple-touch-icon-144x144-precomposed.png
+++ b/themes/courgette/img/apple-touch-icon-144x144-precomposed.png
--- a/themes/courgette/img/apple-touch-icon-72x72-precomposed.png
+++ b/themes/courgette/img/apple-touch-icon-72x72-precomposed.png
--- a/themes/courgette/img/apple-touch-icon.png
+++ b/themes/courgette/img/apple-touch-icon.png
--- a/themes/courgette/img/bg-select.png
+++ b/themes/courgette/img/bg-select.png
--- a/themes/courgette/img/default/backtotop.png
+++ b/themes/courgette/img/default/backtotop.png
--- a/themes/courgette/img/default/bad-display.png
+++ b/themes/courgette/img/default/bad-display.png
--- a/themes/courgette/img/default/checkmark-off.png
+++ b/themes/courgette/img/default/checkmark-off.png
--- a/themes/courgette/img/default/checkmark-on.png
+++ b/themes/courgette/img/default/checkmark-on.png
--- a/themes/courgette/img/default/clock.png
+++ b/themes/courgette/img/default/clock.png
--- a/themes/courgette/img/default/down.png
+++ b/themes/courgette/img/default/down.png
--- a/themes/courgette/img/default/envelop.png
+++ b/themes/courgette/img/default/envelop.png
--- a/themes/courgette/img/default/flattr.png
+++ b/themes/courgette/img/default/flattr.png
--- a/themes/courgette/img/default/left.png
+++ b/themes/courgette/img/default/left.png
--- a/themes/courgette/img/default/link.png
+++ b/themes/courgette/img/default/link.png
--- a/themes/courgette/img/default/remove.png
+++ b/themes/courgette/img/default/remove.png
--- a/themes/courgette/img/default/shaarli.png
+++ b/themes/courgette/img/default/shaarli.png
--- a/themes/courgette/img/default/star-off.png
+++ b/themes/courgette/img/default/star-off.png
--- a/themes/courgette/img/default/star-on.png
+++ b/themes/courgette/img/default/star-on.png
--- a/themes/courgette/img/default/top.png
+++ b/themes/courgette/img/default/top.png
--- a/themes/courgette/img/default/twitter.png
+++ b/themes/courgette/img/default/twitter.png
--- a/themes/courgette/img/favicon.ico
+++ b/themes/courgette/img/favicon.ico
--- a/themes/courgette/img/logo.png
+++ b/themes/courgette/img/logo.png
--- a/themes/courgette/img/messages/close.png
+++ b/themes/courgette/img/messages/close.png
--- a/themes/courgette/img/messages/cross.png
+++ b/themes/courgette/img/messages/cross.png
--- a/themes/courgette/img/messages/help.png
+++ b/themes/courgette/img/messages/help.png
--- a/themes/courgette/img/messages/tick.png
+++ b/themes/courgette/img/messages/tick.png
--- a/themes/courgette/img/messages/warning.png
+++ b/themes/courgette/img/messages/warning.png
--- a/themes/courgette/install.twig
+++ b/themes/courgette/install.twig
@ -0,0 +1,28 @@
+{% extends "layout.twig" %}
+{% block title %}{% trans "installation" %}{% endblock %}
+{% block content %}
+        <form method="post" action="?install" name="loginform">
+            <fieldset class="w500p center">
+                <h2 class="mbs txtcenter">{% trans "install your poche" %}</h2>
+                <p>
+                    {% trans "poche is still not installed. Please fill the below form to install it. Don't hesitate to <a href='http://inthepoche.com/doc'>read the documentation on poche website</a>." %}
+                </p>
+                <p class="row">
+                    <label class="col w150p" for="login">{% trans "Login" %}</label>
+                    <input class="col" type="text" id="login" name="login" placeholder="Login" tabindex="1" autofocus />
+                </p>
+                <p class="row">
+                    <label class="col w150p" for="password">{% trans "Password" %}</label>
+                    <input class="col" type="password" id="password" name="password" placeholder="Password" tabindex="2">
+                </p>
+                <p class="row">
+                    <label class="col w150p" for="password_repeat">{% trans "Repeat your password" %}</label>
+                    <input class="col" type="password" id="password_repeat" name="password_repeat" placeholder="Password" tabindex="3">
+                </p>
+                <p class="row mts txtcenter">
+                    <button class="bouton" type="submit" tabindex="4">{% trans "Install" %}</button>
+                </p>
+            </fieldset>
+            <input type="hidden" name="token" value="{{ token }}">
+        </form>
+{% endblock %}
--- a/themes/courgette/js/init.js
+++ b/themes/courgette/js/init.js
@ -0,0 +1,6 @@
+$.fn.ready(function () {
+  $('#menu').on('click', function(){
+    $('body').toggleClass('menuOpen');
+    $('#menuContainer, #article_toolbar').toggleClass('open');
+  });
+})
--- a/themes/courgette/js/restoreScroll.js
+++ b/themes/courgette/js/restoreScroll.js
@ -0,0 +1,25 @@
+function supportsLocalStorage() {
+    try {
+        return 'localStorage' in window && window['localStorage'] !== null;
+    } catch (e) {
+        return false;
+    }
+}
+
+function savePercent(id, percent) {
+    if (!supportsLocalStorage()) { return false; }
+    localStorage["poche.article." + id + ".percent"] = percent;
+    return true;
+}
+
+function retrievePercent(id) {
+    if (!supportsLocalStorage()) { return false; }
+
+    var bheight = $(document).height();
+    var percent = localStorage["poche.article." + id + ".percent"];
+    var scroll = bheight * percent;
+
+    $('html,body').animate({scrollTop: scroll}, 'fast');
+
+    return true;
+}
--- a/themes/courgette/layout.twig
+++ b/themes/courgette/layout.twig
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!--[if lte IE 6]><html class="no-js ie6 ie67 ie678" lang="{{ lang }}"><![endif]-->
+<!--[if lte IE 7]><html class="no-js ie7 ie67 ie678" lang="{{ lang }}"><![endif]-->
+<!--[if IE 8]><html class="no-js ie8 ie678" lang="{{ lang }}"><![endif]-->
+<!--[if gt IE 8]><html class="no-js" lang="{{ lang }}"><![endif]-->
+<html lang="{{ lang }}">
+    <head>
+        <meta name="viewport" content="initial-scale=1.0">
+        <meta charset="utf-8">
+        <!--[if IE]>
+        <meta http-equiv="X-UA-Compatible" content="IE=10">
+        <![endif]-->
+        <title>{% block title %}{% endblock %} - poche</title>
+{% include '_head.twig' %}
+{% include '_bookmarklet.twig' %}
+    </head>
+    <body>
+        {% include '_top.twig' %}
+        <div id="main">
+            <button id="menu"><span>Menu</span></button>
+            {% block menu %}{% endblock %}
+            {% block precontent %}{% endblock %}
+            {% block messages %}
+            {% include '_messages.twig' %}
+            {% endblock %}
+            <div id="content" class="w600p center">
+            {% block content %}{% endblock %}
+            </div>
+        </div>
+{% include '_footer.twig' %}
+    </body>
+</html>
--- a/themes/courgette/login.twig
+++ b/themes/courgette/login.twig
@ -0,0 +1,32 @@
+{% extends "layout.twig" %}
+
+{% block title %}{% trans "login to your poche" %}{% endblock %}
+{% block content %}
+            <form method="post" action="?login" name="loginform" id="loginForm">
+                <fieldset class="w500p center">
+                    <h2 class="mbs txtcenter">{% trans "login to your poche" %}</h2>
+                    {% if constant('MODE_DEMO') == 1 %}<p>{% trans "you are in demo mode, some features may be disabled." %}</p>{% endif %}
+					<div class="row">
+						<label class="col w150p" for="login">{% trans "Login" %}</label>
+						<input class="col" type="text" id="login" name="login" placeholder="Login" tabindex="1" autofocus {% if constant('MODE_DEMO') == 1 %}value="poche"{% endif %} />
+					</div>
+
+					<div class="row">
+						<label class="col w150p" for="password">{% trans "Password" %}</label>
+						<input class="col" type="password" id="password" name="password" placeholder="Password" tabindex="2" {% if constant('MODE_DEMO') == 1 %}value="poche"{% endif %} />
+					</div>
+					<div class="row">
+						<label class="col w150p" for="longlastingsession">{% trans "Stay signed in" %}</label>
+						<div class="col">
+							<input type="checkbox" id="longlastingsession" name="longlastingsession" tabindex="3">
+							<small class="inbl">{% trans "(Do not check on public computers)" %}</small>
+						</div>
+					</div>
+					<div class="row mts txtcenter">
+						<button class="bouton" type="submit" tabindex="4">{% trans "Login" %}</button>
+					</div>
+                </fieldset>
+                <input type="hidden" name="returnurl" value="{{ referer }}">
+                <input type="hidden" name="token" value="{{ token }}">
+            </form>
+{% endblock %}
--- a/themes/courgette/screenshot.jpg
+++ b/themes/courgette/screenshot.jpg
--- a/themes/courgette/view.twig
+++ b/themes/courgette/view.twig
@ -0,0 +1,45 @@
+{% extends "layout.twig" %}
+{% block title %}{{ entry.title|raw }} ({{ entry.url | e | getDomain }}){% endblock %}
+{% block content %}
+        <div id="article_toolbar">
+            <ul>
+                <li><a href="./" title="{% trans "back to home" %}" class="tool back"><span>{% trans "back to home" %}</span></a></li>
+                <li><a href="{{ entry.url|e }}" target="_blank" title="{% trans "original" %} : {{ entry.title|e }}" class="tool link"><span>{{ entry.url | e | getDomain }}</span></a></li>
+                <li><a title="{% trans "toggle mark as read" %}" class="tool {% if entry.is_read == 0 %}archive-off{% else %}archive{% endif %}" href="./?action=toggle_archive&amp;id={{ entry.id|e }}"><span>{% trans "toggle mark as read" %}</span></a></li>
+                <li><a title="{% trans "toggle favorite" %}" class="tool {% if entry.is_fav == 0 %}fav-off{% else %}fav{% endif %}" href="./?action=toggle_fav&amp;id={{ entry.id|e }}"><span>{% trans "toggle favorite" %}</span></a></li>
+                <li><a title="{% trans "delete" %}" class="tool delete" href="./?action=delete&amp;id={{ entry.id|e }}"><span>{% trans "delete" %}</span></a></li>
+                {% if constant('SHARE_TWITTER') == 1 %}<li><a href="https://twitter.com/home?status={{entry.title|url_encode}}%20{{ entry.url|url_encode }}%20via%20@getpoche" target="_blank" class="tool twitter" title="{% trans "tweet" %}"><span>{% trans "tweet" %}</span></a></li>{% endif %}
+                {% if constant('SHARE_MAIL') == 1 %}<li><a href="mailto:?subject={{ entry.title|url_encode }}&amp;body={{ entry.url|url_encode }}%20via%20@getpoche" class="tool email" title="{% trans "email" %}"><span>{% trans "email" %}</span></a></li>{% endif %}
+                {% if constant('SHARE_SHAARLI') == 1 %}<li><a href="{{ constant('SHAARLI_URL') }}/index.php?post={{ entry.url|url_encode }}&amp;title={{ entry.title|url_encode }}" target="_blank" class="tool shaarli" title="{% trans "shaarli" %}"><span>{% trans "shaarli" %}</span></a></li>{% endif %}
+                {% if constant('FLATTR') == 1 %}{% if flattr.status == constant('FLATTRABLE') %}<li class="flattrli"><a href="http://flattr.com/submit/auto?url={{ entry.url }}" class="tool flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span></a></li>{% elseif flattr.status == constant('FLATTRED') %}<li><a href="{{ flattr.flattrItemURL }}" class="tool flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span>{{ flattr.numflattrs }}</a></li>{% endif %}{% endif %}
+                <li><a href="mailto:support@inthepoche.com?subject=Wrong%20display%20in%20poche&amp;body={{ entry.url|url_encode }}" title="{% trans "this article appears wrong?" %}" class="tool bad-display"><span>{% trans "this article appears wrong?" %}</span></a></li>
+            </ul>
+        </div>
+        <div id="article">
+            <header class="mbm">
+                <h1>{{ entry.title|raw }}</h1>
+            </header>
+            <article>
+                {{ content | raw }}
+            </article>
+        </div>
+        <script src="{{ poche_url }}/themes/{{ constant('DEFAULT_THEME') }}/js/restoreScroll.js"></script>
+        <script type="text/javascript">
+        $(document).ready(function() {
+
+            $(window).scroll(function(e){
+                var scrollTop = $(window).scrollTop();
+                var docHeight = $(document).height();
+                var scrollPercent = (scrollTop) / (docHeight);
+                var scrollPercentRounded = Math.round(scrollPercent*100)/100;
+                savePercent({{ entry.id|e }}, scrollPercentRounded);
+            });
+
+            retrievePercent({{ entry.id|e }});
+
+            $(window).resize(function(){
+                retrievePercent({{ entry.id|e }});
+            });
+        });
+        </script> 
+{% endblock %}