Template improvement

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 }}">
+        <div class="grid__item" data-article-id="32206579">
-            <h2 class="article__title" data-article-title="">
+          <h2 class="article__title" data-article-title="">
-              {{ .Title }}
+            {{ .Title }}
-            </h2>
+          </h2>
-            <small class="article__time" data-article-time="">Unix Epoch {{ .CreatedAt }}</small>
+          <small class="article__time" data-article-time="">Unix Epoch {{ .CreatedAt }}</small>
-            <p class="article__text" data-article-text="">
+          <div class="article__text" data-article-text="">
-              {{ .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>
+          <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>