Skip to content

Commit a3a06e0

Browse files
SoonIterSoonIter
committed
chore: update
1 parent 3abd433 commit a3a06e0

File tree

6 files changed

+133
-148
lines changed

6 files changed

+133
-148
lines changed

‎packages/theme-default/src/components/HomeBackground/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
),
2020
radial-gradient(
2121
42.01% 79.63% at 52.86% 0%,
22-
#fff 0%,
22+
rgba(83, 125, 255, 0.2) 0%,
2323
rgba(255, 255, 255, 0) 100%
2424
),
2525
radial-gradient(

‎packages/theme-default/src/components/HomeFeature/index.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,22 +72,23 @@
7272
}
7373
}
7474

75-
&__icon-wrapper {
75+
&__title-wrapper {
7676
display: flex;
77+
justify-content: flex-start;
7778
align-items: center;
78-
justify-content: center;
7979
}
8080

8181
&__icon {
82+
display: inline-block;
8283
width: 3rem;
8384
height: 3rem;
8485
font-size: 1.875rem;
85-
text-align: center;
86+
text-align: left;
8687
}
8788

8889
&__title {
8990
font-weight: 700;
90-
text-align: center;
91+
text-align: left;
9192
margin: 0;
9293
}
9394

‎packages/theme-default/src/components/HomeFeature/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,16 @@ function HomeFeatureItem({ feature }: { feature: Feature }): JSX.Element {
4444
}
4545
}}
4646
>
47-
{icon ? (
48-
<div className="rp-home-feature__icon-wrapper">
47+
<div className="rp-home-feature__title-wrapper">
48+
{icon ? (
4949
<div
5050
className="rp-home-feature__icon"
5151
{...renderHtmlOrText(icon)}
5252
></div>
53-
</div>
54-
) : null}
53+
) : null}
5554

56-
<h2 className="rp-home-feature__title">{title}</h2>
55+
<h2 className="rp-home-feature__title">{title}</h2>
56+
</div>
5757
<p
5858
className="rp-home-feature__detail"
5959
{...renderHtmlOrText(details)}

‎packages/theme-default/src/components/HomeHero/index.scss‎

