hexo-theme-solitude 1.2.6 → 1.3.0

package/source/css/_layout/index.styl

@@ -1,294 +1,52 @@
-// 文章列表
-#recent-posts
-  position relative
-
-  > .recent-post-item
-    box-shadow var(--sco-shadow-light2black)
-    display flex
-    -webkit-box-orient horizontal
-    -webkit-box-align center
-    align-items center
-    animation slide-in .6s .4s backwards
-    transition all .3s ease 0s
-    overflow hidden
-    height fit-content
-    background var(--sco-card-bg)
-    border-radius 12px
-    cursor pointer
-    border var(--style-border)
-    margin 1rem 0 1rem
-
-    &:hover
-      box-shadow var(--card-hover-box-shadow)
-      border var(--style-border-hover)
-
-      .post_cover img.post_bg
-        transform scale(1.03)
-        transition .3s ease-in-out
-        filter brightness(.85)
-
-    &.ads-wrap
-      display block !important
-      height auto !important
-
-    .post_cover
-      overflow hidden
-      width 45%
-      height 100%
-      -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
-
-      img.post_bg
-        width 100%
-        height 100%
-        transition all .6s ease 0s
-        object-fit cover
-
-        &:hover
-          transform scale(1.1)
-
-    > .recent-post-info
-      height 174px
-      width 100%
-      cursor pointer
-      position relative
-      padding 0
-      display inline-block
-      overflow hidden
-
-      .recent-post-info-top-tips
-        display: flex
-        margin-top: 20px
-        user-select none
-
-      &.no-cover
-        width 100%
-
-      > .article-title
-        line-height 1.4
-        margin-top 0
-        font-weight 700
-        color var(--sco-fontcolor)
-        margin-bottom 0
-        position absolute
-        width 100%
-        left 0
-        padding 0 40px
-        transition .3s
-
-        &:hover
-          color var(--sco-fontcolor)
-
-      > .article-meta-wrap
-        position absolute
-        bottom 16px
-        transition .3s
-        display flex
-        flex-direction row
-        flex-wrap nowrap
-        justify-content space-between
-        width 100%
-        left 0
-        padding 0 32px
-        white-space nowrap
-        color var(--sco-fontcolor)
-        font-size .7rem
-
-        > .article-meta
-          margin 0 8px 0 0
-          white-space nowrap
-          overflow hidden
-          text-overflow ellipsis
-          display flex
-
-          > .article-meta__tags
-            margin-right 8px
-            padding 0 0.2rem
-            padding-left 0
-            color var(--sco-fontcolor)
-
-        > .post-meta-date
-          right 0
-          text-align right
-
-          i
-            display none
-
-        .article-meta__separator
-          display none
-
-        a:hover
-          background-color var(--sco-none)
-          color var(--sco-lighttext)
-          cursor pointer
-          border-radius 4px
-
-        i
-          margin 0 .4rem 0 0
-
-        .sticky
-          color var(--sco-fontcolor)
-
-      > .content
-        line-height 1.4
-        color var(--sco-secondtext)
-        margin-top 0
-        cursor pointer
-        transition .3s
-        opacity 1
-        position absolute
-        width 100%
-        left 0
-        padding 0 40px
-        -webkit-line-clamp 2
-
-  > div > i .post_cover
-    display none
-
-  .recent-post-item
-    .left_radius a, .right_radius a
-      min-height 100%
-      min-width 100%
-
-+maxWidth768()
-  #recent-posts > .recent-post-item
-    border-radius 12px 12px 8px 8px
-
-// 分页按钮
-.toPageGroup
-  display flex
-  position relative
-  margin 0 .3rem
-
-  a#toPageButton
-    display flex
-    position absolute
-    width 40px
-    height 40px
-    right 0
-    top 0
-    border-radius 8px
-    justify-content center
-    align-items center
-    transition .3s
-    background var(--sco-card-bg)
-    border var(--style-border-always)
-    cursor text
-    pointer-events none
-
-  &:focus-within a#toPageButton, &:hover a#toPageButton
-    width 30px
-    height 30px
-    right 4px
-    top 5px
-    background var(--sco-card-bg)
-    border 1px solid var(--sco-none)
-    border-radius 4px
-    opacity .2
-
-  &:focus-within a#toPageButton.haveValue, &:hover a#toPageButton.haveValue
-    opacity 1
-    cursor pointer
-
-  a#toPageButton.haveValue
-    opacity 1 !important
-    cursor pointer !important
-    pointer-events all
-
-  a#toPageButton.haveValue:hover
-    background var(--sco-theme)
-    color var(--sco-white)
-
-+maxWidth768()
-  .toPageGroup
-    display none
-
-+minWidth768()
-  .needEndHide.hide
-    bottom: -200px !important
-    opacity: 0
-
 .layout
