hexo-theme-redefine-x 2.8.5

package/source/css/common/markdown.styl

@@ -0,0 +1,337 @@
+.markdown-body
+  font-family $english-font-family, $chinese-font-family, sans-serif
+  font-size $default-article-font-size
+
+  blockquote
+    p, ul, ol
+      padding 5px 5px 5px 10px
+
+    box-sizing border-box
+    margin 20px 0
+    color var(--default-text-color)
+    background var(--third-background-color)
+    padding 0 1rem 0 0.5rem
+    border-radius 0 $redefine-border-radius-medium $redefine-border-radius-medium 0
+    position relative
+    border-left 5px solid var(--default-text-color)
+
+  p
+    line-height $default-line-height
+    color var(--default-text-color)
+    font-weight 400
+    margin-bottom 1rem
+    margin-top 0
+
+  a
+    position relative
+    outline 0
+    text-decoration underline
+    overflow-wrap break-word
+    cursor pointer
+    // border-bottom 1px solid var(--third-text-color)
+    box-sizing border-box
+    padding-bottom 2px
+    text-underline-offset 2px
+    text-decoration-color var(--fourth-text-color)
+    transition: text-decoration-color 0.2s ease
+
+    &.link
+      padding-right 0.1em
+
+    .fas, .far, fab
+      margin 0 2px 0 6px
+      position relative
+      color var(--third-text-color)
+      font-size 0.88rem
+
+    .link-icon
+      transition transform 0.2s ease
+
+    &:hover,
+    &:focus
+      text-decoration underline !important
+      text-decoration-color var(--primary-color) !important
+
+      .link-icon
+        transform translate(0.1em, -0.1em)
+
+      &::after
+        background var(--primary-color)
+        text-decoration underline
+
+
+
+  strong
+    color var(--default-text-color)
+
+  hr
+    margin 2rem 0
+    border 0
+    border-top 2px solid var(--shadow-color-1)
+
+  em
+    color var(--default-text-color)
+
+  ul > li, ol > li
+    margin-left 20px
+    line-height 2rem
+
+  ul
+    margin-bottom 1.2rem
+
+    li
+      list-style disc
+
+      ul
+        li
+          list-style circle
+
+          ul
+            li
+              list-style square
+
+  ol
+    margin-bottom 1.2rem
+
+    li
+      list-style decimal
+
+      ul
+        li
+          list-style disc
+
+        ul
+          li
+            list-style circle
+
+      ol
+        li
+          list-style upper-alpha
+
+          ol
+            li
+              list-style upper-roman
+
+  li
+    color var(--default-text-color)
+
+  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
+    font-family $english-font-family, $chinese-font-family, sans-serif
+    color var(--second-text-color)
+    line-height $default-line-height
+
+    +redefine-tablet()
+      line-height: $default-line-height * 0.96
+
+  h1, .h1
+    font-size 3.2rem
+    font-weight 650
+    border-bottom solid 2px var(--fourth-text-color)
+    margin-top $h1-heading-margin-top
+    margin-bottom 1rem
+    letter-spacing -0.025em
+    line-height 1.2
+
+    +redefine-tablet()
+      font-size 1.7rem
+      line-height 1.2
+
+  h2, .h2
+    font-size 2.5rem
+    font-weight 650
+    padding 3px 0
+    border-bottom solid 2px var(--fourth-text-color)
+    margin-top $h2-heading-margin-top
+    margin-bottom 1rem
+    letter-spacing -0.025em
+    line-height 1.1
+
+    +redefine-tablet()
+      font-size 1.6rem
+      line-height 1.1
+
+  h3, .h3
+    font-size 1.8rem
+    font-weight 600
+    margin-top $h3-heading-margin-top
+    margin-bottom 0.75rem
+    letter-spacing -0.025em
+    line-height 1.3
+
+    +redefine-tablet()
+      font-size 1.5rem
+      line-height 1.2
+
+  h4, .h4
+    font-size 1.5rem
+    font-weight 600
+    margin-top $h4-heading-margin-top
+    margin-bottom 0.75rem
+    line-height 1.4
+
+    +redefine-tablet()
+      font-size 1.4rem
+      line-height 1.3
+
+  h5, .h5
+    font-size 1.28rem
+    font-weight 600
+    margin-top $h5-heading-margin-top
+    margin-bottom 0.5rem
+    line-height 1.3
+
+    +redefine-tablet()
+      font-size 1.18rem
+      line-height 1.2
+
+  h6, .h6
+    font-size 1.2rem
+    font-weight 600
+    margin-top $h6-heading-margin-top
+    margin-bottom 0.5rem
+    line-height 1.2
+
+    +redefine-tablet()
+      font-size 1.1rem
+      line-height 1.1
+
+
+  img
+    box-sizing border-box
+    border-radius $usr-img-border-radius
+    max-width 100%
+    cursor zoom-in
+    display block
+    transition-t('padding, margin', '0, 0', '0.2, 0.2', 'linear, linear')
+
+    if (hexo-config('articles.style.image_alignment') == 'center')
+      margin 1rem auto 1rem
+    else
+      margin 1rem 0 1rem
+
+  
+  del.mask
+    text-decoration none !important
+    transition .2s cubic-bezier(.25, .46, .45, .94) color, .2s cubic-bezier(.25, .46, .45, .94) background
+
+    * 
+      transition .35s cubic-bezier(.25, .46, .45, .94) opacity
+
+    &:not(:hover)
+      color transparent !important
+      background #000 !important
+
+      * 
+        opacity 0 !important
+
+      &, *
+        border none !important
+
+  
+
+  & > table,
+  .tab-pane > table
+    border-spacing 0
+    border-collapse collapse
+    width 100%
+    overflow auto
+    margin-bottom 1.2rem
+    margin-top 1rem
+    box-shadow var(--redefine-box-shadow-flat)
+    border-radius $redefine-border-radius-medium
+
+    thead
+      th
+        border-bottom 1px solid var(--shadow-color-1)
+        background-color var(--third-background-color) !important
+
+        &:first-child
+          border-top-left-radius $redefine-border-radius-medium
+
+        &:last-child
+          border-top-right-radius $redefine-border-radius-medium
+
+    tbody
+      tr
+        &:last-child
+          td
+            &:first-child
+              border-bottom-left-radius $redefine-border-radius-medium
+
+            &:last-child
+              border-bottom-right-radius $redefine-border-radius-medium
+
+    td, th
+      padding 8px 16px
+      // border 1px solid var(--border-color)
+      border-left 1px solid var(--shadow-color-1)
+
+      &:first-child
+        border-left none
+
+    tr
+      background-color var(--background-color)
+      // border 1px solid var(--fourth-text-color)
+
+    tr:nth-child(2n)
+      background-color var(--second-background-color)
+
+  mjx-container
+    display inline
+    overflow-x auto
+    white-space nowrap
+    margin 0 0.2rem
+
+    &:hover::-webkit-scrollbar-thumb
+      border 3px solid rgba(183, 183, 183, 0.3)
+
+    &::-webkit-scrollbar
+      width 6px
+      height 6px
+      transition all 0.2s ease
+      display block
+
+    &::-webkit-scrollbar-track
+      background transparent
+      border none
+
+    &::-webkit-scrollbar-thumb
+      border-radius 20px
+      border 3px solid rgba(183, 183, 183, 0)
+      transition all 0.2s ease
+
+    svg
+      display inline-block /* Allow content to be centered properly */
+
+
+  mjx-container[display="true"]
+    display block
+    justify-content center
+    vertical-align baseline
+    overflow-x auto
+    text-align center
+    white-space nowrap
+    scrollbar-width: thin  // For Firefox, if needed
+    padding-bottom 8px
+
+    &:hover::-webkit-scrollbar-thumb
+      border 3px solid rgba(183, 183, 183, 0.3)
+
+    &::-webkit-scrollbar
+      width 6px
+      height 6px
+      transition all 0.2s ease
+      display block
+
+    &::-webkit-scrollbar-track
+      background transparent
+      border none
+
+    &::-webkit-scrollbar-thumb
+      border-radius 20px
+      border 3px solid rgba(183, 183, 183, 0)
+      transition all 0.2s ease
+
+
+    svg
+      display inline-block

