administrator/Worldshaper
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Match launcher hero to release panel

Browse source
This commit is contained in:
Andraxion 2026-06-26 22:01:43 -04:00
parent 8176c414a8
commit 6c6b1295a3
2 changed files with 76 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/WorldshaperLauncher.tsx
View file

@ -100,10 +100,19 @@ function WorldshaperLauncher() {
style={{ "--launcher-background-image": `url(${launcherBackground})` } as CSSProperties} style={{ "--launcher-background-image": `url(${launcherBackground})` } as CSSProperties}
> >
<div className="launcher-stack"> <div className="launcher-stack">
<section className="launcher-card"> <section className="launcher-hero-window" aria-labelledby="launcher-studio-title">
<div className="launcher-changelog-titlebar">
<div className="launcher-changelog-title">Worldshaper Studio</div>
<div className="launcher-changelog-hint">Floating editor launch</div>
</div>
<div className="launcher-hero-body">
<div className="launcher-hero-card">
<div className="changelog-splash-hero launcher-hero-banner">
<p className="launcher-eyebrow">New RPG</p> <p className="launcher-eyebrow">New RPG</p>
<h1 className="launcher-title">Worldshaper Studio</h1> <h1 className="launcher-title" id="launcher-studio-title">Worldshaper Studio</h1>
<p className="launcher-status">{status}</p> <p className="launcher-status">{status}</p>
</div>
<div className="launcher-hero-support">
{launchState === "blocked" ? ( {launchState === "blocked" ? (
<p className="launcher-hint"> <p className="launcher-hint">
Allow the popup, then use the studio button again to launch the floating editor window. Allow the popup, then use the studio button again to launch the floating editor window.
@ -128,6 +137,9 @@ function WorldshaperLauncher() {
Open Repo Open Repo
</button> </button>
</div> </div>
</div>
</div>
</div>
</section> </section>
<section className="launcher-changelog-window" aria-labelledby="launcher-whats-new-title"> <section className="launcher-changelog-window" aria-labelledby="launcher-whats-new-title">
<div className="launcher-changelog-titlebar"> <div className="launcher-changelog-titlebar">

64
src/index.css
View file

@ -69,19 +69,43 @@ body {
gap: 18px; gap: 18px;
} }
.launcher-card { .launcher-hero-window,
.launcher-changelog-window {
border: 1px solid #4f79af;
border-radius: 12px;
background: color-mix(in srgb, #0a1020 88%, transparent);
color: #d8e8ff;
box-shadow: 0 16px 34px rgba(3, 8, 18, 0.46);
overflow: hidden;
display: grid;
grid-template-rows: 34px minmax(0, 1fr);
backdrop-filter: blur(10px);
}
.launcher-hero-window {
justify-self: center; justify-self: center;
width: min(620px, 100%); width: min(620px, 100%);
padding: 28px 30px; }
border: 1px solid rgba(120, 170, 230, 0.2);
border-radius: 20px; .launcher-hero-body {
background: padding: 12px;
radial-gradient(circle at top left, rgba(92, 200, 255, 0.13), transparent 38%), }
linear-gradient(180deg, rgba(18, 24, 35, 0.86) 0%, rgba(12, 17, 26, 0.94) 100%);
backdrop-filter: blur(12px); .launcher-hero-card {
box-shadow: display: grid;
0 28px 80px rgba(0, 0, 0, 0.46), gap: 12px;
inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.launcher-hero-banner {
min-height: 0;
}
.launcher-hero-support {
padding: 12px 14px;
border: 1px solid #365782;
border-radius: 12px;
background: rgba(17, 32, 63, 0.84);
box-shadow: inset 0 0 0 1px rgba(10, 16, 32, 0.14);
} }
.launcher-eyebrow { .launcher-eyebrow {
@ -123,20 +147,11 @@ body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
margin-top: 18px; margin-top: 16px;
} }
.launcher-changelog-window { .launcher-changelog-window {
width: min(760px, 100%); width: min(760px, 100%);
border: 1px solid #4f79af;
border-radius: 12px;
background: color-mix(in srgb, #0a1020 88%, transparent);
color: #d8e8ff;
box-shadow: 0 16px 34px rgba(3, 8, 18, 0.46);
overflow: hidden;
display: grid;
grid-template-rows: 34px minmax(0, 1fr);
backdrop-filter: blur(10px);
} }
.launcher-changelog-titlebar { .launcher-changelog-titlebar {
@ -1391,16 +1406,11 @@ button.danger:not(:disabled):hover {
} }
.launcher-stack, .launcher-stack,
.launcher-card, .launcher-hero-window,
.launcher-changelog-window { .launcher-changelog-window {
width: 100%; width: 100%;
} }
.launcher-card {
padding: 22px 20px;
border-radius: 16px;
}
.launcher-actions { .launcher-actions {
flex-direction: column; flex-direction: column;
} }