-  display flex
-  margin 0 auto
-  padding 1rem 1.5rem
-  max-width 1200px
+  display: flex
+  margin: 0 auto
+  padding: 1rem 1.5rem
+  max-width: 1200px
+  +maxWidth768()
+    padding 0
 
   &#content-inner
-    max-width 1400px
+    max-width: 1400px
 
-  &.hide-aside
-    max-width 1400px
+  /.hide-aside.layout
+    max-width: 1400px
 
     > div
-      width 100% !important
+      width: 100% !important
 
   > div:first-child
     width calc(100% - 300px)
 
+    +maxWidth1200()
+      width 100% !important
+
   > div:first-child:not(.recent-posts)
     box-shadow var(--sco-shadow-border)
     padding 1rem 2rem
     border-radius 12px
     width calc(100% - 300px)
-    background: var(--sco-card-bg);
-    border: var(--style-border);
+    background var(--sco-card-bg);
+    border var(--style-border);
     align-self flex-start
     animation slide-in .6s .1s backwards
     position relative
     overflow hidden
 
-  > #page
-    padding: 0;
-    width: calc(100% - 300px);
-    align-self: flex-start;
-    animation: slide-in 0.6s 0.1s backwards;
-    position: relative;
-    overflow: hidden;
-
-  +maxWidth768()
-    padding: 0
-
-    > div:first-child:not(.recent-posts)
-      border-radius: 0;
-      padding: 0 1rem !important;
-      box-shadow: none !important;
-      background: var(--sco-background)
-      z-index: 10
-
-  +maxWidth900()
-    flex-direction: column
-
-  +maxWidth1200()
-    > div:first-child
-      width 100% !important
-
-  +minWidth1300()
-    justify-content space-between
-
-  +minWidth2000()
-    max-width 1500px
-
-    &.hide-aside
-      max-width 1300px
-
-+maxWidth768()
-  .post
-    .layout
-      > #post, #page
-        border-radius 12px 12px 0 0
-
-      &#content-inner
-        background: var(--sco-main)
-
-  .page
-    .layout
-      > #post, #page
-        border-radius: 12px 12px 0 0
+    +maxWidth768()
+      padding 0 1rem
+      background var(--sco-background)
 
-      &#content-inner
-        background: var(--sco-background)
+span.tags-punctuation::before
+  content: "\e071"
+  font-family: scoicon, serif !important
+  font-size: 12px
+  margin-right: 2px
+  opacity: .4
 
-+minWidth900()
+  .hide-aside #page &
+    font-size 16px
 
-  html.hide-aside .layout > div:first-child
-    width: 100%
+  #post-info &
+    font-size 14px
+    line-height 32px

package/source/css/_mode/index.styl

