kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: first separation into components

Browse source
This commit is contained in:
Kazhnuz 2020-01-04 22:24:30 +01:00
parent 0b3ae8b2b0
commit 709c704390
17 changed files with 661 additions and 644 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
dist/apropos.html vendored
View file

@ -107,15 +107,6 @@
</article> </article>
<div class="share-buttons align-right">
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a>
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a>
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a>
</div>
</main> </main>
<section class="sidebar"> <section class="sidebar">
@ -131,36 +122,37 @@
</div> </div>
<div class="card card-primary"> <div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div> <div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu"> <div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a> <a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a> <a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a> <a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div> <div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a> <a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a> <a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div> <div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a> <a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a> <a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a> <a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div> </div>
</div>
<div class="card card-primary"> <div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div> <div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu"> <div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a> <a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a> <a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a> <a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a> <a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a> <a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a> <a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div> </div>
</div>
</section> </section>
</div> </div>

64
dist/blog.html vendored
View file

@ -50,11 +50,12 @@
<div class="container-blog" id="page-content"> <div class="container-blog" id="page-content">
<main class="mainpane"> <main class="mainpane">
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li> <li class="breadcrumb-item"><a href="#">Accueil</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
</ol> </ol>
</nav> </nav>
<div class="toast toast-warning" role="toast"> <div class="toast toast-warning" role="toast">
<p>Attention, cet article a été importé automatiquement des mes précédants blogs/journaux/etc. Il s'agit donc donc de quelque chose d'ancien, et qui n'est peut-être plus pertinent.</p> <p>Attention, cet article a été importé automatiquement des mes précédants blogs/journaux/etc. Il s'agit donc donc de quelque chose d'ancien, et qui n'est peut-être plus pertinent.</p>
@ -155,36 +156,37 @@
</div> </div>
<div class="card card-primary"> <div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div> <div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu"> <div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a> <a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a> <a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a> <a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div> <div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a> <a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a> <a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div> <div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a> <a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a> <a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a> <a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div> </div>
</div>
<div class="card card-primary"> <div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div> <div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu"> <div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a> <a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a> <a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a> <a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a> <a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a> <a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a> <a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div> </div>
</div>
</section> </section>
</div> </div>

105
dist/color-test.html vendored
View file

@ -52,14 +52,12 @@
<div class="column col-9"> <div class="column col-9">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<div class="toast toast-primary" role="toast"> <div class="toast toast-primary" role="toast">
A simple primary toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like. A simple primary toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like.
@ -147,19 +145,96 @@ In id suscipit elit.</code></pre>
</div> </div>
</section> </section>
<section class="partager" style="text-align:right;"> <div class="card card-primary">
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a> <div class="card-header"><i class="fa fa-rss"></i> Publications</div>
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a> <div class="card-menu">
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a> <a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
</section> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div>
</article> </article>
</div> </div>
<aside class="column col-3"> <aside class="column col-3">
<div class="card card-primary">
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
<div class="card-menu">
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div>
</aside> </aside>

213
dist/index.html vendored
View file

