hexo-theme-solitude 1.1.3 → 1.2.1

package/source/css/_layout/index.styl

@@ -0,0 +1,293 @@
+// 文章列表
+#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)
+
+    &: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
+
+  &#content-inner
+    max-width 1400px
+
+  &.hide-aside
+    max-width 1400px
+
+    > div
+      width 100% !important
+
+  > div:first-child
+    width calc(100% - 300px)
+
+  > 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);
+    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
+
+      &#content-inner
+        background: var(--sco-background)
+
++minWidth900()
+
+  html.hide-aside .layout > div:first-child
+    width: 100%

package/source/css/_layout/sidebar.styl

@@ -0,0 +1,226 @@
+#sidebar
+  background: var(--sco-maskbg)
+
+  #menu-mask
+    position: fixed
+    z-index: 1001
+    display: none
+    width: 100%
+    height: 100%
+    background: var(--sco-maskbg)
+    backdrop-filter: saturate(180%) blur(20px)
+    -webkit-backdrop-filter: blur(20px)
+    transform: translateZ(0)
+    animation: .6s ease 0s 1 normal none running to_show
+
+  #sidebar-menus
+    position: fixed
+    top: 0
+    right: -300px
+    overflow: hidden auto
+    width: 300px
+    height: 100%
+    background: var(--sco-background)
+    transition: all .5s ease 0s
+    padding-top: 30px
+    z-index: 1001
+    border-left: var(--style-border-always)
+
+    &.open
+      transform: translate3d(-100%, 0, 0)
+
+    .back-menu-list-groups
+      padding: 0 16px
+
+      .back-menu-list-title
+        font-size: 12px
+        color: var(--sco-secondtext)
+
+      .back-menu-list
+        width: calc(100% + 16px)
+        justify-content: flex-start
+        margin: 0 -8px
+
+        .back-menu-item
+          background: var(--sco-card-bg)
+          border: var(--style-border-always)
+          border-radius: 8px
+
+    .back-home-button
+      display: none
+
+    > .author-avatar
+      padding: 1.3rem 1.5rem 0
+      text-align: center
+
+      img
+        width: 110px
+        height: 110px
+        border-radius: 70px
+        transition: all .5s ease 0s
+
+        &:hover
+          transform: rotate(360deg)
+
+    .site-data
+      display: table
+      padding: .6rem .5rem 0
+      width: 100%
+      table-layout: fixed
+
+      .data-item
+        display: table-cell
+
+        .data-item-link .length-num
+          color: var(--text-highlight-color)
+          font-size: 1.28em
+
+        .data-item-link .headline
+          color: var(--sco-fontcolor)
+
+    hr
+      margin: 1rem auto
+
+    .menus_items
+      padding: 0 16px
+
+      .site-page
+        position: relative
+        display: block
+        padding: 0
+        color: var(--sco-fontcolor)
+        cursor: pointer
+        font-size: 14px
+        font-weight: 700
+
+        span:hover
+          color: #307af6
+
+      .menus_item > .site-page
+        display: flex
+        font-size: 12px
+        color: var(--sco-secondtext)
+
+      .expand
+        position: absolute
+        top: .78em
+        right: .4rem
+        transition: transform .3s ease 0s
+
+        &.hide
+          transform: rotate(90deg) !important
+
+      .menus_item_child
+        margin: 0 -4px
+        list-style: none
+        display: flex
+        flex-direction: row
+        flex-wrap: wrap
+
+        .site-page.child
+          display: flex
+          flex-direction: column
+          align-items: center
+          padding: 8px
+          border-radius: 8px
+          border: var(--style-border-always)
+          background: var(--sco-card-bg)
+
+        li
+          width: calc(50% - 8px)
+          margin: 4px
+
+        .site-page.child span
+          line-height: 1
+          margin-top: 8px
+
+    .card-tag-cloud
+      padding: 0 16px
+      display: flex
+      white-space: nowrap
+      flex-direction: row
+      flex-wrap: wrap
+      margin-bottom: 60px
+
+      a
+        color: var(--sco-fontcolor) !important
+        padding: 2px 8px 2px 12px
+        margin: 4px
+        border-radius: 8px
+        border: var(--style-border-always)
+        background: var(--sco-card-bg)
+        font-size: 14px !important
+
+        sup
+          opacity: .6
+          margin-left: 4px
+
+    span.sidebar-menu-item-title
+      font-size: 12px
+      color: var(--sco-secondtext)
+      margin-left: 16px
+
+    .sidebar-menu-item
+      display: flex
+      flex-direction: column
+      padding: 0 16px
+      margin-bottom: 6px
+
+      a.menu-child
+        width: 100%
+        background: var(--sco-card-bg)
+        border-radius: 8px
+        border: var(--style-border-always)
+        display: flex
+        align-items: center
+        font-size: 14px
+
+        i
+          width: 24px
+          height: 24px
+          display: flex
+          align-items: center
+          justify-content: center
+
+      a.menu-child span
+        margin-left: 10px
+
+    .webinfo
+      padding: 0 16px
+      display: flex
+      white-space: nowrap
+      flex-direction: column
+
+      .webinfo-item
+        justify-content: space-between
+
+    .menus_items .site-page span:hover
+      color: var(--sco-fontcolor)
+
+  #toggle-sidebar
+    bottom: 80px
+
+@media screen and (min-width: 768px)
+  #sidebar #sidebar-menus
+    display: none
+
+@media screen and (max-width: 768px)
+  #sidebar #sidebar-menus
+    .back-menu-list-groups .back-menu-list .back-menu-item
+      width: calc(50% - 16px)
+
+    .menus_items .site-page
+      font-weight: 400
+
+    .menus_items li .site-page:hover
+      background: var(--sco-main)
+      color: var(--sco-white)
+
+    .menus_items li .site-page span:hover
+      color: var(--sco-white)
+
+#mobile-sidebar #mobile-sidebar-menus.open
+  background: var(--sco-maskbg)
+
+#sidebar-menus > hr
+  display: none

package/source/css/_mode/index.styl

@@ -0,0 +1,52 @@
+[data-theme=dark] 
+	--sco-theme #f2b94b
+	--sco-theme-op #f2b94b23
+	--sco-theme-op-deep #f2b94bdd
+	--sco-theme-none #f2b94b00
+	--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