studio-variable/world-game
4
1
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

white-paper : cover responsive positioning - refs #69
All checks were successful
Deploy / Deploy to Production (push) Successful in 20s
Details

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-04-22 15:39:37 +02:00
parent 34bc05066f
commit c476ed0761
1 changed files with 35 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/views/WhitePaper.svelte
View file

@ -53,30 +53,31 @@
<div class="white-paper" class:show-form={showForm}>
<div class="catch-area">
<!-- Label — separate so form can align with title -->
<p class="label">{t('white_paper_label')}</p>
<div class="catch-area__top">
<!-- Label — separate so form can align with title -->
<p class="label">{t('white_paper_label')}</p>
<!-- Title + description + mobile trigger -->
<div class="text">
<h1 class="title">{data.title}</h1>
{#if data.intro}
<p class="description">{data.intro}</p>
{/if}
<button class="trigger button" onclick={() => showForm = true}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
<path d="M5 20H19V18H5V20Z" fill="currentColor"/>
</svg>
{t('wp_download')}
</button>
<!-- Title + description + mobile trigger -->
<div class="text">
<h1 class="title">{data.title}</h1>
{#if data.intro}
<p class="description">{data.intro}</p>
{/if}
<button class="trigger button" onclick={() => showForm = true}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
<path d="M5 20H19V18H5V20Z" fill="currentColor"/>
</svg>
{t('wp_download')}
</button>
</div>
</div>
<!-- Cover image -->
{#if data.cover}
<img src={data.cover} alt={data.title} class="cover" />
{/if}
</div>
<!-- Cover image -->
{#if data.cover}
<img src={data.cover} alt={data.title} class="cover" />
{/if}
<!-- Form area: right column on desktop, full-screen overlay on mobile -->
<div class="form-area" class:is-visible={showForm}>
{#if status === 'success'}
@ -124,11 +125,17 @@
.white-paper {
color: var(--color-text);
padding: 8rem 5rem;
padding-bottom: 0;
display: flex;
justify-content: space-between;
height: 100vh;
overflow: hidden;
}
.catch-area {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 45vw;
}
@ -174,9 +181,10 @@
}
.cover {
position: absolute;
bottom: 0;
width: 90vh;
height: 23rem;
object-fit: cover;
object-position: top;
transform: scale(1.2);
z-index: -1;
}
@ -185,6 +193,9 @@
background: #000;
margin-top: 2rem;
width: 30vw;
height: 40rem;
max-height: 65vh;
overflow: auto;
align-self: stretch;
display: flex;
align-items: flex-start;
@ -277,7 +288,7 @@
.submit:disabled {
opacity: 0.5;
cursor: default;
cursor: none;
}
.status {