pjax

source/css/_layout/head.styl

@@ -22,27 +22,37 @@
   #site_title,
   #site_subtitle,
   #scroll_down .scroll-down-effects
-    color: $light-grey
     text-align: center
     text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
     line-height: 1.5
 
   #site_title
     margin: 0
+    color: var(--white)
     font-size: 1.3rem
 
+    @media screen and (min-width: $sm)
+      font-size: 2rem
+
   #site_subtitle
+    color: var(--light-grey)
     font-size: .8rem
 
+    @media screen and (min-width: $sm)
+      font-size: 1.2rem
+
   #site_social_icons
     display: none
     margin: 0 auto
     width: 15rem
     text-align: center
 
+    @media screen and (max-width: $sm)
+      display: block
+
     .social-icon
       margin: 0 .5rem
-      color: $light-grey
+      color: var(--light-grey)
       text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
       font-size: 1rem
       cursor: pointer
@@ -56,22 +66,32 @@
     .scroll-down-effects
       position: relative
       width: 100%
+      color: var(--light-grey)
       font-size: 30px
 
   // page
   &.not-index-bg
     height: 20rem
 
+    @media screen and (max-width: $sm)
+      height: 14rem
+
   #page_site-info
     position: absolute
     top: 10rem
     padding: 0 .5rem
     width: 100%
 
+    @media screen and (max-width: $sm)
+      top: 7rem
+
   // post
   &.post-bg
     height: 20rem
 
+    @media screen and (max-width: $sm)
+      height: 18rem
+
     &:before
       position: absolute
       top: 0
@@ -87,43 +107,60 @@
       bottom: 1.5rem
       padding: 0 8%
       width: 100%
-      color: $light-grey
       text-align: left
 
+      @media screen and (max-width: $sm)
+        bottom: 1.1rem
+        padding: 0 1.1rem
+
       #post-title
         margin-bottom: .4rem
         font-size: 1.5rem
 
+        @media screen and (max-width: $sm)
+          font-size: 1.2rem
+
         .posttitle
           @extend .limit-more-line
+          color: var(--white)
           line-height: 1.5
           -webkit-line-clamp: 3
 
       #post-meta
+        color: var(--light-grey)
         font-size: 95%
 
-        > .meta-secondline,
-        > .meta-thirdline
-          display: inline
+        @media screen and (min-width: $sm)
+          > .meta-secondline
+            > span:first-child
+              display: none
 
-        .word-count,
-        #busuanzi_value_page_pv,
-        .comment-count
-          padding-left: .2rem
+        @media screen and (max-width: $sm)
+          font-size: 90%
+
+          > .meta-firstline,
+          > .meta-secondline
+            display: inline
 
         .post-meta
-          &__separator
-            margin: 0 .3rem
+          &-separator
+            margin: 0 .25rem
 
-          &__icon
+          &-icon
             margin-right: .2rem
 
+          &-label
+            if hexo-config('post_meta.post.label')
+              margin-right: .2rem
+            else
+              display: none
+
         a
-          color: $light-grey
+          color: var(--light-grey)
           transition: all .3s ease-out
 
           &:hover
-            color: $light-blue
+            color: $text-hover
             text-decoration: underline
 
 // css hack
@@ -145,6 +182,9 @@ _:future,
   opacity: 0
   transition: all .5s
 
+  @media screen and (max-width: $sm)
+    padding: 10px .8rem
+
   &:not(.fixed)
     .menus
       padding-right: 0 !important
@@ -155,30 +195,30 @@ _:future,
     vertical-align: top
 
     &:hover
-      color: $white
+      color: var(--white)
 
     &.is-visible-inline
       .site-page
         font-size: inherit
 
   a
-    color: $light-grey
+    color: var(--light-grey)
 
     &:hover
-      color: $white
+      color: var(--white)
 
   &.fixed
     position: fixed
     top: -60px
     z-index: 91
-    background: alpha($white, .8)
+    background: rgba(255, 255, 255, .8)
     box-shadow: 0 5px 6px -5px alpha($grey, .6)
     transition: transform .2s ease-in-out, opacity .2s ease-in-out
 
     a,
     #site-name,
     .toggle-menu
-      color: $font-black
+      color: var(--font-color)
       text-shadow: none
 
       &:hover
@@ -188,9 +228,6 @@ _:future,
     transition: all .5s
     transform: translate3d(0, 100%, 0)
 
-    .menus_item_child
-      background-color: $white !important
-
   #site-name
     text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
     font-weight: bold
@@ -208,13 +245,12 @@ _:future,
         .menus_item_child
           display: block
 
-        .menus-expand
+        i.expand
           transform: rotate(180deg) !important
 
-      .menus-expand
+      i.expand
         padding: 4px
-        transition: all .3s
-        transform: rotate(0)
+        transition: transform .3s
 
       & > a
         &:after
@@ -239,7 +275,7 @@ _:future,
         margin-top: 8px
         padding: 0
         width: max-content
-        background-color: alpha($white, .8)
+        background-color: var(--sidebar-bg)
         box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
         animation: sub_menus .3s .1s ease both
 
@@ -255,13 +291,13 @@ _:future,
           list-style: none
 
           &:hover
-            background: $theme-color
+            background: var(--text-bg-hover)
 
           a
             display: inline-block
             padding: .3rem .7rem
             width: 100%
-            color: $font-black
+            color: var(--font-color)
             text-shadow: none
 
   #search_button
@@ -273,54 +309,4 @@ _:future,
     padding-bottom: .3rem
     text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
     font-size: .7rem
-    cursor: pointer
-
-@media screen and (min-width: $sm)
-  #page-header
-    #site_title
-      font-size: 2rem
-
-    #site_subtitle
-      font-size: 1.2rem
-
-@media screen and (max-width: $sm)
-  #nav
-    padding: 10px .8rem
-
-  #page-header
-    #site_social_icons
-      display: block
-
-    &.not-index-bg
-      height: 14rem
-
-    #page_site-info
-      top: 7rem
-
-    &.post-bg
-      height: 18rem
-
-      & > #post-info
-        bottom: 1rem
-        padding: 0 5%
-
-        & > #post-title
-          font-size: 1.2rem
-
-        & > #post-meta
-          font-size: 90%
-
-          .post-meta__categories
-            display: none
-
-          .meta-thirdline
-            display: block
-
-            .post-meta-pv-cv
-              .post-meta__separator:first-child
-                display: none
-
-            if !hexo-config('busuanzi.page_pv')
-              .post-meta-commentcount
-                .post-meta__separator
-                  display: none
+    cursor: pointer