128 lines
3.1 KiB
SCSS
128 lines
3.1 KiB
SCSS
---
|
|
---
|
|
|
|
@use 'sass:math';
|
|
@use 'main
|
|
{%- if jekyll.environment == 'production' -%}
|
|
.bundle
|
|
{%- endif -%}
|
|
';
|
|
|
|
/* 生成动画 */
|
|
@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: math.random();
|
|
$random_range: $min + math.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* append your custom style below */
|
|
/* 覆盖主题的博客帖子边框样式 */
|
|
.card-wrapper.card {
|
|
border: 3px solid #e3e5e7 !important; /* 使用更显眼的蓝色边框 */
|
|
padding: 2px; /* 适中的内边距 */
|
|
margin-bottom: 2px; /* 适中的下边距 */
|
|
border-radius: 8px; /* 适中的圆角 */
|
|
background-color: #f9f9f9; /* 淡灰色背景，增强边框的对比 */
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加平滑过渡效果 */
|
|
}
|
|
|
|
.card-wrapper.card:hover {
|
|
transform: translateY(-5px); /* 鼠标悬停时轻微上移 */
|
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
|
|
}
|
|
|
|
/* 侧边栏背景及文字样式设置 */
|
|
#sidebar {
|
|
background-image: url('/assets/img/background-dark.jpg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: top;
|
|
}
|
|
|
|
#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);
|
|
} |