steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
74 lines
1.9 KiB
CSS
74 lines
1.9 KiB
CSS
/**
|
|
* 页面顶部光晕背景（通用）
|
|
* 源自 academy .academy-block-1::before，各页通过 CSS 变量调整高度与图片。
|
|
*
|
|
* 用法：
|
|
* <main class="aifo-page-bg">
|
|
* <div class="页面内容容器">...</div>
|
|
* </main>
|
|
*
|
|
* 注意：aifo-page-bg 应为全宽外层，勿与 max-width 内容容器写在同一元素上。
|
|
*
|
|
* 按页覆盖光晕高度：
|
|
* #my-page { --aifo-page-bg-height: 920px; }
|
|
*
|
|
* 按页覆盖背景图：
|
|
* #my-page { --aifo-page-bg-image: url(../images/...); }
|
|
*
|
|
* 按页增加导航下方内容间距（不含 header 高度）：
|
|
* #my-page { --aifo-page-content-offset: 1.5rem; }
|
|
*
|
|
* 叠加网格底纹（可选）：
|
|
* <main class="aifo-page-bg aifo-page-bg--grid">...</main>
|
|
*/
|
|
:root {
|
|
/* 与 #academy-main margin-top、固定导航高度保持一致 */
|
|
--aifo-nav-height: 5.9375rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
/* 与 index.css #nav height、.main margin-top 保持一致 */
|
|
--aifo-nav-height: 72px;
|
|
}
|
|
}
|
|
|
|
.aifo-page-bg {
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
background-color: transparent;
|
|
margin-top: var(--aifo-nav-height);
|
|
padding-top: var(--aifo-page-content-offset, 0);
|
|
}
|
|
|
|
.aifo-page-bg::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: var(--aifo-page-bg-height, 805px);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
background-image: var(
|
|
--aifo-page-bg-image,
|
|
url("../images/backgrounds/academy/academy_bg_1.webp")
|
|
);
|
|
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.aifo-page-bg--grid {
|
|
background-image: image-set(
|
|
url("../images/backgrounds/academy/bg_grid.webp") type("image/webp"),
|
|
url("../images/backgrounds/academy/bg_grid.png") type("image/png")
|
|
);
|
|
background-size: cover;
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
}
|