white-paper : cover responsive positioning - refs #69
All checks were successful
Deploy / Deploy to Production (push) Successful in 20s
All checks were successful
Deploy / Deploy to Production (push) Successful in 20s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
34bc05066f
commit
c476ed0761
1 changed files with 35 additions and 24 deletions
|
|
@ -53,6 +53,7 @@
|
|||
|
||||
<div class="white-paper" class:show-form={showForm}>
|
||||
<div class="catch-area">
|
||||
<div class="catch-area__top">
|
||||
<!-- Label — separate so form can align with title -->
|
||||
<p class="label">{t('white_paper_label')}</p>
|
||||
|
||||
|
|
@ -71,11 +72,11 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cover image -->
|
||||
{#if data.cover}
|
||||
<img src={data.cover} alt={data.title} class="cover" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Form area: right column on desktop, full-screen overlay on mobile -->
|
||||
<div class="form-area" class:is-visible={showForm}>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue