studio-variable/world-game
4
1
Fork 0
Code Issues 6 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

21
src/views/WhitePaper.svelte
View file

@ -53,6 +53,7 @@
<div class="white-paper" class:show-form={showForm}> <div class="white-paper" class:show-form={showForm}>
<div class="catch-area"> <div class="catch-area">
<div class="catch-area__top">
<!-- Label — separate so form can align with title --> <!-- Label — separate so form can align with title -->
<p class="label">{t('white_paper_label')}</p> <p class="label">{t('white_paper_label')}</p>
@ -71,11 +72,11 @@
</button> </button>
</div> </div>
</div> </div>
<!-- Cover image --> <!-- Cover image -->
{#if data.cover} {#if data.cover}
<img src={data.cover} alt={data.title} class="cover" /> <img src={data.cover} alt={data.title} class="cover" />
{/if} {/if}
</div>
<!-- Form area: right column on desktop, full-screen overlay on mobile --> <!-- Form area: right column on desktop, full-screen overlay on mobile -->
<div class="form-area" class:is-visible={showForm}> <div class="form-area" class:is-visible={showForm}>
@ -124,11 +125,17 @@
.white-paper { .white-paper {
color: var(--color-text); color: var(--color-text);
padding: 8rem 5rem; padding: 8rem 5rem;
padding-bottom: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 100vh;
overflow: hidden;
} }
.catch-area { .catch-area {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 45vw; width: 45vw;
} }
@ -174,9 +181,10 @@
} }
.cover { .cover {
position: absolute; height: 23rem;
bottom: 0; object-fit: cover;
width: 90vh; object-position: top;
transform: scale(1.2);
z-index: -1; z-index: -1;
} }
@ -185,6 +193,9 @@
background: #000; background: #000;
margin-top: 2rem; margin-top: 2rem;
width: 30vw; width: 30vw;
height: 40rem;
max-height: 65vh;
overflow: auto;
align-self: stretch; align-self: stretch;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -277,7 +288,7 @@
.submit:disabled { .submit:disabled {
opacity: 0.5; opacity: 0.5;
cursor: default; cursor: none;
} }
.status { .status {