Skip to content

Commit c34bdca

Browse files
ChafficuiChafficui
authored
Merge pull request #2 from ChafficPlugins/claude/improve-ui-github-downloads-SVpKI
Claude/improve UI GitHub downloads s vp ki
2 parents b54e278 + 1c1ccfe commit c34bdca

4 files changed

Lines changed: 171 additions & 41 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Simple workflow for deploying static content to GitHub Pages
2+
name: Deploy static content to Pages
3+
on:
4+
# Runs on pushes targeting the default branch
5+
push:
6+
branches: ["main"]
7+
# Allows you to run this workflow manually from the Actions tab
8+
workflow_dispatch:
9+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
10+
permissions:
11+
contents: read
12+
pages: write
13+
id-token: write
14+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
15+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
16+
concurrency:
17+
group: "pages"
18+
cancel-in-progress: false
19+
jobs:
20+
# Single deploy job since we're just deploying
21+
deploy:
22+
environment:
23+
name: github-pages
24+
url: ${{ steps.deployment.outputs.page_url }}
25+
runs-on: ubuntu-latest
26+
steps:
27+
- name: Checkout
28+
uses: actions/checkout@v4
29+
- name: Setup Pages
30+
uses: actions/configure-pages@v5
31+
- name: Upload artifact
32+
uses: actions/upload-pages-artifact@v3
33+
with:
34+
# Upload entire repository
35+
path: '.'
36+
- name: Deploy to GitHub Pages
37+
id: deployment
38+
uses: actions/deploy-pages@v4

‎index.html‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,19 @@ <h2 class="section-title">At a Glance</h2>
9797
<section class="section fade-in fade-in-delay-3">
9898
<div class="partner-section">
9999
<a class="partner-banner" href="https://shockbyte.com/billing/aff.php?aff=4416" target="_blank" rel="noopener noreferrer">
100-
<div>
101-
<div class="partner-banner-label">Official Partner</div>
102-
<div class="partner-banner-text">Need server hosting? Get started with Shockbyte.</div>
100+
<div class="partner-banner-brand">
101+
<svg class="partner-banner-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
102+
<span class="partner-banner-name">Shockbyte</span>
103+
</div>
104+
<div class="partner-banner-body">
105+
<div class="partner-banner-text">Affordable Minecraft server hosting</div>
106+
<div class="partner-banner-offer">
107+
<span class="partner-banner-offer-text">Use code</span>
108+
<span class="partner-banner-code">LAUNCH</span>
109+
<span class="partner-banner-offer-text">for 25% off your first month</span>
110+
</div>
103111
</div>
104-
<img src="https://shockbyte.com/assets/img/partners/twitch/shockbyte_affiliate.png" alt="Shockbyte - Minecraft Server Hosting">
112+
<svg class="partner-banner-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/></svg>
105113
</a>
106114
</div>
107115
</section>

‎redirect.html‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,14 @@ <h1 class="download-title" id="downloadTitle">Preparing download&hellip;</h1>
5454

5555
<!-- Partner -->
5656
<div class="download-partner">
57-
<p class="download-partner-label">Official Partner</p>
58-
<a href="https://shockbyte.com/billing/aff.php?aff=4416" target="_blank" rel="noopener noreferrer">
59-
<img src="https://shockbyte.com/assets/img/partners/twitch/shockbyte_affiliate.png" alt="Shockbyte - Minecraft Server Hosting">
57+
<a class="download-partner-banner" href="https://shockbyte.com/billing/aff.php?aff=4416" target="_blank" rel="noopener noreferrer">
58+
<div class="download-partner-top">
59+
<svg class="download-partner-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
60+
<span class="download-partner-name">Shockbyte</span>
61+
</div>
62+
<div class="download-partner-offer">
63+
Use code <span class="download-partner-code">LAUNCH</span> for 25% off
64+
</div>
6065
</a>
6166
</div>
6267
</div>

‎style/main.css‎