package/source/css/common/redefine-theme.styl

@@ -0,0 +1,65 @@
+redefine-tablet()
+  @media (max-width $media-max-width)
+    {block}
+
+redefine-mobile()
+  @media (max-width $media-max-width-mobile)
+    {block}
+
+hover-style(isTransform, scaleX, scaleY)
+  box-shadow var(--redefine-box-shadow)
+
+  if (isTransform)
+    transition-t('transform', '0', '0.2', 'linear')
+
+  &:hover
+    if (hexo-config('global.hover.scale') && isTransform)
+      transform scaleX(scaleX) scaleY(scaleX)
+
+    if (hexo-config('global.hover.shadow'))
+      box-shadow var(--redefine-box-shadow-hover)
+
+redefine-container(isTransform, scaleX, scaleY, padding, marginBottomValue)
+  padding padding
+  border-radius $redefine-border-radius-large
+  box-sizing border-box
+  background var(--background-color)
+
+  if (marginBottomValue != 0)
+    margin-bottom marginBottomValue
+
+    +redefine-tablet()
+      margin-bottom: marginBottomValue * 0.8
+
+    +redefine-mobile()
+      margin-bottom: marginBottomValue * 0.6
+
+  hover-style(isTransform, scaleX, scaleY)
+
+  +redefine-tablet()
+    padding: padding - 4
+    border-radius: $redefine-border-radius-large
+
+  +redefine-mobile()
+    padding: padding - 8
+    border-radius: $redefine-border-radius-large
+
+
+.redefine-box-shadow
+  box-shadow var(--redefine-box-shadow)
+
+.redefine-box-shadow-flat
+  box-shadow var(--redefine-box-shadow-flat)
+
+@media (min-width: 640px)
+  .redefine-box-shadow:hover
+    box-shadow var(--redefine-box-shadow-hover)
+
+  .redefine-box-shadow-flat:hover
+    box-shadow var(--redefine-box-shadow)
+
+.ellipsis
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+  width 100%

