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>
<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>
<section class="sidebar">
@ -131,36 +122,37 @@
</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 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>
<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 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>
</div>
</section>
</div>

64
dist/blog.html vendored
View file

@ -50,11 +50,12 @@
<div class="container-blog" id="page-content">
<main class="mainpane">
<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="#">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">
<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 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 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>
<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 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>
</div>
</section>
</div>

105
dist/color-test.html vendored
View file

@ -52,14 +52,12 @@
<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">
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>
</section>
<section class="partager" style="text-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>
</section>
<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>
</article>
</div>
<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>

213
dist/index.html vendored
View file

@ -71,21 +71,22 @@
<div class="previews-section">
<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>
<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>
</a>
</article>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
@ -103,21 +104,6 @@
</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">
@ -135,83 +121,118 @@
</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>
<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>
<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-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">
<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-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-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>
<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>

280
dist/preview.html vendored
View file

@ -55,71 +55,178 @@
</ol>
</nav>
<div class="previews-section">
<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>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>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>
@ -149,36 +256,37 @@
</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 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>
<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 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>
</div>
</section>
</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>
</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 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>
<section class="card card-noheader">
<div class="author-area">
<img src="img/avatar.png" class="author-avatar" alt="...">

52
src/apropos.html
View file

@ -77,60 +77,10 @@
</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>
<section class="sidebar">
<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>
<!--=include includes/components/_sidebar.html -->
</section>
</div>

49
src/blog.html
View file

@ -20,11 +20,7 @@
<div class="container-blog" id="page-content">
<main class="mainpane">
<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>
<!--=include includes/components/_breadcrumb.html -->
<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>
@ -113,48 +109,7 @@
</main>
<section class="sidebar">
<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>
<!--=include includes/components/_sidebar.html -->
</section>
</div>

20
src/color-test.html
View file

@ -22,14 +22,7 @@
<div class="column col-9">
<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>
<!--=include includes/components/_breadcrumb.html -->
<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.
@ -117,20 +110,13 @@ In id suscipit elit.</code></pre>
</div>
</section>
<section class="partager" style="text-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>
</section>
<!--=include includes/components/_sidebar.html -->
</article>
</div>
<aside class="column col-3">
<!--=include includes/components/_sidebar.html -->
</aside>
</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">
<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>
<!--=include includes/components/_preview-image.html -->
<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>
<!--=include includes/components/_preview-text.html -->
<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>
<!--=include includes/components/_preview-text.html -->
<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>
<!--=include includes/components/_preview-image.html -->
<!--=include includes/components/_preview-text.html -->
</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" />
</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-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>
<!--=include includes/components/_sidebar.html -->
<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>
</section>
</section>
</div>
</div>

125
src/preview.html
View file

@ -19,77 +19,29 @@
<div class="container-preview">
<main class="mainpane">
<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>
<!--=include includes/components/_breadcrumb.html -->
<div class="previews-section">
<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>
<!--=include includes/components/_preview-text.html -->
<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>
<!--=include includes/components/_preview-text.html -->
<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>
<!--=include includes/components/_preview-text.html -->
<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>
<!--=include includes/components/_preview-image.html -->
<!--=include includes/components/_preview-text.html -->
<!--=include includes/components/_preview-image.html -->
<!--=include includes/components/_preview-text.html -->
<!--=include includes/components/_preview-text.html -->
<!--=include includes/components/_preview-image.html -->
<!--=include includes/components/_preview-image.html -->
</div>
@ -107,48 +59,7 @@
</div>
</div>
<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>
<!--=include includes/components/_sidebar.html -->
</section>
</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>
</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>
<!--=include includes/components/_sidebar.html -->
<section class="card card-noheader">
<div class="author-area">