mirror of
https://github.com/Wcowin/Mkdocs-Wcowin.git
synced 2025-07-20 17:06:34 +00:00
95 lines
2.1 KiB
CSS
95 lines
2.1 KiB
CSS
/* 用于大屏幕和小屏幕的通用样式 */
|
|
.card {
|
|
width: 345px;
|
|
height: 90px;
|
|
font-size: 1rem;
|
|
padding: 10px 20px;
|
|
border-radius: 20px;
|
|
transition: transform 0.15s, box-shadow 0.15s, background 0.15s; /* 添加背景过渡效果 */
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center; /* 垂直居中对齐内容 */
|
|
/* background: #fff; 默认背景颜色 */
|
|
color: #333; /* 默认字体颜色 */
|
|
/* border: 1px solid #608DBD; 添加外框 */
|
|
}
|
|
|
|
.card:nth-child(odd) {
|
|
float: left;
|
|
}
|
|
|
|
.card:nth-child(even) {
|
|
float: right;
|
|
}
|
|
|
|
/* 在大屏幕上保留悬停效果 */
|
|
.card:hover {
|
|
transform: translateY(0px) scale(1.05);
|
|
/* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.1); */
|
|
/* background: linear-gradient(to right, #a1c4fd, #c2e9fb); */
|
|
/* background: linear-gradient(to right, rgba(189, 224, 245), rgba(68,138,255,.1), rgba(238, 237, 238)); */
|
|
background-color: rgba(68,138,255,.1);
|
|
color: #040000; /* 确保字体颜色在悬停时保持可读性 */
|
|
}
|
|
|
|
.card a {
|
|
border: none;
|
|
}
|
|
|
|
.card .ava {
|
|
width: 3rem!important;
|
|
height: 3rem!important;
|
|
margin: 0!important;
|
|
margin-right: 1em!important;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.card .card-header {
|
|
font-style: italic;
|
|
overflow: hidden;
|
|
width: auto;
|
|
}
|
|
|
|
.card .card-header a {
|
|
font-style: normal;
|
|
color: #608DBD;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 在大屏幕上保留链接悬停颜色 */
|
|
.card .card-header a:hover {
|
|
color: #d480aa;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card .card-header .info {
|
|
font-style: normal;
|
|
color: #706f6f;
|
|
font-size: 14px;
|
|
min-width: 0;
|
|
overflow: visible;
|
|
white-space: normal;
|
|
}
|
|
|
|
/* 媒体查询：小屏幕 */
|
|
@media (max-width: 768px) {
|
|
.card {
|
|
width: 100%; /* 在小屏幕上显示为单列 */
|
|
height: auto;
|
|
float: none; /* 清除浮动 */
|
|
}
|
|
.card:hover {
|
|
background-color: rgba(68,138,255,.1);
|
|
}
|
|
}
|
|
|
|
.markdown-content {
|
|
clear: both;
|
|
}
|
|
|
|
.markdown-content h2 {
|
|
/* 可以自定义样式 */
|
|
font-size: 1.5rem;
|
|
color: #333;
|
|
} |