Fade articles content

app_template/www/articles.html

@@ -62,10 +62,12 @@
 						for (element of articles) {
 							axios.get(`http://localhost:5000/articles/${element}`)
 								.then(response => {
-									let articlesHeading = document.querySelector("#articles-heading");
-									let articleElm = document.createElement("pre");
-									articleElm.textContent = response.data;
-									articlesHeading.appendChild(articleElm);
+									let articlesHeading = document.querySelector("#articles-heading").parentElement;
+									let articleDiv = document.createElement("button");
+									articleDiv.textContent = response.data;
+
+									articleDiv.classList.add("m-5", "article-content");
+									articlesHeading.appendChild(articleDiv);
 								})
 								.catch(error => console.error(error));
 						}
@@ -121,7 +123,6 @@
 										<div class="core">
 											<i class="icon-columns to-animate-2"></i>
 											<div class="fh5co-post to-animate">
-												<!-- <h3 async onload="fetchArticle();">Articles</h3> -->
 												<h3 id="articles-heading">Articles</h3>
 											</div>
 										</div>

app_template/www/css/main.css

@@ -13,4 +13,30 @@ a img{
     animation-fill-mode: forwards;
     text-decoration: none;
     color: white;
-}
+}
+
+.article-content {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 5px;
+    border: 1px solid #777;
+    max-height: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    content: "";
+    position: relative;
+}
+
+button.article-content {
+    background: none;
+}
+
+.article-content:before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: linear-gradient(transparent 150px, white);
+}