Skip to content

Commit d8fc29b

Browse files
LruihaoLruihao
committed
feat: long time no see
1 parent 495c6a9 commit d8fc29b

File tree

10 files changed

+708
-42
lines changed

10 files changed

+708
-42
lines changed

‎index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<meta charset="UTF-8">
55
<link rel="icon" href="/favicon.ico">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>MMT typeface</title>
7+
<title>沐目体</title>
88
<meta name="keywords" content="MMT typeface, 沐目体, 手写体, 中文字体">
9-
<meta name="description" content="MMT typeface is a hand-drawn Chinese font that is free for personal use.">
9+
<meta name="description" content="沐目体字体是一种手绘的中文字体，可供个人免费使用。">
1010
</head>
1111
<body>
1212
<div id="app"></div>

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"@vitejs/plugin-vue": "^5.2.3",
3939
"@vue/tsconfig": "^0.7.0",
4040
"cn-font-split": "^7.2.9",
41+
"colorthief": "^2.6.0",
4142
"eslint": "^9.26.0",
4243
"npm-run-all2": "^7.0.2",
4344
"tsx": "^4.19.4",

‎pnpm-lock.yaml

Lines changed: 407 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/@types/colorthief.d.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// 解决报错：类型 "typeof import("colorthief/dist/color-thief.mjs")" 没有构造签名。
2+
3+
declare module 'colorthief/dist/color-thief.mjs' {
4+
export class ColorThief {
5+
constructor()
6+
getColor(image: HTMLImageElement, quality?: number): [number, number, number]
7+
getPalette(image: HTMLImageElement, colorCount?: number, quality?: number): [number, number, number][]
8+
}
9+
export default ColorThief
10+
}

‎src/App.vue

Lines changed: 110 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,120 @@ import SectionPreview from './components/SectionPreview.vue'
66
</script>
77

88
<template>
9-
<SectionCover />
10-
<SectionPreview />
11-
<SectionMusic />
9+
<header class="header-container">
10+
<div class="mi-box">
11+
<span>沐</span>
12+
<span>目</span>
13+
</div>
14+
</header>
15+
<main class="main-container">
16+
<SectionCover />
17+
<SectionMusic />
18+
<SectionPreview />
19+
</main>
1220
<Footer />
1321
</template>
1422

1523
<style scoped>
24+
.header-container {
25+
display: none;
26+
}
27+
@media (min-width: 1024px) {
28+
.header-container {
29+
display: block;
30+
text-align: center;
31+
margin-block: 70px;
32+
--color-border-mi: #74759b;
33+
/* 实现米字格 */
34+
.mi-box {
35+
display: inline-block;
36+
position: relative;
37+
width: 160px;
38+
height: 160px;
39+
border: 2px solid var(--color-border-mi);
40+
box-shadow: 0 0 20px var(--color-box-shadow, rgba(0, 0, 0, 0.2));
41+
&::before {
42+
content: '';
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
width: 100%;
47+
height: 100%;
48+
background-image:
49+
linear-gradient(
50+
to right,
51+
transparent calc(50% - 0.5px),
52+
var(--color-border-mi) calc(50% - 0.5px),
53+
var(--color-border-mi) calc(50% + 0.5px),
54+
transparent calc(50% + 0.5px)
55+
),
56+
linear-gradient(
57+
to bottom,
58+
transparent calc(50% - 0.5px),
59+
var(--color-border-mi) calc(50% - 0.5px),
60+
var(--color-border-mi) calc(50% + 0.5px),
61+
transparent calc(50% + 0.5px)
62+
),
63+
linear-gradient(
64+
to bottom left,
65+
transparent calc(50% - 0.5px),
66+
var(--color-border-mi) calc(50% - 0.5px),
67+
var(--color-border-mi) calc(50% + 0.5px),
68+
transparent calc(50% + 0.5px)
69+
),
70+
linear-gradient(
71+
to bottom right,
72+
transparent calc(50% - 0.5px),
73+
var(--color-border-mi) calc(50% - 0.5px),
74+
var(--color-border-mi) calc(50% + 0.5px),
75+
transparent calc(50% + 0.5px)
76+
);
77+
}
78+
}
79+
span {
80+
position: absolute;
81+
transform: translate(-50%, -50%);
82+
font-family: MMT;
83+
font-size: 106px;
84+
user-select: none;
85+
}
86+
span:first-of-type {
87+
top: 52%;
88+
left: 40%;
89+
color: brown;
90+
}
91+
span:last-of-type {
92+
top: 54%;
93+
left: 75%;
94+
color: gray;
95+
}
96+
}
97+
.main-container {
98+
display: grid;
99+
grid-template-rows: 1fr auto auto;
100+
box-shadow: 0 0 20px var(--color-box-shadow, rgba(0, 0, 0, 0.2));
101+
border-radius: var(--border-radius);
102+
}
103+
section {
104+
&:first-of-type {
105+
border-top-left-radius: var(--border-radius);
106+
border-top-right-radius: var(--border-radius);
107+
}
108+
&:last-of-type {
109+
border-bottom-left-radius: var(--border-radius);
110+
border-bottom-right-radius: var(--border-radius);
111+
}
112+
}
113+
}
114+
@media (prefers-color-scheme: dark) {
115+
.main-container {
116+
--color-box-shadow: rgba(255, 255, 255, 0.2);
117+
}
118+
.mi-box {
119+
--color-box-shadow: rgba(255, 255, 255, 0.2);
120+
--color-border-mi: #5a5b7c;
121+
}
122+
}
16123
section {
17124
border: 2px solid var(--color-border);
18125
&:not(:last-of-type) {

‎src/assets/base.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
--color-text: #000;;
44
--color-background: #ffffff;
55
--color-border: rgba(60, 60, 60, 0.12);
6+
--border-radius: 0.75rem;
67
}
78

89
@media (prefers-color-scheme: dark) {

‎src/assets/main.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@
1515
}
1616

1717
#app {
18-
display: grid;
19-
grid-template-rows: 1fr auto auto;
2018
max-width: 1000px;
2119
}
2220
}

‎src/components/SectionCover.vue

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
aria-label="View source on GitHub"
99
>
1010
<svg
11-
width="80"
12-
height="80"
11+
width="50"
12+
height="50"
1313
viewBox="0 0 250 250"
1414
aria-hidden="true"
1515
>
@@ -23,6 +23,7 @@
2323

2424
<style scoped>
2525
.section-cover {
26+
position: relative;
2627
.manuscript {
2728
width: 100%;
2829
height: auto;
@@ -77,6 +78,15 @@
7778
}
7879
}
7980
81+
@media (min-width: 1024px) {
82+
.section-cover {
83+
.manuscript {
84+
border-top-left-radius: var(--border-radius);
85+
border-top-right-radius: var(--border-radius);
86+
}
87+
}
88+
}
89+
8090
@media (prefers-color-scheme: dark) {
8191
.github-corner {
8292
--github-corner-fill: #fff;

0 commit comments

Comments
 (0)