Skip to content

Commit fe07169

Browse files
midosvtmidosvt
authored
Merge pull request #1122 from itsneufox/small-consistency-fixes
Homepage improvements package #2
2 parents 8abb891 + 97c4640 commit fe07169

File tree

3 files changed

+139
-71
lines changed

3 files changed

+139
-71
lines changed

‎frontend/src/components/HomepageFeatures/styles.module.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,17 @@
8686
}
8787

8888
.button {
89-
transition: all 0.2s ease-in-out;
89+
transition: all 0.3s ease;
9090
padding: 0.75rem 1.5rem;
9191
font-weight: 600;
92-
border-radius: 30px;
93-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
92+
border-radius: 8px;
93+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
94+
text-align: center;
9495
}
9596

9697
.button:hover {
97-
transform: translateY(-2px);
98-
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
98+
transform: translateY(-3px);
99+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
99100
}
100101

101102
@keyframes fadeInUp {

‎frontend/src/pages/index.module.css‎

Lines changed: 58 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,52 @@
1010
margin-bottom: 100px;
1111
}
1212

13-
.announcement {
13+
.announcementWrapper {
14+
position: relative;
1415
max-width: 900px;
1516
width: 100%;
1617
margin-bottom: 4rem;
18+
}
19+
20+
.announcement {
21+
max-width: 900px;
22+
width: 100%;
1723
border-radius: 12px;
1824
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
1925
animation: slideDown 0.6s ease-out;
26+
position: relative;
27+
padding-bottom: 2rem;
28+
}
29+
30+
.dismissContainer {
31+
position: absolute;
32+
bottom: 12px;
33+
right: 16px;
34+
}
35+
36+
.dismissButton {
37+
background: none;
38+
border: none;
39+
color: var(--ifm-color-primary-darker);
40+
font-size: 0.85rem;
41+
font-family: inherit;
42+
padding: 4px 8px;
43+
cursor: pointer;
44+
text-decoration: underline;
45+
transition: color 0.2s ease;
46+
font-weight: 500;
47+
margin: 0;
48+
line-height: normal;
49+
}
50+
51+
.dismissButton:hover {
52+
color: var(--ifm-color-primary-darkest);
53+
}
54+
55+
.dismissButton:focus {
56+
outline: none;
57+
box-shadow: 0 0 0 2px rgba(144, 131, 210, 0.3);
58+
border-radius: 4px;
2059
}
2160

2261
.enhancedLink {
@@ -162,27 +201,27 @@
162201
padding: 4rem 1.5rem 0;
163202
margin-bottom: 80px;
164203
}
165-
204+
166205
.heroContent {
167206
flex-direction: column;
168207
text-align: center;
169208
gap: 3rem;
170209
}
171-
210+
172211
.heroText {
173212
align-items: center;
174213
text-align: center;
175214
max-width: 100%;
176215
}
177-
216+
178217
.heroTitle {
179218
font-size: 3rem;
180219
}
181-
220+
182221
.button {
183222
width: 100%;
184223
}
185-
224+
186225
.heroButtons {
187226
width: 100%;
188227
max-width: 350px;
@@ -194,24 +233,33 @@
194233
padding: 3rem 1rem 0;
195234
margin-bottom: 60px;
196235
}
197-
236+
198237
.heroTitle {
199238
font-size: 2.5rem;
200239
}
201-
240+
202241
.heroDescription {
203242
font-size: 1.25rem;
204243
}
205-
244+
206245
.socialLinks {
207246
grid-template-columns: repeat(3, 1fr); /* 3 columns on mobile so we can avoid the icons making a line break*/
208247
max-width: 300px;
209248
gap: 1rem;
210249
}
211-
250+
212251
.socialLink {
213252
width: 60px;
214253
height: 60px;
215254
margin: 0 auto;
216255
}
256+
257+
.dismissContainer {
258+
bottom: 8px;
259+
right: 12px;
260+
}
261+
262+
.dismissButton {
263+
font-size: 0.8rem;
264+
}
217265
}

‎frontend/src/pages/index.tsx‎

Lines changed: 75 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Heading from "@theme/Heading";
44
import Layout from "@theme/Layout";
55
import Image from "@theme/ThemedImage";
66
import clsx from "clsx";
7+
import { useState } from "react";
78

