Skip to content

Commit 43ebd0a

Browse files
jan-buresCopilot
jan-bures
and
Copilot
committed
Button style refresh
Co-authored-by: Copilot <copilot@github.com>
1 parent 97061a6 commit 43ebd0a

5 files changed

Lines changed: 157 additions & 32 deletions

File tree

‎src/assets/links-forums.png‎

4.12 KB
Loading

‎src/components/Footer.astro‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
---
22
// Unified footer component for all pages (custom + Starlight docs)
3+
import forumIcon from '../assets/links-forums.png';
4+
35
const currentYear = new Date().getFullYear();
46
57
const socialLinks = [
@@ -17,6 +19,11 @@ const socialLinks = [
1719
name: 'Reddit',
1820
url: 'https://reddit.com/r/KSP2Redux',
1921
icon: 'reddit'
22+
},
23+
{
24+
name: 'KSP Forums',
25+
url: 'https://forum.kerbalspaceprogram.com/topic/226985-ksp2-redux',
26+
icon: 'forums'
2027
}
2128
];
2229
@@ -69,10 +76,18 @@ const icons: Record<string, string> = {
6976
href={link.url}
7077
target="_blank"
7178
rel="noopener noreferrer"
72-
class="text-gray-400 hover:text-ksp-red transition-colors duration-200"
79+
class="inline-flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-ksp-red transition-colors duration-200"
7380
aria-label={link.name}
7481
>
75-
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" set:html={icons[link.icon]} />
82+
{link.icon === 'forums' ? (
83+
<span
84+
class="footer-social-icon"
85+
style={`-webkit-mask-image: url('${forumIcon.src}'); mask-image: url('${forumIcon.src}');`}
86+
aria-hidden="true"
87+
></span>
88+
) : (
89+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" set:html={icons[link.icon]} />
90+
)}
7691
</a>
7792
))}
7893
</div>
@@ -118,3 +133,18 @@ const icons: Record<string, string> = {
118133
</div>
119134
</div>
120135
</footer>
136+
137+
<style>
138+
.footer-social-icon {
139+
display: block;
140+
width: 1.5rem;
141+
height: 1.5rem;
142+
background-color: currentColor;
143+
-webkit-mask-repeat: no-repeat;
144+
mask-repeat: no-repeat;
145+
-webkit-mask-position: center;
146+
mask-position: center;
147+
-webkit-mask-size: contain;
148+
mask-size: contain;
149+
}
150+
</style>

‎src/pages/contact.astro‎

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import Header from '../components/Header.astro';
33
import Footer from '../components/Footer.astro';
44
import '../styles/global.css';
5+
import forumIcon from '../assets/links-forums.png';
56
---
67

78
<!DOCTYPE html>
@@ -42,7 +43,7 @@ import '../styles/global.css';
4243
</p>
4344
</div>
4445

45-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
46+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
4647
<a
4748
href="https://discord.gg/8yq8d5VGQR"
4849
target="_blank"
@@ -102,6 +103,28 @@ import '../styles/global.css';
102103
Open subreddit →
103104
</span>
104105
</a>
106+
107+
<a
108+
href="https://forum.kerbalspaceprogram.com/topic/226985-ksp2-redux"
109+
target="_blank"
110+
rel="noopener noreferrer"
111+
class="card-glass text-center border border-transparent hover:border-ksp-red/40"
112+
>
113+
<div class="text-6xl mb-4">
114+
<span
115+
class="contact-forum-icon mx-auto text-ksp-red"
116+
style={`-webkit-mask-image: url('${forumIcon.src}'); mask-image: url('${forumIcon.src}');`}
117+
aria-hidden="true"
118+
></span>
119+
</div>
120+
<h3 class="text-2xl font-heading font-bold mb-3">KSP Forums</h3>
121+
<p class="text-gray-400 mb-4">
122+
The official forum thread is a good place for longer-form updates, replies, and community discussion around Redux.
123+
</p>
124+
<span class="text-ksp-red font-semibold">
125+
Open forum thread →
126+
</span>
127+
</a>
105128
</div>
106129

107130
<div class="page-section-heading">
@@ -122,7 +145,7 @@ import '../styles/global.css';
122145
<p class="text-gray-400 mb-4">
123146
Installation, troubleshooting, compatibility notes, and contribution docs live here.
124147
</p>
125-
<a href="/guides" class="btn-primary inline-block">
148+
<a href="/guides" class="btn-primary">
126149
Open docs
127150
</a>
128151
</div>
@@ -137,7 +160,7 @@ import '../styles/global.css';
137160
<p class="text-gray-400 mb-4">
138161
If you are filing a bug, include steps to reproduce it, your Redux version, and any logs or screenshots you have.
139162
</p>
140-
<a href="https://github.com/KSP2Redux/Redux/issues" target="_blank" rel="noopener noreferrer" class="btn-primary inline-block">
163+
<a href="https://github.com/KSP2Redux/Redux/issues" target="_blank" rel="noopener noreferrer" class="btn-primary">
141164
Open issue tracker
142165
</a>
143166
</div>
@@ -207,7 +230,7 @@ import '../styles/global.css';
207230
</div>
208231

209232
<p class="text-center text-gray-400 mt-8 text-sm">
210-
Discord is still the best way to reach any of them.
233+
Discord is the best way to reach all of us.
211234
</p>
212235
</section>
213236

@@ -231,3 +254,18 @@ import '../styles/global.css';
231254
<Footer />
232255
</body>
233256
</html>
257+
258+
<style>
259+
.contact-forum-icon {
260+
display: block;
261+
width: 4rem;
262+
height: 4rem;
263+
background-color: currentColor;
264+
-webkit-mask-repeat: no-repeat;
265+
mask-repeat: no-repeat;
266+
-webkit-mask-position: center;
267+
mask-position: center;
268+
-webkit-mask-size: contain;
269+
mask-size: contain;
270+
}
271+
</style>

‎src/pages/index.astro‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@ const currentMilestone = roadmapMilestones.find((milestone) => milestone.id ===
6767
Latest public build from <span class="text-gray-300 font-semibold">{formattedDate}</span>
6868
</p>
6969

70-
<div class="flex flex-wrap gap-3">
70+
<div class="home-action-row">
7171
<a href="https://github.com/KSP2Redux/Updater/releases/latest" target="_blank" rel="noopener noreferrer" class="btn-primary">
72-
<svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
72+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7373
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
7474
</svg>
7575
Download
@@ -78,7 +78,7 @@ const currentMilestone = roadmapMilestones.find((milestone) => milestone.id ===
7878
Roadmap
7979
</a>
8080
<a href="/guides" class="btn-secondary">
81-
<svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
81+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
8282
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
8383
</svg>
8484
Read the Docs
@@ -145,24 +145,48 @@ const currentMilestone = roadmapMilestones.find((milestone) => milestone.id ===
145145
<p class="text-gray-400 text-lg max-w-2xl mx-auto mb-8">
146146
Most testing coordination, bug reports, and day-to-day discussion happen on Discord. GitHub is the better place if you want releases, changelogs, or the issue tracker.
147147
</p>
148-
<div class="flex flex-col sm:flex-row gap-4 justify-center">
148+
<div class="home-action-row home-action-row--centered">
149149
<a href="https://discord.gg/8yq8d5VGQR" target="_blank" class="btn-primary">
150-
<svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 24 24">
150+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
151151
<path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
152152
</svg>
153153
Join Discord
154154
</a>
155155
<a href="https://github.com/KSP2Redux/Redux" target="_blank" rel="noopener noreferrer" class="btn-secondary">
156-
<svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 24 24">
156+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
157157
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
158158
</svg>
159159
GitHub
160160
</a>
161-
<a href="/roadmap" class="btn-secondary">Roadmap</a>
161+
<a href="https://forum.kerbalspaceprogram.com/topic/226985-ksp2-redux" target="_blank" rel="noopener noreferrer" class="btn-secondary">
162+
KSP Forums
163+
</a>
162164
</div>
163165
</div>
164166
</section>
165167

166168
<Footer />
167169
</body>
168170
</html>
171+
172+
<style>
173+
.home-action-row {
174+
display: flex;
175+
flex-wrap: wrap;
176+
gap: 0.85rem;
177+
}
178+
179+
.home-action-row--centered {
180+
justify-content: center;
181+
}
182+
183+
@media (max-width: 639px) {
184+
.home-action-row {
185+
flex-direction: column;
186+
}
187+
188+
.home-action-row a {
189+
width: 100%;
190+
}
191+
}
192+
</style>

‎src/styles/global.css‎

Lines changed: 52 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -307,37 +307,70 @@ html {
307307
display: inline-flex;
308308
align-items: center;
309309
justify-content: center;
310-
background-color: #df1601;
311-
color: white;
312-
font-weight: 600;
313-
padding: 0.75rem 1.5rem;
314-
border-radius: 0.5rem;
315-
transition: all 0.3s;
316-
transform-origin: center;
310+
gap: 0.7rem;
311+
min-height: 3.35rem;
312+
padding: 0.9rem 1.45rem;
313+
border: 1px solid transparent;
314+
border-radius: 999px;
315+
background: linear-gradient(180deg, #f02c16 0%, #df1601 100%);
316+
box-shadow:
317+
0 16px 32px rgba(223, 22, 1, 0.24),
318+
inset 0 1px 0 rgba(255, 255, 255, 0.18);
319+
color: #ffffff;
320+
font-weight: 700;
321+
letter-spacing: 0.01em;
322+
text-decoration: none;
323+
transition:
324+
transform 0.2s ease,
325+
border-color 0.2s ease,
326+
background-color 0.2s ease,
327+
box-shadow 0.2s ease,
328+
color 0.2s ease;
317329
}
318330

319331
.btn-primary:hover {
320-
background-color: #c41301;
321-
transform: scale(1.05);
322-
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
332+
transform: translateY(-2px);
333+
background: linear-gradient(180deg, #ff4029 0%, #e41901 100%);
334+
box-shadow:
335+
0 22px 38px rgba(223, 22, 1, 0.3),
336+
inset 0 1px 0 rgba(255, 255, 255, 0.22);
323337
}
324338

325339
.btn-secondary {
326340
display: inline-flex;
327341
align-items: center;
328342
justify-content: center;
329-
background-color: transparent;
330-
border: 2px solid white;
331-
color: white;
332-
font-weight: 600;
333-
padding: 0.75rem 1.5rem;
334-
border-radius: 0.5rem;
335-
transition: all 0.3s;
343+
gap: 0.7rem;
344+
min-height: 3.35rem;
345+
padding: 0.9rem 1.45rem;
346+
border: 1px solid rgba(255, 255, 255, 0.14);
347+
border-radius: 999px;
348+
background: rgba(255, 255, 255, 0.05);
349+
box-shadow:
350+
inset 0 1px 0 rgba(255, 255, 255, 0.08),
351+
0 10px 24px rgba(0, 0, 0, 0.18);
352+
color: #ffffff;
353+
font-weight: 700;
354+
letter-spacing: 0.01em;
355+
text-decoration: none;
356+
transition:
357+
transform 0.2s ease,
358+
border-color 0.2s ease,
359+
background-color 0.2s ease,
360+
box-shadow 0.2s ease,
361+
color 0.2s ease;
336362
}
337363

338364
.btn-secondary:hover {
339-
background-color: white;
340-
color: #0a0a0a;
365+
transform: translateY(-2px);
366+
background: rgba(255, 255, 255, 0.1);
367+
border-color: rgba(223, 22, 1, 0.4);
368+
}
369+
370+
.btn-primary:focus-visible,
371+
.btn-secondary:focus-visible {
372+
outline: 2px solid rgba(255, 255, 255, 0.9);
373+
outline-offset: 3px;
341374
}
342375

343376
/* Fix icon alignment in buttons */

0 commit comments

Comments
 (0)