chore: 初始化项目仓库
This commit is contained in:
commit
17a224be27
8 files changed
+690
No files matched your search
@@ -0,0 +1,115 @@
|
||||
@font-face {
|
||||
font-family: "Zpix";
|
||||
src: url("../fonts/zpix.ttf") format("truetype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
font-family: "Zpix", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
|
||||
"Noto Sans SC", "Source Han Sans SC", sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* 28 列 × 44 行文字网格,1em = 1 个汉字;
|
||||
字号在这里统一控制,所有元素(含天线)字号完全一致 */
|
||||
.scene {
|
||||
position: relative;
|
||||
font-size: min(3.4vw, calc(100dvh / 44));
|
||||
line-height: 1em;
|
||||
width: 28em;
|
||||
height: 44em;
|
||||
user-select: none;
|
||||
font-kerning: none;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: block;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
white-space: pre;
|
||||
/* Zpix 单字步进为 13/12 em,补偿回 1em,保证 28 列正好落在 28em 内 */
|
||||
letter-spacing: -0.083333em;
|
||||
}
|
||||
|
||||
/* —— 标题区:按整格扣出的黑色矩形,左右各留 3 格 —— */
|
||||
.title-panel {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.title-panel .title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 1.6em;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* —— 背景:空白格里的淡色「天」 —— */
|
||||
.sky { color: rgba(190, 200, 240, 0.15); }
|
||||
|
||||
/* —— 云:固定颜色,明度取太阳与黑底之间的一半,色相沿用晚霞色 —— */
|
||||
.cloud { color: color-mix(in srgb, var(--cloud, #ff9ebb) 35%, #000); }
|
||||
.cloud-pink { --cloud: #ff9ebb; }
|
||||
.cloud-violet { --cloud: #b98cff; }
|
||||
.cloud-orange { --cloud: #ffa95c; }
|
||||
.cloud-rose { --cloud: #ff85b3; }
|
||||
.cloud-lilac { --cloud: #c98cff; }
|
||||
|
||||
/* —— 落日:太阳逐行色调,t1 顶部偏红 → t17 底部偏黄;整体明度为原色的 90% —— */
|
||||
.sun { color: color-mix(in srgb, var(--tone, #ff5a36) 90%, #000); }
|
||||
.sun-t1 { --tone: #ff5a36; }
|
||||
.sun-t2 { --tone: #ff5a36; }
|
||||
.sun-t3 { --tone: #ff6533; }
|
||||
.sun-t4 { --tone: #ff7330; }
|
||||
.sun-t5 { --tone: #ff812d; }
|
||||
.sun-t6 { --tone: #ff8f2b; }
|
||||
.sun-t7 { --tone: #ff9d29; }
|
||||
.sun-t8 { --tone: #ffaa2a; }
|
||||
.sun-t9 { --tone: #ffb62d; }
|
||||
.sun-t10 { --tone: #ffc132; }
|
||||
.sun-t11 { --tone: #ffcb38; }
|
||||
.sun-t12 { --tone: #ffd33f; }
|
||||
.sun-t13 { --tone: #ffda46; }
|
||||
.sun-t14 { --tone: #ffe04e; }
|
||||
.sun-t15 { --tone: #ffe556; }
|
||||
.sun-t16 { --tone: #ffe95e; }
|
||||
.sun-t17 { --tone: #ffec66; }
|
||||
|
||||
/* —— 飞鸟 —— */
|
||||
.bird-sparrow { color: #e0a45c; }
|
||||
.bird-gull { color: #a0c8f0; }
|
||||
.bird-crow { color: #b0a8c8; }
|
||||
|
||||
/* —— 天线 —— */
|
||||
.ant { color: #8a8a9e; }
|
||||
|
||||
/* —— 楼群:灰色系,明度与原棕色一致 —— */
|
||||
.bld { color: #3f3f3f; }
|
||||
.bld-1 { color: #3b3b3b; }
|
||||
.bld-2 { color: #343434; }
|
||||
.bld-3 { color: #464646; }
|
||||
.bld-4 { color: #393939; }
|
||||
.bld-5 { color: #4e4e4e; }
|
||||
.bld-6 { color: #414141; }
|
||||
.bld-7 { color: #494949; }
|
||||
.bld-8 { color: #353535; }
|
||||
Reference in new issue
Block a user