+++ /dev/null
-html, body, div, span, object, iframe,\r
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,\r
-a, abbr, acronym, address, code,\r
-del, dfn, em, img, q, dl, dt, dd, ol, ul, li,\r
-fieldset, form, label, legend,\r
-table, caption, tbody, tfoot, thead, tr, th, td {\r
- margin: 0;\r
- padding: 0;\r
- border: 0;\r
- font-weight: inherit;\r
- font-style: inherit;\r
- font-size: 100%;\r
- font-family: inherit;\r
- vertical-align: baseline;\r
-}\r
-\r
-\r
-/* Tables still need 'cellspacing="0"' in the markup. */\r
-table { border-collapse: separate; border-spacing: 0; }\r
-caption, th, td { text-align: left; font-weight: normal; }\r
-table, td, th { vertical-align: middle; }\r
-\r
-/* Remove possible quote marks (") from <q>, <blockquote>. */\r
-blockquote:before, blockquote:after, q:before, q:after { content: ""; }\r
-blockquote, q { quotes: "" ""; }\r
-\r
-/* Remove annoying border on linked images. */\r
-a img { border: none; }\r
-\r
-\r
-body {\r
- \r
- margin: 10px;\r
-}\r
-\r
body {
color: #222222;
font: 20px/1.3em Palatino,Georgia,serif;
- background-color: #e6e6e6;
+ background-color: #F1F1F1;
+}
+
+body.article {
+ background-color: #ffffff;
}
a, a:hover, a:visited {
text-align: center;
}
-#main {
+#article header {
+ text-align: left;
+ border-bottom: 1px solid #222222;
+}
+
+#article header a {
+ text-decoration: none;
+}
+
+#article header .vieworiginal a {
+ color: #888888;
+}
+
+#main, #article {
margin: 0 auto;
}
padding: 15px;
}
+#main #entries {
+ margin-top: 20px;
+}
+
+#main #entries .entrie {
+ color: rgb(46, 46, 46);
+ position:relative;
+ background-color: #ffffff;
+ height: 8em;
+}
+
+#main #entries .entrie h2 a {
+ text-decoration: none;
+}
+
+#main #entries .entrie h2 a:hover {
+ color: #F5BE00;
+}
+
+#main #entries .entrie .tools {
+ position:absolute;
+ bottom: 0;
+ width: 100%;
+ text-align: right;
+}
+
#main a.tool {
text-decoration: none;
}
+++ /dev/null
-\r
-body { \r
- font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0; \r
- font-size-adjust:none;\r
- font-style:normal;\r
- font-variant:normal;\r
- font-weight:normal;\r
- padding: 15px;\r
- margin: 15px auto;\r
-}\r
-\r
-article {\r
- border: 3px solid grey;\r
- max-width:700px;\r
- margin: 15px auto;\r
- padding: 15px;\r
-}\r
-\r
-footer {\r
- border: 1px solid black;\r
- padding: 15px;\r
- margin: 15px auto;\r
-}\r
-\r
-p { padding:0 0 0.8125em 0; color:#111; font-weight:300;}\r
-\r
-p + p { text-indent:1.625em;}\r
-\r
-img { display: block; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; }\r
-\r
-p > img { display: inline-block; margin: 0; }\r
-\r
-h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; }\r
-h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; }\r
-\r
-\r
-h1 { font-size: 2.125em; margin-bottom: 0.765em; line-height: 1.5em;}\r
-h2 { font-size: 1.9em; margin-bottom: 0.855em; }\r
-h3 { font-size: 1.7em; margin-bottom: 0.956em; }\r
-h4 { font-size: 1.4em; margin-bottom: 1.161em; }\r
-h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; }\r
-\r
-\r
-\r
-ul{list-style-position:outside;}\r
-li ul, \r
-li ol { margin:0 1.625em; }\r
-ul, ol { margin: 0 0 1.625em 0; }\r
-\r
-\r
-dl { margin: 0 0 1.625em 0; }\r
-dl dt { font-weight: bold; }\r
-dl dd { margin-left: 1.625em; }\r
-\r
-a { color:#005AF2; text-decoration:none; }\r
-a:hover { text-decoration: underline; }\r
-\r
-\r
-table { margin-bottom:1.625em; border-collapse: collapse; }\r
-th { font-weight:bold; }\r
-tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; }\r
-tfoot { font-style: italic; }\r
-caption { text-align:center; font-family:Georgia, serif; }\r
-\r
-\r
-abbr, acronym { border-bottom:1px dotted #000; }\r
-address { margin-top:1.625em; font-style: italic; }\r
-del {color:#000;}\r
-\r
-\r
-blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; }\r
-blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */\r
-blockquote > p {padding:0; margin:0; }\r
-\r
-strong { font-weight: bold; }\r
-em, dfn { font-style: italic; }\r
-dfn { font-weight: bold; }\r
-pre, code { margin: 1.625em 0; white-space: pre; }\r
-pre, code, tt { font: 1em monospace; line-height: 1.5; } \r
-tt { display: block; margin: 1.625em 0; }\r
-hr { margin-bottom:1.625em; }\r
-\r
-.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; }\r
-.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } \r
-.mono { font-family:"Courier New", Courier, monospace; }\r
$action = (isset ($_GET['action'])) ? htmlspecialchars($_GET['action']) : '';
$view = (isset ($_GET['view'])) ? htmlspecialchars($_GET['view']) : '';
-$in = (isset ($_GET['id'])) ? htmlspecialchars($_GET['id']) : '';
+$id = (isset ($_GET['id'])) ? htmlspecialchars($_GET['id']) : '';
switch ($action)
{
<header>
<h1><img src="img/logo.png" alt="logo poche" />poche</h1>
</header>
- <div id="main" class="w800p">
+ <div id="main" class="w960p">
<ul id="links">
<li><a href="index.php">home</a></li>
<li><a href="?view=fav">favorites</a></li>
<li><a href="?view=archive">archive</a></li>
<li><a title="i am a bookmarklet, use me !" href="javascript:(function(){var%20url%20=%20location.href;var%20title%20=%20document.title%20||%20url;window.open('<?php echo url()?>?action=add&url='%20+%20encodeURIComponent(url),'_self');})();">poche it !</a></li>
</ul>
- <ul id="entries">
+ <div id="entries">
<?php
+ $i = 0;
foreach ($entries as $entry)
{
- echo '<li><a href="readityourself.php?url='.urlencode($entry['url']).'">' . $entry['title'] . '</a> <a href="?action=toggle_archive&id='.$entry['id'].'" title="toggle mark as read" class="tool">✓</a> <a href="?action=toggle_fav&id='.$entry['id'].'" title="toggle favorite" class="tool">'.(($entry['is_fav'] == 0) ? '☆' : '★' ).'</a> <a href="?action=delete&id='.$entry['id'].'" title="toggle delete" class="tool">⨯</a></li>';
+ if ($i == 0) {
+ echo '<section class="line grid3">';
+ }
+ echo '<aside class="mod entrie mb2"><h2 class="h6-like"><a href="readityourself.php?url='.urlencode($entry['url']).'">' . $entry['title'] . '</h2><div class="tools"><a href="?action=toggle_archive&id='.$entry['id'].'" title="toggle mark as read" class="tool">✓</a> <a href="?action=toggle_fav&id='.$entry['id'].'" title="toggle favorite" class="tool">'.(($entry['is_fav'] == 0) ? '☆' : '★' ).'</a> <a href="?action=delete&id='.$entry['id'].'" title="toggle delete" class="tool">⨯</a></div></aside>';
+
+ $i++;
+ if ($i == 3) {
+ echo '</section>';
+ $i = 0;
+ }
}
?>
- </ul>
+ </div>
</div>
<footer class="mr2 mt3">
<p class="smaller"><a href="http://github.com/nicosomb/poche">poche</a> is a read it later open source system, based on <a href="http://www.memiks.fr/readityourself/">ReadItYourself</a>. <a href="https://twitter.com/getpoche" title="follow us on twitter">@getpoche</a>. Logo by <a href="http://www.iconfinder.com/icondetails/43256/128/jeans_monotone_pocket_icon">Brightmix</a>. poche is developed by <a href="http://nicolas.loeuillet.org">Nicolas LÅ“uillet</a> under the <a href="http://www.wtfpl.net/">WTFPL</a>.</p>
-<footer>
- <div>
- Copyright © <a href="http://www.memiks.fr/">memiks.fr</a> | <a href="http://shaarli.memiks.fr/">Liens</a> / <a href="http://rss.memiks.fr/">RSS</a> / <a href="http://wiki.memiks.fr/">Wiki</a> / <a href="mailto:memiks@memiks.fr">Contact</a><br>
- Licence: WTF Licence<br>
- More information HERE: <a href="http://www.memiks.fr/readityourself/">http://www.memiks.fr/readityourself/</a> Version : <span class="version">{$version}</span>
- </div>
-</footer>
+ <footer class="mr2 mt3">
+ <p class="smaller"><a href="http://github.com/nicosomb/poche">poche</a> is a read it later open source system, based on <a href="http://www.memiks.fr/readityourself/">ReadItYourself</a>. <a href="https://twitter.com/getpoche" title="follow us on twitter">@getpoche</a>. Logo by <a href="http://www.iconfinder.com/icondetails/43256/128/jeans_monotone_pocket_icon">Brightmix</a>. poche is developed by <a href="http://nicolas.loeuillet.org">Nicolas LÅ“uillet</a> under the <a href="http://www.wtfpl.net/">WTFPL</a>.</p>
+ </footer>
+<!DOCTYPE html>
+<!--[if lte IE 6]> <html class="no-js ie6 ie67 ie678" lang="en"> <![endif]-->
+<!--[if lte IE 7]> <html class="no-js ie7 ie67 ie678" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js ie8 ie678" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<html>
- <head>
- <link rel='stylesheet' href='./css/reset.css' type='text/css' media='all' />
- <link rel='stylesheet' href='./css/typography.css' type='text/css' media='all' />
-
- <title>{$title}</title>
- </head>
- <body>
- <article>
- <h1><a href="{$url}">{$title}</a></h1>
- <div id="readityourselfcontent">
- {$content}
- </div>
- <span class="comeFrom">Come From : <a href="{$url}">{$url}</a>
- </article>
- {include="footer"}
- </body>
+ <head>
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=10">
+ <link rel="stylesheet" href="./css/knacss.css" media="all">
+ <link rel="stylesheet" href="./css/style.css" media="all">
+ <title>{$title}</title>
+ </head>
+ <body class="article">
+ <div id="article" class="w600p">
+ <div>
+ <a href="index.php" title="back to home">←</a>
+ </div>
+ <header class="mbm">
+ <h1><a href="{$url}">{$title}</a></h1>
+ <div class="vieworiginal txtright small"><a href="{$url}" target="_blank">view original</a></div>
+ </header>
+ <article>
+ <div id="readityourselfcontent">
+ {$content}
+ </div>
+ </article>
+ </div>
+ {include="footer"}
+ </body>
</html>