feat: ajout du support des romans

Fixes #3
This commit is contained in:
Kazhnuz 2020-12-27 21:13:25 +01:00
parent 95dc3b05fe
commit 1e1cee17a4
9 changed files with 181 additions and 20 deletions

BIN
assets/img/cover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

View file

@ -109,6 +109,14 @@ $card-smallpad: $lineheight_half;
font-weight: 900;
color:$color-dark!important;
}
&.noflex {
& :first-child {
min-width:2rem;
}
justify-content: flex-start;
}
}
a {

View file

@ -111,6 +111,9 @@ $preview-height: 8*$lineheight;
.preview-content {
max-height: $preview-height;
overflow:hidden;
background-size: cover;
min-height:100%;
min-width:100%;
h1, h2, h3, h4, h5, h6 {
margin-bottom:0px;
@ -156,6 +159,20 @@ $preview-height: 8*$lineheight;
}
}
.card-preview.card-info {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-skyblue, 16);
background-color:$color-skyblue;
}
}
.card-preview.card-grey {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-grey, 16);
background-color:$color-grey;
}
}
.comment-text {
@include angled-edge('outside top', 'upper left', $color-violet, 16);
color: $color-light;
@ -217,3 +234,17 @@ $preview-height: 8*$lineheight;
display:block;
margin:auto;
}
.cover {
width:100%;
height:auto;
}
.roman {
@include md() {
width:80%;
position:relative;
top:-240px;
margin:auto;
}
}

View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Kazhnuz Space</title>
<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<!--=include includes/_links.html -->
</head>
<body>
<div id="wrapper">
<!--=include includes/_header.html -->
<div class="container-blog">
<main class="mainpane">
<img class="cover" src="img/cover.png">
<div class="roman">
<div class="card">
<h1>Roman OSEF</h1>
<div class="card-body">
<p>Roman OSEF est un roman explorant les profondeur de l'esprit humain. Qui sommes nous, pourquoi vivons nous. A travers son histoire, Jean-Marie NomDeBourge va recontrer comme dans tout ces romans de vieux auteurs une jeune femme et en tomber amoureux et oh mon dieux c'est trop cringe je préfère pas continuer.</p>
<p>A la place, je tiens à dire que mon bb chat est trop mignon.</p>
<p><em>Source de la couverture : </em> <a href="#">via ??????</a></p>
</div>
</div>
<div class="download align-center">
<a href="#" class="btn btn-primary">Télécharger au format PDF</a>
<a href="#" class="btn btn-info">Télécharger au format ePub</a>
</div>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-list"></i> Chapitres</div>
<div class="card-menu">
<a href="crea-ecrit.html" class="menu-element noflex"><strong>1.</strong> Nom de chapitre générique</a>
<a href="crea-ecrit.html" class="menu-element noflex"><strong>2.</strong> Nom de chapitre générique</a>
<a href="crea-ecrit.html" class="menu-element noflex"><strong>3.</strong> Nom de chapitre générique</a>
<a href="crea-ecrit.html" class="menu-element noflex"><strong>4.</strong> Nom de chapitre générique</a>
<a href="crea-ecrit.html" class="menu-element noflex"><strong>4.</strong> Nom de chapitre générique</a>
<a href="crea-ecrit.html" class="menu-element noflex"><strong>5.</strong> Nom de chapitre générique</a>
<a href="crea-ecrit.html" class="menu-element noflex"><strong>6.</strong> Nom de chapitre générique</a>
<a href="crea-ecrit.html" class="menu-element noflex"><strong>7.</strong> Nom de chapitre générique</a>
<a href="crea-ecrit.html" class="menu-element noflex"><strong>8.</strong> Nom de chapitre générique</a>
<a href="crea-ecrit.html" class="menu-element noflex"><strong>9.</strong> Nom de chapitre générique</a>
<a href="crea-ecrit.html" class="menu-element noflex"><strong>10.</strong> Nom de chapitre générique</a>
</div>
</div>
</div>
</main>
<section class="sidebar">
<div class="card card-info">
<div class="card-header">
<i class="fa fa-fw fa-info"></i>&nbsp; Romans
</div>
<div class="card-body">
<p> Tout mes textes en plusieurs chapitres, qu'ils soient des romans, des light novels, etc. </p>
</div>
</div>
<!--=include includes/components/_sidebar.html -->
</section>
</div>
</div>
<!--=include includes/_footer.html -->
<script src="js/trim.js"></script>
</body>
</html>