@@ -1,96 +1,89 @@
-[data-theme=dark] 
-	--sco-theme $dark_theme
-	--sco-theme-op $dark_theme_op
-	--sco-theme-op-deep $dark_theme_op_deep
-	--sco-theme-none $dark_theme_none
-	--sco-blue #0084ff
-	--sco-red #ff3842
-	--sco-pink #d44040
-	--sco-green #3e9f50
-	--sco-purple #7a60d2
-	--sco-yellow #ffc93e
-	--sco-yellow-op #ffc93e30
-	--sco-orange #ff953e
-	--sco-fontcolor #f7f7fa
-	--sco-background #18171d
-	--sco-reverse #fff
-	--sco-maskbg rgba(0, 0, 0, 0.6)
-	--sco-maskbgdeep rgba(0, 0, 0, 0.85)
-	--sco-hovertext #0a84ff
-	--sco-ahoverbg #fff
-	--sco-lighttext var(--sco-theme)
-	--sco-secondtext #a1a2b8
-	--sco-scrollbar rgba(200, 200, 223, 0.4)
-	--sco-card-btn-bg #30343f
-	--sco-post-blockquote-bg #000
-	--sco-post-tabs-bg #121212
-	--sco-secondbg #30343f
-	--sco-shadow-nav 0 5px 20px 0px rgba(28, 28, 28, 0.4)
-	--sco-card-bg #1b1c20
-	--sco-card-bg-op var(--sco-white-op)
-	--sco-card-bg-none #1d1b2600
-	--sco-shadow-lightblack 0 5px 12px -5px rgba(102, 68, 68, 0.0)
-	--sco-shadow-light2black 0 5px 12px -5px rgba(102, 68, 68, 0.0)
-	--sco-card-border #3d3d3f
-	--sco-shadow-border 0 8px 16px -4px #00000050
-	--style-border 1px solid var(--sco-card-border)
-	--style-border-always 1px solid var(--sco-card-border)
-	--style-border-hover 1px solid var(--sco-theme)
-	--style-border-hover-always 1px solid var(--sco-theme)
-	--style-border-dashed 1px dashed var(--sco-theme-op)
-	--style-border-forever 2px solid var(--sco-lighttext)
-
-	#page-header
-		&.not-top-img
-			#nav
-				.darkmode_switchbutton
-					color var(--sco-yellow)
-
-	a
-		&.darkmode_switchbutton
-			background var(--sco-orange) !important
-			color var(--sco-white) !important
+[data-theme=dark]
+  --sco-theme $dark_theme
+  --sco-theme-op $dark_theme_op
+  --sco-theme-op-deep $dark_theme_op_deep
+  --sco-theme-none $dark_theme_none
+  --sco-blue #0084ff
+  --sco-red #ff3842
+  --sco-pink #d44040
+  --sco-green #3e9f50
+  --sco-purple #7a60d2
+  --sco-yellow #ffc93e
+  --sco-yellow-op #ffc93e30
+  --sco-orange #ff953e
+  --sco-fontcolor #f7f7fa
+  --sco-background #18171d
+  --sco-reverse #fff
+  --sco-maskbg rgba(0, 0, 0, 0.6)
+  --sco-maskbgdeep rgba(0, 0, 0, 0.85)
+  --sco-hovertext #0a84ff
+  --sco-ahoverbg #fff
+  --sco-lighttext var(--sco-theme)
+  --sco-secondtext #a1a2b8
+  --sco-scrollbar rgba(200, 200, 223, 0.4)
+  --sco-card-btn-bg #30343f
+  --sco-post-blockquote-bg #000
+  --sco-post-tabs-bg #121212
+  --sco-secondbg #30343f
+  --sco-shadow-nav 0 5px 20px 0px rgba(28, 28, 28, 0.4)
+  --sco-card-bg #1b1c20
+  --sco-card-bg-op var(--sco-white-op)
+  --sco-card-bg-none #1d1b2600
+  --sco-shadow-lightblack 0 5px 12px -5px rgba(102, 68, 68, 0.0)
+  --sco-shadow-light2black 0 5px 12px -5px rgba(102, 68, 68, 0.0)
+  --sco-card-border #3d3d3f
+  --sco-shadow-border 0 8px 16px -4px #00000050
+  --style-border 1px solid var(--sco-card-border)
+  --style-border-always 1px solid var(--sco-card-border)
+  --style-border-hover 1px solid var(--sco-theme)
+  --style-border-hover-always 1px solid var(--sco-theme)
+  --style-border-dashed 1px dashed var(--sco-theme-op)
+  --style-border-forever 2px solid var(--sco-lighttext)
+  --sco-hl-bg $hl_bg_dark
+  --sco-hltools-bg $hltools_bg_dark
 
 [data-theme=light]