@ -71,21 +71,22 @@
<div class="previews-section"> <div class="previews-section">
<article class="card card-preview card-primary"> <article class="card card-preview card-primary">
<a href="#" class="preview-link"> <a href="#" class="preview-link">
<div class="preview-item"> <div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div> <div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div>
<div class="preview-overlay"> <div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1> <h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata"> <div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div> <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div> <div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div> <div class="align-center comment-text">3 commentaires</div>
</div>
</div> </div>
</div> </div>
</a> </div>
</article> </a>
</article>
<article class="card card-preview card-primary"> <article class="card card-preview card-primary">
<a href="#" class="preview-link"> <a href="#" class="preview-link">
@ -103,21 +104,6 @@
</a> </a>
</article> </article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary"> <article class="card card-preview card-primary">
<a href="#" class="preview-link"> <a href="#" class="preview-link">
@ -135,83 +121,118 @@
</a> </a>
</article> </article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
</div> </div>
<img src="https://kazhnuz.space/data/medias/incoming____by_kazhnuz-d5o055l.gif" alt="Une armée de cochon regarde de manière menaçante." class="pigimg" /> <img src="https://kazhnuz.space/data/medias/incoming____by_kazhnuz-d5o055l.gif" alt="Une armée de cochon regarde de manière menaçante." class="pigimg" />
</main> </main>
<section class="sidebar">
<div class="card card-primary">
<div class="card-header">Cémwha</div>
<p class="mwarea"><img src="https://kazhnuz.space/data/medias/spritemwah.png" alt="Une armée de cochon regarde de manière menaçante." class="mwaimg" /></p>
<table style="width:100%" class="table-primary">
<tr>
<th>PSEUDO</th>
<td>Kazhnuz</td>
</tr>
<tr>
<th>Age</th>
<td>26</td>
</tr>
<tr>
<th>Pronoms</th>
<td>iel/il</td>
</tr>
<tr>
<th>OS</th>
<td>Fedora</td>
</tr>
<tr>
<th>Outils</th>
<td>LibreOffice & Krita</td>
</tr>
</table>
</div>
<section class="sidebar"> <div class="card card-primary">
<div class="card card-primary"> <div class="card-header"><i class="fa fa-rss"></i> Publications</div>
<div class="card-header">Cémwha</div> <div class="card-menu">
<p class="mwarea"><img src="https://kazhnuz.space/data/medias/spritemwah.png" alt="Une armée de cochon regarde de manière menaçante." class="mwaimg" /></p> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<table style="width:100%" class="table-primary"> <a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
<tr> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<th>PSEUDO</th> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<td>Kazhnuz</td> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
</tr> </div>
<tr> </div>
<th>Age</th>
<td>26</td>
</tr>
<tr>
<th>Pronoms</th>
<td>iel/il</td>
</tr>
<tr>
<th>OS</th>
<td>Fedora</td>
</tr>
<tr>
<th>Outils</th>
<td>LibreOffice & Krita</td>
</tr>
</table>
</div>
<div class="card card-primary"> <div class="card card-primary">
<div class="card-header"><i class="fa fa-rss"></i> Publications</div> <div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu"> <div class="card-menu">
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a> <a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a> <a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a> <a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a> <a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a> <a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
</div> <a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
</div> <div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div>
<div class="card card-primary"> <div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div> <div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu"> <div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a> <a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a> <a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a> <a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
<div class="menu-divider">FICHES</div> </div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a> </div>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div> </section>
<div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div>
</section>
</div> </div>
</div> </div>

280
dist/preview.html vendored
View file

@ -55,71 +55,178 @@
</ol> </ol>
</nav> </nav>
<div class="previews-section"> <div class="previews-section">
<article class="card card-preview card-primary"> <article class="card card-preview card-primary">
<a href="#" class="preview-link"> <a href="#" class="preview-link">
<div class="preview-item"> <div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div> <div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay"> <div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1> <h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata"> <div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div> <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div> <div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div> <div class="align-center comment-text">3 commentaires</div>
</div> </div>
</div> </div>
</div> </div>
</a> </a>
</article> </article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary"> <article class="card card-preview card-primary">
<a href="#" class="preview-link"> <a href="#" class="preview-link">
<div class="preview-item"> <div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div> <div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay"> <div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1> <h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata"> <div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div> <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div> <div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div> <div class="align-center comment-text">3 commentaires</div>
</div> </div>
</div> </div>
</div> </div>
</a> </a>
</article> </article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
</div> </div>
@ -149,36 +256,37 @@
</div> </div>
<div class="card card-primary"> <div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div> <div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu"> <div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a> <a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a> <a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a> <a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div> <div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a> <a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a> <a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div> <div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a> <a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a> <a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a> <a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a> <a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div> </div>
</div>
<div class="card card-primary"> <div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div> <div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu"> <div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a> <a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a> <a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a> <a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a> <a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a> <a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a> <a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div> </div>
</div>
</section> </section>
</div> </div>

49
dist/writing-test.html vendored
View file

