feat: rework how the site are shown
This commit is contained in:
Kazhnuz
parent
b171b4bf80
commit
73a125baa9
3 changed files with 53 additions and 130 deletions
|
|
@ -1,135 +1,58 @@
|
||||||
|
.card-link {
|
||||||
|
background-color:white;
|
||||||
|
padding:1rem;
|
||||||
|
p, h4 {
|
||||||
|
text-align: center;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-bottom:1rem;
|
||||||
|
}
|
||||||
|
.powered-text {
|
||||||
|
margin-top:1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.previews-section {
|
.acceder {
|
||||||
@include md {
|
display: inline;
|
||||||
display: grid;
|
padding-right:0.5rem;
|
||||||
grid-template-columns: auto auto;
|
}
|
||||||
grid-template-rows: auto;
|
@include md() {
|
||||||
grid-gap: 1.5rem;
|
display:flex;
|
||||||
padding-bottom: 1.5rem;
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding:0;
|
||||||
|
.card-text {
|
||||||
|
flex-grow: 1;
|
||||||
|
width:100%
|
||||||
|
}
|
||||||
|
p, h4 {
|
||||||
|
padding:0;
|
||||||
|
padding-left:1rem;
|
||||||
|
padding-right:1rem;
|
||||||
|
margin:0;
|
||||||
|
display:flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include xxl {
|
.acceder {
|
||||||
grid-template-columns: auto auto auto;
|
display: none;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-container {
|
|
||||||
width:100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-preview {
|
|
||||||
@include border-radius();
|
|
||||||
width:100%;
|
|
||||||
margin:auto;
|
|
||||||
box-shadow: $large-shadow, $inset-shadow;
|
|
||||||
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
|
|
||||||
@include lg {
|
|
||||||
margin-bottom:0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-link:hover {
|
|
||||||
text-decoration:none!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-item {
|
|
||||||
height:200px;
|
|
||||||
overflow:hidden;
|
|
||||||
font-size:0.9em;
|
|
||||||
line-height: 1.5em !important;
|
|
||||||
padding:0.2em;
|
|
||||||
text-align:justify;
|
|
||||||
background-color: get-color("light");
|
|
||||||
color:rgba(0,0,0,0.4);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
-ms-flex-align: center !important;
|
|
||||||
align-items: center !important;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-content {
|
|
||||||
max-height:200px;
|
|
||||||
& > p {
|
|
||||||
width:100%;
|
|
||||||
margin:auto;
|
|
||||||
|
|
||||||
&.p-img {
|
|
||||||
text-align:center;
|
|
||||||
margin:auto;
|
|
||||||
padding:auto;
|
|
||||||
display: block;
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > img {
|
|
||||||
max-width:100%;
|
|
||||||
height:auto;
|
|
||||||
vertical-align:middle;
|
|
||||||
margin:auto;
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
p {
|
||||||
|
text-align: left;
|
||||||
.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: #FFF;
|
|
||||||
background-color: rgba(0,0,0,0.5);
|
|
||||||
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
|
|
||||||
backdrop-filter: none;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
max-width:100%;
|
|
||||||
padding-top:0.3em;
|
|
||||||
margin:auto;
|
|
||||||
margin-bottom:0px;
|
|
||||||
text-align:center;
|
|
||||||
display:block;
|
|
||||||
font-size:2em;
|
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
h4 {
|
||||||
color:white;
|
width:170px;
|
||||||
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-item:hover .preview-overlay {
|
.powered-text {
|
||||||
opacity: .9;
|
width:120px;
|
||||||
transition: opacity .5s;
|
flex-grow:2;
|
||||||
backdrop-filter: blur(2px);
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.comment-text {
|
|
||||||
margin-top:0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-preview time {
|
|
||||||
margin-bottom:0.4em;
|
|
||||||
display:block;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<aside class="col-md-4">
|
<aside class="col-lg-4">
|
||||||
<div class="card card-blue" id="welcome">
|
<div class="card card-blue" id="welcome">
|
||||||
<div class="card-header"><i class="fa fa-list"></i> Navigation</div>
|
<div class="card-header"><i class="fa fa-list"></i> Navigation</div>
|
||||||
<div class="list-group list-group-flush">
|
<div class="list-group list-group-flush">
|
||||||
|
|
@ -77,9 +77,9 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="https://vault.kobold.city" class="btn btn-dark btn-block">Vault</a>
|
<a href="https://vault.kobold.city" class="btn btn-dark btn-block mb-3">Vault</a>
|
||||||
</aside>
|
</aside>
|
||||||
<main class="col-md-8">
|
<main class="col-lg-8">
|
||||||
<h2 id="projets"><i class="fa fa-folder"></i> Projets</h2>
|
<h2 id="projets"><i class="fa fa-folder"></i> Projets</h2>
|
||||||
<div class="row site-cards">
|
<div class="row site-cards">
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -101,7 +101,7 @@
|
||||||
<div class="row site-cards">
|
<div class="row site-cards">
|
||||||
<script>
|
<script>
|
||||||
//renderSite({title: "Quarante-douze", description: "Un blog qui parle d'informatique, de culture libre et d'internet.", color: "red", url: "https://quarante-douze.net", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"});
|
//renderSite({title: "Quarante-douze", description: "Un blog qui parle d'informatique, de culture libre et d'internet.", color: "red", url: "https://quarante-douze.net", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"});
|
||||||
renderSite({title: "kazhnuz.space", description: "Mon blog personnel.", color: "purple", url: "https://kazhnuz.space", urlpoweredby: "https://www.pluxml.org/", poweredby: "pluXML"});
|
renderSite({title: "Kazhnuz Space", description: "Mon blog personnel.", color: "purple", url: "https://kazhnuz.space", urlpoweredby: "https://www.pluxml.org/", poweredby: "pluXML"});
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
let template = "<div class='col-md-6'><div class='card card-<%= color %> mb-4 box-shadow card-border'><div class='card-body'><h4 class='align-center'><%= title %></h4><p class='card-text'><%= description %></p><div class='align-center'><div class='btn-group'><a type='button' href='<%= url %>' class='btn btn-<%= color %>'>Accéder</a></div><div><p class='powered-text'>powered by <a href='<%= urlpoweredby %>'><%= poweredby %></a></p></div></div></div></div></div>"
|
let template = "<div class='col-md-12'><div class='card card-<%= color %> mb-4 box-shadow card-border card-link'><h4 class='align-center'><%= title %></h4><p class='card-text'><%= description %></p><p class='align-right'><a type='button' href='<%= url %>' class='btn btn-<%= color %>'><span class='acceder'>Accéder </span><i class='fa fa-external-link'></i></a></p><p class='powered-text align-center'>powered by <a href='<%= urlpoweredby %>'><%= poweredby %></a></p></div></div>"
|
||||||
|
|
||||||
function renderSite(data) {
|
function renderSite(data) {
|
||||||
html = ejs.render(template, data);
|
html = ejs.render(template, data);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue