Skip to content

Commit 3968ed3

Browse files
CN-RBLCN-RBL
committed
依旧Update
1 parent 066623a commit 3968ed3

5 files changed

Lines changed: 171 additions & 200 deletions

File tree

‎404.html‎

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -14,46 +14,15 @@
1414
<title>404 - 红蓝灯的个人网站</title>
1515
<script>
1616
function random_err() {
17-
let cn_errs = ["找不到页面", "你的页面去玩蛋仔派对了，我找不到他", "你的页面去玩MC了，我找不到他"]
18-
let en_errs = ["No Page Found", "Your Page Went To The Eggy Party, I Can't Find Him", "Your Page Went To The Minecraft, I Can't Find Him"]
17+
let cn_errs = ["找不到页面", "你的页面去玩蛋仔派对了，我找不到他", "你的页面去玩MC了，我找不到他", "你的页面飞走了，我找不到他"];
18+
let en_errs = ["No Page Found", "Your Page Went To The Eggy Party, I Can't Find Him", "Your Page Went To The Minecraft, I Can't Find Him", "Your Page Flew Away, I Can't Find Him"];
1919
let random_index = Math.floor(Math.random() * cn_errs.length);
2020
document.getElementById("cn_err").innerHTML = cn_errs[random_index];
2121
document.getElementById("en_err").innerHTML = en_errs[random_index];
2222
}
2323
window.onload = random_err;
2424
</script>
25-
<style>
26-
@font-face {
27-
font-family: "JetBrains Mono";
28-
src: url("include/JetBrainsMono.ttf") format("truetype");
29-
}
30-
31-
:root {
32-
--mono: "JetBrains Mono";
33-
--tahoma: Tahoma;
34-
--bg-img: url("include/bg.jpg");
35-
}
36-
37-
body {
38-
background-image: var(--bg-img);
39-
background-size: cover;
40-
background-repeat: no-repeat;
41-
background-position: center center;
42-
background-attachment: fixed;
43-
min-height: 100%;
44-
background-color: #555555; /*避免无法加载导致出现纯白 Avoid failing to load and resulting in pure white*/
45-
}
46-
47-
.chinese {
48-
font-family: var(--tahoma),system-ui;
49-
color: #999999;
50-
}
51-
.english {
52-
font-family: var(--mono), system-ui;
53-
color: #999999;
54-
}
55-
</style>
56-
<link href="include/css/index.css" rel="stylesheet">
25+
<link href="include/style.css" rel="stylesheet">
5726
</head>
5827
<body>
5928
<div id="main">

‎include/css/index.css‎

Lines changed: 0 additions & 120 deletions
This file was deleted.

file/test.md renamed to include/script.js

File renamed without changes.

‎include/style.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
:root {
2+
/* 尺寸 */
3+
--page-width: 65%;
4+
--page-margin: 15%;
5+
6+
/* 导航 */
7+
--nav-height: 56px;
8+
--nav-gap: 0; /* 0 表示紧贴 nav */
9+
10+
/* 间距 */
11+
--gap-between: 5px; /* main 与 copyright 的间距 */
12+
--copyright-min: 5vh; /* 版权区最小高度（用于计算） */
13+
14+
/* 视觉 */
15+
--card-bg: rgba(0,0,0,0.5);
16+
--card-radius: 25px;
17+
--card-padding: 1% 2% 2%;
18+
--card-padding-bottom: 2.5%;
19+
--backdrop: blur(5px);
20+
--muted: #999999;
21+
--muted-dark: #555555;
22+
23+
/* 字体 */
24+
--mono-font: "JetBrains Mono";
25+
--tahoma-font: Tahoma, system-ui, sans-serif;
26+
27+
/* 背景图 */
28+
--bg-img: url("bg.jpg");
29+
}
30+
31+
/* 基础布局与盒模型 */
32+
html { box-sizing: border-box; }
33+
*, *::before, *::after { box-sizing: inherit; }
34+
35+
body {
36+
margin: 0;
37+
/* 为固定导航在文档流中预留空间，防止覆盖内容 */
38+
padding-top: calc(var(--nav-height) + var(--nav-gap));
39+
background-image: var(--bg-img);
40+
background-size: cover;
41+
background-repeat: no-repeat;
42+
background-position: center center;
43+
background-attachment: fixed;
44+
min-height: 100vh;
45+
background-color: var(--muted-dark);
46+
/* 禁止页面整体垂直滚动，#main 内滚 */
47+
overflow-x: hidden;
48+
overflow-y: hidden;
49+
}
50+
51+
body.line-numbers { min-height: 100vh; }
52+
53+
/* 公共卡片外观（毛玻璃） */
54+
#main, #copyright, #notice {
55+
display: block;
56+
background: var(--card-bg);
57+
backdrop-filter: var(--backdrop);
58+
border-radius: var(--card-radius);
59+
padding: var(--card-padding);
60+
box-sizing: border-box;
61+
}
62+
63+
/* 顶部导航（固定） */
64+
#topnav {
65+
position: fixed;
66+
left: var(--page-margin);
67+
right: var(--page-margin);
68+
top: 0;
69+
height: var(--nav-height);
70+
display: flex;
71+
align-items: center;
72+
padding: 0 1rem;
73+
background: rgba(0,0,0,0.85);
74+
backdrop-filter: var(--backdrop);
75+
border-radius: calc(var(--card-radius) / 2);
76+
/* 移除底部圆角，避免与下面内容边缘重叠 */
77+
border-bottom-left-radius: 0;
78+
border-bottom-right-radius: 0;
79+
z-index: 60;
80+
box-sizing: border-box;
81+
}
82+
83+
#topnav .nav-inner { display:flex; gap:1rem; align-items:center; width:100%; }
84+
#topnav a { color: var(--muted); text-decoration:none; padding:0.4rem 0.6rem; transition: color .15s ease, text-shadow .2s ease; }
85+
#topnav a:hover { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.85), 0 0 16px rgba(255,255,255,0.5); }
86+
87+
/* 占位器：用于在文档流中为固定导航预留空间，避免覆盖后续内容 */
88+
#nav-spacer { height: var(--nav-height); margin: 0 var(--page-margin); pointer-events: none; }
89+
90+
/* 主内容：流式布局，顶部紧贴导航，内部滚动 */
91+
#main {
92+
width: auto;
93+
/* 移除顶部圆角，避免与固定导航圆角叠加 */
94+
border-top-left-radius: 0;
95+
border-top-right-radius: 0;
96+
/* 顶部间距由 body 的 padding-top 提供，避免重叠 */
97+
margin-top: 0;
98+
padding-top: 0;
99+
margin-left: var(--page-margin);
100+
margin-right: var(--page-margin);
101+
margin-bottom: calc(var(--copyright-min) + var(--gap-between));
102+
max-width: calc(100% - 2 * var(--page-margin));
103+
overflow-y: auto; /* 内部滚动 */
104+
overflow-x: hidden;
105+
-webkit-overflow-scrolling: touch;
106+
scrollbar-gutter: stable both-edges;
107+
padding-bottom: var(--gap-between);
108+
/* 可用高度 = 视口 - 导航高度 - 版权最小高度 - 间隙 */
109+
max-height: calc(100vh - var(--nav-height) - var(--copyright-min) - var(--gap-between));
110+
z-index: 10;
111+
}
112+
113+
/* 滚动条样式（仅影响 #main） */
114+
#main::-webkit-scrollbar { width:8px; height:8px; }
115+
#main::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius:4px; }
116+
#main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius:4px; }
117+
#main { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) rgba(255,255,255,0.02); }
118+
119+
/* 版权区（固定底部） */
120+
#copyright {
121+
position: fixed;
122+
left: var(--page-margin);
123+
right: var(--page-margin);
124+
bottom: 0;
125+
min-height: var(--copyright-min);
126+
padding: 1% 2% var(--card-padding-bottom);
127+
z-index: 30;
128+
}
129+
130+
#copyright p { text-align:center; margin:0; }
131+
132+
/* 字体 & 文本 */
133+
@font-face{ font-family: "JetBrains Mono"; src: url("JetBrainsMono.ttf") format("truetype"); }
134+
.chinese{ font-family: var(--tahoma-font); color: var(--muted); }
135+
.english{ font-family: var(--mono-font), system-ui; color: var(--muted); }
136+
code, pre{ font-family: var(--mono-font), system-ui; }
137+
138+
/* 使带 class="chinese" 的有序/无序列表整体居中，且点/序号与文本一起居中显示 */
139+
ul {
140+
margin: 0 auto;
141+
width: fit-content;
142+
}

0 commit comments

Comments
 (0)