@ -91,15 +91,50 @@
<p id="1">[1] : Sed et odio volutpat, convallis est et, interdum sapien.</p> <p id="1">[1] : Sed et odio volutpat, convallis est et, interdum sapien.</p>
</article> </article>
<div class="share-buttons align-right"> <div class="card card-primary">
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a> <div class="card-header"><i class="fa fa-rss"></i> Publications</div>
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a> <div class="card-menu">
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a> <a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a> <a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
</div>
</div> </div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div>
<section class="card card-noheader"> <section class="card card-noheader">
<div class="author-area"> <div class="author-area">
<img src="img/avatar.png" class="author-avatar" alt="..."> <img src="img/avatar.png" class="author-avatar" alt="...">

52
src/apropos.html
View file

@ -77,60 +77,10 @@
</article> </article>
<div class="share-buttons align-right">
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a>
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a>
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a>
</div>
</main> </main>
<section class="sidebar"> <section class="sidebar">
<div class="card card-primary"> <!--=include includes/components/_sidebar.html -->
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
<div class="card-menu">
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div>
</section> </section>
</div> </div>

49
src/blog.html
View file

@ -20,11 +20,7 @@
<div class="container-blog" id="page-content"> <div class="container-blog" id="page-content">
<main class="mainpane"> <main class="mainpane">
<nav aria-label="breadcrumb"> <!--=include includes/components/_breadcrumb.html -->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
</ol>
</nav>
<div class="toast toast-warning" role="toast"> <div class="toast toast-warning" role="toast">
<p>Attention, cet article a été importé automatiquement des mes précédants blogs/journaux/etc. Il s'agit donc donc de quelque chose d'ancien, et qui n'est peut-être plus pertinent.</p> <p>Attention, cet article a été importé automatiquement des mes précédants blogs/journaux/etc. Il s'agit donc donc de quelque chose d'ancien, et qui n'est peut-être plus pertinent.</p>
@ -113,48 +109,7 @@
</main> </main>
<section class="sidebar"> <section class="sidebar">
<div class="card card-primary"> <!--=include includes/components/_sidebar.html -->
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
<div class="card-menu">
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div>
</section> </section>
</div> </div>

20
src/color-test.html
View file

@ -22,14 +22,7 @@
<div class="column col-9"> <div class="column col-9">
<!--=include includes/components/_breadcrumb.html -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<div class="toast toast-primary" role="toast"> <div class="toast toast-primary" role="toast">
A simple primary toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like. A simple primary toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like.
@ -117,20 +110,13 @@ In id suscipit elit.</code></pre>
</div> </div>
</section> </section>
<section class="partager" style="text-align:right;"> <!--=include includes/components/_sidebar.html -->
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a>
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a>
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a>
</section>
</article> </article>
</div> </div>
<aside class="column col-3"> <aside class="column col-3">
<!--=include includes/components/_sidebar.html -->
</aside> </aside>
</div> </div>

5
src/includes/components/_breadcrumb.html Normal file
View file

@ -0,0 +1,5 @@
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
</ol>
</nav>

15
src/includes/components/_preview-image.html Normal file
View file

@ -0,0 +1,15 @@
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>

15
src/includes/components/_preview-text.html Normal file
View file

@ -0,0 +1,15 @@
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>

8
src/includes/components/_share.html Normal file
View file

@ -0,0 +1,8 @@
<div class="share-buttons align-right">
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a>
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a>
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a>
</div>

42
src/includes/components/_sidebar.html Normal file
View file

@ -0,0 +1,42 @@
<div class="card card-primary">
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
<div class="card-menu">
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div>

164
src/index.html
View file

