二〇二六年四月二十一日

10 files changed, 500 insertions, 0 deletions

diff --git a/themes/theme/source/css/post/code.styl b/themes/theme/source/css/post/code.styl
new file mode 100644
index 00000000..f641f8d2
--- /dev/null
+++ b/themes/theme/source/css/post/code.styl
@@ -0,0 +1,97 @@
+// 统一字体权重
+font-weight-normal()
+    font-weight 400
+
+// 代码块基础样式
+code
+    text-style(code-highlight)
+    font-weight 400
+
+.code
+    pre
+        span
+            text-style(code-default)
+            font-weight 400
+
+// 代码高亮区域 - 设置整体背景色
+.highlight
+    margin 0 0 $margin-m-2 0
+    overflow-x auto
+    border 1px solid $color-border
+    border-radius $margin-s-1
+    // 代码块背景色
+    background-color $color-code-background
+
+    .line
+        width $margin-l-2
+
+    table
+        margin 0
+        border-spacing 0
+        border none
+        // 表格继承背景色
+        background-color transparent
+
+    td.code
+        padding 0 $margin-s-1 0 $margin-m-0
+
+    pre
+        font-weight 400
+        background-color transparent
+
+// 行号列 - 与代码块背景色保持一致
+td.gutter
+    width $margin-l-0
+    padding 0 $margin-m-0
+    vertical-align top
+    position -webkit-sticky
+    position sticky
+    left 0
+    // 与代码块背景色一致
+    background-color $color-code-background
+    // 添加右边框分隔
+    border-right 1px solid $color-border
+    // 确保层级正确
+    z-index 1
+
+    pre
+        margin 0
+        color $color-code-marker
+        font-size $font-size-code
+        font-weight 400
+        background-color transparent
+
+// 代码列
+td.code
+    vertical-align top
+    background-color transparent
+
+    pre
+        margin 0
+        font-weight 400
+        background-color transparent
+
+// 所有 pre 标签
+pre
+    margin 0
+    overflow-x auto
+    font-weight 400
+
+// 移除内联代码背景（在代码块中不需要）
+.highlight code
+    background-color transparent
+    padding 0
+
+@media (max-width: 688px)
+    code
+        font-size 12*$px
+
+    .highlight
+        pre
+            font-size 12*$px
+
+        td.gutter
+            width $margin-m-2
+            padding-right $margin-s-2
+            font-size 11*$px
+            background-color $color-code-background
diff --git a/themes/theme/source/css/post/media.styl b/themes/theme/source/css/post/media.styl
new file mode 100644
index 00000000..3d49010f
--- /dev/null
+++ b/themes/theme/source/css/post/media.styl
@@ -0,0 +1,17 @@
+img
+    width 100%
+    height auto
+
+// fix 16:9 ratio
+.video-container 
+    width 100%
+    padding-top 56.25%
+    position relative
+
+.video-container>iframe
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+
diff --git a/themes/theme/source/css/post/mermaid.styl b/themes/theme/source/css/post/mermaid.styl
new file mode 100644
index 00000000..aae47ec5
--- /dev/null
+++ b/themes/theme/source/css/post/mermaid.styl
@@ -0,0 +1,96 @@
+// Mermaid 图表样式
+
+// 基础容器样式
+.mermaid
+    display flex
+    justify-content center
+    align-items center
+    margin $margin-l-0 auto
+    padding $margin-m-2
+    background $color-text-fourth
+    border $line-third solid $color-border
+    border-radius $margin-s-2
+    cursor pointer
+    transition all $transition-duration ease
+    max-width 100%
+    overflow auto
+    position relative
+
+    // 悬停效果
+    &:hover
+        border-color $color-accent
+        box-shadow 0 4*$px 12*$px rgba(0, 0, 0, 0.1)
+
+    // 提示文字
+    &::after
+        content "点击放大"
+        position absolute
+        bottom $margin-s-2
+        right $margin-s-2
+        font-size $font-size-post-tag
+        color $color-text-secondary
+        opacity 0
+        transition opacity $transition-duration
+
+    &:hover::after
+        opacity 1
+
+    // SVG 图表样式
+    svg
+        max-width 100%
+        height auto
+
+// Mermaid 放大模态框
+.mermaid-modal
+    display none
+    position fixed
+    top 0
+    left 0
+    width 100%
+    height 100%
+    background $color-overlay
+    z-index 10000
+    justify-content center
+    align-items center
+    padding $margin-primary
+
+    &.active
+        display flex
+
+    // 关闭按钮
+    .mermaid-close
+        position absolute
+        top $margin-m-2
+        right $margin-m-2
+        width 48*$px
+        height 48*$px
+        background $color-background
+        border $line-third solid $color-border
+        border-radius 50%
+        cursor pointer
+        display flex
+        justify-content center
+        align-items center
+        font-size 24*$px
+        color $color-text-primary
+        transition all $transition-duration
+
+        &:hover
+            background $color-accent
+            color $color-background
+            border-color $color-accent
+
+    // 放大后的图表容器
+    .mermaid-content
+        max-width 95vw
+        max-height 90vh
+        overflow auto
+        background $color-background
+        padding $margin-l-0
+        border-radius $margin-s-2
+        box-shadow 0 8*$px 32*$px rgba(0, 0, 0, 0.3)
+
+        svg
+            display block
+            max-width none
+            max-height none
diff --git a/themes/theme/source/css/post/post_comment.styl b/themes/theme/source/css/post/post_comment.styl
new file mode 100644
index 00000000..b027897a
--- /dev/null
+++ b/themes/theme/source/css/post/post_comment.styl
@@ -0,0 +1,12 @@
+.post-comment
+    margin-top $margin-l-1
+
+.v[data-class="v"] .vsys
+    display none!important
+
+.vcontent
+    p
+        margin-top 0!important
+        font-size $font-size-comment!important
+        color $color-text-primary!important
+
diff --git a/themes/theme/source/css/post/post_content.styl b/themes/theme/source/css/post/post_content.styl
new file mode 100644
index 00000000..701f19e3
--- /dev/null
+++ b/themes/theme/source/css/post/post_content.styl
@@ -0,0 +1,104 @@
+.post-content 
+    margin-top $margin-l-1
+
+h1, h2, h3, h4, h5, h6
+    margin-top $margin-l-0
+    margin-bottom $margin-m-1
+
+h1
+    text-style(heading-h1)
+
+h2
+    text-style(heading-h2)
+
+h3
+    text-style(heading-h3)
+
+h4
+    text-style(heading-h4)
+
+h5
+    text-style(heading-h5)
+
+h6
+    text-style(heading-h6)
+    
+p
+    text-style(body-default)
+
+strong
+    text-style(body-bold)
+
+em
+    text-style(body-italic)
+
+del 
+    text-style(body-delete)
+
+.post-content
+    a 
+        underline-motion(underline-link)
+
+blockquote
+    margin-left 0
+    margin-right 0
+    margin-top $margin-m-2
+    border-left $margin-s-2 solid $color-text-secondary
+
+    p
+        margin-left $margin-m-2
+        margin-top 0
+        margin-bottom 0
+        margin-right $margin-m-2
+        padding-top $margin-m-0
+        padding-bottom $margin-m-0
+
+    blockquote
+        margin-left $margin-m-2
+        margin-top 0
+        margin-bottom 0
+
+.post-content
+    li
+        text-style(body-default)
+        margin-top $margin-m-0
+
+    ol 
+        padding-left $margin-l-0
+        margin-left $margin-m-1
+        margin-right $margin-m-1
+        margin-top $margin-m-2
+
+        ol
+            margin-top $margin-m-0
+
+    ul 
+        padding-left $margin-l-0
+        margin-left $margin-m-1
+        margin-right $margin-m-1
+        margin-top $margin-m-2
+
+        ul 
+            margin-top $margin-m-0
+
+        li 
+            list-style-type disc
+            
+
+    .task-list
+        padding-left 0
+        .task-list-item 
+            list-style none
+    
+dl 
+    dt 
+        padding $margin-m-0 0
+        text-style(body-bold)
+
+    dt::after
+        content " :"
+
+    dd 
+        margin 0
+
+            
diff --git a/themes/theme/source/css/post/post_footer.styl b/themes/theme/source/css/post/post_footer.styl
new file mode 100644
index 00000000..65782aec
--- /dev/null
+++ b/themes/theme/source/css/post/post_footer.styl
@@ -0,0 +1,29 @@
+.post-footer
+    margin-top $margin-l-1
+
+    a 
+        underline-motion(link)
+
+.post-nav
+    margin-top $margin-m-1
+    display flex
+    flex-wrap wrap
+    text-style(header)
+
+    .prev-item
+        display flex
+        text-align left
+        min-width 50%
+        align-items center
+        .arrow-left
+            margin-right $margin-s-2
+
+    .next-item
+        display flex
+        flex-direction row-reverse
+        text-align right
+        min-width 50%
+        align-items center
+        .arrow-right
+            margin-left $margin-s-2
+        
\ No newline at end of file
diff --git a/themes/theme/source/css/post/post_head.styl b/themes/theme/source/css/post/post_head.styl
new file mode 100644
index 00000000..32f4b47b
--- /dev/null
+++ b/themes/theme/source/css/post/post_head.styl
@@ -0,0 +1,18 @@
+.post-head
+    margin-top $margin-l-1
+    
+    .post-info
+        width 100%
+        display flex
+        flex-direction column
+
+        .post-title
+            margin-bottom $margin-m-1
+            text-style(heading-h1)
+
+        .post-date
+            text-style(post-date)
+    
+    .post-img
+        margin-top $margin-l-1
+
diff --git a/themes/theme/source/css/post/table.styl b/themes/theme/source/css/post/table.styl
new file mode 100644
index 00000000..405e2433
--- /dev/null
+++ b/themes/theme/source/css/post/table.styl
@@ -0,0 +1,36 @@
+.post-content
+    table
+        border $color-text-primary solid $line-third 
+        width 100%
+        text-align left
+        border-collapse collapse
+        table-layout fixed
+
+        td, th
+            padding $margin-m-1
+
+        th
+            font-weight 400
+
+        td
+            font-weight 400
+
+        table, tboby, tr, td
+            background-color inherit
+
+.highlight>table
+    width auto
+    min-width fit-content
+    border none
+    
+    td
+        padding 0
+        border none
+
+@media (max-width: 480px)
+    .block-table
+        display block
+        overflow-x auto
+            
+
+            
\ No newline at end of file
diff --git a/themes/theme/source/css/post/tag_plugin.styl b/themes/theme/source/css/post/tag_plugin.styl
new file mode 100644
index 00000000..9a1a7d94
--- /dev/null
+++ b/themes/theme/source/css/post/tag_plugin.styl
@@ -0,0 +1,48 @@
+.gist
+    td
+        border 0
+
+    a 
+        color $color-text-secondary
+        background-image none!important
+
+blockquote>footer
+    margin 0 $margin-m-2
+    padding $margin-m-0 0
+    font-size $font-size-blockquote-footer
+    color $color-text-secondary
+
+    cite
+        margin-left $margin-m-0
+
+    cite::before
+        content " — "
+
+    strong
+        color $color-text-secondary
+        font-size $font-size-blockquote-footer
+        
+    a 
+        color $color-text-secondary
+        background-image none!important
+    
+
+figcaption
+    font-family monospace
+    font-size $font-size-blockquote-footer
+    padding $margin-m-0 0
+    color $color-text-secondary
+
+    span
+        padding-right $margin-m-0
+
+    a 
+        color $color-text-secondary
+        background-image none!important
+
+blockquote.pullquote.left
+    float left
+
+blockquote.pullquote.right
+    float right
+    
\ No newline at end of file
diff --git a/themes/theme/source/css/post/task_list.styl b/themes/theme/source/css/post/task_list.styl
new file mode 100644
index 00000000..ea5dabca
--- /dev/null
+++ b/themes/theme/source/css/post/task_list.styl
@@ -0,0 +1,43 @@
+ul 
+    li.task-list-item
+        position relative
+
+    li.task-list-item>input[type=checkbox]
+        list-style none
+        background none
+        appearance none
+        -webkit-appearance none
+        -moz-appearance none;
+        width $margin-l-0
+        display inline-block
+        border none
+        opacity 1
+
+    li.task-list-item>input[type=checkbox][checked]:before 
+        background $color-text-primary
+        -webkit-mask-image url('../icon/checkbox-checked.svg')
+        -webkit-mask-position center center
+        mask-image url('../icon/checkbox-checked.svg')
+        -webkit-mask-repeat no-repeat
+
+    li.task-list-item>input[type=checkbox]:before 
+        background $color-text-primary
+        -webkit-mask-image url('../icon/checkbox-default.svg')
+        -webkit-mask-position center center
+        mask-image url('../icon/checkbox-default.svg')
+        -webkit-mask-repeat no-repeat
+        
+    li.task-list-item>input[type=checkbox]:after, li.task-list-item>input[type=checkbox]:before
+        display block
+        position absolute
+        content "X"
+        color transparent
+        left 0
+        top 0
+        width $icon-size
+        height $line-height-body
+        background-size contain
+        background-repeat no-repeat
+        background-position-x 0
+        background-position-y center
+        --webkit-touch-callout none
\ No newline at end of file