diff --git a/_includes/animated-background.html b/_includes/animated-background.html new file mode 100644 index 0000000..997dd59 --- /dev/null +++ b/_includes/animated-background.html @@ -0,0 +1,52 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/_includes/footer-busuanzi.html b/_includes/footer-busuanzi.html new file mode 100644 index 0000000..c798536 --- /dev/null +++ b/_includes/footer-busuanzi.html @@ -0,0 +1,4 @@ + + + | + \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..10ceff1 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,53 @@ + + + diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..83b936a --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,86 @@ +--- +layout: compress +--- + + + +{% include origin-type.html %} + +{% include lang.html %} + +{% if site.theme_mode %} + {% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %} +{% endif %} + + + + {% include head.html %} + + + {% include sidebar.html lang=lang %} + +
+
+ {% include topbar.html lang=lang %} + +
+
+ {% if layout.refactor or layout.layout == 'default' %} + {% include refactor-content.html content=content lang=lang %} + {% else %} + {{ content }} + {% endif %} +
+ + + +
+ +
+ +
+ {% for _include in layout.tail_includes %} + {% assign _include_path = _include | append: '.html' %} + {% include {{ _include_path }} lang=lang %} + {% endfor %} + + {% include_cached footer.html lang=lang %} +
+
+ + {% include_cached search-results.html lang=lang %} +
+ + +
+ +
+ + {% if site.pwa.enabled %} + {% include_cached notification.html lang=lang %} + {% endif %} + + {% if site.backgroud_animation %} + {% include animated-background.html %} + {% endif %} + + + {% include js-selector.html lang=lang %} + + {% include_cached search-loader.html lang=lang %} + + diff --git a/assets/css/animation.scss b/assets/css/animation.scss new file mode 100644 index 0000000..2238441 --- /dev/null +++ b/assets/css/animation.scss @@ -0,0 +1,77 @@ +/* 生成动画 */ +@keyframes infirot { + from { + -webkit-transform: rotate(0deg); + } + + to { + -webkit-transform: rotate(360deg); + } + } + + .icon-loading1 { + display: inline-block; + animation: infirot 1s linear infinite; + -webkit-animation: infirot 1s linear infinite; + } + + @function random_range($min, $max) { + $rand: random(); + $random_range: $min + floor($rand * (($max - $min) + 1)); + @return $random_range; + } + + #animation { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + + @keyframes animate { + 0% { + transform: translateY(0) rotate(0deg); + opacity: 1; + border-radius: 0; + } + 100% { + transform: translateY(-1200px) rotate(720deg); + opacity: 0; + border-radius: 50%; + } + } + + @media all and (min-width: 1200px) { + .animation-circle { + position: absolute; + left: var(--circle-left); + bottom: -300px; + display: block; + background: var(--circle-background); + width: var(--circle-side-length); + height: var(--circle-side-length); + animation: animate 25s linear infinite; + animation-duration: var(--circle-time); + animation-delay: var(--circle-delay); + pointer-events: none; + + @for $i from 0 through 50 { + &:nth-child(#{$i}) { + --circle-left: #{random_range(0%, 100%)}; + --circle-background: rgba(#{random_range(0, 255)}, #{random_range(0, 255)}, #{random_range(0, 255)}, 0.06); // 最后一个数为透明度 + --circle-side-length: #{random_range(20px, 200px)}; + --circle-time: #{random_range(10s, 45s)}; + --circle-delay: #{random_range(0s, 25s)}; + } + } + } + } + + @media all and (max-width: 1199px) { + .animation-circle { + display: none; + } + } + } \ No newline at end of file diff --git a/assets/css/colorbox.scss b/assets/css/colorbox.scss new file mode 100644 index 0000000..6f5e368 --- /dev/null +++ b/assets/css/colorbox.scss @@ -0,0 +1,77 @@ +/* colorbox 样式设计 */ +/* 定义了 box-info, box-tip, box-warning, box-danger 四种 colorbox */ +@mixin colorbox($border-color, $icon-color, $icon-content, $bg-color, $fa-style: 'solid') { + border-left: .2rem solid $border-color; + border-radius: 0.25rem; + color: var(--text-color); + padding: .6rem 1rem .6rem 1.5rem; + box-shadow: var(--language-border-color) 1px 1px 2px 1px; + position: relative; + margin-bottom: 1rem; + + > div.title::before { + content: $icon-content; + color: $icon-color; + font: var(--fa-font-#{$fa-style}); + text-align: center; + width: 3rem; + position: absolute; + left: .2rem; + margin-top: .4rem; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + } + + > div.title { + background-color: $bg-color; + color: $icon-color; + padding: .5rem .6rem .5rem 3rem; + margin: -.6rem -1rem .6rem -1.5rem; + font-weight: 600; + } + + > p:last-child{ + margin-bottom: 0; + } +} + +/* box-info 蓝色 */ +.box-info { +@include colorbox( + var(--prompt-info-icon-color), + var(--prompt-info-icon-color), + "\f06a", + var(--prompt-info-bg) +); +} + +/* box-tip 绿色 */ +.box-tip { +@include colorbox( + var(--prompt-tip-icon-color), + var(--prompt-tip-icon-color), + "\f0eb", + var(--prompt-tip-bg), + 'regular' +); +} + +/* box-warning 黄色 */ +.box-warning { +@include colorbox( + var(--prompt-warning-icon-color), + var(--prompt-warning-icon-color), + "\f06a", + var(--prompt-warning-bg) +); +} + +/* box-danger 红色 */ +.box-danger { +@include colorbox( + var(--prompt-danger-icon-color), + var(--prompt-danger-icon-color), + "\f071", + var(--prompt-danger-bg) +); +} \ No newline at end of file diff --git a/assets/css/colors/colors-dark.scss b/assets/css/colors/colors-dark.scss new file mode 100644 index 0000000..28d40dd --- /dev/null +++ b/assets/css/colors/colors-dark.scss @@ -0,0 +1,123 @@ +@mixin dark-colors { + + // 定义的颜色 + --details-border-color: #865ab7; + --details-bg: #222a3aa6; + // 修改了黑暗模式下原主题的颜色 + --prompt-info-bg: rgb(6 36 62); + --prompt-tip-bg: rgb(32 40 26 / 60%); + --prompt-tip-icon-color: #568b5b; + --prompt-warning-bg: rgb(61 48 6 / 88%); + --prompt-danger-bg: rgb(67 22 7 / 70%); + + // --main-bg: rgb(40,42,54); + // --text-color: rgb(246,246,244); + // --heading-color: rgb(246,246,244); + + + // details class="box-hidden" 样式设计 + details.box-hidden { + border-radius: .25rem; + border-left: .2rem solid var(--details-border-color); + box-shadow: var(--language-border-color) 1px 1px 2px 1px; /* 借用了代码框的边框颜色变量 */ + margin-bottom: 1rem; + padding: .6rem 1rem .6rem 1.5rem; + } + + details.box-hidden > summary { + padding: .5rem 1.0rem .5rem 1.0rem; + margin: -.6rem -1rem -.6rem -1.5rem; + font-weight: 600; + background-color: var(--details-bg); + color: var(--details-border-color); + text-decoration: underline; + position: relative; + list-style: none; /* IOS 隐藏默认的箭头 */ + } + + details.box-hidden > summary::-webkit-details-marker { + display: none; /* 隐藏默认的箭头 */ + } + details.box-hidden > summary::marker { + content: none; /* 隐藏默认的箭头 */ + } + + details.box-hidden > summary::before { + /* 关闭状态下 */ + /* 也可以用其他符号或自定义图标,比如 Unicode 字符 */ + // content: '🙈'; + /* content:'\002B9A'; */ + content: '😼'; + margin-right: .3rem; + display: inline-block; + } + details.box-hidden[open] > summary::before { + /* 展开状态下 */ + /* content: '🐵';*/ + /* content: '\002B9B'; */ + content: '🙀'; + animation: my-cat .2s ease-in-out; /* 点击会有动画效果 */ + margin-right: .3rem; + } + + details.box-hidden > summary::after { + font-family: 'Font Awesome 6 Free'; + content: "\f105"; /* Unicode for fa-angle-down */ + display: inline-block; + transition: transform 0.2s ease; /* 添加旋转动画 */ + position: absolute; + right: 1rem; /* 调整箭头在最右边的位置 */ + } + details.box-hidden[open] > summary::after { + transform: rotate(90deg); + } + + details.box-hidden[open] > summary{ + // transition: margin 200ms ease-out; /* 展开会有动画效果 */ + margin-bottom: .6rem; + } + + @keyframes my-cat { + 50% { transform: scale(1.2); } /* 动画效果代码 */ + } + + // details class = "nobg-hidden" + details.nobg-hidden { + margin-bottom: 1rem; + padding-left: 1rem; /* 为了让border-left显得有些间距 */ + border-left: 2px solid transparent; /* 默认透明的左边框 */ + } + details.nobg-hidden[open] { + border-left-color: var(--blockquote-border-color); /* 展开时的边框颜色 */ + } + details.nobg-hidden > summary { + color: var(--link-color); + display: inline-block; + line-height: normal; + border-bottom: 1px solid var(--link-underline-color); + } + details.nobg-hidden > summary:hover { + color: #d2603a; /* 鼠标悬停时的颜色 */ + border-bottom-color: #d2603a; + } + details.nobg-hidden > summary::marker { + content: none; /* 隐藏默认的箭头 */ + } + details.nobg-hidden > summary::-webkit-details-marker { + display: none; /* IOS 隐藏默认的箭头 */ + } + details.nobg-hidden > summary::before { + content: '+'; + scale: 1.3; + display: inline-block; + margin-right: .4rem; + transition: transform 0.2s ease; /* 添加旋转动画 */ + -webkit-transition: -webkit-transform 0.2s ease; /* 兼容iOS */ + transform-origin: center; /* 确保旋转中心正确 */ + -webkit-transform-origin: center; + } + details.nobg-hidden[open] > summary::before { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); /* 兼容iOS */ + } +} \ No newline at end of file diff --git a/assets/css/colors/colors-light.scss b/assets/css/colors/colors-light.scss new file mode 100644 index 0000000..6097f53 --- /dev/null +++ b/assets/css/colors/colors-light.scss @@ -0,0 +1,116 @@ +@mixin light-colors { + // 定义的颜色 + --details-border-color: #8458B3; + --details-bg: #e5eaf5; + // 修改了明亮模式下原主题的颜色 + --prompt-tip-bg: #D2E3C8; + --prompt-tip-icon-color: #4F6F52; + + // details class="box-hidden" 样式设计 + details.box-hidden { + border-radius: .25rem; + border-left: .2rem solid var(--details-border-color); + box-shadow: var(--language-border-color) 1px 1px 2px 1px; /* 借用了代码框的边框颜色变量 */ + margin-bottom: 1rem; + padding: .6rem 1rem .6rem 1.5rem; + } + + details.box-hidden > summary { + padding: .5rem 1.0rem .5rem 1.0rem; + margin: -.6rem -1rem -.6rem -1.5rem; + font-weight: 600; + background-color: var(--details-bg); + color: var(--details-border-color); + text-decoration: underline; + position: relative; + list-style: none; /* 隐藏默认的箭头 */ + } + + details.box-hidden > summary::-webkit-details-marker { + display: none; /* IOS 隐藏默认的箭头 */ + } + details.box-hidden > summary::marker { + content: none; /* 隐藏默认的箭头 */ + } + + details.box-hidden > summary::before { + /* 关闭状态下 */ + /* 也可以用其他符号或自定义图标,比如 Unicode 字符 */ + // content: '🙈'; + /* content:'\002B9A'; */ + content: '😼'; + margin-right: .3rem; + display: inline-block; + } + details.box-hidden[open] > summary::before { + /* 展开状态下 */ + /* content: '🐵';*/ + /* content: '\002B9B'; */ + content: '🙀'; + animation: my-cat .2s ease-in-out; /* 点击会有动画效果 */ + margin-right: .3rem; + } + + details.box-hidden > summary::after { + font-family: 'Font Awesome 6 Free'; + content: "\f105"; /* Unicode for fa-angle-down */ + display: inline-block; + transition: transform 0.2s ease; /* 添加旋转动画 */ + position: absolute; + right: 1rem; /* 调整箭头在最右边的位置 */ + } + + details.box-hidden[open] > summary::after { + transform: rotate(90deg); + } + + details.box-hidden[open] > summary{ + // transition: margin 200ms ease-out; /* 展开会有动画效果 */ + margin-bottom: .6rem; + } + + @keyframes my-cat { + 50% { transform: scale(1.2); } /* 动画效果代码 */ + } + + + // details class = "nobg-hidden" + details.nobg-hidden { + margin-bottom: 1rem; + padding-left: 1rem; /* 为了让border-left显得有些间距 */ + border-left: 2px solid transparent; /* 默认透明的左边框 */ + } + details.nobg-hidden[open] { + border-left-color: var(--blockquote-border-color); /* 展开时的边框颜色 */ + } + details.nobg-hidden > summary { + color: var(--link-color); + display: inline-block; + line-height: normal; + // border-bottom: 1px solid var(--link-underline-color); + } + details.nobg-hidden > summary:hover { + color: #d2603a; /* 鼠标悬停时的颜色 */ + border-bottom: 1px solid #d2603a; + } + details.nobg-hidden > summary::marker { + content: none; /* 隐藏默认的箭头 */ + } + details.nobg-hidden > summary::-webkit-details-marker { + display: none; /* IOS 隐藏默认的箭头 */ + } + details.nobg-hidden > summary::before { + content: '+'; + scale: 1.3; + display: inline-block; + margin-right: .4rem; + transition: transform 0.2s ease; /* 添加旋转动画 */ + -webkit-transition: -webkit-transform 0.2s ease; /* 兼容iOS */ + transform-origin: center; /* 确保旋转中心正确 */ + -webkit-transform-origin: center; + } + details.nobg-hidden[open] > summary::before { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); /* 兼容iOS */ + } +} \ No newline at end of file diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss new file mode 100644 index 0000000..27e9d1f --- /dev/null +++ b/assets/css/jekyll-theme-chirpy.scss @@ -0,0 +1,93 @@ +--- +--- + +@import 'main +{%- if jekyll.environment == 'production' -%} + .bundle +{%- endif -%} +'; + +/* append your custom style below */ + +/* 首页预览 post 标题字体加粗 */ +// #post-list .card-title { +// font-weight: bold; +// } + +/* 主页 post 列表加阴影 */ +// #post-list .card { +// border-radius: 0.7rem; +// box-shadow: var(--language-border-color) 1px 1px 2px 1px; +// } + +// prompt 边框阴影 +blockquote[class^='prompt-']{ + box-shadow: var(--language-border-color) 1px 1px 2px 1px; /* 借用了代码框的边框颜色变量 */ +} + +// 代码框左上角颜色 +// div[class^=language-] .code-header::before{ +// background-color: #fc625d; +// box-shadow: 1.25rem 0 0 #fdbc40, 2.5rem 0 0 #35cd4b; +// } + + +/* 侧边栏背景图片添加 */ +#sidebar { + background-image: url(https://cdn.jsdelivr.net/gh/huanyushi/huanyushi.github.io@main/assets/img/background.jpg); /* <- change background image */ + background-size: cover; /* <- customize the image size */ + background-repeat: no-repeat; /* <- no-repeat */ + background-position: top; /* <- image position */ +} + +/* 侧边栏相关文字样式设置 */ +#sidebar .site-title a { + color: #ffffff; + text-shadow: 5px 5px 10px rgba(0,0,0,0.5); +} +#sidebar .site-subtitle { + color: #ffffff; + text-shadow: 2px 2px 3px rgba(0,0,0, 0.7); +} +#sidebar .sidebar-bottom .mode-toggle, #sidebar a { + color: #ffffff; +} +#sidebar .sidebar-bottom .btn { + color: var(--sidebar-btn-color); +} + +// 让目录不产生折叠效果 +// .is-collapsed { +// max-height: none !important; +// } + + +@import "animation.scss"; // 背景动画样式 +@import "colorbox.scss"; // colorbox 样式 + +@import 'colors/colors-light.scss'; +@import 'colors/colors-dark.scss'; + +html { + @media (prefers-color-scheme: light) { + &:not([data-mode]), + &[data-mode='light'] { + @include light-colors; + } + + &[data-mode='dark'] { + @include dark-colors; + } + } + + @media (prefers-color-scheme: dark) { + &:not([data-mode]), + &[data-mode='dark'] { + @include dark-colors; + } + + &[data-mode='light'] { + @include light-colors; + } + } + } \ No newline at end of file