/* Modern Tech Theme - Custom Styles */
/* Created for Muji's Learning Record */
/* ===== 页面背景优化 ===== */
body {
background: linear-gradient(135deg, #FAFBFF 0%, #F0F4FF 100%);
}
/* ===== 导航栏现代化 ===== */
.navbar {
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.navbar:hover {
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}
.navbar-brand {
font-weight: 700;
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 导航链接悬停效果 */
.navbar-nav .nav-link {
position: relative;
transition: color 0.3s ease;
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.navbar-nav .nav-link:hover::after {
width: 80%;
}
/* ===== 页脚优化 ===== */
footer {
background: linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%);
border-top: 1px solid #E2E8F0;
padding: 2rem 0;
}
footer a {
transition: all 0.3s ease;
}
footer a:hover {
transform: translateY(-2px);
text-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}
/* ===== 文章标题优化 ===== */
.blog-post h1,
.blog-post h2,
.blog-post h3,
.blog-post h4 {
background: linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-top: 2.5rem;
margin-bottom: 1.25rem;
}
.blog-post h1 {
font-size: 2.5rem;
font-weight: 800;
position: relative;
padding-bottom: 0.5rem;
}
.blog-post h1::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
border-radius: 2px;
}
.blog-post h2 {
font-size: 2rem;
position: relative;
padding-left: 1rem;
}
.blog-post h2::before {
content: '';
position: absolute;
left: 0;
top: 0.3em;
height: 1em;
width: 4px;
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
border-radius: 2px;
}
.blog-post h3 {
font-size: 1.5rem;
color: #2D3748;
}
/* ===== 链接优化 ===== */
.blog-post a {
color: #667EEA;
text-decoration: none;
position: relative;
font-weight: 600;
transition: all 0.3s ease;
}
.blog-post a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
transition: width 0.3s ease;
}
.blog-post a:hover::after {
width: 100%;
}
.blog-post a:hover {
color: #764BA2;
}
/* ===== 引用块优化 ===== */
blockquote {
border-left: 4px solid #667EEA;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
padding: 1.25rem 1.5rem;
margin: 2rem 0;
border-radius: 0.5rem;
position: relative;
}
blockquote::before {
content: '"';
position: absolute;
top: -0.5rem;
left: 1rem;
font-size: 3rem;
color: #667EEA;
opacity: 0.3;
font-family: Georgia, serif;
}
/* ===== 代码块优化 ===== */
pre {
background: #1A202C !important;
border-radius: 0.75rem;
padding: 1.5rem;
margin: 2rem 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #2D3748;
position: relative;
overflow: hidden;
}
pre::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}
code {
font-family: 'Fira Code', 'Monaco', 'Consolas', monospace !important;
font-size: 0.9em;
}
:not(pre) > code {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
color: #667EEA;
padding: 0.2em 0.5em;
border-radius: 0.25rem;
font-weight: 600;
}
/* ===== 标签优化 ===== */
.blog-tags a {
display: inline-block;
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
color: white !important;
padding: 0.4rem 1rem;
border-radius: 2rem;
margin: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}
.blog-tags a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.blog-tags a::after {
display: none;
}
/* ===== 按钮优化 ===== */
.btn {
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
border: none;
border-radius: 0.5rem;
padding: 0.75rem 1.5rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(102, 126, 234, 0.2);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
}
/* ===== 首页博客卡片优化 ===== */
.post-list {
margin-top: 2rem;
}
.post-list > li {
background: white;
border-radius: 1rem;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
transition: all 0.3s ease;
border: 1px solid #E2E8F0;
}
.post-list > li:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
border-color: #667EEA;
}
.post-list h2 {
margin-top: 0;
}
/* ===== 分隔线优化 ===== */
hr.small {
border-image: linear-gradient(135deg, #667EEA 0%, #764BA2 100%) 1;
border-width: 2px;
}
/* ===== 响应式优化 ===== */
@media (max-width: 768px) {
.blog-post h1 {
font-size: 2rem;
}
.blog-post h2 {
font-size: 1.5rem;
}
blockquote {
padding: 1rem;
}
}
/* ===== 平滑滚动 ===== */
html {
scroll-behavior: smooth;
}
/* ===== 选择文本颜色 ===== */
::selection {
background: rgba(102, 126, 234, 0.2);
color: #1A202C;
}
::-moz-selection {
background: rgba(102, 126, 234, 0.2);
color: #1A202C;
}
/* ===== 滚动条美化 ===== */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #F7FAFC;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #5A67D8 0%, #6B46C1 100%);
}
/* ===== 图片优化 ===== */
.blog-post img {
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
margin: 2rem 0;
}
.blog-post img:hover {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}
/* ===== 表格优化 ===== */
table {
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
margin: 2rem 0;
}
table thead {
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
color: white;
}
table th,
table td {
padding: 0.875rem 1rem;
}
table tbody tr {
border-bottom: 1px solid #E2E8F0;
transition: background 0.3s ease;
}
table tbody tr:hover {
background: rgba(102, 126, 234, 0.05);
}
table tbody tr:last-child {
border-bottom: none;
}
/* ===== 动画效果 ===== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.blog-post {
animation: fadeInUp 0.6s ease-out;
}
.post-list > li {
animation: fadeInUp 0.6s ease-out;
animation-fill-mode: both;
}
.post-list > li:nth-child(1) { animation-delay: 0.1s; }
.post-list > li:nth-child(2) { animation-delay: 0.2s; }
.post-list > li:nth-child(3) { animation-delay: 0.3s; }
.post-list > li:nth-child(4) { animation-delay: 0.4s; }
.post-list > li:nth-child(5) { animation-delay: 0.5s; }