Skip to content

Commit 34d9351

Browse files
sonofmagicsonofmagic
committed
feat(website): refine gstar badge and copyright layout
1 parent fad63bc commit 34d9351

4 files changed

Lines changed: 54 additions & 100 deletions

File tree

‎website/docs/copyright.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ keywords:
2323
<div class="text-center" style="margin-bottom: 24px;">
2424
<div style="display: inline-block; background: #ffffff; padding: 16px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);">
2525
<img
26-
width="420"
26+
width="860"
2727
style="max-width: 100%; height: auto;"
28-
src="/img/gstar-tag-twinkle.gif"
29-
alt="AtomGit G-Star 项目毕业认证徽章"
28+
src="/img/gstar.png"
29+
alt="AtomGit G-Star 项目毕业认证证书"
3030
/>
3131
</div>
3232
</div>

‎website/src/css/custom/_homepage.scss‎

Lines changed: 22 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -244,88 +244,43 @@ html[data-theme='dark'] .homepage .home-cta:hover {
244244
animation-duration: 22s;
245245
}
246246

247-
.home-hero__gstar-entry {
248-
margin-top: clamp(1rem, 2vw, 1.5rem);
249-
display: flex;
250-
justify-content: center;
247+
.home-hero__title-wrap {
248+
position: relative;
249+
display: inline-block;
251250
}
252251

253-
.home-hero__gstar-link {
252+
.home-hero__gstar-corner {
253+
position: absolute;
254+
top: -0.3rem;
255+
right: -0.6rem;
254256
display: inline-flex;
255257
align-items: center;
256-
gap: 0.75rem;
258+
justify-content: center;
259+
width: 16px;
260+
height: 16px;
257261
border-radius: 9999px;
258-
border: 1px solid rgb(226 232 240 / 85%);
259-
background: linear-gradient(130deg, rgb(255 255 255 / 92%), rgb(240 249 255 / 80%));
260-
box-shadow: 0 10px 36px rgb(8 47 73 / 12%);
261-
padding: 0.45rem 0.85rem 0.45rem 0.5rem;
262262
transition:
263-
transform 0.25s ease,
264-
box-shadow 0.25s ease,
265-
border-color 0.25s ease;
266-
}
267-
268-
.home-hero__gstar-link:hover {
269-
transform: translateY(-2px);
270-
border-color: rgb(56 189 248 / 0.5);
271-
box-shadow: 0 14px 40px rgb(14 165 233 / 22%);
263+
transform 0.2s ease,
264+
filter 0.2s ease;
272265
}
273266

274-
.home-hero__gstar-badge {
275-
display: inline-flex;
276-
align-items: center;
277-
justify-content: center;
278-
border-radius: 9999px;
279-
background: #fff;
280-
padding: 0.2rem 0.55rem;
281-
border: 1px solid rgb(226 232 240 / 95%);
267+
.home-hero__gstar-corner:hover {
268+
transform: scale(1.06);
269+
filter: drop-shadow(0 6px 16px rgb(14 165 233 / 35%));
282270
}
283271

284-
.home-hero__gstar-image {
272+
.home-hero__gstar-corner-image {
285273
display: block;
286-
width: clamp(102px, 14vw, 148px);
274+
width: 100%;
287275
height: auto;
288276
}
289277

290-
.home-hero__gstar-text {
291-
font-size: 0.86rem;
292-
font-weight: 600;
293-
color: rgb(12 74 110);
294-
white-space: nowrap;
295-
}
296-
297-
[data-theme='dark'] .home-hero__gstar-link {
298-
border-color: rgb(51 65 85 / 0.85);
299-
background: linear-gradient(130deg, rgb(15 23 42 / 0.82), rgb(15 23 42 / 0.66));
300-
box-shadow: 0 14px 36px rgb(2 6 23 / 50%);
301-
}
302-
303-
[data-theme='dark'] .home-hero__gstar-link:hover {
304-
border-color: rgb(56 189 248 / 0.55);
305-
box-shadow: 0 16px 42px rgb(14 165 233 / 30%);
306-
}
307-
308-
[data-theme='dark'] .home-hero__gstar-badge {
309-
border-color: rgb(148 163 184 / 0.4);
310-
}
311-
312-
[data-theme='dark'] .home-hero__gstar-text {
313-
color: rgb(186 230 253);
314-
}
315-
316278
@media (max-width: 640px) {
317-
.home-hero__gstar-link {
318-
width: 100%;
319-
justify-content: center;
320-
border-radius: 1rem;
321-
padding: 0.55rem 0.75rem;
322-
}
323-
324-
.home-hero__gstar-text {
325-
font-size: 0.8rem;
326-
white-space: normal;
327-
line-height: 1.35;
328-
text-align: left;
279+
.home-hero__gstar-corner {
280+
top: -0.25rem;
281+
right: -0.45rem;
282+
width: 14px;
283+
height: 14px;
329284
}
330285
}
331286

‎website/src/pages/copyright.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ description: weapp-tailwindcss 项目版权与证书信息，包含 G-Star 认
1717
}}
1818
>
1919
<img
20-
width="420"
20+
width="860"
2121
style={{ maxWidth: '100%', height: 'auto' }}
22-
src="/img/gstar-tag-twinkle.gif"
23-
alt="AtomGit G-Star 项目毕业认证徽章"
22+
src="/img/gstar.png"
23+
alt="AtomGit G-Star 项目毕业认证证书"
2424
/>
2525
</div>
2626
</div>

‎website/src/pages/index.tsx‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -201,17 +201,32 @@ function HomepageHeader() {
201201
小程序 · Tailwind 精准适配
202202
</span>
203203
</div>
204-
<h1 className={`
205-
text-4xl font-semibold tracking-tight text-slate-900
206-
sm:text-5xl
207-
lg:text-6xl
208-
dark:text-slate-50
209-
`}
210-
>
211-
<span className="text-[#07c160]">weapp</span>
212-
<span className="from-weapp-to-tailwindcss">-</span>
213-
<span className="text-sky-500">tailwindcss</span>
214-
</h1>
204+
<div className="home-hero__title-wrap">
205+
<h1 className={`
206+
text-4xl font-semibold tracking-tight text-slate-900
207+
sm:text-5xl
208+
lg:text-6xl
209+
dark:text-slate-50
210+
`}
211+
>
212+
<span className="text-[#07c160]">weapp</span>
213+
<span className="from-weapp-to-tailwindcss">-</span>
214+
<span className="text-sky-500">tailwindcss</span>
215+
</h1>
216+
<a
217+
aria-label="查看版权与证书页面"
218+
className="home-hero__gstar-corner"
219+
href="/copyright"
220+
title="G-Star 毕业项目认证"
221+
>
222+
<img
223+
alt="AtomGit G-Star 毕业项目认证徽章"
224+
className="home-hero__gstar-corner-image"
225+
loading="lazy"
226+
src="/img/gstar-tag-twinkle.gif"
227+
/>
228+
</a>
229+
</div>
215230
<h3 className={`
216231
mt-5 text-xl font-medium text-slate-700
217232
sm:text-2xl
@@ -296,22 +311,6 @@ function HomepageHeader() {
296311
<HeroGithubBadge />
297312
<HeroVersionBadge className="mr-1.5" />
298313
</div>
299-
<div className="home-hero__gstar-entry">
300-
<a
301-
className="home-hero__gstar-link"
302-
href="/copyright"
303-
>
304-
<span className="home-hero__gstar-badge">
305-
<img
306-
alt="AtomGit G-Star 毕业项目认证徽章"
307-
className="home-hero__gstar-image"
308-
loading="lazy"
309-
src="/img/gstar-tag-twinkle.gif"
310-
/>
311-
</span>
312-
<span className="home-hero__gstar-text">G-Star 毕业项目认证，点击查看版权与证书</span>
313-
</a>
314-
</div>
315314
<div className={`
316315
mt-8 flex flex-wrap items-center justify-center gap-3
317316
sm:gap-4

0 commit comments

Comments
 (0)