Add new theme: Cards (pull-request #224)

README.markdown

@@ -91,6 +91,7 @@ Original author: [Frédéric Guillot](http://fredericguillot.com/)
 People who sent a pull-request, report a bug, make a new theme or share a super cool idea:
 
 - André Kelpe: https://github.com/fs111
+- Augustin Lacour: https://github.com/gugu4-9
 - Ayodio: https://github.com/ayodio
 - Bjauy: https://github.com/bjauy
 - Bohwaz: https://github.com/bohwaz

docs/themes.markdown

@@ -35,6 +35,7 @@ Other themes included in the default installation:
 
 - Bootstrap 3 (Light) by Silvus
 - Bootswatch Cyborg by Silvus
+- Cards by Augustin Lacour
 - Copper by Nicolas Dewaele
 - Green by Maxime (aka EpocDotFr)
 - Midnight by Luca Marra

templates/bookmark_links.php

@@ -12,6 +12,7 @@
 <?php else: ?>
     <a
         id="bookmark-<?= $item['id'] ?>"
+        class="item-bookmark"
         href="?action=bookmark&amp;value=1&amp;id=<?= $item['id'] ?>&amp;menu=<?= $menu ?>&amp;offset=<?= $offset ?>&amp;source=<?= $source ?>"
         data-action="bookmark"
         data-item-id="<?= $item['id'] ?>"

templates/item.php

@@ -1,5 +1,6 @@
 <article
     id="item-<?= $item['id'] ?>"
+    class="feed-<?= $item['feed_id'] ?>"
     data-item-id="<?= $item['id'] ?>"
     data-item-status="<?= $item['status'] ?>"
     data-item-bookmark="<?= $item['bookmark'] ?>"

templates/status_links.php

@@ -1,10 +1,11 @@
 <li class="hide-mobile">
-    <a href="?action=mark-item-removed&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $redirect ?>&amp;feed_id=<?= $item['feed_id'] ?>"><?= t('remove') ?></a>
+    <a class="item-delete" href="?action=mark-item-removed&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $redirect ?>&amp;feed_id=<?= $item['feed_id'] ?>"><?= t('remove') ?></a>
 </li>
 <li>
 <?php if ($item['status'] == 'unread'): ?>
     <a
         id="status-<?= $item['id'] ?>"
+        class="item-mark"
         href="?action=mark-item-read&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $redirect ?>&amp;feed_id=<?= $item['feed_id'] ?>"
         data-action="mark-read"
         data-item-id="<?= $item['id'] ?>"

themes/cards/css/app.css

@@ -0,0 +1,214 @@
+@import url('../../../assets/css/app.css');
+@import url("feed-color.css");
+
+body {
+    max-width: 960px;
+}
+
+/* header */
+header {
+    margin-bottom: 0;
+    margin-top: 20px;
+    background-color: #e4e4e4;
+    padding: 16px 16px;
+    position: relative;
+}
+
+@media only screen and (min-width: 980px) {
+    header::before{
+        content: "";
+        position: absolute;
+        bottom : -15px;
+        left: 0px;
+
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0 15px 15px 0;
+        border-color: transparent #d0d0d0 transparent transparent;
+    }
+
+    header::after{
+        content: "";
+        position: absolute;
+        bottom : -15px;
+        right: 0px;
+
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 15px 15px 0 0;
+        border-color: #d0d0d0 transparent transparent 
+    }
+}
+
+header ul {
+    font-size: 100%;
+}
+
+header a {
+    color: #7c7c7c;
+}
+
+nav .active a {
+    font-weight: normal;
+}
+
+.logo {
+    color: #559966;
+}
+
+.page{
+    max-width: 930px;
+    margin: auto;
+}
+
+.page-header{
+    background-color: #eeeeee;
+    border: 1px solid #e4e4e4;
+    padding: 13px 13px;
+}
+
+.page-section h2,
+.page-header h2 {
+    color: #333;
+    border-bottom: 0;
+}
+
+.page-header h2,
+.page-header ul{
+    display: inline-block;
+}
+
+.page-header li {
+    font-size: 100%;
+    margin-left: 6px;
+    border-right: 1px solid #559966;
+}
+
+.page-header a{
+    text-decoration: none;
+    color: #559966;
+}
+
+/* items listing */
+.items article {
+    border: 0;
+    margin-bottom: 30px;
+    background-color: #e4e4e4;
+    width: 440px;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    margin-right : 25px;
+}
+
+.items article::before{
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 10px;
+    width: 42px;
+    height: 5px;
+}
+
+.items article:nth-child(2n+2){
+    margin-right : 0;
+}
+
+.items #current-item {
+    padding: 2px 2px;
+}
+.items #current-item::before{
+    bottom: -9px;
+    left: 7px;
+    width: 430px;
+    height: 3px;
+    -webkit-transition: width 200ms ease;
+       -moz-transition: width 200ms ease;
+        -ms-transition: width 200ms ease;
+         -o-transition: width 200ms ease;
+            transition: width 200ms ease;
+}
+
+.items h2 {
+    padding: 3px 0 11px 5px;
+    font-weight: normal;
+    min-height: 35px;
+}
+
+.items .preview {
+    line-height: 1.25em;
+    font-size: 100%;
+    font-family: Georgia, serif;
+    overflow: auto;
+    color: #949494;
+    background-color: #eeeeee;
+    padding: 5px 5px;
+    min-height: 125px;
+    width: 430px;
+}
+
+.items .item-menu{
+    font-size: 76%;
+    padding: 5px 0 0 5px;
+    color: #929292;
+}
+
+.items .item-menu a{
+    color: #929292;
+}
+
+.items .item-menu .item-bookmark,
+.items .item-menu .item-delete,
+.items .item-menu .item-mark{
+    color: transparent;
+    text-indent: -9999px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+}
+
+.items .item-menu .item-bookmark{
+    background-image: url("../img/star.png");
+}
+
+.items .item-menu .item-delete{
+    background-image: url("../img/cross.png");
+}
+
+.items .item-menu .item-mark{
+    background-image: url("../img/tick.png");
+}
+
+/* item */
+.item-menu li,
+ul.item-infos li {
+    border-right: 1px solid #929292;
+}
+
+/* responsive for big screen */
+@media only screen and (min-width: 1440px) {
+    body{max-width: 1435px;}
+    .page{max-width: 1405px;}
+    .items article {margin-right : 23px;}
+    .items article:nth-child(2n+2){margin-right : 23px;}
+    .items article:nth-child(3n+3){margin-right : 0;}
+}
+/* responsive for little screen */
+@media only screen and (max-width: 980px) {
+    header {margin-top: 0px;}
+    .items article {
+        margin-bottom: 20px;
+        width: 100%;
+        margin-right : 0;
+        padding: 5px 0;
+    }
+    .items h2{min-height: initial;}
+    .items .preview {
+        width: 98%;
+        min-height: initial;
+    }
+}

themes/cards/css/feed-color.css

@@ -0,0 +1,28 @@
+/*
+Feuille de style contenant la couleur associée à chaque flux
+à remplir manuellement, pour l'instant ;)
+
+A color is associated too every feed,
+feel free to customise it, manualy, for the moment ;)
+
+actual colors from : https://github.com/mrmrs/colors
+*/
+
+
+.feed-1::before{background-color: #001F3F; }
+.feed-2::before{background-color: #7FDBFF; }
+.feed-3::before{background-color: #3D9970; }
+.feed-4::before{background-color: #0074D9; }
+.feed-5::before{background-color: #39CCCC; }
+.feed-6::before{background-color: #2ECC40; }
+.feed-7::before{background-color: #01FF70; }
+.feed-8::before{background-color: #aaa; }
+.feed-9::before{background-color: #111;}
+.feed-10::before{background-color: #FF851B; }
+.feed-11::before{background-color: #F012BE; }
+.feed-12::before{background-color: #fff; }
+.feed-13::before{background-color: #85144B; }
+.feed-14::before{background-color: #B10DC9; }
+.feed-15::before{background-color: #ddd; }
+.feed-16::before{background-color: #FF4136; }
+.feed-17::before{background-color: #FFDC00; }