@ -41,147 +41,51 @@
<div class="previews-section"> <div class="previews-section">
<article class="card card-preview card-primary"> <!--=include includes/components/_preview-image.html -->
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary"> <!--=include includes/components/_preview-text.html -->
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary"> <!--=include includes/components/_preview-text.html -->
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary"> <!--=include includes/components/_preview-image.html -->
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<!--=include includes/components/_preview-text.html -->
</div> </div>
<img src="https://kazhnuz.space/data/medias/incoming____by_kazhnuz-d5o055l.gif" alt="Une armée de cochon regarde de manière menaçante." class="pigimg" /> <img src="https://kazhnuz.space/data/medias/incoming____by_kazhnuz-d5o055l.gif" alt="Une armée de cochon regarde de manière menaçante." class="pigimg" />
</main> </main>
<section class="sidebar">
<div class="card card-primary">
<div class="card-header">Cémwha</div>
<p class="mwarea"><img src="https://kazhnuz.space/data/medias/spritemwah.png" alt="Une armée de cochon regarde de manière menaçante." class="mwaimg" /></p>
<table style="width:100%" class="table-primary">
<tr>
<th>PSEUDO</th>
<td>Kazhnuz</td>
</tr>
<tr>
<th>Age</th>
<td>26</td>
</tr>
<tr>
<th>Pronoms</th>
<td>iel/il</td>
</tr>
<tr>
<th>OS</th>
<td>Fedora</td>
</tr>
<tr>
<th>Outils</th>
<td>LibreOffice & Krita</td>
</tr>
</table>
</div>
<section class="sidebar"> <!--=include includes/components/_sidebar.html -->
<div class="card card-primary">
<div class="card-header">Cémwha</div>
<p class="mwarea"><img src="https://kazhnuz.space/data/medias/spritemwah.png" alt="Une armée de cochon regarde de manière menaçante." class="mwaimg" /></p>
<table style="width:100%" class="table-primary">
<tr>
<th>PSEUDO</th>
<td>Kazhnuz</td>
</tr>
<tr>
<th>Age</th>
<td>26</td>
</tr>
<tr>
<th>Pronoms</th>
<td>iel/il</td>
</tr>
<tr>
<th>OS</th>
<td>Fedora</td>
</tr>
<tr>
<th>Outils</th>
<td>LibreOffice & Krita</td>
</tr>
</table>
</div>
<div class="card card-primary"> </section>
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
<div class="card-menu">
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div>
</section>
</div> </div>
</div> </div>

125
src/preview.html
View file

@ -19,77 +19,29 @@
<div class="container-preview"> <div class="container-preview">
<main class="mainpane"> <main class="mainpane">
<nav aria-label="breadcrumb"> <!--=include includes/components/_breadcrumb.html -->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
</ol>
</nav>
<div class="previews-section"> <div class="previews-section">
<article class="card card-preview card-primary"> <!--=include includes/components/_preview-text.html -->
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary"> <!--=include includes/components/_preview-text.html -->
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary"> <!--=include includes/components/_preview-text.html -->
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary"> <!--=include includes/components/_preview-image.html -->
<a href="#" class="preview-link">
<div class="preview-item"> <!--=include includes/components/_preview-text.html -->
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay"> <!--=include includes/components/_preview-image.html -->
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata"> <!--=include includes/components/_preview-text.html -->
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div> <!--=include includes/components/_preview-text.html -->
<div class="align-center comment-text">3 commentaires</div>
</div> <!--=include includes/components/_preview-image.html -->
</div>
</div> <!--=include includes/components/_preview-image.html -->
</a>
</article>
</div> </div>
@ -107,48 +59,7 @@
</div> </div>
</div> </div>
<div class="card card-primary"> <!--=include includes/components/_sidebar.html -->
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
<div class="card-menu">
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<div class="card-menu">
<a href="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
<div class="menu-divider">FICHES</div>
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
<div class="menu-divider">BLOG</div>
<a href="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
<a href="#" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
</div>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
<div class="card-menu">
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
</div>
</div>
</section> </section>
</div> </div>

9
src/writing-test.html
View file

@ -61,14 +61,7 @@
<p id="1">[1] : Sed et odio volutpat, convallis est et, interdum sapien.</p> <p id="1">[1] : Sed et odio volutpat, convallis est et, interdum sapien.</p>
</article> </article>
<div class="share-buttons align-right"> <!--=include includes/components/_sidebar.html -->
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a>
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a>
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a>
</div>
<section class="card card-noheader"> <section class="card card-noheader">
<div class="author-area"> <div class="author-area">