-
Notifications
You must be signed in to change notification settings - Fork 1
/
about.html
163 lines (163 loc) · 24 KB
/
about.html
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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>关于 - Cynosura</title>
<meta name="description" content="有关本站的一些建站信息">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--主题色-->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#EBF4F4">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#121212">
<!--Open Graph protocol-->
<meta property="og:type" content="website">
<meta property="og:title" content="关于 - Cynosura">
<meta property="og:description" content="有关本站的一些建站信息">
<meta property="og:url" content="https://cynosura.one/about">
<meta property="og:image" content="https://cynosura.one/img/banner.webp">
<!--Twitter Card-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@astraorsa">
<meta name="twitter:title" content="关于 - Cynosura">
<meta name="twitter:description" content="有关本站的一些建站信息">
<meta name="twitter:image" content="https://cynosura.one/img/banner.webp">
<!--链接样式-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/menu.js" defer></script>
<!--图标-->
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
</head>
<body>
<header>
<img class="header-avatar" src="img/avatar.webp" width="600" height="600" alt="site-avatar">
<h1 class="header-title">Cynosura</h1>
<p class="header-description">Trying to light up the dark.</p>
</header>
<main class="about-main">
<nav class="menu">
<div class="menu-a">
<button class="menu-button" onclick="window.location.href='index.html'" aria-labelledby="menu-a-index">
<svg class="icon menu-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.8913288,10 L11.8900003,3.99867157 L5.88867192,10 L5.89001465,10 L5.89001465,20 L17.8900146,20 L17.8900146,10 L17.8913288,10 Z M19.8900146,11.9986859 L19.8900146,20 C19.8900146,21.1045695 18.9945841,22 17.8900146,22 L5.89001465,22 C4.78544515,22 3.89001465,21.1045695 3.89001465,20 L3.89001465,11.9986573 L2.41319817,13.4754737 L1,12.0622756 L10.4769858,2.5852898 C11.2573722,1.8049034 12.5226285,1.8049034 13.3030149,2.5852898 L22.7800007,12.0622756 L21.3668025,13.4754737 L19.8900146,11.9986859 Z" fill-rule="evenodd"/></svg>
<span class="menu-button-text" id="menu-a-index">首页</span>
</button>
<button class="menu-button" onclick="window.location.href='/posts'" aria-labelledby="menu-a-posts">
<svg class="icon menu-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.3023235,7.94519388 L4.69610276,15.549589 C4.29095108,15.9079238 4.04030835,16.4092335 4,16.8678295 L4,20.0029438 L7.06398288,20.004826 C7.5982069,19.9670062 8.09548693,19.7183782 8.49479322,19.2616227 L16.0567001,11.6997158 L12.3023235,7.94519388 Z M13.7167068,6.53115006 L17.4709137,10.2855022 L19.8647941,7.89162181 C19.9513987,7.80501747 20.0000526,7.68755666 20.0000526,7.56507948 C20.0000526,7.4426023 19.9513987,7.32514149 19.8647932,7.23853626 L16.7611243,4.13485646 C16.6754884,4.04854589 16.5589355,4 16.43735,4 C16.3157645,4 16.1992116,4.04854589 16.1135757,4.13485646 L13.7167068,6.53115006 Z M16.43735,2 C17.0920882,2 17.7197259,2.26141978 18.1781068,2.7234227 L21.2790059,5.82432181 C21.7406843,6.28599904 22.0000526,6.91216845 22.0000526,7.56507948 C22.0000526,8.21799052 21.7406843,8.84415992 21.2790068,9.30583626 L9.95750718,20.6237545 C9.25902448,21.4294925 8.26890003,21.9245308 7.1346,22.0023295 L2,22.0023295 L2,21.0023295 L2.00324765,16.7873015 C2.08843822,15.7328366 2.57866679,14.7523321 3.32649633,14.0934196 L14.6953877,2.72462818 C15.1563921,2.2608295 15.7833514,2 16.43735,2 Z" fill-rule="evenodd"/></svg>
<span class="menu-button-text" id="menu-a-posts">文章</span>
</button>
<button class="menu-button" onclick="window.location.href='friends.html'" aria-labelledby="menu-a-friends">
<svg class="icon menu-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.4341517,5.34027649 C19.5526401,4.82550436 21.9775728,5.30066885 22.7613144,6.98140814 C23.5450164,8.66206251 22.3504571,10.824965 19.951836,12.8828831 C19.5123956,16.8857302 16.1198862,20 12,20 C10.359675,20 8.83465517,19.5063199 7.56541555,18.6594348 C4.44608523,19.1746732 2.02039254,18.6996452 1.23650448,17.0185919 C0.452540248,15.3373751 1.64816139,13.1735876 4.04839101,11.1150512 C4.48877158,7.11319839 7.88082257,4 12,4 C13.6401386,4 15.1649982,4.49356789 16.4341517,5.34027649 Z M18.3526801,7.13687265 C19.0478987,8.04366602 19.553342,9.10361155 19.8096504,10.2573495 C20.759634,9.23569807 21.1931253,8.35081879 20.9486988,7.82664467 C20.7041658,7.30224176 19.7469377,7.06554811 18.3526801,7.13687265 Z M5.64723739,16.8630198 C4.95168113,15.9557542 4.44609504,14.8951833 4.1899293,13.7407574 C3.23872065,14.7632088 2.80454268,15.6488575 3.04912005,16.1733553 C3.29377581,16.6980213 4.25184178,16.9346893 5.64723739,16.8630198 Z M17.998801,11.8788388 C17.9342721,8.62105818 15.2732265,6 12,6 C8.6862915,6 6,8.6862915 6,12 C6,13.8017545 6.79417414,15.4180196 8.05156374,16.5178367 C9.61918795,16.1740501 11.4219878,15.5791568 13.2667642,14.7189234 C15.1123744,13.8583012 16.727532,12.8591526 17.998801,11.8788388 Z M17.3040733,14.8073455 C16.3274273,15.4175193 15.2552552,15.9984306 14.1120008,16.5315389 C12.9695057,17.0642931 11.8360704,17.5119809 10.7415499,17.8678087 C11.1473536,17.9544194 11.5683538,18 12,18 C14.2994717,18 16.2968203,16.7064576 17.3040733,14.8073455 Z" fill-rule="evenodd"/></svg>
<span class="menu-button-text" id="menu-a-friends">友人</span>
</button>
<button class="menu-button-active menu-button" onclick="window.location.href='about.html'" aria-labelledby="menu-a-about">
<svg class="icon menu-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 Z M12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z M13.0036109,13.9983464 L14.0029544,13.9983464 L14.0029544,15.9983464 L10.0029544,15.9983464 L10.0029544,13.9983464 L11.0029544,13.9983464 L11.0029544,11.9983464 L10.0029544,11.9983464 L10.0029544,9.99834639 L13.0036109,9.99834639 L13.0036109,13.9983464 Z M12.0003283,8.99834639 C11.4478622,8.99834639 11,8.55063114 11,7.99834639 C11,7.44606164 11.4478622,6.99834639 12.0003283,6.99834639 C12.5527943,6.99834639 13.0006565,7.44606164 13.0006565,7.99834639 C13.0006565,8.55063114 12.5527943,8.99834639 12.0003283,8.99834639 Z" fill-rule="evenodd"/></svg>
<span class="menu-button-text-active" id="menu-a-about">关于</span>
</button>
<button class="menu-button" onclick="window.location.href='https://www.travellings.cn/go.html'" aria-labelledby="menu-a-travelling">
<svg class="icon menu-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="8.5" cy="14.5" r="1.5"/><circle cx="15.5" cy="14.5" r="1.5"/><path d="M18.87 3.34A3.55 3.55 0 0 0 16.38 2H7.62a3.47 3.47 0 0 0-2.5 1.35A4.32 4.32 0 0 0 4 6v12a1 1 0 0 0 1 1h2l-2 3h2.32L8 21h8l.68 1H19l-2-3h2a1 1 0 0 0 1-1V6a4.15 4.15 0 0 0-1.13-2.66zM7.62 4h8.72a1.77 1.77 0 0 1 1 .66 3.25 3.25 0 0 1 .25.34H6.39a2.3 2.3 0 0 1 .25-.35A1.65 1.65 0 0 1 7.62 4zM6 8V7h12v3H6zm12 9H6v-5h12z"/></svg>
<span class="menu-button-text" id="menu-a-travelling">开往</span>
</button>
</div>
<div class="menu-b">
<button class="menu-button" id="open-menu" aria-label="打开菜单">
<svg class="icon menu-icon" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
</button>
</div>
</nav>
<div class="menu-b-drawer-container" id="drawer">
<div class="menu-b-drawer-content">
<img class="menu-b-personal-avatar" src="img/profile-avatar.webp" width="512" height="512" alt="personal-avatar">
<h2 class="subtitle">赤茶</h2>
<p class="menu-b-description">Per aspera, ad astra.</p>
<hr>
<div class="menu-b-pgp">
<h3 class="subtitle">PGP</h3>
<svg class="icon text-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="M0 0h24v24H0z" fill="none"/><path d="M10.758 11.828l7.849-7.849 1.414 1.414-1.414 1.415 2.474 2.474-1.414 1.415-2.475-2.475-1.414 1.414 2.121 2.121-1.414 1.415-2.121-2.122-2.192 2.192a5.002 5.002 0 0 1-7.708 6.294 5 5 0 0 1 6.294-7.708zm-.637 6.293A3 3 0 1 0 5.88 13.88a3 3 0 0 0 4.242 4.242z"/></g></svg><a href="https://keys.openpgp.org/vks/v1/by-fingerprint/F6006874CC50A6C854B9763C3728385536F22DEA">3728 3855 36F2 2DEA</a>
</div>
<div class="social-link">
<h3 class="subtitle">联系方式</h3>
<button class="menu-b-button social-button" onclick="window.location.href='mailto:[email protected]'" type="button" title="Email">
<svg class="social-icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 352c-16.53 0-33.06-5.422-47.16-16.41L0 173.2V400C0 426.5 21.49 448 48 448h416c26.51 0 48-21.49 48-48V173.2l-208.8 162.5C289.1 346.6 272.5 352 256 352zM16.29 145.3l212.2 165.1c16.19 12.6 38.87 12.6 55.06 0l212.2-165.1C505.1 137.3 512 125 512 112C512 85.49 490.5 64 464 64h-416C21.49 64 0 85.49 0 112C0 125 6.01 137.3 16.29 145.3z"/></svg>
</button>
<button class="menu-b-button social-button" onclick="window.location.href='https://www.instagram.com/skykousa'" type="button" title="Instagram">
<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" id="bc4044d7-f71f-475b-94f1-a5fb87068130" data-name="Layer 1" viewBox="0 0 14.3782 13.8471"><path d="M7.19,4.4315A2.5416,2.5416,0,0,0,4.6016,6.924,2.5416,2.5416,0,0,0,7.19,9.4164,2.5417,2.5417,0,0,0,9.7778,6.924,2.5417,2.5417,0,0,0,7.19,4.4315Z"></path><path d="M11.1965,0H3.1818A3.1819,3.1819,0,0,0,0,3.1818v7.4835a3.1818,3.1818,0,0,0,3.1818,3.1818h8.0147a3.1817,3.1817,0,0,0,3.1817-3.1818V3.1818A3.1818,3.1818,0,0,0,11.1965,0ZM7.1915,10.5247a3.6713,3.6713,0,0,1-3.7384-3.6,3.6713,3.6713,0,0,1,3.7384-3.6,3.6713,3.6713,0,0,1,3.7384,3.6A3.6713,3.6713,0,0,1,7.1915,10.5247Zm4.1673-6.6466a.9883.9883,0,0,1-1.0063-.9693,1.0072,1.0072,0,0,1,2.0129,0A.9885.9885,0,0,1,11.3588,3.8781Z"></path></svg>
</button>
<button class="menu-b-button social-button" onclick="window.location.href='https://bsky.app/profile/cynosura.one'" type="button" title="Bluesky">
<svg class="social-icon" viewBox="0 0 360 320" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M254.896 184.158C252.81 183.926 250.733 183.645 248.671 183.315C250.773 183.574 252.849 183.855 254.896 184.158Z" fill="white"/><path d="M180 141.964C163.699 110.262 119.308 51.1817 78.0347 22.044C38.4971 -5.86834 23.414 -1.03207 13.526 3.43594C2.08093 8.60755 0 26.1785 0 36.5164C0 46.8542 5.66748 121.272 9.36416 133.694C21.5786 174.738 65.0603 188.607 105.104 184.156C107.151 183.852 109.227 183.572 111.329 183.312C109.267 183.642 107.19 183.924 105.104 184.156C46.4204 192.847 -5.69621 214.233 62.6582 290.33C137.848 368.18 165.705 273.637 180 225.702C194.295 273.637 210.76 364.771 295.995 290.33C360 225.702 313.58 192.85 254.896 184.158C252.81 183.926 250.733 183.645 248.671 183.315C250.773 183.574 252.849 183.855 254.896 184.158C294.94 188.61 338.421 174.74 350.636 133.697C354.333 121.275 360 46.8568 360 36.519C360 26.1811 357.919 8.61012 346.474 3.43851C336.586 -1.02949 321.503 -5.86576 281.965 22.0466C240.692 51.1843 196.301 110.262 180 141.964Z"/></svg>
</button>
<button class="menu-b-button social-button" onclick="window.location.href='https://mixi.social/@cynosura'" type="button" title="mixi2">
<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 712.000000 712.000000"><g transform="translate(0.000000,712.000000) scale(0.100000,-0.100000)" stroke="none"><path d="M2585 6500 c-377 -59 -839 -341 -1261 -771 -588 -601 -1028 -1371 -1229 -2154 -60 -234 -78 -365 -79 -570 -1 -188 14 -287 63 -425 79 -223 243 -376 464 -431 78 -19 107 -21 245 -16 138 4 174 9 292 40 239 63 506 182 780 350 568 347 777 449 1080 530 106 28 129 30 280 31 153 0 171 -2 245 -27 242 -81 390 -282 457 -618 21 -107 22 -139 23 -519 l0 -405 27 -73 c40 -110 84 -178 173 -267 64 -65 98 -90 175 -128 133 -66 224 -88 400 -94 123 -5 163 -2 265 17 167 31 333 88 510 173 793 385 1329 1108 1525 2058 50 242 70 427 77 694 9 380 -22 705 -102 1065 -127 570 -304 892 -560 1018 -197 98 -429 71 -779 -92 -105 -49 -148 -73 -501 -276 -386 -222 -552 -301 -740 -350 -430 -112 -741 105 -944 657 -110 298 -275 481 -502 558 -70 23 -105 28 -204 31 -66 1 -147 -1 -180 -6z"/></g></svg>
</button>
</div>
<div class="social-im-link">
<h3 class="subtitle">即时通讯 / IM</h3>
<a class="menu-b-button" href="https://t.me/looprucha"><span class="menu-b-button social-im-button">Telegram</span></a>
<a class="menu-b-button" href="https://matrix.to/#/@froseiun:matrix.org"><span class="menu-b-button social-im-button">Matrix</span></a>
</div>
<div class="menu-b-close-div">
<button class="menu-button" id="close-menu" aria-label="关闭菜单">
<svg class="icon menu-icon" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5 c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9 c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
</button>
</div>
</div>
</div>
<div class="main-content">
<article class="about-article card" id="domain">
<h2 class="card-title">站名含义</h2>
<h3 class="card-title-h3"><svg class="card-title-h3-icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><path d="M240.6,128a15.8,15.8,0,0,1-10.5,15l-63.9,23.2L143,230.1a16,16,0,0,1-30,0L89.8,166.2,25.9,143a16,16,0,0,1,0-30L89.8,89.8,113,25.9a16,16,0,0,1,30,0l23.2,63.9L230.1,113A15.8,15.8,0,0,1,240.6,128Z"/></svg>Cynosura / 小熊座</h3>
<p>即 <a href="https://zh.wikipedia.org/wiki/%E5%B0%8F%E7%86%8A%E5%BA%A7">小熊座</a> 的希腊古名拼写，呼应在用 ID: froseiun (from 星雲)，及常用昵称“熊”；而小熊座 α 星恰好为当前的北极星，在极北的夜空闪烁，指引正确的方向。Per aspera, ad astra. / 终抵繁星。</p>
</article>
<article class="about-article card">
<h2 class="card-title" id="environment">搭建环境</h2>
<h3 class="card-title-h3"><svg class="card-title-h3-icon" viewBox="0 0 480 512" xmlns="http://www.w3.org/2000/svg"><path d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"/></svg>GitHub + <svg class="card-title-h3-icon" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="M407.906,319.913l-230.8-2.928a4.58,4.58,0,0,1-3.632-1.926,4.648,4.648,0,0,1-.494-4.147,6.143,6.143,0,0,1,5.361-4.076L411.281,303.9c27.631-1.26,57.546-23.574,68.022-50.784l13.286-34.542a7.944,7.944,0,0,0,.524-2.936,7.735,7.735,0,0,0-.164-1.631A151.91,151.91,0,0,0,201.257,198.4,68.12,68.12,0,0,0,94.2,269.59C41.924,271.106,0,313.728,0,366.12a96.054,96.054,0,0,0,1.029,13.958,4.508,4.508,0,0,0,4.445,3.871l426.1.051c.043,0,.08-.019.122-.02a5.606,5.606,0,0,0,5.271-4l3.273-11.265c3.9-13.4,2.448-25.8-4.1-34.9C430.124,325.423,420.09,320.487,407.906,319.913ZM513.856,221.1c-2.141,0-4.271.062-6.391.164a3.771,3.771,0,0,0-3.324,2.653l-9.077,31.193c-3.9,13.4-2.449,25.786,4.1,34.89,6.02,8.4,16.054,13.323,28.238,13.9l49.2,2.939a4.491,4.491,0,0,1,3.51,1.894,4.64,4.64,0,0,1,.514,4.169,6.153,6.153,0,0,1-5.351,4.075l-51.125,2.939c-27.754,1.27-57.669,23.574-68.145,50.784l-3.695,9.606a2.716,2.716,0,0,0,2.427,3.68c.046,0,.088.017.136.017h175.91a4.69,4.69,0,0,0,4.539-3.37,124.807,124.807,0,0,0,4.682-34C640,277.3,583.524,221.1,513.856,221.1Z"/></svg>Cloudflare Pages</h3>
<p>如你所见，全站均为纯手工打造，是我学习前端的练手项目。目前是基于 GitHub 仓库 + Cloudflare Pages 自动部署。除了需要手动确认加载的 Disqus 评论系统外，全站没有使用 JavaScript（包括移动端抽屉菜单的实现，尽管最终效果并不完美），页面源码可在 <a href="https://github.com/auroursa/about-page">GitHub</a> 查看。</p>
<p>分页下使用 Python 编写的 <a href="https://getpelican.com">Pelican</a> 生成文章，与 Hexo、Hugo 等一样是静态页面生成器。主题同样是纯手工打造的，与主站风格保持一致，如遇样式错误请在下方留言让我知道。</p>
</article>
<article class="about-article card">
<h2 class="card-title" id="font">字体选用</h2>
<h3 class="card-title-h3"><svg class="card-title-h3-icon" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M573.19 402.67l-139.79-320C428.43 71.29 417.6 64 405.68 64h-97.59l2.45 23.16c.5 4.72-3.21 8.84-7.96 8.84h-29.16c-4.75 0-8.46-4.12-7.96-8.84L267.91 64h-97.59c-11.93 0-22.76 7.29-27.73 18.67L2.8 402.67C-6.45 423.86 8.31 448 30.54 448h196.84l10.31-97.68c.86-8.14 7.72-14.32 15.91-14.32h68.8c8.19 0 15.05 6.18 15.91 14.32L348.62 448h196.84c22.23 0 36.99-24.14 27.73-45.33zM260.4 135.16a8 8 0 0 1 7.96-7.16h39.29c4.09 0 7.53 3.09 7.96 7.16l4.6 43.58c.75 7.09-4.81 13.26-11.93 13.26h-40.54c-7.13 0-12.68-6.17-11.93-13.26l4.59-43.58zM315.64 304h-55.29c-9.5 0-16.91-8.23-15.91-17.68l5.07-48c.86-8.14 7.72-14.32 15.91-14.32h45.15c8.19 0 15.05 6.18 15.91 14.32l5.07 48c1 9.45-6.41 17.68-15.91 17.68z"/></svg><span style="font-family: 'Overpass';">Overpass</span> / 高速公路</h3>
<p>标题使用 <a href="https://overpassfont.org">Overpass</a> 的 Regular 字号，是美国联邦高速公路字体 Highway Gothic 的开源实现版本，非常简洁易读，同时文章页的代码块部分采用 Overpass Mono，以达到更好的易读性。许可协议：<a href="https://cynosura.one/font/OFL.txt">OFL</a></p>
<p>而正文部分直接使用系统默认字体，因为包含中文字形后，会增加页面加载负担，作为对比，Overpass 仅占用 69KB 的空间，不如索性把字体选择权交给用户。</p>
<p>示例：<span style="font-family: 'Overpass';">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</span></p>
</article>
<article class="about-article card" id="color">
<h2 class="card-title">色彩搭配</h2>
<h3 class="card-title-h3"><svg class="card-title-h3-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="M0 0h24v24H0z" fill="none"/><path d="M9 4h5.446a1 1 0 0 1 .848.47L18.75 10h4.408a.5.5 0 0 1 .439.74l-3.937 7.217A4.992 4.992 0 0 1 15 16 4.992 4.992 0 0 1 11 18a4.992 4.992 0 0 1-4-2 4.992 4.992 0 0 1-4.55 1.97l-1.236-6.791A1 1 0 0 1 2.198 10H3V5a1 1 0 0 1 1-1h1V1h4v3zm-4 6h11.392l-2.5-4H5v4zM3 20a5.978 5.978 0 0 0 4-1.528A5.978 5.978 0 0 0 11 20a5.978 5.978 0 0 0 4-1.528A5.978 5.978 0 0 0 19 20h2v2h-2a7.963 7.963 0 0 1-4-1.07A7.963 7.963 0 0 1 11 22a7.963 7.963 0 0 1-4-1.07A7.963 7.963 0 0 1 3 22H1v-2h2z"/></g></svg>水蓝 / 夏空和大海的颜色</h3>
<p>全站使用“水蓝”作为主题色，期望能营造夏日清爽的观感(或许会根据四季切换不同主题色)。深色模式不使用纯黑，提亮背景缓解强对比度造成的眼睛疲劳，及防止 OLED 显示拖影。</p>
<p>同时在尽量不破坏整体设计的情况下，选用高对比度色彩以符合 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG</a> 标准。</p>
<div>
<span class="about-color-span" style="background-color: #EBF4F4"></span><span class="about-color-span" style="background-color: #D0DFE6"></span><span class="about-color-span" style="background-color: #51A8DD"></span><span class="about-color-span" style="background-color: #1177B0"></span><span class="about-color-span" style="background-color: #566C73"></span>
</div>
</article>
<div class="about-article card" id="comments">
<h2 class="card-title">留言板</h2>
<p>有什么想对我说的，或者想与我交换友链，都欢迎在下面留言，看到都会及时回复。</p>
<p>因为觉得那种基于 GitHub Issue 的方案太灵车了，所以还是选择了目前比较成熟的评论系统。但由于评论数据不留存于本地，可能会出现评论信息丢失的情况。</p>
<p>注: 留言系统基于 <a href="https://disqus.com">Disqus</a>，部分网络环境可能无法正常加载。</p>
<div id="disqus_thread"></div>
<!-- 添加一个按钮 -->
<button id="load_disqus" class="button" aria-labelledby="load_comments"><span id="load_comments">加载评论</span></button>
<!-- Disqus 留言板容器 -->
<div id="disqus_thread_container"></div>
</div>
<script>
// 点击按钮后加载 Disqus 留言板
document.getElementById('load_disqus').addEventListener('click', function() {
// 添加 Disqus 留言板脚本
var disqusScript = document.createElement('script');
disqusScript.src = 'https://cynosura-one.disqus.com/embed.js';
disqusScript.setAttribute('data-timestamp', +new Date());
document.head.appendChild(disqusScript);
// 移动 Disqus 留言板内容到容器中
var disqusContainer = document.getElementById('disqus_thread_container');
disqusContainer.appendChild(document.getElementById('disqus_thread'));
// 隐藏按钮，防止重复加载
this.style.display = 'none';
});
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</main>
<footer>
<p>Designed by <a href="https://cynosura.one">Cynosura</a> © 2024</p>
</footer>
</body>
</html>