[opt] style

_config.yml

@@ -59,6 +59,8 @@ breadcrumb:
 article:
   # 如果没有指定封面，是否根据 tags 作为关键词搜索封面图片？
   auto_cover: false # search from https://source.unsplash.com/
+  # 封面图宽高比
+  cover_ratio: 2.4
   # 如果没有指定横幅，是否根据 tags 作为关键词搜索横幅图片？
   auto_banner: false # search from https://source.unsplash.com/
   # 如果没有指定 excerpt 和 description，将自动取多长的内容作为文章摘要？

source/css/_layout/list.styl

@@ -84,15 +84,7 @@
     object-fit: cover
     width: 100%
     border-radius: 0
-    height: 280px
+    aspect-ratio: hexo-config('article.cover_ratio')
-    @media screen and (max-width: 900px)
-      height: 240px
-    @media screen and (max-width: $device-tablet)
-      height: 220px
-    @media screen and (max-width: $device-mobile-425)
-      height: 200px
-    @media screen and (max-width: $device-mobile-375)
-      height: 180px
     
 .post-list .post-card.post.photo
   .cover
@@ -100,6 +92,8 @@
     line-height: 0
     img
       width: 100%
+      object-fit: cover
+      aspect-ratio: hexo-config('article.cover_ratio')
     .cover-info
       padding: 1.5rem 1rem
       position: absolute

source/css/_layout/pages/archives.styl

@@ -8,7 +8,7 @@
     margin-bottom: .5em
     position: relative
     padding: 4px 0
-    color: var(--text-p3)
+    color: var(--text-p1)
     &:after
       content: ""
       position: absolute
@@ -18,7 +18,7 @@
       right: 0
       z-index: -1
       border-radius: 4px
-      background: var(--block-border)
+      background: $color-theme
   a.post
     display: inline-flex
     align-items: baseline
@@ -34,13 +34,9 @@
       color: var(--text-p4)
     &:hover
       border-bottom: 1px solid $color-theme
+      color: var(--text-p0)
       time
         color: $color-theme
-  &:hover
-    .archive-header
-      color: var(--text-p1)
-      &:after
-        background: $color-theme
 
 
 

source/css/_layout/partial/cover.styl

@@ -21,6 +21,7 @@
     font-size: 1.5rem
     margin: 1rem 0
     line-height: 1.2
+    color: var(--text-p0)
   .description
     margin: 1rem 0
   .start-wrap

source/css/_layout/tag-plugins/banner.styl

@@ -6,9 +6,9 @@
   flex-direction: column
   justify-content: flex-end
   align-items: flex-start
-  height: 240px
+  height: 220px
   @media screen and (max-width: $device-mobile-max)
-    height: 200px
+    height: 180px
   .bg
     z-index: 0
   .content