package/source/css/common/theme.styl

@@ -0,0 +1,72 @@
+@require "./colors.styl"
+// ========================================================================================
+//                                  LIGHT/DARK MODE SWITCH
+// ========================================================================================
+root-color(mode) {
+  --background-color mode == 'light' ? $background-color : $dark-background-color
+  --background-color-transparent mode == 'light' ? $background-color-transparent : $dark-background-color-transparent
+  --background-color-transparent-15 mode == 'light' ? $background-color-transparent-15 : $dark-background-color-transparent-15
+  --background-color-transparent-40 mode == 'light' ? $background-color-transparent-40 : $dark-background-color-transparent-40
+  --background-color-transparent-80 mode == 'light' ? $background-color-transparent-80 : $dark-background-color-transparent-80
+  --second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color
+  --third-background-color mode == 'light' ? $third-background-color : $dark-third-background-color
+  --third-background-color-transparent mode == 'light' ? $third-background-color-transparent : $dark-third-background-color-transparent
+  --primary-color mode == 'light' ? $primary-color : $dark-primary-color
+  --first-text-color mode == 'light' ? $first-text-color : $dark-first-text-color
+  --second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color
+  --third-text-color mode == 'light' ? $third-text-color : $dark-third-text-color
+  --fourth-text-color mode == 'light' ? $fourth-text-color : $dark-fourth-text-color
+  --default-text-color mode == 'light' ? $default-text-color : $dark-default-text-color
+  --invert-text-color mode == 'light' ? $invert-text-color : $dark-invert-text-color
+  --border-color mode == 'light' ? $border-color : $dark-border-color
+  --selection-color mode == 'light' ? $selection-color : $dark-selection-color
+  --shadow-color-1 mode == 'light' ? $shadow-color-1 : $dark-shadow-color-1
+  --shadow-color-2 mode == 'light' ? $shadow-color-2 : $dark-shadow-color-2
+  --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
+  --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
+  --scrollbar-color-hover mode == 'light' ? $scrollbar-color-hover : $dark-scrollbar-color-hover
+  --scroll-bar-bg-color mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color
+  --link-color mode == 'light' ? $link-color : $dark-link-color
+  --copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
+  --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
+  --pjax-progress-bar-color : mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
+  --archive-timeline-last-child-color : mode == 'light' ? $archive-timeline-last-child-color : $dark-archive-timeline-last-child-color
+
+  --note-blue-title-bg : mode == 'light' ? $note-blue-title-bg : $dark-note-blue-title-bg
+  --note-red-title-bg : mode == 'light' ? $note-red-title-bg : $dark-note-red-title-bg
+  --note-cyan-title-bg : mode == 'light' ? $note-cyan-title-bg : $dark-note-cyan-title-bg
+  --note-green-title-bg : mode == 'light' ? $note-green-title-bg : $dark-note-green-title-bg
+  --note-yellow-title-bg : mode == 'light' ? $note-yellow-title-bg : $dark-note-yellow-title-bg
+  --note-gray-title-bg : mode == 'light' ? $note-gray-title-bg : $dark-note-gray-title-bg
+  --note-type-title-bg : mode == 'light' ? $note-type-title-bg : $dark-note-type-title-bg
+  --note-black-title-bg : mode == 'light' ? $note-black-title-bg : $dark-note-black-title-bg
+  --note-purple-title-bg : mode == 'light' ? $note-purple-title-bg : $dark-note-purple-title-bg
+
+  --home-banner-text-color mode == 'light' ? $home-banner-text-color : $home-banner-text-color-dark
+  --home-banner-icons-container-border-color mode == 'light' ? $home-banner-icons-container-border-color : $home-banner-icons-container-border-color-dark
+  --home-banner-icons-container-background-color mode == 'light' ? $home-banner-icons-container-background-color : $home-banner-icons-container-background-color-dark
+
+  --redefine-box-shadow : var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px
+  --redefine-box-shadow-hover : var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset
+  --redefine-box-shadow-flat : var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px
+  --redefine-box-shadow-flat-hover : var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset
+
+  --mermaid-theme : mode == 'light' ? $mermaid-theme : $dark-mermaid-theme
+
+}
+
+
+$temp-mode = hexo-config('colors.default_mode')
+$default-mode = $temp-mode == 'dark' ? 'dark' : 'light'
+
+:root {
+  root-color($default-mode)
+}
+
+.light {
+  root-color('light')
+}
+
+.dark {
+  root-color('dark')
+}

