bug fixes

css/main.css

@@ -682,6 +682,7 @@ theme-toggle {
   grid-template-rows: auto 1fr;
   align-items: flex-start;
   grid-template-areas: "img title" "img content";
+  min-height: 5rem;
 }
 .article-card img {
   left: 0;
@@ -733,7 +734,6 @@ theme-toggle {
   overflow: hidden;
 }
 .trending-article p {
-  font-family: "Noto serif", serif;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -981,12 +981,13 @@ theme-toggle {
 }
 #preview_popup p,
 #article p {
-  font-family: "Noto serif", serif;
   font-size: 1.05rem;
-  line-height: 1.8;
+  line-height: 1.7;
 }
-#preview_popup p > *,
-#article p > * {
+#preview_popup p *,
+#article p * {
+  line-height: inherit;
+  font-size: inherit;
   font-family: inherit;
 }
 #preview_popup time,
@@ -1305,7 +1306,7 @@ button:not(.button--primary) {
   }
   .interact:hover,
 button:not(.button--primary):hover {
-    background-color: #4885ff10;
+    background-color: rgba(var(--text-color), 0.06);
   }
 
   .button--primary {

css/main.scss

@@ -643,6 +643,7 @@ theme-toggle {
   grid-template-rows: auto 1fr;
   align-items: flex-start;
   grid-template-areas: "img title" "img content";
+  min-height: 5rem;
   img {
     left: 0;
     top: 0;
@@ -691,7 +692,7 @@ theme-toggle {
     overflow: hidden;
   }
   p {
-    font-family: "Noto serif", serif;
+    // font-family: "Noto serif", serif;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -931,10 +932,12 @@ theme-toggle {
     }
   }
   p {
-    font-family: "Noto serif", serif;
+    // font-family: "Noto serif", serif;
     font-size: 1.05rem;
-    line-height: 1.8;
-    & > * {
+    line-height: 1.7;
+    * {
+      line-height: inherit;
+      font-size: inherit;
       font-family: inherit;
     }
   }
@@ -1226,7 +1229,7 @@ theme-toggle {
   button:not(.button--primary) {
     transition: background-color 0.3s;
     &:hover {
-      background-color: #4885ff10;
+      background-color: rgba(var(--text-color), 0.06);
     }
   }
   .button--primary {

index.html

@@ -173,7 +173,7 @@
                     </div>
                     <a class="button" href="#/explore?type=recent">See all</a>
                 </div>
-                <ul id="latest_articles_list" class="grid gap-2"></ul>
+                <ul id="latest_articles_list" class="grid gap-1-5"></ul>
             </section>
         </article>
         <article id="explore" class="page page-layout hide">
@@ -424,7 +424,7 @@
                 Preview
             </h4>
         </header>
-        <section id="preview_container"></section>
+        <section id="preview_container" class="grid gap-1-5"></section>
     </sm-popup>
     <sm-popup id="edit_article_meta_popup">
         <header slot="header" class="popup__header">
@@ -1196,7 +1196,7 @@
                 getRef('trending_article_container').append(frag)
                 // render latest articles
                 const sortedArticles = sortedByVotes.slice(4).sort((a, b) => b.published - a.published)
-                sortedArticles.forEach(articleDetail => {
+                sortedArticles.slice(0, 4).forEach(articleDetail => {
                     frag.append(render.articleCard({
                         ...articleDetail,
                         heroImage: allImages[articleDetail.uid].heroImage.thumbnail