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

feat: add new preview elements

Browse source
This commit is contained in:
Kazhnuz 2019-10-17 15:23:55 +02:00
parent 3bf7672b06
commit 75e0c6b39f
3 changed files with 218 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
index.html
View file

@ -123,71 +123,71 @@ In id suscipit elit.</code></pre>
</article>
<div class="previews-section prev-col-3">
<div class="previews-section">
<div class="preview-container">
<article class="card card-preview">
<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"></p></div>
<div class="preview-overlay"><h1>Image Exemple</h1></div>
<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>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<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>Text Exemple</h1></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>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<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>Text Exemple</h1></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>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<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>Text Exemple</h1></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>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-primary">categorie</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> <a href="" class="chip chip-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
</div>

107
preview.html
View file

@ -120,92 +120,85 @@
</nav>
<div class="previews-section prev-col-3">
<div class="preview-container">
<article class="card card-preview">
<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"></p></div>
<div class="preview-overlay"><h1>#Inktober2017 - Day 27. Deep</h1></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">
<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>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<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"></p></div>
<div class="preview-overlay"><h1>#Inktober2017 - Day 27. Deep</h1></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">
<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>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Édeline regardait le gouffre qui se trouvait devant elle. Un trou béant dans le sol. Une crevasse dont le fond n’était pas visible. Des kilomètres de diamètres, et une profondeur inconnue. Une brume emplissait le gigantesque cratère, rendant impossible toute mesure. Seule l’ombre, l’obscurité la plus totale semblait se trouver au bout de la chute. Les bords étaient abrupts et impossibles à escalader, dans un sens comme dans l’autre, et même avec une corde ou un appareil volant, les vents violents qui s’engouffraient feraient se percuter violemment contre les murs quelqu’un qui tenterait une descente.</p>
<p>Personne ne savait ce qui se trouvait au fond de ce gouffre, derrière toute cette brume.</p></div>
<div class="preview-overlay"><h1>#Inktober2017 - Day 27. Deep</h1></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">
<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>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Édeline regardait le gouffre qui se trouvait devant elle. Un trou béant dans le sol. Une crevasse dont le fond n’était pas visible. Des kilomètres de diamètres, et une profondeur inconnue. Une brume emplissait le gigantesque cratère, rendant impossible toute mesure. Seule l’ombre, l’obscurité la plus totale semblait se trouver au bout de la chute. Les bords étaient abrupts et impossibles à escalader, dans un sens comme dans l’autre, et même avec une corde ou un appareil volant, les vents violents qui s’engouffraient feraient se percuter violemment contre les murs quelqu’un qui tenterait une descente.</p>
<p>Personne ne savait ce qui se trouvait au fond de ce gouffre, derrière toute cette brume.</p></div>
<div class="preview-overlay"><h1>#Inktober2017 - Day 27. Deep</h1></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">
<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>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Édeline regardait le gouffre qui se trouvait devant elle. Un trou béant dans le sol. Une crevasse dont le fond n’était pas visible. Des kilomètres de diamètres, et une profondeur inconnue. Une brume emplissait le gigantesque cratère, rendant impossible toute mesure. Seule l’ombre, l’obscurité la plus totale semblait se trouver au bout de la chute. Les bords étaient abrupts et impossibles à escalader, dans un sens comme dans l’autre, et même avec une corde ou un appareil volant, les vents violents qui s’engouffraient feraient se percuter violemment contre les murs quelqu’un qui tenterait une descente.</p>
<p>Personne ne savait ce qui se trouvait au fond de ce gouffre, derrière toute cette brume.</p></div>
<div class="preview-overlay"><h1>#Inktober2017 - Day 27. Deep</h1></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">
<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>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
</div>
</div>

143
scss/_commons.scss
View file

@ -8,16 +8,18 @@
/* ------------------ PREVIEWS ------------------- */
$preview-height: 8*1.5rem;
.previews-section {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
display: grid;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-gap: 1.5rem;
}
.preview-container {
margin-bottom:1em;
padding:0.4em;
width:100%
width:100%;
}
@media(max-width:767px){}
@ -39,7 +41,7 @@
}
.card-preview {
@include border-radius();
padding:0;
width:100%;
margin:auto;
box-shadow: $large-shadow, $inset-shadow;
@ -50,95 +52,100 @@
}
.preview-item {
height:200px;
overflow:hidden;
font-size:0.9em;
line-height: 1.5em !important;
height: $preview-height;
font-size:0.9rem;
line-height: 1.5rem !important;
padding:0.2em;
text-align:justify;
background-color:rgba(0,0,0,0.05);
background-color:rgba(0,0,0,0.00);
color:rgba(0,0,0,0.4);
position: relative;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
.preview-overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
padding: 0.75rem;
backdrop-filter: none;
transition: background 0.3s;
h1, h2, h3, h4, h5, h6 {
color: $color-light;
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
font-size: 1rem;
line-height: 1.5rem;
font-weight:200;
}
.card-header {
font-family: Work Sans;
font-size: 1rem;
background-color: $color-primary;
@include card-header(0.75rem);
font-weight:200;
}
}
&:hover {
.preview-overlay {
backdrop-filter: blur(2px);
background-color:rgba(0,0,0,0.4);
.preview-metadata {
opacity: .9;
transition: opacity .5s;
}
}
}
}
.preview-content {
max-height:200px;
}
max-height: $preview-height;
overflow:hidden;
.preview-content > p {
h1, h2, h3, h4, h5, h6 {
margin-bottom:0px;
max-width:100%;
display:none;
}
& > p {
width:100%;
margin:auto;
}
.preview-content > p.p-img {
text-align:center;
margin:auto;
padding:auto;
display: block;
width:100%;
}
.preview-content > p > img {
& > img {
max-width:100%;
height:auto;
vertical-align:middle;
margin:auto;
text-align:center;
}
}
.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
margin-bottom:0px;
max-width:100%;
display:none;
}
.preview-item h1 {
display:none;
}
.preview-overlay {
height: 100%;
width: 100%;
opacity: 0;
top: 0;
left: 0;
position: absolute;
padding: 0;
transition: opacity .5s;
color: $color-light;
background-color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
backdrop-filter: none;
}
.preview-overlay h1 {
max-width:100%;
padding-top:0.3em;
margin:auto;
margin-bottom:0px;
&.p-img {
text-align:center;
display:block;
font-size:2em;
color: $color-light;
margin:auto;
padding:auto;
display: block;
width:100%;
}
}
}
.preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10 {
.preview-metadata {
opacity: 0;
transition: opacity .3s;
color: $color-light;
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
}
.preview-item:hover .preview-overlay {
opacity: .9;
transition: opacity .5s;
backdrop-filter: blur(2px);
}
.comment-text {
margin-top:0.8em;
@ -149,6 +156,8 @@
display:block;
}
// Author area
.author-area {
display:flex;