package/source/css/common/variables.styl

@@ -0,0 +1,145 @@
+@require './theme.styl'
+
+// ========================================================================================
+//                                   REDEFINE THEME VARIABLE                                 
+// ========================================================================================
+
+
+// ========================================================================================
+//                                           LAYOUT
+// ========================================================================================
+$navbar-height = 70px;                                           // navbar height
+$navbar-shrink-height = $navbar-height * 0.72;                   // navbar shrink height
+$scroll-progress-bar-height = 2px;                               // scroll progress bar height
+$main-content-width = 80%;                                       // main content width (PC)
+$main-content-width-tablet = 86%;                                // main content width (tablet)
+$main-content-width-mobile = 90%;                                // main content width (mobile)
+$post-tool-button-width = 38px;                                  // post tool button width
+$spacing-unit = 38px;                                 // component-spacing-value (PC)
+
+// main content max width
+$temp-content-max-width = hexo-config('global.content_max_width')
+$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px
+$has-toc-content-max-width = $content-max-width * 1.2
+
+$navbar-width-home-data = hexo-config('navbar.width.home')
+$navbar-width-home = $navbar-width-home-data ? convert($navbar-width-home-data) : 1200px
+$navbar-width-pages-data = hexo-config('navbar.width.pages')
+$navbar-width-pages = $navbar-width-pages-data ? convert($navbar-width-pages-data) : 1000px
+
+
+// ========================================================================================
+//                                         TITLES
+// ========================================================================================
+
+$h1-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h1')
+$h1-heading-margin-top = $h1-heading-margin-top-data ? convert($h1-heading-margin-top-data) : 3.2rem
+$h2-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h2')
+$h2-heading-margin-top = $h2-heading-margin-top-data ? convert($h2-heading-margin-top-data) : 2.4rem
+$h3-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h3')
+$h3-heading-margin-top = $h3-heading-margin-top-data ? convert($h3-heading-margin-top-data) : 1.9rem
+$h4-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h4')
+$h4-heading-margin-top = $h4-heading-margin-top-data ? convert($h4-heading-margin-top-data) : 1.6rem
+$h5-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h5')
+$h5-heading-margin-top = $h5-heading-margin-top-data ? convert($h5-heading-margin-top-data) : 1.4rem
+$h6-heading-margin-top-data = hexo-config('articles.style.headings_top_spacing.h6')
+$h6-heading-margin-top = $h6-heading-margin-top-data ? convert($h6-heading-margin-top-data) : 1.3rem
+
+
+// ========================================================================================
+//                                          MEDIA
+// ========================================================================================
+$media-max-width = 768px;                                 // media query max width (tablet)
+$media-max-width-mobile = 640px;                          // media query max width (mobile)
+
+redefine-tablet() {
+  @media (max-width $media-max-width){
+    {block}
+  }
+}
+
+redefine-mobile() {
+  @media (max-width $media-max-width-mobile){
+    {block}
+  }
+}
+
+// ========================================================================================
+//                                         Z-INDEX
+// ========================================================================================
+$z-index-1 = 1001
+$z-index-2 = 1002
+$z-index-3 = 1003
+$z-index-4 = 1004
+$z-index-5 = 1005
+$z-index-6 = 1006
+$z-index-7 = 1007
+$z-index-8 = 1008
+$z-index-9 = 1009
+
+
+// ========================================================================================
+//                                      BORDER RADIUS
+// ========================================================================================
+
+$redefine-border-radius-none = 0px
+$redefine-border-radius-xsmall = 4px
+$redefine-border-radius-xsmall-top = 4px 4px 0px 0px
+$redefine-border-radius-xsmall-bottom = 0px 0px 4px 4px
+$redefine-border-radius-small = 9px
+$redefine-border-radius-small-top = 9px 9px 0px 0px
+$redefine-border-radius-small-bottom = 0px 0px 9px 9px
+$redefine-border-radius-medium = 14px
+$redefine-border-radius-medium-top = 14px 14px 0px 0px
+$redefine-border-radius-medium-bottom = 0px 0px 14px 14px
+$redefine-border-radius-large = 18px
+$redefine-border-radius-large-top = 18px 18px 0px 0px
+$redefine-border-radius-large-bottom = 0px 0px 18px 18px
+$redefine-border-radius-xlarge = 24px
+$redefine-border-radius-xlarge-top = 24px 24px 0px 0px
+$redefine-border-radius-xlarge-bottom = 0px 0px 24px 24px
+$redefine-border-radius-xxlarge = 48px
+$redefine-border-radius-xxlarge-top = 48px 48px 0px 0px
+$redefine-border-radius-xxlarge-bottom = 0px 0px 48px 48px
+$redefine-border-radius-full = 50%
+$redefine-border-radius-full-top = 50% 50% 0px 0px
+$redefine-border-radius-full-bottom = 0px 0px 50% 50%
+
+$temp-usr-img-border-radius = hexo-config('articles.style.image_border_radius')
+$usr-img-border-radius = $temp-usr-img-border-radius ? convert($temp-usr-img-border-radius) : $redefine-border-radius-medium
+
+// ========================================================================================
+//                                    MERMAID THEME
+// ========================================================================================
+$mermaid-theme = hexo-config('mermaid.theme.light')
+$dark-mermaid-theme = hexo-config('mermaid.theme.dark')
+
+
+
+// ========================================================================================
+//                                     FONT VARIABLES
+// ========================================================================================
+
+if hexo-config('global.fonts.chinese.enable') {
+  $temp-chinese-font-family = hexo-config('global.fonts.chinese.family')
+  $chinese-font-family = $temp-chinese-font-family ? $temp-chinese-font-family : 'PingFang SC'
+} else {
+  $chinese-font-family = -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
+}
+
+if hexo-config('global.fonts.english.enable') {
+  $temp-english-font-family = hexo-config('global.fonts.english.family')
+  $english-font-family = $temp-english-font-family ? $temp-english-font-family : 'Geist Variable'
+} else {
+  $english-font-family = 'Geist Variable'
+}
+
+$default-font-family = Geist Variable, Noto Sans SC, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial
+$default-font-size = 16px
+$temp-default-article-font-size = hexo-config('articles.style.font_size')
+$temp-default-line-height = hexo-config('articles.style.line_height')
+$default-article-font-size = $temp-default-article-font-size ? convert($temp-default-article-font-size) : 16px
+$default-line-height = $temp-default-line-height ? $temp-default-line-height : 1.5
+$default-font-weight = 400
+
+