From 73a125baa977d2d26f8c6c4506222d0601651473 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Wed, 30 Dec 2020 12:55:34 +0100
Subject: [PATCH] feat: rework how the site are shown

---
 scss/components/_previews.scss | 173 +++++++++------------------------
 static/index.html              |   8 +-
 static/site.js                 |   2 +-
 3 files changed, 53 insertions(+), 130 deletions(-)

diff --git a/scss/components/_previews.scss b/scss/components/_previews.scss
index f816902..eb6f1f1 100644
--- a/scss/components/_previews.scss
+++ b/scss/components/_previews.scss
@@ -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 {
-    @include md {
-      display: grid;
-      grid-template-columns: auto auto;
-      grid-template-rows: auto;
-      grid-gap: 1.5rem;
-      padding-bottom: 1.5rem;
+  .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%
+    }
+    p, h4 {
+      padding:0;
+      padding-left:1rem;
+      padding-right:1rem;
+      margin:0;
+      display:flex;
+      justify-content: center;
+      flex-direction: column;
     }
 
-    @include xxl {
-      grid-template-columns: auto auto auto;
-    }
-}
-
-.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;
-        }
+    .acceder {
+      display: none;
     }
 
-}
-
-.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;
+    p {
+      text-align: left;
     }
-}
 
-.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);
-}
+    h4 {
+      width:170px;
+      flex-shrink: 0;
+    }
 
-.preview-item:hover .preview-overlay {
-    opacity: .9;
-    transition: opacity .5s;
-    backdrop-filter: blur(2px);
-}
-
-.comment-text {
-    margin-top:0.8em;
-}
-
-.card-preview time {
-    margin-bottom:0.4em;
-    display:block;
+    .powered-text {
+      width:120px;
+      flex-grow:2;
+      flex-shrink: 0;
+    }
+  }
 }
diff --git a/static/index.html b/static/index.html
index 6bd8f85..3cac9e0 100644
--- a/static/index.html
+++ b/static/index.html
@@ -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>
 
diff --git a/static/site.js b/static/site.js
index 80a3384..0c0a95d 100644
--- a/static/site.js
+++ b/static/site.js
@@ -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);