Skip to content

Commit 5328b7c

Browse files
fwqaaqfwqaaq
committed
recode about html
1 parent 849943b commit 5328b7c

File tree

6 files changed

+324
-152
lines changed

6 files changed

+324
-152
lines changed

‎main.js‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,7 @@ function getArchive(title, iters) {
6161
(acc, { date, summary }) => {
6262
const place = `/./posts/${handleUTC(date)}/`
6363
return acc +
64-
`<p><a class="decoration-line" href=${place} target="_blank"> ${summary} ··· ${
65-
convertToUSA(date)
64+
`<p><a class="decoration-line" href=${place} target="_blank"> ${summary} ··· ${convertToUSA(date)
6665
}</a></p>`
6766
},
6867
'',
@@ -180,10 +179,9 @@ async function Others() {
180179
const sitemap = new URL('./sitemap.xml', dist)
181180
const itemsSitemap = `<?xml version="1.0" encoding="UTF-8"?>
182181
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
183-
${
184-
metaData.reduce((acc, { date }) =>
185-
`${acc}<url><loc>${WEBSITE}posts/${handleUTC(date)}/</loc></url>`, '')
186-
}
182+
${metaData.reduce((acc, { date }) =>
183+
`${acc}<url><loc>${WEBSITE}posts/${handleUTC(date)}/</loc></url>`, '')
184+
}
187185
</urlset>`
188186

189187
// robots
@@ -272,22 +270,14 @@ async function Tags() {
272270
async function About() {
273271
const __dist_about = new URL('./about/index.html', dist)
274272
if (!await exists(__dist_about)) await ensureFile(__dist_about)
275-
const __src_about = new URL('./about/about.md', src)
276-
277-
const about = await Deno.readTextFile(__src_about)
278-
const head = await replaceHead(
279-
'fwqaaq, GitHub fwqaaq, study, about',
280-
'关于我',
281-
'关于我',
282-
randomNumber,
283-
)
273+
const __src_about = new URL('./about/about.html', src)
274+
275+
const about = (await Deno.readTextFile(__src_about))
276+
.replace('<!-- base.css -->', `/public/css/base.${randomNumber}.css`)
277+
.replace('<!-- index.css -->', `/public/css/index.${randomNumber}.css`)
278+
.replace('<!-- index.js -->', `/public/JavaScript/index.${randomNumber}.js`)
284279

285-
const [, md] = parseYaml(about)
286-
const content = await markdown(md)
287-
const generated = `${head}${header}${
288-
templateArticle({ title: '关于我', content })
289-
}${footer}`
290-
await Deno.writeTextFile(__dist_about, generated)
280+
await Deno.writeTextFile(__dist_about, about)
291281
}
292282

293283
async function main() {

‎public/css/base.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,65 @@ body {
66
font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial, sans-serif;
77
}
88

9+
:root {
10+
--header-height: 4rem;
11+
--footer-height: 4rem;
12+
--page-width: 48rem;
13+
--max-about-width: 80rem;
14+
--theme-color: rgb(0, 0, 0);
15+
--bg-color: #ffffff;
16+
--header-bg: rgba(255, 255, 255, 0.8);
17+
--color-a-link: rgba(0, 90, 71, 0.8);
18+
--color-a-link-hover: #014637;
19+
--color-note: #0969da;
20+
--color-tip: #1a7f37;
21+
--color-warning: #9a6700;
22+
--color-severe: #bc4c00;
23+
--color-caution: #d1242f;
24+
--color-important: #8250df;
25+
--table-border-color: var(--theme-color);
26+
--h-color: var(--color-a-link);
27+
--list-color: var(--color-a-link);
28+
29+
line-height: 1.2rem;
30+
}
31+
32+
body {
33+
background-color: var(--bg-color);
34+
background-size: cover;
35+
position: relative;
36+
color: var(--theme-color);
37+
padding-block-start: calc(var(--header-height) + 1rem);
38+
39+
/* prevent overflow */
40+
word-break: break-all;
41+
42+
&.loading {
43+
visibility: visible;
44+
}
45+
}
46+
47+
main {
48+
min-height: calc(100vh - var(--header-height) - var(--footer-height));
49+
}
50+
51+
h2,
52+
h3,
53+
h4,
54+
h5,
55+
h6 {
56+
line-height: 1.2;
57+
color: var(--h-color);
58+
59+
&:hover a[class="anchor"]::after {
60+
content: attr(data-anchorjs-icon);
61+
}
62+
}
63+
64+
h1 {
65+
text-align: center;
66+
}
67+
968
a {
1069
text-decoration: none;
1170
}
@@ -14,6 +73,15 @@ img {
1473
max-width: 100%;
1574
}
1675

76+
input {
77+
outline-style: none;
78+
border: 0.2rem solid #ccc;
79+
border-radius: 0.2rem;
80+
padding: 0.6rem 0.8rem;
81+
font-size: 1rem;
82+
font-weight: 700;
83+
}
84+
1785
.decoration-line:hover,
1886
.decoration-line:hover i {
1987
text-decoration-line: underline;
@@ -38,6 +106,16 @@ img {
38106
z-index: 1;
39107
}
40108

109+
@keyframes spin {
110+
0% {
111+
transform: rotate(0deg);
112+
}
113+
114+
100% {
115+
transform: rotate(360deg)
116+
}
117+
}
118+
41119
.text-center {
42120
text-align: center;
43121
}

‎public/css/index.css‎

Lines changed: 72 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,3 @@
1-
:root {
2-
--header-height: 4rem;
3-
--footer-height: 4rem;
4-
--page-width: 48rem;
5-
--theme-color: rgb(0, 0, 0);
6-
--bg-color: #ffffff;
7-
--header-bg: rgba(255, 255, 255, 0.8);
8-
--color-a-link: rgba(0, 90, 71, 0.8);
9-
--color-a-link-hover: #014637;
10-
--color-note: #0969da;
11-
--color-tip: #1a7f37;
12-
--color-warning: #9a6700;
13-
--color-severe: #bc4c00;
14-
--color-caution: #d1242f;
15-
--color-important: #8250df;
16-
--table-border-color: var(--theme-color);
17-
--h-color: var(--color-a-link);
18-
--list-color: var(--color-a-link);
19-
20-
line-height: 1.2rem;
21-
}
22-
231
@media (prefers-color-scheme: dark) {
242
:root {
253
--bg-color: rgb(26, 26, 26);
@@ -36,31 +14,6 @@
3614
}
3715
}
3816

39-
body {
40-
background-color: var(--bg-color);
41-
background-size: cover;
42-
position: relative;
43-
color: var(--theme-color);
44-
padding-block-start: calc(var(--header-height) + 1rem);
45-
46-
/* prevent overflow */
47-
word-break: break-all;
48-
49-
&.loading {
50-
visibility: visible;
51-
}
52-
}
53-
54-
@keyframes spin {
55-
0% {
56-
transform: rotate(0deg);
57-
}
58-
59-
100% {
60-
transform: rotate(360deg)
61-
}
62-
}
63-
6417
article.blog-article a {
6518
color: var(--color-a-link);
6619

@@ -122,7 +75,6 @@ header.blog-header {
12275
}
12376

12477
main.blog-main {
125-
min-height: calc(100vh - var(--header-height) - var(--footer-height));
12678
display: flex;
12779
justify-content: center;
12880
margin-block-end: 1.2rem;
@@ -138,11 +90,6 @@ main.blog-main {
13890
width: 100%;
13991
}
14092

141-
/* .friend-grid*/
142-
& .friend-grid a {
143-
width: auto;
144-
}
145-
14693
& .box .tag,
14794
& article .tag {
14895
/* 标签换行 */
@@ -177,7 +124,7 @@ section.box a {
177124
color: var(--theme-color);
178125
}
179126

180-
main.blog-main :where(article.blog-article, .box) {
127+
main :where(article.blog-article, .box) {
181128
backdrop-filter: blur(1rem);
182129
-webkit-backdrop-filter: blur(1rem);
183130
background-color: var(--header-bg);
@@ -224,65 +171,6 @@ footer div.footer-icons-container {
224171
margin-block-end: 4rem;
225172
}
226173

227-
.friend-grid {
228-
display: grid;
229-
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
230-
padding-block-end: 4rem;
231-
padding-inline: 1rem;
232-
gap: 2.4rem;
233-
}
234-
235-
.friend-card {
236-
display: flex;
237-
padding: 0.4rem 0.8rem;
238-
border: 0.1rem solid var(--theme-color);
239-
gap: 1rem;
240-
241-
& img {
242-
height: 100px;
243-
}
244-
245-
& h3,
246-
& p {
247-
color: var(--theme-color);
248-
}
249-
}
250-
251-
.friend-article {
252-
width: 100%;
253-
}
254-
255-
.friend-form {
256-
display: flex;
257-
flex-direction: column;
258-
gap: 0.5rem;
259-
}
260-
261-
.friend-field {
262-
text-align: center;
263-
padding-block: 0.2rem;
264-
265-
& label {
266-
line-height: 3rem;
267-
}
268-
}
269-
270-
.friend-button {
271-
width: 12rem;
272-
padding: 0.4rem 0.8rem;
273-
margin: 0 auto;
274-
cursor: pointer;
275-
}
276-
277-
input {
278-
outline-style: none;
279-
border: 0.2rem solid #ccc;
280-
border-radius: 0.2rem;
281-
padding: 0.6rem 0.8rem;
282-
font-size: 1rem;
283-
font-weight: 700;
284-
}
285-
286174
/* Match Chrome for about showing */
287175
@media (min-width: 48rem) {
288176
main.blog-main :where(.box, article.blog-article) {
@@ -335,6 +223,10 @@ input {
335223
div.toy {
336224
display: none;
337225
}
226+
227+
.about-row {
228+
flex-direction: column;
229+
}
338230
}
339231

340232
@media (min-width: 480px) {
@@ -395,4 +287,71 @@ input {
395287
width: 90%;
396288
padding-inline: 1rem;
397289
}
290+
}
291+
292+
main.about-main {
293+
display: flex;
294+
justify-content: center;
295+
}
296+
297+
.about-container {
298+
display: flex;
299+
flex-direction: column;
300+
width: 92%;
301+
max-width: var(--max-about-width);
302+
303+
&>h2 {
304+
text-align: center;
305+
}
306+
}
307+
308+
.about-row {
309+
display: flex;
310+
311+
&:last-child {
312+
margin-block-end: 1.6rem;
313+
}
314+
315+
section.box {
316+
width: auto;
317+
padding: 1.8rem 2rem;
318+
border-color: none;
319+
color: var(--theme-color);
320+
}
321+
}
322+
323+
.about-card-8 {
324+
flex: 8;
325+
}
326+
327+
.about-card-4 {
328+
flex: 4;
329+
}
330+
331+
.about-card-3 {
332+
flex: 3;
333+
}
334+
335+
.about-section-color-one {
336+
background: linear-gradient(120deg, rgba(34, 194, 255, .2392156863) 0%, rgba(255, 29, 206, .15) 100%);
337+
}
338+
339+
.about-section-color-two {
340+
background: linear-gradient(120deg, rgba(29, 255, 199, 0.15) 0%, rgba(255, 211, 34, 0.239) 100%);
341+
}
342+
343+
.about-section-color-three {
344+
background: linear-gradient(120deg, rgba(123, 255, 29, 0.15) 0%, rgba(255, 34, 34, 0.239) 100%);
345+
}
346+
347+
.about-section-color-four {
348+
background: linear-gradient(120deg, rgba(82, 255, 29, 0.15) 0%, rgba(255, 34, 211, 0.239) 100%);
349+
}
350+
351+
.about-section-color-five {
352+
background: linear-gradient(120deg, rgba(255, 29, 29, 0.15) 0%, rgba(152, 34, 255, 0.239) 100%);
353+
}
354+
355+
.about-section-color-six {
356+
background: linear-gradient(120deg, rgba(0, 117, 195, 0.15) 0%, rgba(0, 202, 165, 0.239) 100%);
398357
}

0 commit comments

Comments
 (0)