100 lines
1.9 KiB
CSS
100 lines
1.9 KiB
CSS
/**
|
||
* AKSRT Main v5 — 博客/个人站完整前端
|
||
*/
|
||
|
||
/* 防止 hero 等使用 100vw / full-bleed 时产生横向滚动条 */
|
||
html,
|
||
body {
|
||
overflow-x: clip;
|
||
}
|
||
|
||
@supports not (overflow-x: clip) {
|
||
html,
|
||
body {
|
||
overflow-x: hidden;
|
||
}
|
||
}
|
||
|
||
/* ========== 阅读进度条（单篇文章顶 fixed）========== */
|
||
.reading-progress-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 3px;
|
||
width: 0%;
|
||
z-index: 9999;
|
||
pointer-events: none;
|
||
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
|
||
transition: width 0.1s ease-out;
|
||
}
|
||
|
||
/* 折叠 body 内注入的 BOM / 空白文本节点，防止产生多余行高间距 */
|
||
body {
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-base);
|
||
line-height: var(--leading-normal);
|
||
color: var(--color-ink-2);
|
||
background-color: var(--surface-page);
|
||
}
|
||
|
||
/* zibll compat: global link composite transition */
|
||
a[href] {
|
||
transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;
|
||
}
|
||
|
||
.skip-link {
|
||
position: absolute;
|
||
left: 16px;
|
||
top: 12px;
|
||
z-index: 1100;
|
||
padding: 10px 14px;
|
||
border-radius: 999px;
|
||
background: var(--color-primary);
|
||
color: #fff;
|
||
transform: translateY(-140%);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.skip-link:focus {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* ========== 站点外壳 ========== */
|
||
.site-wrapper {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: var(--text-base);
|
||
line-height: var(--leading-normal);
|
||
}
|
||
|
||
.site-main {
|
||
flex: 1;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
max-width: var(--container);
|
||
margin: 0 auto;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.container {
|
||
padding: 0 24px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
.container {
|
||
padding: 0 32px;
|
||
}
|
||
}
|
||
|
||
/* ========== 通用空状态 ========== */
|
||
.no-results {
|
||
padding: 48px 20px;
|
||
text-align: center;
|
||
color: var(--color-ink-3);
|
||
}
|