89
import Admonition from "../components/Admonition";
910
import styles from "./index.module.css";
@@ -47,69 +48,87 @@ const socials = [
4748
},
4849
];
4950

51+
const SocialIcons = () => {
52+
return (
53+
<div className={styles.socialLinks}>
54+
{socials.map((social, index) => (
55+
<a
56+
key={index}
57+
href={social.href}
58+
className={styles.socialLink}
59+
target="_blank"
60+
rel="noopener noreferrer"
61+
aria-label={social.alt}
62+
>
63+
<Image
64+
sources={{
65+
light: social.src,
66+
dark: social.src
67+
}}
68+
alt={social.alt}
69+
width={social.size}
70+
height={social.size}
71+
className={styles.socialIcon}
72+
/>
73+
</a>
74+
))}
75+
</div>
76+
);
77+
};
78+
5079
const HomepageHeader = () => {
80+
const [showAnnouncement, setShowAnnouncement] = useState(true);
5181

52-
const SocialIcons = () => {
53-
return (
54-
<div className={styles.socialLinks}>
55-
{socials.map((social, index) => (
56-
<a
57-
key={index}
58-
href={social.href}
59-
className={styles.socialLink}
60-
target="_blank"
61-
rel="noopener noreferrer"
62-
aria-label={social.alt}
63-
>
64-
<Image
65-
sources={{
66-
light: social.src,
67-
dark: social.src
68-
}}
69-
alt={social.alt}
70-
width={social.size}
71-
height={social.size}
72-
className={styles.socialIcon}
73-
/>
74-
</a>
75-
))}
76-
</div>
77-
);
82+
const closeAnnouncement = () => {
83+
setShowAnnouncement(false);
7884
};
7985

8086
return (
8187
<header className={styles.heroBanner}>
8288

83-
<Admonition
84-
className={styles.announcement}
85-
type="tip"
86-
title="A new version of open.mp server and launcher is out now!"
87-
>
88-
Version <b>1.4.0.2779</b> of open.mp server is out with many fixes,
89-
performance boosts, and new features!{" "}
90-
<Link
91-
to="https://www.open.mp/docs/changelog"
92-
className={styles.enhancedLink}
93-
>
94-
Changelog
95-
</Link> |{" "}
96-
<Link
97-
to="https://github.com/openmultiplayer/open.mp/releases/latest"
98-
className={styles.enhancedLink}
99-
>
100-
Download
101-
</Link>
102-
.
103-
<br />
104-
The launcher also got an update!{" "}
105-
<Link
106-
to="https://github.com/openmultiplayer/launcher/releases/latest"
107-
className={styles.enhancedLink}
108-
>
109-
See what's new
110-
</Link>
111-
.
112-
</Admonition>
89+
{showAnnouncement && (
90+
<div className={styles.announcementWrapper}>
91+
<Admonition
92+
className={styles.announcement}
93+
type="tip"
94+
title="A new version of open.mp server and launcher is out now!"
95+
>
96+
Version <b>1.4.0.2779</b> of open.mp server is out with many fixes,
97+
performance boosts, and new features!{" "}
98+
<Link
99+
to="https://www.open.mp/docs/changelog"
100+
className={styles.enhancedLink}
101+
>
102+
Changelog
103+
</Link> |{" "}
104+
<Link
105+
to="https://github.com/openmultiplayer/open.mp/releases/latest"
106+
className={styles.enhancedLink}
107+
>
108+
Download
109+
</Link>
110+
.
111+
<br />
112+
The launcher also got an update!{" "}
113+
<Link
114+
to="https://github.com/openmultiplayer/launcher/releases/latest"
115+
className={styles.enhancedLink}
116+
>
117+
See what's new
118+
</Link>
119+
.
120+
<div className={styles.dismissContainer}>
121+
<button
122+
onClick={closeAnnouncement}
123+
className={styles.dismissButton}
124+
aria-label="Dismiss announcement"
125+
>
126+
Dismiss this message
127+
</button>
128+
</div>
129+
</Admonition>
130+
</div>
131+
)}
113132

114133
<div className={styles.heroContent}>
115134
<div className={styles.heroText}>

0 commit comments

Comments
 (0)