🏷️ 更新至3.0.0-RC-1 close #189, close #192, close #223, close #224, close #229, close 232, close #240

source/css/_layout/flink.styl

@@ -1,85 +1,76 @@
 .flink#article-container
-  .post-cards
-    margin: -10px 10px 0
+  .flink-desc
+    margin: .2rem 0 .5rem
 
-    .md-links
-      overflow: auto
-      text-align: center
+  .flink-list
+    overflow: auto
+    padding: 10px 10px 0
+    text-align: center
 
-      & > .md-links-item
-        position: relative
-        float: left
-        overflow: hidden
-        margin: 20px 7px
-        width: calc(100% / 3 - 15px)
-        height: 90px
-        border-radius: 8px
-        line-height: 17px
-        transform: perspective(1px) translateZ(0)
+    & > .flink-list-item
+      position: relative
+      float: left
+      overflow: hidden
+      margin: 20px 7px
+      width: calc(100% / 3 - 15px)
+      height: 90px
+      border-radius: 8px
+      line-height: 17px
+      transform: perspective(1px) translateZ(0)
 
-        &:hover
-          img
-            transform: rotate(540deg)
-
-        &:before
-          position: absolute
-          top: 0
-          right: 0
-          bottom: 0
-          left: 0
-          z-index: -1
-          background: $light-blue
-          content: ''
-          transition-timing-function: ease-out
-          transition-duration: .3s
-          transition-property: transform
-          transform: scale(0)
-
-        &:hover:before,
-        &:focus:before,
-        &:active:before
-          transform: scale(1)
-
-        a
-          color: $font-color
-          text-decoration: none
-
-          img
-            float: left
-            margin: 13px 0 0 10px
-            width: 65px
-            height: 65px
-            border-radius: 35px
-            transition: all .3s
-
-          .img-alt
-            display: none
-
-          .md-links-title
-            overflow: hidden
-            padding: 16px 10px 0 0
-            height: 40px
-            text-overflow: ellipsis
-            white-space: nowrap
-            font-weight: bold
-            font-size: 20px
-
-          .md-links-des
-            overflow: hidden
-            padding: 16px 10px
-            height: 50px
-            text-overflow: ellipsis
-            white-space: nowrap
-            font-size: 13px
-
-@media screen and (max-width: 1100px)
-  .flink
-    .md-links
-      .md-links-item
+      @media screen and (max-width: 1100px)
         width: calc(50% - 15px) !important
 
-@media screen and (max-width: 600px)
-  .flink
-    .md-links
-      .md-links-item
+      @media screen and (max-width: 600px)
         width: calc(100% - 15px) !important
+
+      &:hover
+        img
+          transform: rotate(360deg)
+
+      &:before
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        z-index: -1
+        background: $light-blue
+        content: ''
+        transition-timing-function: ease-out
+        transition-duration: .3s
+        transition-property: transform
+        transform: scale(0)
+
+      &:hover:before,
+      &:focus:before,
+      &:active:before
+        transform: scale(1)
+
+      a
+        color: $font-color
+        text-decoration: none
+
+        img
+          float: left
+          margin: 13px 0 0 10px
+          width: 65px
+          height: 65px
+          border-radius: 35px
+          transition: all .3s
+
+        .img-alt
+          display: none
+
+        .flink-item-name
+          @extend .limit-one-line
+          padding: 16px 10px 0 0
+          height: 40px
+          font-weight: bold
+          font-size: 20px
+
+        .flink-item-desc
+          @extend .limit-one-line
+          padding: 16px 10px
+          height: 50px
+          font-size: 13px