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 @@
|
|||
|
||||
|
||||
.previews-section {
|
||||
@include md {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
.card-link {
|
||||
background-color:white;
|
||||
padding:1rem;
|
||||
p, h4 {
|
||||
text-align: center;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@include xxl {
|
||||
grid-template-columns: auto auto auto;
|
||||
h4 {
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
.powered-text {
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
.acceder {
|
||||
display: inline;
|
||||
padding-right:0.5rem;
|
||||
}
|
||||
@include md() {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
padding:0;
|
||||
.card-text {
|
||||
flex-grow: 1;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
p, h4 {
|
||||
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;
|
||||
}
|
||||
padding-left:1rem;
|
||||
padding-right:1rem;
|
||||
margin:0;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color:white;
|
||||
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
|
||||
.acceder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-item:hover .preview-overlay {
|
||||
opacity: .9;
|
||||
transition: opacity .5s;
|
||||
backdrop-filter: blur(2px);
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
margin-top:0.8em;
|
||||
h4 {
|
||||
width:170px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-preview time {
|
||||
margin-bottom:0.4em;
|
||||
display:block;
|
||||
.powered-text {
|
||||
width:120px;
|
||||
flex-grow:2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="col-md-4">
|
||||
<aside class="col-lg-4">
|
||||
<div class="card card-blue" id="welcome">
|
||||
<div class="card-header"><i class="fa fa-list"></i> Navigation</div>
|
||||
<div class="list-group list-group-flush">
|
||||
|
|
@ -77,9 +77,9 @@
|
|||
|
||||
</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>
|
||||
<main class="col-md-8">
|
||||
<main class="col-lg-8">
|
||||
<h2 id="projets"><i class="fa fa-folder"></i> Projets</h2>
|
||||
<div class="row site-cards">
|
||||
<script>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
<div class="row site-cards">
|
||||
<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: "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>
|
||||
</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) {
|
||||
html = ejs.render(template, data);
|
||||
|
|
|
|||
Loading…
Reference in a new issue