Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
821 lines (775 loc) · 47.5 KB
/
Copy pathindex.html
File metadata and controls
821 lines (775 loc) · 47.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Vix Lang</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="一门静态类型、编译型语言。使用 LLVM 后端,支持泛型、ADT、模式匹配、指针运算。">
<link rel="icon" href="image.ico" type="image/x-icon">
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<!-- 设计说明:样式改为单文件内联交付,不再引用多页共用的 assets/site.css,
使本次瑞士国际主义重设计只作用于首页,不污染 very.html / playground 等页面 -->
<style>
@font-face {
font-family: "Maple Mono";
src: url("https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@5.3.0/latin-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Maple Mono";
src: url("https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@5.3.0/latin-700-normal.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ============================================================
设计总则(瑞士国际主义 / Swiss International Style)
1. 色彩:灰色骨架 + 橙色灵魂。冷灰系(#1c1917 → #f5f5f4)
建立全站层次,亮橙 #ea580c 作为唯一强调色贯穿交互。
2. 零装饰、零动效:无图标、无插画、无圆角、无阴影、无渐变、
无毛玻璃;全站无任何动画与过渡特效,唯一的图形元素是 1px 分割线。
3. 视觉层次完全由字重(400/500/700/800)、字号阶梯、
字距(紧缩标题 / 加宽小标签)与留白建立。
4. 栅格:所有内容对齐 1200px 中央栏,分割线与栏边缘严格对齐。
5. 例外:代码示例保留彩色语法高亮(可读性的功能需求,非装饰)。
============================================================ */
:root {
--ink: #1c1917; /* 主墨色:近黑暖灰,比纯黑柔和 */
--ink-soft: #57534e; /* 次级文字:中暖灰 */
--ink-faint: #a8a29e; /* 三级文字:浅暖灰,用于元信息 */
--paper: #f5f5f4; /* 纸面:浅灰,比纯白更有质感 */
--paper-alt: #ffffff; /* 浮层白:卡片/区块用纯白提亮 */
--border: #d6d3d1; /* 发丝线:浅灰边框 */
--accent: #ea580c; /* 主题色:亮橙,鲜明且现代 */
--accent-hover: #c2410c; /* 悬停加深 */
--accent-tint: #fed7aa; /* 浅橙:选区/标签底色 */
--accent-soft: #fff7ed; /* 极浅橙:章节带底色 */
--code-bg: #1c1917; /* 代码块背景:深灰黑 */
--footer-bg: #1c1917; /* 页脚背景:深灰黑,与代码块首尾呼应 */
--footer-text: #f5f5f4; /* 页脚文字:浅灰白 */
--footer-muted: rgba(255,255,255,0.5); /* 页脚次要文字 */
--footer-border: rgba(255,255,255,0.25); /* 页脚分割线 */
--font-sans: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
--font-mono: "Maple Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
margin: 0;
padding: 0;
font-family: var(--font-sans); /* 新古典无衬线系统栈:Helvetica 血统是瑞士风格的基准字体 */
background: var(--paper); /* 由暗色底翻转为白底:信息在纸上阅读,而非在屏幕上“发光” */
color: var(--ink);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* 文本选区:主题色的浅底变体,可被察觉但不喧哗 */
::selection { background: var(--accent-tint); color: var(--ink); }
/* 键盘焦点框:替代浏览器默认蓝圈,同时保住可访问性 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 链接:默认墨色,悬停时下划线 + 主题橙,暖色以最小剂量渗透进交互 */
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 48px); }
/* 阅读进度条已移除:滚动驱动的指示条属于动态特效,与“零动效”要求冲突 */
/* ============ 导航 ============
改动理由:原设计为深色底上的彩色文字导航。
现改为通栏 1px 底线划出的白色导航带,层级靠字号与留白区分 */
/* 导航底线:浅灰发丝线,比黑色更克制 */
nav { border-bottom: 1px solid var(--border); position: relative; }
.nav-bar {
display: flex; align-items: center; justify-content: space-between;
min-height: 64px; gap: 32px;
}
/* 导航品牌文字:logo 删除后用纯文字锚定品牌,橙色点呼应主题 */
.nav-brand {
font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em;
color: var(--ink); text-decoration: none;
display: flex; align-items: center; gap: 6px;
}
.nav-brand::after { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); }
.nav-brand:hover { text-decoration: none; color: var(--ink); }
/* 导航 Logo 已删除:首屏大图即品牌,导航不再重复。
链接整体移到左侧(与内容栅格齐平),语言切换保留在最右 */
.nav-right { display: flex; align-items: center; gap: 32px; width: 100%; justify-content: space-between; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-links a {
color: var(--ink);
font-size: 0.85rem; /* 小字号 + 加宽字距 = 瑞士式导航标签 */
font-weight: 500;
letter-spacing: 0.04em;
}
.nav-links a:hover, .nav-links a.active {
color: var(--accent);
text-decoration: underline; text-decoration-color: var(--accent);
text-underline-offset: 6px; text-decoration-thickness: 2px;
}
/* 语言切换:去掉深色胶囊底,改为细框矩形(直角),激活态用点缀色下划线标记 */
.lang-switch {
display: flex; gap: 12px;
border: 1px solid var(--border);
padding: 4px 12px;
font-size: 0.8rem; font-weight: 600;
}
.lang-switch button {
appearance: none; border: 0; background: transparent; padding: 0;
font: inherit; color: var(--ink-faint); cursor: pointer;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.active {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--accent); /* 激活态用主题色下划线标记 */
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
/* ============ 首屏 ============
改动理由:原设计为彩色大标题 + 发光动画 + 圆角代码卡片。
现改为等宽双栏栅格:左侧品牌 Logo 大字 + 标语 + 行动区,右侧整块黑色代码区。
黑块与暖白底的对峙本身就是构图,无需任何装饰 */
/* 上留白收紧:消除导航与主体内容之间的大片空档,首屏整体上调 */
.hero { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 104px); }
.hero-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* 等宽双栏:文字与代码分量相当 */
gap: clamp(40px, 5vw, 72px);
align-items: center; /* 左栏内容垂直居中,消除按钮下方的大面积空洞 */
}
.hero-main { min-width: 0; }
.hero-code { min-width: 0; }
.hero h1 { margin: 0; line-height: 0; /* 标题位改放品牌 Logo,行盒归零避免多余间隙 */ }
/* 品牌 Logo 以≈原 9.5rem 标题的字高显示("logo 和 Vix 字体一样大")。
按栏宽设定宽度,负边距裁掉 logo.png 画布自带留白:
鹿 V 左边缘依然对齐栅格,右侧溢出的部分全是画布空白,不会遮挡代码块 */
.hero-logo {
display: block;
width: 112%;
margin: -14.5% 0 -16.5% -20%;
}
.hero h2 {
margin: 32px 0 0;
font-size: 1.2rem;
font-weight: 400; /* 与 800 的标题形成 4 级字重落差,层次全靠对比 */
color: var(--ink-soft);
line-height: 1.6;
max-width: 24em;
}
.hero-actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
/* 安装命令栏:黑底直角的终端式区块,与右侧代码块同语言;
用户可直接选中复制 curl 命令 */
.hero-install {
margin-top: 24px;
background: var(--code-bg);
padding: 14px 20px;
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.5;
color: #d6d6d1;
display: flex;
align-items: center;
gap: 10px;
overflow-x: auto;
scrollbar-width: none;
}
.hero-install::-webkit-scrollbar { display: none; }
.hero-install .prompt { color: var(--accent); font-weight: 700; flex-shrink: 0; } /* $ 提示符用主题橙 */
.hero-install .cmd { color: #e8e8e4; white-space: nowrap; }
.hero-install .label {
font-family: var(--font-sans);
font-size: 0.72rem; letter-spacing: 0.06em;
color: rgba(255,255,255,0.4);
flex-shrink: 0; margin-left: auto;
}
.hero-install .copy-btn {
appearance: none; border: 1px solid rgba(255,255,255,0.2); background: transparent;
color: rgba(255,255,255,0.5); cursor: pointer;
font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
padding: 3px 8px; letter-spacing: 0.04em; flex-shrink: 0;
}
.hero-install .copy-btn:hover { color: var(--accent); border-color: var(--accent); }
/* 定位句:Zig 官网同款信息结构——用一句话说明"这是什么、用来做什么",
置于按钮下方填补空白;顶部 1px 规线与上方行动区分组,字色降一档 */
.hero-statement {
margin: 40px 0 0;
padding-top: 24px;
border-top: 1px solid var(--border);
font-size: 1rem;
line-height: 1.7;
color: var(--ink-soft);
max-width: 30em;
}
.btn {
display: inline-block;
min-width: 160px;
padding: 14px 28px;
font-size: 0.92rem; font-weight: 600; letter-spacing: 0.03em;
text-align: center;
border: 1px solid var(--ink);
border-radius: 0;
text-decoration: none !important;
}
.btn:hover { text-decoration: none !important; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
/* ============ 代码块 ============
直角纯黑块(页面中唯一的大面积黑色元素,与白色页面构成图底关系)。
语法高亮保留彩色:关键字用亮橙呼应主题色,其余 token 以蓝/黄/绿/紫/红/青区分——
高亮是代码可读性的功能需求,不属于装饰 */
.code-sample {
background: var(--code-bg);
padding: 0;
overflow: hidden;
scrollbar-width: none;
font-family: var(--font-mono);
font-size: 0.8rem; /* 字号与行高收紧,压缩代码块的过高体态 */
line-height: 1.5;
text-align: left;
}
.code-sample::-webkit-scrollbar { display: none; }
.code-header {
display: flex; align-items: center; gap: 8px;
padding: 10px 20px;
background: #292524;
border-bottom: 1px solid #44403c;
font-family: var(--font-sans);
font-size: 0.72rem; letter-spacing: 0.04em;
color: #a8a29e;
}
.code-header .dot { width: 6px; height: 6px; background: var(--accent); flex-shrink: 0; }
.code-header .filename { font-weight: 600; color: #d6d3d1; }
.code-body { padding: 24px 0; overflow-x: auto; scrollbar-width: none; }
.code-body::-webkit-scrollbar { display: none; }
.code-body > pre { margin: 0; color: #d6d6d1; width: max-content; min-width: 100%; font-family: var(--font-mono); }
.code-body code { font-family: var(--font-mono); white-space: pre; counter-reset: line; }
/* 行号:JS 将每行包裹为 .code-line,CSS counter 自动编号 */
.code-line { counter-increment: line; display: block; }
.code-line::before {
content: counter(line);
display: inline-block; width: 2.5em; text-align: right;
margin-right: 1.5em; padding-left: 1em;
color: #57534e; user-select: none; font-weight: 400;
border-right: 1px solid #44403c;
}
.code-keyword { color: #fb923c; } /* 关键字:亮橙,呼应主题色 */
.code-title { color: #61afef; } /* 标识符 / 函数名:蓝 */
.code-type { color: #e5c07b; } /* 类型:黄 */
.code-string { color: #98c379; } /* 字符串:绿 */
.code-number { color: #c678dd; } /* 数字:紫 */
.code-param { color: #e06c75; } /* 参数:红 */
.code-property { color: #56b6c2; } /* 属性:青 */
.code-operator { color: #d6d6d1; }
.code-comment { color: #6b6f76; font-style: italic; } /* 注释:斜体灰 */
/* ============ 章节 ============
改动理由:原设计用暗绿/暗紫底色区分章节(色彩噪音)。
现以通栏 1px 分割线 + 大留白为骨架,仅给中段两节一层
源自主题色的极浅暖底,让页面出现“暖白—浅橙—暖白—黑”的温度节奏 */
.section {
padding: clamp(72px, 9vw, 120px) 0;
border-top: 1px solid var(--border);
background: var(--paper);
}
/* 浅橙章节带:大面积、低饱和的暖,是“更温暖”方向的主要落笔 */
.section-purple { background: var(--accent-soft); }
.section h2 {
margin: 0;
font-size: clamp(1.9rem, 3.6vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.15;
color: var(--ink);
display: flex; align-items: baseline; gap: 16px;
}
.section h2 .num {
font-size: 0.85rem; font-weight: 600;
color: var(--accent);
letter-spacing: 0.08em;
font-family: var(--font-mono);
}
/* 章节眉标:大写小字 + 加宽字距,瑞士式分区标签 */
.section-eyebrow {
display: block;
font-family: var(--font-mono);
font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 12px;
}
/* 章节标题下的短规线:用主题橙渲染,是每个章节入口的视觉锚点 */
.highlight-bar { width: 48px; height: 3px; background: var(--accent); margin: 24px 0 56px; }
.build-intro {
font-size: 1.02rem;
color: var(--ink-soft);
max-width: 640px;
margin: -24px 0 56px; /* 导语与规线收紧、与卡片组放开,形成呼吸节奏 */
line-height: 1.7;
}
/* ============ 卡片组 ============
改动理由:原设计为无边框文字卡 + 悬浮上移效果。
现改为每张卡片顶部一条 1px 规线的“表格化”网格:
细线划定入口,内容左对齐,卡片之间只靠留白分隔 */
.why-grid, .build-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(32px, 4vw, 56px);
}
.why-card, .build-card { border-top: 1px solid var(--border); padding-top: 24px; position: relative; padding-left: 16px; padding-bottom: 8px; margin-left: -16px; }
.why-card:hover, .build-card:hover { border-top-color: var(--accent); background: rgba(234, 88, 12, 0.03); }
.card-num {
font-family: var(--font-mono);
font-size: 0.72rem; font-weight: 700;
color: var(--ink-faint);
letter-spacing: 0.06em;
margin-bottom: 8px; display: block;
}
.build-card { display: flex; flex-direction: column; gap: 16px; }
.why-card h3, .build-card h3 {
margin: 0 0 12px;
font-size: 1.05rem;
font-weight: 700; /* 标题纯黑加粗,取代原来的橙色标题 */
letter-spacing: 0.01em;
color: var(--ink);
}
.why-card p, .build-card p {
margin: 0;
font-size: 0.93rem;
color: var(--ink-soft);
line-height: 1.75;
}
.build-card p { flex-grow: 1; }
.build-card .btn-secondary {
margin-top: auto; align-self: flex-start;
min-width: 0; padding: 10px 22px; font-size: 0.85rem;
}
/* ============ 页脚 ============
改动理由:原设计为深灰底页脚。现改为纯黑反白页脚:
与首屏代码块首尾呼应,完成页面“白—黑—白—黑”的节奏闭环 */
footer { background: var(--footer-bg); color: var(--footer-text); padding: 80px 0 40px; }
/* 页脚大字品牌标:超大字号 + 极粗字重,作为页脚的视觉锚点 */
.footer-brand {
font-size: clamp(4rem, 10vw, 7rem);
font-weight: 800; letter-spacing: -0.04em;
line-height: 0.9; color: var(--footer-text);
opacity: 0.08; margin-bottom: 48px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(40px, 5vw, 64px);
margin-bottom: 56px;
}
.footer-col h4 {
margin: 0 0 20px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em; /* 加宽字距的小标签:瑞士式元信息处理 */
color: var(--footer-muted);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { color: var(--footer-text); font-size: 0.9rem; }
.social-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.social-row a { color: var(--footer-text); font-size: 0.9rem; }
/* 黑底上的悬停用提亮一档的橙,保证对比度 */
.footer-col a:hover, .social-row a:hover, .attribution a:hover { color: var(--accent); }
.footer-note { margin: 16px 0 0; color: var(--footer-muted); font-size: 0.82rem; }
/* 版权行:由居中改为左对齐(瑞士网格拒绝装饰性居中),
上方一条 25% 白的发丝线与内容区分隔 */
.attribution {
text-align: left;
border-top: 1px solid var(--footer-border);
padding-top: 28px;
font-size: 0.8rem;
color: var(--footer-muted);
}
.attribution p { margin: 4px 0; }
.attribution a { color: var(--footer-text); opacity: 0.75; text-decoration: underline; text-underline-offset: 3px; }
/* ============ 零动效 ============
按要求移除全部动画与过渡:无入场动效、无循环动画、无 hover 位移。
.reveal / .hero-line 等类名保留在 HTML 中(作为 site.js 的钩子),
但不附带任何视觉效果,页面加载即静止完整呈现 */
/* ============ 移动端导航 ============
改动理由:直角细框取代圆角深色按钮与投影面板,与桌面版同一套语言 */
.nav-toggle {
display: inline-flex;
position: absolute; top: 10px; right: 0; z-index: 2;
width: 44px; height: 44px;
align-items: center; justify-content: center; flex-direction: column; gap: 5px;
border: 1px solid var(--ink);
border-radius: 0;
background: var(--paper);
color: var(--ink);
cursor: pointer; padding: 0;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: currentColor; }
nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 901px) { .nav-toggle { display: none; } }
@media (max-width: 900px) {
.nav-bar { flex-wrap: wrap; padding: 6px 56px 6px 0; min-height: 56px; }
.nav-right {
display: none;
width: 100%;
flex-direction: column; align-items: stretch; gap: 0;
margin: 10px 0 16px;
background: var(--paper);
border: 1px solid var(--border);
}
nav.nav-open .nav-right { display: flex; }
.nav-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--border);
border-bottom: 1px solid var(--border);
}
.nav-links li { background: var(--paper-alt); }
.nav-links a { display: block; padding: 14px 16px; font-size: 0.9rem; }
.lang-switch { align-self: flex-start; margin: 14px 16px 16px; }
.hero { padding: 56px 0 64px; }
.hero-inner { grid-template-columns: 1fr; gap: 48px; }
.hero h2 { font-size: 1.05rem; max-width: none; }
.hero-actions { margin-top: 32px; }
.btn { min-width: 0; flex: 1 1 140px; }
.hero-code .code-body { max-height: 340px; overflow: auto; }
.why-grid, .build-grid, .footer-grid { grid-template-columns: 1fr; }
.build-intro { margin-bottom: 48px; }
footer { padding: 56px 0 32px; }
}
@media (max-width: 420px) {
.nav-links { grid-template-columns: 1fr; }
}
</style>
<script src="assets/site.js" defer></script>
</head>
<body>
<!-- 结构改动:nav 上移为通栏元素(原嵌套在 container 内),
使 1px 底线可以贯穿整个视口宽度,与章节分割线对齐成同一套标尺系统 -->
<nav>
<div class="container nav-bar">
<a href="index.html" class="nav-brand">Vix</a>
<button class="nav-toggle" type="button" aria-label="打开导航菜单" aria-expanded="false" aria-controls="site-nav-links">
<span></span>
<span></span>
<span></span>
</button>
<div class="nav-right" id="site-nav-links">
<ul class="nav-links">
<li><a href="index.html" class="active" data-i18n="nav_home">首页</a></li>
<li><a href="https://github.com/vixlang/LearnVix" data-i18n="nav_doc">文档</a></li>
<li><a href="very.html">Very</a></li>
<li><a href="playground/" data-i18n="nav_playground">Playground</a></li>
<li><a href="VEP/" data-i18n="nav_vep">VEP</a></li>
<li><a href="https://github.com/vixlang/Vix-lang">GitHub</a></li>
</ul>
<div class="lang-switch">
<button id="btn-zh" type="button" data-lang="zh" aria-pressed="false">中文</button>
<button id="btn-en" type="button" data-lang="en" class="active" aria-pressed="true">EN</button>
</div>
</div>
</div>
</nav>
<div class="container">
<header class="hero">
<div class="hero-inner">
<div class="hero-main">
<h1 class="hero-line hero-line-1"><img src="logo.png" alt="Vix" class="hero-logo"></h1>
<h2 data-i18n="desc" class="hero-line hero-line-2">赋予每个人构建简洁、<br class="dn db-ns">可靠且高效系统软件的能力。</h2>
<div class="hero-actions hero-line hero-line-3">
<a href="https://github.com/vixlang/Vix-lang/releases" class="btn btn-primary" data-i18n="start">马上开始</a>
<a href="https://github.com/vixlang/Vix-lang" class="btn btn-secondary" data-i18n="src">查看源码</a>
</div>
<div class="hero-install">
<span class="prompt">$</span>
<span class="cmd">curl -fsSL https://vix-lang.org/install.sh | sh</span>
<span class="label" data-i18n="install_label">一键安装</span>
<button class="copy-btn" type="button" data-cmd="curl -fsSL https://vix-lang.org/install.sh | sh">Copy</button>
</div>
<p class="hero-statement" data-i18n="hero_stmt">Vix 是一门静态类型的编译型语言,用于构建简洁、可靠且高效的系统软件。</p>
</div>
<div class="hero-code hero-line hero-line-4">
<div class="code-sample">
<div class="code-header"><span class="dot"></span><span class="filename">hello.vix</span></div>
<div class="code-body">
<pre id="panel-0"><code><span class="code-keyword">import</span> <span class="code-title">string</span>
<span class="code-keyword">import</span> <span class="code-title">file</span>
<span class="code-keyword">type</span> <span class="code-title">Result</span>:[<span class="code-type">T</span>, <span class="code-type">E</span>] = <span class="code-title">Ok</span>(<span class="code-type">T</span>) | <span class="code-title">Err</span>(<span class="code-type">E</span>)
<span class="code-keyword">fn</span> <span class="code-title">loadName</span>(<span class="code-param">path</span>:<span class="code-type">string</span>): <span class="code-title">Result</span>:[<span class="code-type">string</span>, <span class="code-type">string</span>]
{
<span class="code-keyword">let</span> <span class="code-param">name</span> =
<span class="code-keyword">try</span> <span class="code-title">file</span>.<span class="code-property">read</span>(<span class="code-param">path</span>)
<span class="code-title">|></span> <span class="code-title">string</span>.<span class="code-property">trim</span>
<span class="code-title">|></span> <span class="code-title">string</span>.<span class="code-property">uppercase</span>
<span class="code-keyword">return</span> <span class="code-title">Ok</span>(<span class="code-param">name</span>)
}
<span class="code-keyword">fn</span> <span class="code-title">main</span>(): <span class="code-type">i32</span>
{
<span class="code-keyword">match</span> <span class="code-title">loadName</span>(<span class="code-string">"user.txt"</span>)
{
<span class="code-title">Ok</span>(<span class="code-param">name</span>) <span class="code-title">→</span>
<span class="code-title">print</span>(<span class="code-string">"Hello"</span>, <span class="code-param">name</span>)
<span class="code-title">Err</span>(<span class="code-param">e</span>) <span class="code-title">→</span>
<span class="code-title">print</span>(<span class="code-string">"Error:"</span>, <span class="code-param">e</span>)
}
<span class="code-keyword">return</span> <span class="code-number">0</span>
}</code></pre>
</div>
</div>
</div>
</div>
</header>
</div>
<section class="section section-green reveal">
<div class="container">
<span class="section-eyebrow">Features</span>
<h2 data-i18n="why_title"><span class="num">01</span>为什么选择 Vix?</h2>
<div class="highlight-bar"></div>
<div class="why-grid reveal-grid">
<div class="why-card">
<span class="card-num">01</span>
<h3 data-i18n="f1_t">编译即优化</h3>
<p data-i18n="f1_d">基于 LLVM 后端,Vix 在编译期完成大量优化。没有沉重的运行时负担,生成的二进制文件精简高效,启动速度毫秒级。</p>
</div>
<div class="why-card">
<span class="card-num">02</span>
<h3 data-i18n="f2_t">模式匹配与 ADT</h3>
<p data-i18n="f2_d">原生支持代数数据类型和强大的 match 表达式,让状态处理变得直观且穷尽。编译器会提醒你漏掉的每一种情况,而不是在运行时崩溃。</p>
</div>
<div class="why-card">
<span class="card-num">03</span>
<h3 data-i18n="f3_t">可控的底层能力</h3>
<p data-i18n="f3_d">需要操作原始内存?Vix 提供指针运算和手动内存管理的能力。不需要时,现代化的语法和类型系统帮你远离段错误。</p>
</div>
</div>
</div>
</section>
<section class="section section-purple reveal">
<div class="container">
<span class="section-eyebrow">Build</span>
<h2 data-i18n="build_title"><span class="num">02</span>用 Vix 构建应用</h2>
<div class="highlight-bar"></div>
<p class="build-intro" data-i18n="build_desc">
Vix 目前处于积极开发阶段,核心语法和类型系统已经可用。以下是一些你可以尝试的方向,更多示例请参考官方仓库。
</p>
<div class="build-grid reveal-grid">
<div class="build-card">
<h3 data-i18n="b1_t">算法与数据结构</h3>
<p data-i18n="b1_d">用 Vix 的经典语法实现链表、树和排序算法,感受模式匹配带来的清晰逻辑表达。</p>
<a href="https://github.com/vixlang/Vix-lang/tree/stage0/examples" class="btn btn-secondary" data-i18n="b_btn">浏览示例</a>
</div>
<div class="build-card">
<h3 data-i18n="b2_t">系统工具</h3>
<p data-i18n="b2_d">编写文件处理器、文本分析器或小型 CLI 工具。Vix 的编译速度和高性能运行时让工具开发事半功倍。</p>
<a href="https://github.com/vixlang/Vix-lang/tree/stage0/examples" class="btn btn-secondary" data-i18n="b_btn">浏览示例</a>
</div>
<div class="build-card">
<h3 data-i18n="b3_t">探索语言特性</h3>
<p data-i18n="b3_d">从泛型到指针运算,从结构体到可选类型。示例代码覆盖了 Vix 当前支持的核心特性。</p>
<a href="https://github.com/vixlang/Vix-lang/tree/stage0/examples" class="btn btn-secondary" data-i18n="b_btn">浏览示例</a>
</div>
</div>
</div>
</section>
<!-- 生态系统 -->
<section class="section section-purple reveal">
<div class="container">
<span class="section-eyebrow">Ecosystem</span>
<h2 data-i18n="eco_title"><span class="num">03</span>加入生态系统</h2>
<div class="highlight-bar"></div>
<p class="build-intro" data-i18n="eco_desc">
依靠 Very 包管理器、Verve 格式化工具和 VS Code 扩展,Vix 拥有日渐完善的工具链。
</p>
<div class="build-grid reveal-grid">
<div class="build-card">
<h3 data-i18n="e1_t">VS Code 扩展</h3>
<p data-i18n="e1_d">为 VS Code 提供语法高亮、代码补全、错误检查等语言支持,让 Vix 开发体验更顺畅。</p>
<a href="https://github.com/vixlang/ext-VixLangAnalyzer" class="btn btn-secondary" target="_blank" data-i18n="e1_btn">安装扩展</a>
</div>
<div class="build-card">
<h3>Verve</h3>
<p data-i18n="e2_d">Vix 代码格式化工具,统一团队代码风格。支持一键格式化,可与编辑器深度集成。使用 very build 构建。</p>
<a href="https://github.com/vixlang/vtool-Verve" class="btn btn-secondary" target="_blank" data-i18n="e2_btn">了解 Verve</a>
</div>
<div class="build-card">
<h3>Very</h3>
<p data-i18n="e3_d">Vix 语言包管理器兼项目管理工具。依赖解决、编译与分发一体,快速创建和管理 Vix 项目。</p>
<a href="very.html" class="btn btn-secondary" data-i18n="eco_xpm">了解 Very</a>
</div>
</div>
</div>
</section>
<!-- VEP -->
<section class="section reveal">
<div class="container">
<span class="section-eyebrow">Proposals</span>
<h2 data-i18n="vep_title"><span class="num">04</span>Vix 增强提案 (VEP)</h2>
<div class="highlight-bar"></div>
<p class="build-intro" data-i18n="vep_desc">
VEP(Vix Enhancement Proposal)是 Vix 语言的增强提案规范,类似于 Python 的 PEP。在这里浏览所有提案,了解 Vix 的设计演进与规范。
</p>
<div class="build-grid reveal-grid">
<div class="build-card">
<h3 data-i18n="vep_b1_t">浏览提案</h3>
<p data-i18n="vep_b1_d">浏览所有已提交的增强提案,跟踪 Vix 的设计演进方向与关键里程碑。</p>
<a href="VEP/" class="btn btn-secondary" data-i18n="vep_b1_btn">进入 VEP</a>
</div>
<div class="build-card">
<h3 data-i18n="vep_b2_t">提案列表</h3>
<p data-i18n="vep_b2_d">按编号浏览全部 VEP,快速定位你关心的特性提案与规范文档。</p>
<a href="VEP/veps/" class="btn btn-secondary" data-i18n="vep_b2_btn">查看列表</a>
</div>
<div class="build-card">
<h3 data-i18n="vep_b3_t">了解流程</h3>
<p data-i18n="vep_b3_d">了解 VEP 的提案流程、模板与评审规范,参与 Vix 的设计讨论。</p>
<a href="VEP/about/" class="btn btn-secondary" data-i18n="vep_b3_btn">阅读规范</a>
</div>
</div>
</div>
</section>
<footer class="reveal">
<div class="container">
<div class="footer-brand">Vix</div>
<div class="footer-grid">
<div class="footer-col">
<h4 data-i18n="ft_help">获得帮助</h4>
<ul>
<li><a href="https://github.com/vixlang/LearnVix" data-i18n="nav_doc">文档</a></li>
<li><a href="https://github.com/vixlang/Vix-docs" data-i18n="ft_contrib">贡献者文档</a></li>
<li><a href="https://forum.vix-lang.org" target="_blank" rel="noopener" data-i18n="ft_forum">在用户论坛提问</a></li>
</ul>
</div>
<div class="footer-col">
<h4 data-i18n="ft_terms">条款与政策</h4>
<ul>
<li><a href="#" data-i18n="ft_coc">行为准则</a></li>
<li><a href="https://github.com/vixlang/Vix-lang/blob/stage0/LICENSE" data-i18n="ft_license">许可证</a></li>
<li><a href="#" data-i18n="ft_security">安全问题公示</a></li>
</ul>
</div>
<div class="footer-col">
<h4 data-i18n="ft_social">社交</h4>
<div class="social-row">
<a href="https://github.com/vixlang" target="_blank">GitHub</a>
<a href="mailto:popolk1871@outlook.com">Contact Us</a>
</div>
<p class="footer-note" data-i18n="ft_qq">QQ 群: 130577506</p>
</div>
</div>
<div class="attribution">
<p data-i18n="footer_txt">由 Vix Lang 贡献者维护 | MIT 协议</p>
<p><span data-i18n="ft_typo">发现了错别字?</span><a href="https://github.com/vixlang/vixlang.github.io/issues" data-i18n="ft_fix">在这里提交修复!</a></p>
</div>
</div>
</footer>
<script>
/* 默认语言改为英文:仅当用户从未手动选择过语言时写入 'en',
已保存的语言偏好(localStorage)永远优先。deferred 的 site.js
会在 DOMContentLoaded 时读取该值并自动切换为英文文案 */
if (!localStorage.getItem('vix-lang')) {
localStorage.setItem('vix-lang', 'en');
}
/* 代码块行号:将 <code> 内容按 \n 拆分,每行包裹为 .code-line */
document.addEventListener('DOMContentLoaded', function() {
var code = document.querySelector('.code-body code');
if (!code) return;
var html = code.innerHTML;
var lines = html.split('\n');
var wrapped = lines.map(function(line) {
return '<span class="code-line">' + (line || ' ') + '</span>';
}).join('');
code.innerHTML = wrapped;
/* 复制按钮 */
var copyBtn = document.querySelector('.copy-btn');
if (copyBtn) {
copyBtn.addEventListener('click', function() {
var cmd = this.getAttribute('data-cmd');
var txt = document.createElement('textarea');
txt.value = cmd;
document.body.appendChild(txt);
txt.select();
try { document.execCommand('copy'); } catch(e) {}
document.body.removeChild(txt);
var orig = this.textContent;
this.textContent = 'Copied';
var self = this;
setTimeout(function() { self.textContent = orig; }, 1500);
});
}
});
const translations = {
zh: {
nav_home: "首页", nav_doc: "文档",
nav_playground: "在线运行",
title: "Vix",
desc: "赋予每个人构建简洁、可靠且高效系统软件的能力。",
start: "马上开始", src: "查看源码",
why_title: "为什么选择 Vix?",
f1_t: "高性能", f1_d: "由于基于 LLVM 后端,Vix 速度惊人且内存利用率极高。它可以胜任对性能要求极高的服务,甚至可以直接在嵌入式设备上运行。",
f2_t: "现代类型系统", f2_d: "丰富的类型系统支持泛型与代数数据类型(ADT)。内置现代语言级别的 match 模式匹配体系以及结构体等,使得代码极具表现力。",
f3_t: "底层控制力", f3_d: "无缝支持指针运算和原生内存操作。使用 & 取地址,@ 解引用,在提供高级语法抽象的同时,毫不妥协对硬件的绝对掌控。",
build_title: "用 Vix 构建应用", build_desc: "VIx 目前正在快速发展中,语法简洁、一致。",
code_comment: "// [在此处插入实际的 Vix 代码示例]",
eco_title: "加入生态系统", eco_desc: "依靠 Very 包管理器、Verve 格式化工具和 VS Code 扩展,Vix 拥有日渐完善的工具链。",
nav_vep: "VEP", eco_xpm: "了解 Very", eco_doc: "阅读文档",
footer_txt: "由 Vix Lang 贡献者维护 | MIT 协议",
/* 以下键补齐原先缺少 data-i18n 的卡片与页脚文案,使英文模式完整生效 */
b1_t: "算法与数据结构", b1_d: "用 Vix 的经典语法实现链表、树和排序算法,感受模式匹配带来的清晰逻辑表达。",
b2_t: "系统工具", b2_d: "编写文件处理器、文本分析器或小型 CLI 工具。Vix 的编译速度和高性能运行时让工具开发事半功倍。",
b3_t: "探索语言特性", b3_d: "从泛型到指针运算,从结构体到可选类型。示例代码覆盖了 Vix 当前支持的核心特性。",
b_btn: "浏览示例",
e1_t: "VS Code 扩展", e1_d: "为 VS Code 提供语法高亮、代码补全、错误检查等语言支持,让 Vix 开发体验更顺畅。", e1_btn: "安装扩展",
e2_d: "Vix 代码格式化工具,统一团队代码风格。支持一键格式化,可与编辑器深度集成。使用 very build 构建。", e2_btn: "了解 Verve",
e3_d: "Vix 语言包管理器兼项目管理工具。依赖解决、编译与分发一体,快速创建和管理 Vix 项目。",
vep_title: "Vix 增强提案 (VEP)", vep_desc: "VEP(Vix Enhancement Proposal)是 Vix 语言的增强提案规范,类似于 Python 的 PEP。在这里浏览所有提案,了解 Vix 的设计演进与规范。",
vep_b1_t: "浏览提案", vep_b1_d: "浏览所有已提交的增强提案,跟踪 Vix 的设计演进方向与关键里程碑。", vep_b1_btn: "进入 VEP",
vep_b2_t: "提案列表", vep_b2_d: "按编号浏览全部 VEP,快速定位你关心的特性提案与规范文档。", vep_b2_btn: "查看列表",
vep_b3_t: "了解流程", vep_b3_d: "了解 VEP 的提案流程、模板与评审规范,参与 Vix 的设计讨论。", vep_b3_btn: "阅读规范",
ft_help: "获得帮助", ft_contrib: "贡献者文档", ft_forum: "在用户论坛提问",
ft_terms: "条款与政策", ft_coc: "行为准则", ft_license: "许可证", ft_security: "安全问题公示",
ft_social: "社交", ft_qq: "QQ 群: 130577506",
ft_typo: "发现了错别字?", ft_fix: "在这里提交修复!",
hero_stmt: "Vix 是一门静态类型的编译型语言,用于构建简洁、可靠且高效的系统软件。",
install_label: "一键安装"
},
en: {
nav_home: "Home", nav_doc: "Docs",
nav_playground: "Playground",
title: "Vix",
desc: "A language empowering everyone to build simple, reliable, and efficient systems software.",
start: "Get Started", src: "View Source",
why_title: "Why Vix?",
f1_t: "High Performance", f1_d: "Based on the LLVM backend, Vix is blazingly fast and highly memory-efficient. It handles performance-critical services and runs directly on embedded devices.",
f2_t: "Modern Type System", f2_d: "Rich type system supporting generics and ADTs. Built-in modern pattern matching and structs make code highly expressive.",
f3_t: "Low-level Control", f3_d: "Seamless support for pointer arithmetic and raw memory manipulation. High-level abstractions without compromising hardware control.",
build_title: "Build with Vix", build_desc: "VIx is evolving rapidly with clean and consistent syntax.",
code_comment: "// [Insert your Vix code example here]",
eco_title: "Join the Ecosystem", eco_desc: "Vix is growing with a powerful toolchain: the Very package manager, Verve formatter, and VS Code extension.",
nav_vep: "VEP", eco_xpm: "Discover Very", eco_doc: "Read the Docs",
footer_txt: "Maintained by VIx Lang Contributors | MIT License",
/* New keys covering the cards and footer text that previously had no data-i18n hooks */
b1_t: "Algorithms & Data Structures", b1_d: "Implement linked lists, trees, and sorting algorithms with Vix's classic syntax, and feel the clarity that pattern matching brings to logic.",
b2_t: "System Tools", b2_d: "Write file processors, text analyzers, or small CLI tools. Vix's compile speed and high-performance runtime make tool development far more productive.",
b3_t: "Explore Language Features", b3_d: "From generics to pointer arithmetic, from structs to optional types. The examples cover the core features Vix currently supports.",
b_btn: "Browse Examples",
e1_t: "VS Code Extension", e1_d: "Provides syntax highlighting, code completion, error checking, and other language support for VS Code, making Vix development smoother.", e1_btn: "Install Extension",
e2_d: "Vix's code formatter that unifies team code style. One-click formatting with deep editor integration. Built with very build.", e2_btn: "Discover Verve",
e3_d: "Vix's package manager and project management tool. Dependency resolution, compilation, and distribution in one — quickly create and manage Vix projects.",
vep_title: "Vix Enhancement Proposals (VEP)", vep_desc: "VEP (Vix Enhancement Proposal) is the enhancement proposal specification for the Vix language, similar to Python's PEP. Browse all proposals here to follow Vix's design evolution and conventions.",
vep_b1_t: "Browse Proposals", vep_b1_d: "Browse all submitted enhancement proposals and follow Vix's design direction and key milestones.", vep_b1_btn: "Enter VEP",
vep_b2_t: "Proposal List", vep_b2_d: "Browse every VEP by number to quickly find the feature proposals and spec documents you care about.", vep_b2_btn: "View List",
vep_b3_t: "Learn the Process", vep_b3_d: "Learn about the VEP proposal process, templates, and review conventions, and join Vix design discussions.", vep_b3_btn: "Read the Spec",
ft_help: "Get Help", ft_contrib: "Contributor Docs", ft_forum: "Ask on the User Forum",
ft_terms: "Terms & Policies", ft_coc: "Code of Conduct", ft_license: "License", ft_security: "Security Disclosure",
ft_social: "Social", ft_qq: "QQ Group: 130577506",
ft_typo: "Found a typo? ", ft_fix: "Submit a fix here!",
hero_stmt: "Vix is a statically-typed, compiled programming language for building simple, reliable, and efficient systems software.",
install_label: "Quick Install"
}
};
</script>
</body>
</html>