Lines changed: 65 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,87 @@
11
.rp-home-hero {
22
position: relative;
3-
margin: 0 auto;
3+
margin: 10vh auto;
4+
max-width: 72rem;
5+
padding: 20px;
6+
47
display: flex;
8+
flex-direction: column;
59
align-items: center;
6-
justify-content: center;
7-
8-
@media (min-width: 640px) {
9-
padding: 2.5rem 4rem 4rem;
10-
}
10+
// align-items: flex-start;
1111

12-
@media (max-width: 767px) {
13-
flex-direction: column-reverse;
12+
&__container {
13+
width: 100%;
14+
display: flex;
15+
flex-direction: row;
16+
justify-content: space-between;
17+
align-items: center;
18+
gap: 20px;
1419
}
15-
16-
@media (min-width: 768px) {
17-
padding: 7.5rem 4rem 4rem 7.5rem;
20+
&__text-container {
21+
text-align: left;
22+
align-items: flex-start;
1823
}
1924

20-
&__container {
21-
position: relative;
22-
z-index: 10;
25+
&__image {
2326
display: flex;
24-
flex-direction: column;
25-
align-items: center;
26-
text-align: center;
27+
min-width: 350px;
28+
width: 350px;
29+
max-width: 50vw;
2730
}
2831

2932
&__content {
3033
display: flex;
3134
flex-direction: column;
32-
align-items: center;
33-
max-width: 800px;
35+
justify-content: center;
36+
align-items: flex-start;
3437
}
3538

3639
&__badge {
3740
display: inline-flex;
3841
align-items: center;
3942
padding: 0.5rem 1rem;
40-
background: rgba(255, 255, 255, 0.9);
43+
background: var(--rp-c-bg-soft);
4144
border-radius: 50px;
45+
border: 1px solid var(--rp-c-divider-light);
4246
font-size: 0.875rem;
4347
font-weight: 500;
44-
color: #374151;
45-
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
48+
color: var(--rp-c-text-0);
49+
margin-bottom: 2rem;
50+
51+
&:hover {
52+
background: var(--rp-c-bg-mute);
53+
cursor: pointer;
54+
}
4655
}
4756

4857
&__title {
49-
margin: 0;
50-
font-size: 3.5rem;
58+
font-size: 4.5rem;
59+
line-height: 1em;
5160
font-weight: 600;
5261
}
5362

5463
&__title-brand {
55-
background: linear-gradient(90deg, #017bff 0%, #a673ff 100%);
64+
background: linear-gradient(90deg, #017bff 0%, #017bff 30%, #a673ff 100%);
5665
background-clip: text;
5766
-webkit-background-clip: text;
5867
-webkit-text-fill-color: transparent;
5968
color: transparent;
6069
width: 640px;
61-
text-align: center;
62-
font-weight: 600;
63-
line-height: 64px;
6470
}
6571

6672
&__subtitle {
6773
margin: 0;
68-
font-size: 2.5rem;
74+
font-size: 4.5rem;
75+
line-height: 1em;
6976
font-weight: 600;
70-
font-style: normal;
7177
}
7278

7379
&__tagline {
80+
margin-top: 32px;
81+
color: var(--rp-c-text-2);
82+
7483
font-size: 1rem;
75-
font-weight: 500;
76-
margin: 0;
77-
max-width: 600px;
84+
font-weight: 400;
7885

7986
@media (min-width: 640px) {
8087
font-size: 1.125rem;
@@ -91,7 +98,7 @@
9198
gap: 1rem;
9299
margin-top: 1rem;
93100

94-
@media (min-width: 640px) {
101+
@media (min-width: 768px) {
95102
flex-direction: row;
96103
gap: 1.5rem;
97104
}
@@ -100,52 +107,32 @@
100107
&__action {
101108
display: flex;
102109
}
110+
}
103111

104-
&__features {
105-
display: grid;
106-
grid-template-columns: 1fr;
107-
gap: 2rem;
108-
max-width: 1000px;
109-
width: 100%;
110-
111-
@media (min-width: 768px) {
112-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
113-
gap: 3rem;
112+
@media (max-width: 768px) {
113+
.rp-home-hero {
114+
align-items: center;
115+
&__container {
116+
align-items: center;
117+
text-align: center;
118+
flex-direction: column-reverse;
114119
}
115-
}
116-
117-
&__feature {
118-
background: rgba(255, 255, 255, 0.95);
119-
border-radius: 16px;
120-
padding: 2rem;
121-
text-align: left;
122-
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
123-
backdrop-filter: blur(10px);
124-
125-
@media (min-width: 768px) {
126-
padding: 2.5rem;
120+
&__text-container {
121+
align-items: center;
122+
text-align: center;
123+
}
124+
&__title {
125+
line-height: 1.2em;
126+
}
127+
&__subtitle {
128+
line-height: 1.2em;
129+
font-size: 3.5rem;
130+
}
131+
&__content {
132+
align-items: center;
133+
}
134+
&__image {
135+
transform: none;
127136
}
128-
}
129-
130-
&__feature-icon {
131-
font-size: 2.5rem;
132-
margin-bottom: 1rem;
133-
}
134-
135-
&__feature-title {
136-
font-size: 1.25rem;
137-
font-weight: 700;
138-
color: #1f2937;
139-
margin: 0 0 0.75rem 0;
140-
}
141-
142-
&__feature-description {
143-
font-size: 0.875rem;
144-
color: #6b7280;
145-
line-height: 1.6;
146-
margin: 0;
147-
}
148-
&__image {
149-
display: flex;
150137
}
151138
}

‎packages/theme-default/src/components/HomeHero/index.tsx‎

Lines changed: 56 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -35,73 +35,72 @@ function HomeHero({ beforeHeroActions, afterHeroActions }: HomeHeroProps) {
3535

3636
return (
3737
<div className="rp-home-hero">
38+
<div className="rp-home-hero__badge">🎉 Rspress V2 is now released</div>
3839
<div className="rp-home-hero__container">
39-
<div className="rp-home-hero__content">
40-
{/* <div className="rp-home-hero__badge"> */}
41-
{/* 🎉 Rspress is now open source */}
42-
{/* </div> */}
40+
<div className="rp-home-hero__text-container">
41+
<div className="rp-home-hero__content">
42+
<div className="rp-home-hero__title">
43+
<span
44+
className="rp-home-hero__title-brand"
45+
{...renderHtmlOrText(hero.name)}
46+
></span>
47+
</div>
4348

44-
<div className="rp-home-hero__title">
45-
<span
46-
className="rp-home-hero__title-brand"
47-
{...renderHtmlOrText(hero.name)}
48-
></span>
49+
{multiHeroText.length !== 0 &&
50+
multiHeroText.map(heroText => (
51+
<div
52+
key={heroText}
53+
className="rp-home-hero__subtitle"
54+
{...renderHtmlOrText(heroText)}
55+
></div>
56+
))}
4957
</div>
50-
51-
{multiHeroText.length !== 0 &&
52-
multiHeroText.map(heroText => (
53-
<div
54-
key={heroText}
55-
className="rp-home-hero__subtitle"
56-
{...renderHtmlOrText(heroText)}
57-
></div>
58-
))}
59-
6058
<p
6159
className="rp-home-hero__tagline"
6260
{...renderHtmlOrText(hero.tagline)}
6361
></p>
62+
</div>
6463

65-
{beforeHeroActions}
66-
<div className="rp-home-hero__actions">
67-
{hero.actions.map(action => {
68-
return (
69-
<div className="rp-home-hero__action" key={action.link}>
70-
<Button
71-
type="a"
72-
href={action.link}
73-
theme={action.theme}
74-
{...renderHtmlOrText(action.text)}
75-
/>
76-
</div>
77-
);
78-
})}
64+
{hasImage ? (
65+
<div className="rp-home-hero__image">
66+
<img
67+
src={normalizeImagePath(imageSrc.light)}
68+
alt={hero.image?.alt}
69+
srcSet={normalizeSrcsetAndSizes(hero.image?.srcset)}
70+
sizes={normalizeSrcsetAndSizes(hero.image?.sizes)}
71+
width={375}
72+
height={375}
73+
className="dark:rp-hidden"
74+
/>
75+
<img
76+
src={normalizeImagePath(imageSrc.dark)}
77+
alt={hero.image?.alt}
78+
srcSet={normalizeSrcsetAndSizes(hero.image?.srcset)}
79+
sizes={normalizeSrcsetAndSizes(hero.image?.sizes)}
80+
width={375}
81+
height={375}
82+
className="rp-hidden dark:rp-block"
83+
/>
7984
</div>
80-
{afterHeroActions}
81-
</div>
85+
) : null}
8286
</div>
83-
{hasImage ? (
84-
<div className="rp-home-hero__image">
85-
<img
86-
src={normalizeImagePath(imageSrc.light)}
87-
alt={hero.image?.alt}
88-
srcSet={normalizeSrcsetAndSizes(hero.image?.srcset)}
89-
sizes={normalizeSrcsetAndSizes(hero.image?.sizes)}
90-
width={375}
91-
height={375}
92-
className="dark:rp-hidden"
93-
/>
94-
<img
95-
src={normalizeImagePath(imageSrc.dark)}
96-
alt={hero.image?.alt}
97-
srcSet={normalizeSrcsetAndSizes(hero.image?.srcset)}
98-
sizes={normalizeSrcsetAndSizes(hero.image?.sizes)}
99-
width={375}
100-
height={375}
101-
className="rp-hidden dark:rp-block"
102-
/>
103-
</div>
104-
) : null}
87+
88+
{beforeHeroActions}
89+
<div className="rp-home-hero__actions">
90+
{hero.actions.map(action => {
91+
return (
92+
<div className="rp-home-hero__action" key={action.link}>
93+
<Button
94+
type="a"
95+
href={action.link}
96+
theme={action.theme}
97+
{...renderHtmlOrText(action.text)}
98+
/>
99+
</div>
100+
);
101+
})}
102+
</div>
103+
{afterHeroActions}
105104
</div>
106105
);
107106
}

0 commit comments

Comments
 (0)