View file

@ -21,37 +21,31 @@
<main class="mainpane">
<!--=include includes/components/_breadcrumb.html -->
<div class="toast toast-info" role="toast">
<p>Toutes mes créations mises en avant, celles que je trouve les plus pertinente à regarder</p>
</div>
<div class="previews-section">
<!--=include includes/components/_preview-text.html -->
<!--=include includes/components/_preview-book-termine.html -->
<!--=include includes/components/_preview-text.html -->
<!--=include includes/components/_preview-book.html -->
<!--=include includes/components/_preview-text.html -->
<!--=include includes/components/_preview-book.html -->
<!--=include includes/components/_preview-image.html -->
<!--=include includes/components/_preview-book-archive.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 -->
<!--=include includes/components/_preview-book-archive.html -->
</div>
</main>
<section class="sidebar">
<div class="card card-info">
<div class="card-header">
<i class="fa fa-fw fa-info"></i>&nbsp; Romans
</div>
<div class="card-body">
<p> Tout mes textes en plusieurs chapitres, qu'ils soient des romans, des light novels, etc. </p>
</div>
</div>
<!--=include includes/components/_sidebar.html -->
</section>
</div>

View file

@ -6,7 +6,7 @@
<div class="navbar-area">
<a href="/blog.html" class="btn btn-navbar">Blog</a>
<a href="/crea.html" class="btn btn-navbar">Gallerie</a>
<a href="/crea.html" class="btn btn-navbar">Romans</a>
<a href="/apropos.html" class="btn btn-navbar">A propos</a>
</div>
</div>

View file

@ -0,0 +1,17 @@
<article class="card card-preview card-grey">
<a href="crea-roman.html" class="preview-link">
<div class="preview-item">
<div class="preview-content" style="background-image:url('/img/cover.png');"></div>
<div class="preview-overlay">
<h1 class="card-header">Roman générique osef</h1>
<div class="preview-metadata">
<div class="metadata-pills">
<div class="align-right"><time><span class="chip chip-grey">27/02/2017</span></time></div>
<div class="align-left"><span class="chip chip-grey">video</span></div>
</div>
<div class="comment-text">500 Chapitres (archivé)</div>
</div>
</div>
</div>
</a>
</article>

View file

@ -0,0 +1,17 @@
<article class="card card-preview card-info">
<a href="crea-roman.html" class="preview-link">
<div class="preview-item">
<div class="preview-content" style="background-image:url('/img/cover.png');"></div>
<div class="preview-overlay">
<h1 class="card-header">Roman générique osef</h1>
<div class="preview-metadata">
<div class="metadata-pills">
<div class="align-right"><time><span class="chip chip-info">27/02/2017</span></time></div>
<div class="align-left"><span class="chip chip-info">video</span></div>
</div>
<div class="comment-text">500 Chapitres (complet)</div>
</div>
</div>
</div>
</a>
</article>

View file

@ -0,0 +1,17 @@
<article class="card card-preview card-primary">
<a href="crea-roman.html" class="preview-link">
<div class="preview-item">
<div class="preview-content" style="background-image:url('/img/cover.png');"></div>
<div class="preview-overlay">
<h1 class="card-header">Roman générique osef</h1>
<div class="preview-metadata">
<div class="metadata-pills">
<div class="align-right"><time><span class="chip chip-primary">27/02/2017</span></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
</div>
<div class="comment-text">12 Chapitres (en cours)</div>
</div>
</div>
</div>
</a>
</article>