From d2060a3cd16ed9bd5b1711f82c26f587a4790d46 Mon Sep 17 00:00:00 2001
From: Riccardo <riccardosenica@outlook.com>
Date: Wed, 7 Sep 2022 18:41:41 +0200
Subject: [PATCH] Template improvement

---
 assets/hackernews_template.gohtml | 41 +++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/assets/hackernews_template.gohtml b/assets/hackernews_template.gohtml
index e29f862..32fc11d 100644
--- a/assets/hackernews_template.gohtml
+++ b/assets/hackernews_template.gohtml
@@ -32,10 +32,16 @@
 
       .grid {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 1fr;
         gap: 2rem;
       }
 
+      @media screen and (min-width: 768px) {
+        .grid {
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+
       .grid__item {
         background: #fff;
         border-radius: 0.5rem;
@@ -59,6 +65,15 @@
         line-height: 1.5rem;
       }
 
+      .article__title,
+      .article__text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+      }
+
       .card__detail {
         display: flex;
         justify-content: space-between;
@@ -83,19 +98,19 @@
     <div class="container">
       <div class="grid">
         {{ range .News }}
-          <div class="grid__item" data-article-id="{{ .Id }}">
-            <h2 class="article__title" data-article-title="">
-              {{ .Title }}
-            </h2>
-            <small class="article__time" data-article-time="">Unix Epoch {{ .CreatedAt }}</small>
-            <p class="article__text" data-article-text="">
-              {{ .Text }}
-            </p>
-            <div class="card__detail">
-              <h3 class="article__by" data-article-by="">written by: {{ .Author }}</h3>
-              <a class="article__url" data-article-url-="" href="{{ .Url }}" target="_blank">Read more</a>
-            </div>
+        <div class="grid__item" data-article-id="32206579">
+          <h2 class="article__title" data-article-title="">
+            {{ .Title }}
+          </h2>
+          <small class="article__time" data-article-time="">Unix Epoch {{ .CreatedAt }}</small>
+          <div class="article__text" data-article-text="">
+            {{ .Text }}
           </div>
+          <div class="card__detail">
+            <h3 class="article__by" data-article-by="">written by: {{ .Author }}</h3>
+            <a class="article__url" data-article-url-="" href="{{ .Url }}" target="_blank">Read more</a>
+          </div>
+        </div>
         {{ end }}
       </div>
     </div>