Initial homepage

This commit is contained in:
mid
2026-08-18 09:57:55 +08:00
commit 1660bb9f65
25 changed files with 3019 additions and 0 deletions
+41
View File
@@ -0,0 +1,41 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark">
<meta name="theme-color" content="#77747f">
<title>未找到页面 | 中枢</title>
<link rel="icon" href="/assets/images/avatar.jpg" type="image/jpeg">
<link rel="stylesheet" href="/assets/css/main.css?v=20260818-3">
<script src="/assets/js/main.js?v=20260818-3" defer></script>
</head>
<body>
<canvas id="sakura" aria-hidden="true"></canvas>
<main class="landing">
<section class="composition" aria-labelledby="error-title">
<div class="portrait-stage">
<div class="portrait-ring">
<img class="portrait-image" src="/assets/images/avatar.jpg" alt="中枢头像">
<div class="portrait-frame" aria-hidden="true">
<picture class="portrait-frame-slice">
<source media="(prefers-reduced-motion: reduce)" srcset="/assets/images/avatar-frame-static.png">
<img src="/assets/images/avatar-frame-animated.png" alt="">
</picture>
</div>
</div>
</div>
<div class="intro">
<p class="eyebrow">Error 404</p>
<h1 id="error-title" aria-label="迷路了"><span>迷</span><span>路</span><span>了</span></h1>
<p class="tagline">这里没有光,但可以回到入口。</p>
</div>
<nav class="destinations destinations-single" aria-label="返回导航">
<a class="destination" href="/">
<span>返回首页</span>
</a>
</nav>
</section>
</main>
</body>
</html>
+483
View File
@@ -0,0 +1,483 @@
@font-face {
font-family: "Noto Serif SC";
src: url("../fonts/NotoSerifSC-subset.woff2?v=20260818-3") format("woff2");
font-style: normal;
font-weight: 200 900;
font-display: swap;
}
:root {
color-scheme: dark;
--ink: #ffffff;
--ink-muted: rgba(255, 255, 255, 0.78);
--line: rgba(255, 255, 255, 0.82);
--line-soft: rgba(255, 255, 255, 0.42);
--rose: #f38caa;
--font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
font-family: "Microsoft YaHei UI", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
font-synthesis: none;
}
* {
box-sizing: border-box;
}
html {
min-width: 320px;
min-height: 100%;
background: #77747f;
}
body {
min-width: 320px;
min-height: 100vh;
min-height: 100svh;
margin: 0;
overflow-x: hidden;
color: var(--ink);
background: #77747f;
}
a {
color: inherit;
text-decoration: none;
}
#sakura {
position: fixed;
z-index: 0;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: linear-gradient(180deg, #d8d7dc 0%, #aaa8b2 45%, #66636f 100%);
}
.landing {
position: relative;
z-index: 2;
display: grid;
min-height: 100vh;
min-height: 100svh;
place-items: start center;
padding: clamp(34px, 6vh, 64px) 24px 28px;
}
.composition {
position: relative;
display: flex;
width: min(100%, 620px);
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
/* Preserve the 100px composition on normal screens and reclaim space on short ones. */
transform: translateY(clamp(0px, calc(125vh - 800px), 100px));
}
.portrait-stage {
position: relative;
z-index: 2;
display: grid;
width: 124px;
height: 124px;
flex: 0 0 auto;
place-items: center;
}
.portrait-ring {
position: relative;
width: 116px;
height: 116px;
overflow: visible;
border: 3px solid rgba(255, 255, 255, 0.92);
border-radius: 50%;
background: #d9d8dc;
box-shadow: 0 12px 34px rgba(49, 42, 53, 0.24);
transform: rotate(0deg);
transition: transform 720ms ease-in-out;
}
.portrait-stage:hover .portrait-ring {
transform: rotate(360deg);
}
.portrait-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 43%;
border-radius: 50%;
}
/* The supplied frame is square. Keep only its central glitch slices so the
circular avatar remains the dominant shape. */
.portrait-frame {
position: absolute;
z-index: 2;
inset: 0;
overflow: hidden;
pointer-events: none;
border-radius: 50%;
clip-path: circle(50% at 50% 50%);
-webkit-mask-image: url("../images/avatar-frame-mask.svg?v=20260817-2");
-webkit-mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: url("../images/avatar-frame-mask.svg?v=20260817-2");
mask-mode: alpha;
mask-repeat: no-repeat;
mask-size: 100% 100%;
}
.portrait-frame-slice {
position: absolute;
display: block;
inset: 0;
}
.portrait-frame-slice img {
display: block;
width: 100%;
height: 100%;
object-fit: fill;
}
.intro {
position: relative;
width: 100%;
margin-top: 83px;
margin-bottom: 33px;
padding: 66px 24px 60px;
}
.eyebrow {
margin: 0 0 14px;
color: rgba(255, 255, 255, 0.68);
font-family: "Segoe UI", Arial, sans-serif;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0;
text-transform: uppercase;
}
h1 {
display: inline-flex;
margin: 0;
align-items: center;
justify-content: center;
gap: 0.3em;
font-family: var(--font-display);
font-size: 3rem;
font-weight: 300;
line-height: 1.16;
letter-spacing: 0;
text-shadow: 0 3px 18px rgba(47, 41, 51, 0.18);
}
#site-title {
transform-origin: center;
animation: title-glow 2.8s ease-in-out infinite;
will-change: transform, text-shadow;
}
@keyframes title-glow {
0%,
100% {
color: rgba(255, 255, 255, 0.92);
transform: scale(1);
text-shadow:
0 3px 18px rgba(47, 41, 51, 0.18),
0 0 2px rgba(255, 255, 255, 0.24),
0 0 0 rgba(243, 140, 170, 0);
}
50% {
color: #fff8fb;
transform: scale(1.06);
text-shadow:
0 3px 18px rgba(47, 41, 51, 0.18),
0 0 7px rgba(255, 255, 255, 1),
0 0 24px rgba(243, 140, 170, 0.95),
0 0 54px rgba(243, 140, 170, 0.68);
}
}
.tagline {
margin: 30px 0 0;
color: var(--ink-muted);
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 300;
letter-spacing: 0;
text-shadow: 0 2px 14px rgba(47, 41, 51, 0.24);
}
.tagline-chromatic {
position: relative;
color: #ffffff;
font-weight: 500;
mix-blend-mode: lighten;
text-shadow: 0 3px 14px rgba(47, 41, 51, 0.2);
}
.tagline-chromatic::before,
.tagline-chromatic::after {
position: absolute;
top: 0;
width: 100%;
content: attr(data-text);
background: transparent;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
.tagline-chromatic::before {
left: -0.0125em;
text-shadow: 0.05em 0 #ff3f1a;
animation: glitch-loop-1 0.8s infinite ease-in-out alternate-reverse;
}
.tagline-chromatic::after {
left: 0.0125em;
text-shadow: -0.0625em 0 #00a7e0;
animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
}
@keyframes glitch-loop-1 {
0% {
clip: rect(0.45em, 9999px, 0.1125em, 0);
}
25% {
clip: rect(0.3125em, 9999px, 1.2375em, 0);
}
50% {
clip: rect(0.625em, 9999px, 1.275em, 0);
}
75% {
clip: rect(0.375em, 9999px, 1.15em, 0);
}
100% {
clip: rect(1.1375em, 9999px, 1.225em, 0);
}
}
@keyframes glitch-loop-2 {
0% {
top: -0.0125em;
left: 0.0125em;
clip: rect(0.8125em, 9999px, 1.4875em, 0);
}
25% {
top: -0.075em;
left: 0.05em;
clip: rect(0.9875em, 9999px, 0.2375em, 0);
}
50% {
top: -0.0375em;
left: 0.025em;
clip: rect(0.85em, 9999px, 0.1375em, 0);
}
75% {
top: 0;
left: -0.05em;
clip: rect(1.1875em, 9999px, 0.6625em, 0);
}
100% {
top: -0.0125em;
left: -0.0125em;
clip: rect(0.3875em, 9999px, 1.8625em, 0);
}
}
.destinations {
position: relative;
z-index: 2;
display: flex;
width: min(100%, 420px);
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 18px;
overflow: visible;
}
.destinations-single {
width: min(100%, 240px);
}
.destination {
position: relative;
display: flex;
width: 82px;
height: 82px;
flex: 0 0 82px;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 0;
min-height: 0;
color: rgba(255, 255, 255, 0.92);
font-family: "Segoe UI", Arial, sans-serif;
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.88);
border-radius: 50%;
background: rgba(75, 70, 81, 0.16);
box-shadow: 0 12px 32px rgba(50, 43, 55, 0.13);
backdrop-filter: blur(4px);
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.destination:hover {
color: #4e4854;
background: rgba(255, 255, 255, 0.82);
border-color: rgba(255, 255, 255, 0.98);
transform: translateY(-3px);
}
.destination:active {
transform: translateY(-1px);
}
.destination-label {
line-height: 1;
}
.external-icon {
font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
font-size: 0.76rem;
line-height: 1;
}
.destination:focus-visible {
z-index: 2;
outline: 2px solid #ffffff;
outline-offset: -5px;
}
.site-footer {
position: fixed;
z-index: 3;
right: 18px;
bottom: 14px;
color: rgba(255, 255, 255, 0.48);
font-family: "Segoe UI", Arial, sans-serif;
font-size: 0.58rem;
letter-spacing: 0;
text-transform: uppercase;
}
@media (max-width: 720px) {
.landing {
padding: 30px 20px 38px;
}
.composition {
min-height: 610px;
transform: translateY(clamp(0px, calc(75vh - 480px), 100px));
}
.portrait-stage {
width: 106px;
height: 106px;
}
.portrait-ring {
width: 100px;
height: 100px;
}
.intro {
margin-top: 65px;
margin-bottom: 29px;
padding: 54px 12px 50px;
}
h1 {
gap: 0.28em;
font-size: 2.55rem;
}
.tagline {
margin-top: 24px;
font-size: 1.08rem;
}
.destinations {
width: min(100%, 330px);
gap: 14px;
}
.destination {
width: 76px;
height: 76px;
flex-basis: 76px;
font-size: 0.74rem;
}
.site-footer {
display: none;
}
}
@media (max-width: 380px) {
.landing {
padding-right: 16px;
padding-left: 16px;
}
h1 {
gap: 0.24em;
font-size: 2.3rem;
}
}
@media (max-height: 720px) and (min-width: 721px) {
.landing {
padding-top: 44px;
padding-bottom: 18px;
}
}
@media (max-width: 720px) and (max-height: 720px) {
.landing {
padding-bottom: 0;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.tagline-chromatic::before,
.tagline-chromatic::after {
animation: none;
}
.portrait-ring {
transition: none;
}
#site-title {
animation: none;
}
}
Binary file not shown.
+94
View File
@@ -0,0 +1,94 @@
Copyright 2012 Google Inc. All Rights Reserved.
This Font Software is licensed under the SIL Open Font License,
Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font
creation efforts of academic and linguistic communities, and to
provide a free and open framework in which fonts may be shared and
improved in partnership with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply to
any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software
components as distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to,
deleting, or substituting -- in part or in whole -- any of the
components of the Original Version, by changing formats or by porting
the Font Software to a new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed,
modify, redistribute, and sell modified and unmodified copies of the
Font Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components, in
Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the
corresponding Copyright Holder. This restriction only applies to the
primary font name as presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created using
the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
Binary file not shown.

After

Width:  |  Height:  |  Size: 633 KiB

+14
View File
@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="224" height="224" viewBox="0 0 224 224">
<defs>
<mask id="remove-frame" maskUnits="userSpaceOnUse" mask-type="luminance">
<rect width="224" height="224" fill="white"/>
<g fill="black">
<rect x="14" y="0" width="18" height="224"/>
<rect x="192" y="0" width="22" height="224"/>
<rect x="0" y="14" width="224" height="18"/>
<rect x="0" y="193" width="224" height="22"/>
</g>
</mask>
</defs>
<rect width="224" height="224" fill="white" mask="url(#remove-frame)"/>
</svg>

After

Width:  |  Height:  |  Size: 578 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect width="64" height="64" rx="8" fill="#080a0d"/>
<path d="M32 10v44M10 32h44" stroke="#f4f7f8" stroke-width="2"/>
<rect x="23" y="23" width="18" height="18" transform="rotate(45 32 32)" fill="none" stroke="#f0c87a" stroke-width="2"/>
<circle cx="32" cy="32" r="3" fill="#9ee7cf"/>
</svg>

After

Width:  |  Height:  |  Size: 361 B

File diff suppressed because it is too large Load Diff
+11
View File
@@ -0,0 +1,11 @@
{
"site": {
"name": "中枢",
"description": "你也可以变成光",
"url": "https://midctrl.com"
},
"links": [
{ "name": "Blog", "url": "https://wp.midctrl.com" },
{ "name": "Tools", "url": "https://tools.midctrl.com" }
]
}
+66
View File
@@ -0,0 +1,66 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark">
<meta name="theme-color" content="#77747f">
<meta name="description" content="中枢 - 你也可以变成光">
<meta property="og:type" content="website">
<meta property="og:site_name" content="中枢">
<meta property="og:title" content="中枢">
<meta property="og:description" content="你也可以变成光">
<meta property="og:url" content="/">
<meta property="og:image" content="assets/images/avatar.jpg">
<title>中枢</title>
<link rel="canonical" href="/">
<link rel="icon" href="assets/images/avatar.jpg" type="image/jpeg">
<link rel="manifest" href="site.webmanifest">
<link rel="stylesheet" href="assets/css/main.css?v=20260818-3">
<script src="assets/js/main.js?v=20260818-3" defer></script>
</head>
<body>
<canvas id="sakura" aria-hidden="true"></canvas>
<main class="landing">
<section class="composition" aria-labelledby="site-title">
<div class="portrait-stage">
<div class="portrait-ring">
<img class="portrait-image" src="assets/images/avatar.jpg" alt="中枢头像">
<div class="portrait-frame" aria-hidden="true">
<picture class="portrait-frame-slice">
<source media="(prefers-reduced-motion: reduce)" srcset="assets/images/avatar-frame-static.png">
<img src="assets/images/avatar-frame-animated.png" alt="">
</picture>
</div>
</div>
</div>
<div class="intro">
<h1 id="site-title" aria-label="中枢"><span>中</span><span>枢</span></h1>
<p class="tagline tagline-chromatic" data-text="你也可以变成光">你也可以变成光</p>
</div>
<!-- Static destinations keep the page usable when JSON or JavaScript is unavailable. -->
<nav id="site-navigation" class="destinations" aria-label="站点导航">
<a class="destination" href="https://wp.midctrl.com" target="_blank" rel="noopener noreferrer">
<span class="destination-label">Blog</span>
<span class="external-icon" aria-hidden="true">↗</span>
</a>
<a class="destination" href="https://tools.midctrl.com" target="_blank" rel="noopener noreferrer">
<span class="destination-label">Tools</span>
<span class="external-icon" aria-hidden="true">↗</span>
</a>
</nav>
</section>
</main>
<footer class="site-footer">
<span>&copy; <span id="year">2026</span> midctrl</span>
</footer>
</body>
</html>
+4
View File
@@ -0,0 +1,4 @@
User-agent: *
Allow: /
Sitemap: https://midctrl.com/sitemap.xml
+17
View File
@@ -0,0 +1,17 @@
{
"name": "中枢",
"short_name": "中枢",
"description": "你也可以变成光",
"lang": "zh-CN",
"start_url": "/",
"display": "standalone",
"background_color": "#77747f",
"theme_color": "#77747f",
"icons": [
{
"src": "/assets/images/avatar.jpg",
"sizes": "512x512",
"type": "image/jpeg"
}
]
}
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://midctrl.com/</loc>
</url>
</urlset>