-	--sco-theme $light_theme
-	--sco-theme-op $light_theme_op
-	--sco-theme-op-deep $light_theme_op_deep
-	--sco-theme-op-light #4259ef0d
-	--sco-theme-none $light_theme_none
-	--sco-blue #425aef
-	--sco-red #f04a63
-	--sco-pink #ff7c7c
-	--sco-green #57bd6a
-	--sco-yellow #c28b00
-	--sco-yellow-op #d99c001a
-	--sco-orange #e38100
-	--sco-purple #7a60d2
-	--sco-fontcolor #363636
-	--sco-background #f7f9fe
-	--sco-reverse #000
-	--sco-maskbg rgba(255, 255, 255, 0.6)
-	--sco-maskbgdeep rgba(255, 255, 255, 0.85)
-	--sco-hovertext var(--sco-main)
-	--sco-ahoverbg #f7f7fa
-	--sco-lighttext var(--sco-main)
-	--sco-secondtext rgba(60, 60, 67, 0.8)
-	--sco-scrollbar rgba(60, 60, 67, 0.4)
-	--sco-card-btn-bg #edf0f7
-	--sco-post-blockquote-bg #fafcff
-	--sco-post-tabs-bg #f2f5f8
-	--sco-secondbg #f7f7f9
-	--sco-shadow-nav 0 5px 12px -5px rgba(102, 68, 68, 0.05)
-	--sco-card-bg #fff
-	--sco-card-bg-op var(--sco-black-op)
-	--sco-card-bg-none rgba(255, 255, 255, 0)
-	--sco-shadow-lightblack 0 5px 12px -5px rgba(102, 68, 68, 0.00)
-	--sco-shadow-light2black 0 5px 12px -5px rgba(102, 68, 68, 0.00)
-	--sco-card-border #e3e8f7
-	--sco-shadow-border 0 8px 16px -4px #2c2d300c
-	--style-border 1px solid var(--sco-card-border)
-	--style-border-always 1px solid var(--sco-card-border)
-	--style-border-hover 1px solid var(--sco-main)
-	--style-border-hover-always 1px solid var(--sco-main)
-	--style-border-dashed 1px dashed var(--sco-theme-op)
-	--style-border-forever 2px solid var(--sco-main)
-	--sco-navbg var(--sco-theme-op)
+  --sco-theme $light_theme
+  --sco-theme-op $light_theme_op
+  --sco-theme-op-deep $light_theme_op_deep
+  --sco-theme-op-light #4259ef0d
+  --sco-theme-none $light_theme_none
+  --sco-blue #425aef
+  --sco-red #f04a63
+  --sco-pink #ff7c7c
+  --sco-green #57bd6a
+  --sco-yellow #c28b00
+  --sco-yellow-op #d99c001a
+  --sco-orange #e38100
+  --sco-purple #7a60d2
+  --sco-fontcolor #363636
+  --sco-background #f7f9fe
+  --sco-reverse #000
+  --sco-maskbg rgba(255, 255, 255, 0.6)
+  --sco-maskbgdeep rgba(255, 255, 255, 0.85)
+  --sco-hovertext var(--sco-main)
+  --sco-ahoverbg #f7f7fa
+  --sco-lighttext var(--sco-main)
+  --sco-secondtext rgba(60, 60, 67, 0.8)
+  --sco-scrollbar rgba(60, 60, 67, 0.4)
+  --sco-card-btn-bg #edf0f7
+  --sco-post-blockquote-bg #fafcff
+  --sco-post-tabs-bg #f2f5f8
+  --sco-secondbg #f7f7f9
+  --sco-shadow-nav 0 5px 12px -5px rgba(102, 68, 68, 0.05)
+  --sco-card-bg #fff
+  --sco-card-bg-op var(--sco-black-op)
+  --sco-card-bg-none rgba(255, 255, 255, 0)
+  --sco-shadow-lightblack 0 5px 12px -5px rgba(102, 68, 68, 0.00)
+  --sco-shadow-light2black 0 5px 12px -5px rgba(102, 68, 68, 0.00)
+  --sco-card-border #e3e8f7
+  --sco-shadow-border 0 8px 16px -4px #2c2d300c
+  --style-border 1px solid var(--sco-card-border)
+  --style-border-always 1px solid var(--sco-card-border)
+  --style-border-hover 1px solid var(--sco-main)
+  --style-border-hover-always 1px solid var(--sco-main)
+  --style-border-dashed 1px dashed var(--sco-theme-op)
+  --style-border-forever 2px solid var(--sco-main)
+  --sco-navbg var(--sco-theme-op)
+  --sco-hl-bg $hl_bg_light
+  --sco-hltools-bg $hltools_bg_light

package/source/css/_page/_home/category-bar.styl

@@ -0,0 +1,74 @@
+#category-bar
+  padding: 0.4rem 1rem 0.4rem 0.7rem;
+  background: var(--sco-card-bg);
+  border-radius: 12px;
+  display: flex;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  border: var(--style-border);
+  transition: 0.3s;
+  height: 50px;
+  width: 100%;
+  justify-content: space-between;
+  -webkit-user-select: none;
+  align-items: center;
+
+  +maxWidth1300()
+    margin-bottom 1rem
+    animation slide-in .6s 0s backwards
+
+  +minWidth1300()
+    margin-bottom .75rem
+    &:hover
+      border var(--style-border-hover)
+      box-shadow var(--sco-shadow-main)
+
+  +maxWidth768()
+    margin-bottom 0
+    margin-top 0
+    border-radius 0
+    background var(--sco-background)
+    padding 0.5rem 0
+    border none
+
+  .category-bar-more
+    margin-left 14px
+    font-weight 700
+
+    &:hover
+      color var(--sco-lighttext)
+
+  .category-bar-items
+    white-space nowrap
+    overflow-x scroll
+    overflow-y hidden
+    display flex
+    border-radius 8px
+    align-items center
+    height 30px
+
+    &::-webkit-scrollbar
+      display: none
+
+    .category-bar-item
+      &:hover
+        a
+          background var(--sco-theme)
+          color var(--sco-white)
+
+      a
+        padding .1rem .5rem
+        margin-right 6px
+        font-weight 700
+        border-radius 8px
+        display flex
+        align-items center
+        height 30px
+
+      &.select
+        order -1
+
+        a
+          background var(--sco-theme)
+          color var(--sco-white)