Lines changed: 113 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -347,12 +347,11 @@ body {
347347
.partner-banner {
348348
display: flex;
349349
align-items: center;
350-
justify-content: center;
351-
gap: 1.5rem;
350+
gap: 1.25rem;
352351
background: var(--color-surface);
353352
border: 1px solid var(--color-surface-border);
354353
border-radius: var(--radius-md);
355-
padding: 1.25rem 2rem;
354+
padding: 1.25rem 1.75rem;
356355
text-decoration: none;
357356
color: var(--color-white);
358357
transition: border-color var(--transition), box-shadow var(--transition);
@@ -363,29 +362,73 @@ body {
363362
box-shadow: var(--shadow-md);
364363
}
365364

366-
.partner-banner-label {
367-
font-size: 0.65rem;
368-
font-weight: 600;
369-
text-transform: uppercase;
370-
letter-spacing: 0.08em;
371-
color: var(--color-gray-400);
365+
.partner-banner-brand {
366+
display: flex;
367+
align-items: center;
368+
gap: 0.5rem;
369+
flex-shrink: 0;
372370
}
373371

374-
.partner-banner-text {
375-
font-size: 0.9375rem;
376-
font-weight: 600;
372+
.partner-banner-icon {
373+
width: 28px;
374+
height: 28px;
375+
color: #facc15;
376+
}
377+
378+
.partner-banner-name {
379+
font-size: 1rem;
380+
font-weight: 700;
377381
color: var(--color-white);
382+
white-space: nowrap;
378383
}
379384

380-
.partner-banner img {
381-
height: 36px;
382-
width: auto;
383-
opacity: 0.9;
384-
transition: opacity var(--transition);
385+
.partner-banner-body {
386+
flex: 1;
387+
min-width: 0;
385388
}
386389

387-
.partner-banner:hover img {
388-
opacity: 1;
390+
.partner-banner-text {
391+
font-size: 0.8125rem;
392+
font-weight: 500;
393+
color: var(--color-gray-300);
394+
margin-bottom: 0.25rem;
395+
}
396+
397+
.partner-banner-offer {
398+
display: flex;
399+
align-items: center;
400+
gap: 0.375rem;
401+
flex-wrap: wrap;
402+
}
403+
404+
.partner-banner-offer-text {
405+
font-size: 0.75rem;
406+
color: var(--color-gray-400);
407+
}
408+
409+
.partner-banner-code {
410+
display: inline-block;
411+
font-size: 0.6875rem;
412+
font-weight: 700;
413+
letter-spacing: 0.05em;
414+
padding: 0.125rem 0.5rem;
415+
border-radius: 4px;
416+
background: rgba(250, 204, 21, 0.12);
417+
color: #facc15;
418+
border: 1px solid rgba(250, 204, 21, 0.2);
419+
}
420+
421+
.partner-banner-arrow {
422+
width: 20px;
423+
height: 20px;
424+
color: var(--color-gray-400);
425+
flex-shrink: 0;
426+
transition: color var(--transition), transform var(--transition);
427+
}
428+
429+
.partner-banner:hover .partner-banner-arrow {
430+
color: var(--color-white);
431+
transform: translateX(3px);
389432
}
390433

391434
/* --- Footer --- */
@@ -586,27 +629,55 @@ body {
586629
border-top: 1px solid var(--color-surface-border);
587630
}
588631

589-
.download-partner-label {
590-
font-size: 0.65rem;
591-
font-weight: 600;
592-
text-transform: uppercase;
593-
letter-spacing: 0.08em;
594-
color: var(--color-gray-400);
595-
margin-bottom: 0.75rem;
632+
.download-partner-banner {
633+
display: flex;
634+
flex-direction: column;
635+
align-items: center;
636+
gap: 0.5rem;
637+
text-decoration: none;
638+
color: var(--color-white);
639+
padding: 0.75rem;
640+
border-radius: var(--radius-sm);
641+
transition: background var(--transition);
596642
}
597643

598-
.download-partner a {
599-
display: inline-block;
600-
transition: opacity var(--transition);
644+
.download-partner-banner:hover {
645+
background: var(--color-surface-raised);
601646
}
602647

603-
.download-partner a:hover {
604-
opacity: 0.8;
648+
.download-partner-top {
649+
display: flex;
650+
align-items: center;
651+
gap: 0.375rem;
605652
}
606653

607-
.download-partner img {
608-
height: 32px;
609-
width: auto;
654+
.download-partner-icon {
655+
width: 18px;
656+
height: 18px;
657+
color: #facc15;
658+
}
659+
660+
.download-partner-name {
661+
font-size: 0.8125rem;
662+
font-weight: 700;
663+
color: var(--color-white);
664+
}
665+
666+
.download-partner-offer {
667+
font-size: 0.6875rem;
668+
color: var(--color-gray-400);
669+
}
670+
671+
.download-partner-code {
672+
display: inline-block;
673+
font-size: 0.625rem;
674+
font-weight: 700;
675+
letter-spacing: 0.05em;
676+
padding: 0.0625rem 0.375rem;
677+
border-radius: 3px;
678+
background: rgba(250, 204, 21, 0.12);
679+
color: #facc15;
680+
border: 1px solid rgba(250, 204, 21, 0.2);
610681
}
611682

612683
/* --- Download Footer --- */
@@ -673,6 +744,14 @@ body {
673744
padding: 1.25rem;
674745
}
675746

747+
.partner-banner-offer {
748+
justify-content: center;
749+
}
750+
751+
.partner-banner-arrow {
752+
display: none;
753+
}
754+
676755
.download-card {
677756
padding: 2rem 1.5rem;
678757
}

0 commit comments

Comments
 (0)