Karoo generative cover image

generate a graphic poster image behind the title

by pixeline

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<article data-author-article-amount="2" data-category-color="#39CCCC" data-article-type="critique" data-article-publication-age="45">
    <header class="entry-header" id="gfx">
        	<h1 class="entry-title ">100 Papiers, librairie de livres et de vie</h1>
	<small class="entry-meta contain">
			<span class="entry-date"><a href="http://dev.karoo.me/propose/un-article-sur/100-papiers-librairie-de-livres-et-de-vie" rel="bookmark"><time class="entry-date" datetime="2013-12-31T14:37:41+00:00">31 décembre 2013</time></a></span> 
			
				<span class="author">par <span class="author vcard"><a class="url fn n" href="http://dev.karoo.me/author/lorentcorbeel" rel="author">LORENT CORBEEL</a></span></span>

		</small>

        <!-- .entry-meta -->
    </header>
    <!-- .entry-header -->
    <div class="entry-content contain">
        <p class="intro">Au c&#339;ur de Schaerbeek, le long de la magnifique avenue Louis-Bertrand, s&#8217;ouvrent les portes de la librairie 100 Papiers. Ses fondateurs, qui l&#8217;ont inaugur&#233;e en 2011, ont c&#233;d&#233; l&#8217;ann&#233;e suivante les cl&#233;s de la boutique &#224; V&#233;ronique Thirionet. Celle-ci poursuit l&#8217;aventure d&#8217;une librairie qui se veut ouverte sur son quartier et sur le monde. Ou comment un commerce peut aussi &#234;tre un espace citoyen.</p>
        <p>Une grande table, un bar et la <a href="javascript:void(0)">presse quotidienne</a>
, presse particuli&#232;re et magazine : il n&#8217;y pas que des livres dans la librairie.</p>
        <p>L&#8217;aventure a d&#233;but&#233; par une vraie interrogation sur l&#8217;opportunit&#233; de proposer de la presse. D&#8217;abord, c&#8217;est beaucoup de boulot. De la logistique, mais aussi un contr&#244;le permanent vis-&#224;-vis des AMP. Ce groupe poss&#232;de un monopole en Belgique et se comporte comme tel. Cela exige donc une attention constante pour ne pas se...

CSS

article body {
    font-family:jaf-bernino-sans;
    font-size:16px;
    line-height:25px
}
article blockquote {
    margin-bottom:25px;
    margin-top:25px;
    font-size:32px;
    line-height:50px;
    text-align:left;
    text-indent:16px;
    color:#8c8a8a
}
article h1 {
    font-size:75px;
    line-height:90px;
    margin-bottom:25px;
    font-family:"GeorgiaProW01-CnRegular", georgia, serif;
    color:#262626
}
article h2 {
    font-size:22px;
    line-height:22px;
    letter-spacing:1px;
    text-transform:uppercase;
    font-family:jaf-bernino-sans;
    margin:50px 0px 25px 0px;
    font-weight:400;
    font-style:normal
}
article p {
    text-indent:0em;
    margin-bottom:25px;
    color:#656565;
    font-family:"jaf-bernino-sans";
    font-weight:300;
    font-style:normal
}
article p.author {
    text-indent:0px;
    margin-bottom:25px;
    font-size:14px;
    letter-spacing:1px;
    color:#666464;
    line-height:25px;
    font-family:jaf-bernino-sans;
    font-weight:400;
    font-style:normal
}
article p.intro {
    text-indent:0px;
    margin-bottom:15px;
    line-height:37px;
    font-size:24px;
    letter-spacing:0px;
    font-family:"jaf-bernino-sans";
    font-weight:300;
    font-style:normal
}
article p.first {
    margin-bottom:25px;
    font-family:"jaf-bernino-sans";
    font-weight:300;
    font-style:normal
}
article p.callout {
    text-indent:0em;
    margin-bottom:25px;
    font-size:29px;
    line-height:50px;
    border-left:3px solid #333;
    padding-left:25px;
    margin-left:-28px;
    font-family:jaf-bernino-sans;
    font-weight:400;
    font-style:normal;
    width:446px
}
article p a {
    color:#0074D9;
    -webkit-transition:.4s all;
    transition:.4s all;
    color:#30BBDB
}
article p a:link {
    color:#30BBDB
}
article p a:visited {
    color:#2D243B
}
article p a:hover {
    color:#004EAB
}
article p a:active {
    color:#C4E3E0
}
article strong {
    font-family:"jaf-bernino-sans";
    font-weight:700;
   ...

JavaScript

/*
paramètres:
- nombres d'articles de l'auteur: data-author-article-amount
- catégorie de l'article (couleur (1/5) ) data-category-color
- longueur du texte en mots: data-article-wordcount
- type d'article: critique / interview / magazine : media data-article-type  > ligne solide / cercle plein / rectangle
- vieillesse de l'article: data-article-publication-age > couleur de fond: de blanc > jaune pale > bleu pale.

les paramètre secondaires (orientation de la ligne, dimension L / l d'un rectangle) = random (ainsi on varie à chaque refresh).
*/