💄 https://github.com/b3log/solo/issues/12670

Medium/article-list.ftl

@@ -46,9 +46,7 @@
                         </sup>
                     </#if>
                 </h2>
-                <div class="content-reset article__content">
-                ${article.articleAbstract}
-                </div>
+                <div class="article__thumbnail" style="background-image: url(${article.articleImg1URL})"/>
             </div>
 
             <div class="article__meta ft-gray fn-flex">

Medium/css/base.scss

@@ -21,7 +21,6 @@
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
  * @version 2.0.0.0, Feb 21, 2019
  */
-
 @import "../../../scss/reset-content";
 @import "../../../scss/reset";
 @import "../../../scss/nprogress";
@@ -487,88 +486,101 @@
 }
 
 /* star article */
-.article__wrap {
+.article {
+  &__main {
+    display: flex;
+    flex-direction: column;
+  }
+  &__thumbnail {
+    margin: 10px 0;
+    background-position: center center;
+    background-size: cover;
+    flex: 1;
+  }
+  &__wrap {
     margin-right: -20px
-}
+  }
 
-.article__item {
+  &__item {
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 2px;
     margin-bottom: 20px;
     float: left
-}
+  }
 
-.article__item--big {
+  &__item--big {
     width: 318px;
     margin-right: 20px
-}
+  }
 
-.article__item--big .article__main {
-    height: 275px;
+  &__item--big .article__main {
+    height: 236px;
     overflow: hidden;
-    margin-bottom: 10px
-}
+  }
 
-.article__item--small {
+  &__item--small {
     width: 318px;
-    margin-right: 20px
-}
+    margin-right: 20px;
+    .article__thumbnail {
+      background-image: none !important;
+    }
+  }
 
-.article__item--small .article__main {
-    height: 94px;
+  &__item--small .article__main {
+    height: 91px;
     overflow: hidden;
-    margin-bottom: 10px
-}
+  }
 
-.article__item--mid {
+  &__item--mid {
     width: 488px;
     margin-right: 20px
-}
+  }
 
-.article__item--mid .article__main {
+  &__item--mid .article__main {
     height: 195px;
     overflow: hidden;
-    margin-bottom: 10px
-}
+  }
 
-.article__panel {
+  &__panel {
     padding: 16px
-}
+  }
 
-.article__title {
+  &__title {
     overflow: hidden;
     line-height: 24px;
     font-size: 21px;
     font-weight: 600;
     word-break: break-all
-}
+  }
 
-.article__title a {
+  &__title a {
     color: rgba(0, 0, 0, 0.84)
-}
+  }
 
-.article__title a:hover {
+  &__title a:hover {
     text-decoration: none
-}
+  }
 
-.article__title sup {
+  &__title sup {
     top: -6px;
     font-size: 12px;
     color: #03a87c;
-}
+  }
 
-.article__content {
+  &__content {
     margin-top: 4px;
     font-size: 16px;
     color: rgba(0, 0, 0, 0.54);
     overflow: hidden;
     line-height: 23px;
     word-break: break-all;
-}
+  }
 
-.article__meta {
+  &__meta {
     font-size: 15px;
     line-height: 23px;
+    flex-shrink: 0;
+  }
 }
 
 /* end article list */
@@ -880,18 +892,17 @@
 
 .page__item {
   display: block;
-    border-bottom: 1px solid rgba(0,0,0,0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   padding: 40px 0 35px
 }
 
-
 @media (max-width: 768px) {
   .header {
-        text-align:left
+    text-align: left
   }
 
   .header__logo,
-    .post__side,.article__next,#articleBottomShare,#articleShare,
+  .post__side, .article__next, #articleBottomShare, #articleShare,
   .article__comment .comment__avatar {
     display: none
   }
@@ -930,11 +941,11 @@
     display: block
   }
 
-    .footer__tag>div {
+  .footer__tag > div {
     margin: 0 0 50px
   }
 
-    .footer__tag>div:last-child {
+  .footer__tag > div:last-child {
     margin: 0
   }
 
@@ -947,7 +958,6 @@
   }
 }
 
-
 /* Make clicks pass-through */
 #nprogress .bar {
   background: #d23f31;