Feat: ajustements UI white-paper, home, portfolio + icône download
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
fcca068868
commit
1cbb843c89
6 changed files with 47 additions and 31 deletions
13
assets/img/icon-download.svg
Normal file
13
assets/img/icon-download.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2339_203)">
|
||||
<path d="M6.26423 8.06567H4.10986V10.0801H6.26423V8.06567Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M8.41853 12.1025V14.1169H10.5816V12.1025H12.7359V10.08H10.5816V8.06562V4.03685V0H8.41853V4.03685V8.06562V10.08H6.26416V12.1025H8.41853Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M16.8456 11.9487V13.9631V15.9775H2.15437V13.9631V11.9487H0V13.9631V15.9775V18H19V15.9775V13.9631V11.9487H16.8456Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
<path d="M14.8902 8.06567H12.7358V10.0801H14.8902V8.06567Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2339_203">
|
||||
<rect width="19" height="18" fill="white" style="fill:white;fill-opacity:1;"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 872 B |
|
|
@ -37,13 +37,13 @@ button[disabled] {
|
|||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.button:hover::before {
|
||||
.button:not([disabled]):hover::before {
|
||||
filter: invert(84%) sepia(30%) saturate(1700%) hue-rotate(87deg)
|
||||
brightness(100%) contrast(99%);
|
||||
}
|
||||
.button.earth-icon::before {
|
||||
|
||||
.button.with-icon::before {
|
||||
content: "";
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAACmUlEQVRYhe2YsWtUQRDGf1ETNAlJhIgRop4gGqyCoI0IekUKbSJaaRNBxErwP0hnIxhbq7MRLYRYaJEiKMHCFMFGURAMGlBRMBElEGOUlW9lbtm3d/d4gRPvg8c+5s3OzO3Mfrtz5MAk8KuBZ7JRFxvyRLXeaKth/yxwOJB9B34EskvAduAVcCf41g50BbJZ4Hbe31aJpGk0oveM7FSNRmxUUk43ZcgG9e7SuwRsBLrz/a4qfAN+ym5JHxaAVasUqykX0Bs900AfcLSAgJCdPtn1PgZDpaYsdJs+V9QjQZouAMeANeC8ZHMN+pgzcy9rIfaa79eU1qlY8U8kuGe+huNUoVvMJ3xMeL1YoTuFt3rv13buAIYTzrZo7K2h16HR0cpnve9KUZNfqUUji1FCEY+lhMVwpZq20H0dPAdORdja4RNwMWHnunjHMfXVhN5NYFsgOyfWP2Rr0qdjPGKksk6FHmP0cR9LU6avFVS9aFMeHT4CH4J5jkO2qvhfJGzuBzYDX3WeZeGAivqL4UKPAV1/qoJqGlhGdxe0l0FgB4GdwLLOpiwcB3q00k8TeiNi/3eRM3RIK/4HLUqoB62g6oUr9PvSbdcl323/B8H8zoyGwaNX444aep0R2Un5dpfLx+HH1tUlhdjNs8dQQL/G98CJhJ27wD7gEXAlofdQKT6ju7/3V4VYUI7ldweyFXFRFpYlX6qht6KxK9I1/4UNyl3QbqngTkv2BHitbmZMsunIuZWCOz/LZq7vZo5Idk/dzGzKSMkUpA9kuKC23TcVY0ZWCif8M+Tpevs9esrasjMF+ZuRvbLxsRAqxQp91ey+NUOMRaDb2M085GNBWUwFZIq6jrDhHNA4FLltOLa+EciSRZ0H/+Hfi8Bv133zgtDiJQYAAAAASUVORK5CYII=");
|
||||
background-size: 100%;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
|
|
@ -51,9 +51,8 @@ button[disabled] {
|
|||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
.button:hover .earth-icon {
|
||||
filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%)
|
||||
hue-rotate(91deg) brightness(101%) contrast(97%);
|
||||
.button.earth-icon::before {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAACmUlEQVRYhe2YsWtUQRDGf1ETNAlJhIgRop4gGqyCoI0IekUKbSJaaRNBxErwP0hnIxhbq7MRLYRYaJEiKMHCFMFGURAMGlBRMBElEGOUlW9lbtm3d/d4gRPvg8c+5s3OzO3Mfrtz5MAk8KuBZ7JRFxvyRLXeaKth/yxwOJB9B34EskvAduAVcCf41g50BbJZ4Hbe31aJpGk0oveM7FSNRmxUUk43ZcgG9e7SuwRsBLrz/a4qfAN+ym5JHxaAVasUqykX0Bs900AfcLSAgJCdPtn1PgZDpaYsdJs+V9QjQZouAMeANeC8ZHMN+pgzcy9rIfaa79eU1qlY8U8kuGe+huNUoVvMJ3xMeL1YoTuFt3rv13buAIYTzrZo7K2h16HR0cpnve9KUZNfqUUji1FCEY+lhMVwpZq20H0dPAdORdja4RNwMWHnunjHMfXVhN5NYFsgOyfWP2Rr0qdjPGKksk6FHmP0cR9LU6avFVS9aFMeHT4CH4J5jkO2qvhfJGzuBzYDX3WeZeGAivqL4UKPAV1/qoJqGlhGdxe0l0FgB4GdwLLOpiwcB3q00k8TeiNi/3eRM3RIK/4HLUqoB62g6oUr9PvSbdcl323/B8H8zoyGwaNX444aep0R2Un5dpfLx+HH1tUlhdjNs8dQQL/G98CJhJ27wD7gEXAlofdQKT6ju7/3V4VYUI7ldweyFXFRFpYlX6qht6KxK9I1/4UNyl3QbqngTkv2BHitbmZMsunIuZWCOz/LZq7vZo5Idk/dzGzKSMkUpA9kuKC23TcVY0ZWCif8M+Tpevs9esrasjMF+ZuRvbLxsRAqxQp91ey+NUOMRaDb2M085GNBWUwFZIq6jrDhHNA4FLltOLa+EciSRZ0H/+Hfi8Bv133zgtDiJQYAAAAASUVORK5CYII=");
|
||||
}
|
||||
|
||||
.button.play-icon::before {
|
||||
|
|
@ -66,6 +65,16 @@ button[disabled] {
|
|||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
.button.download-icon::before {
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2218%22%20viewBox%3D%220%200%2019%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_2339_203)%22%3E%3Cpath%20d%3D%22M6.26423%208.06567H4.10986V10.0801H6.26423V8.06567Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M8.41853%2012.1025V14.1169H10.5816V12.1025H12.7359V10.08H10.5816V8.06562V4.03685V0H8.41853V4.03685V8.06562V10.08H6.26416V12.1025H8.41853Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.8456%2011.9487V13.9631V15.9775H2.15437V13.9631V11.9487H0V13.9631V15.9775V18H19V15.9775V13.9631V11.9487H16.8456Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M14.8902%208.06567H12.7358V10.0801H14.8902V8.06567Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2339_203%22%3E%3Crect%20width%3D%2219%22%20height%3D%2218%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
|
||||
background-size: 100%;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
transform: translateX(-0.5rem);
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Clickable elements */
|
||||
.clickable {
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -78,18 +78,14 @@
|
|||
<h2 class="font-face-danzza-light home-subtitle">
|
||||
{data.hero.subtitle}
|
||||
</h2>
|
||||
<div
|
||||
class="clickable button home-cta"
|
||||
<button
|
||||
class="button with-icon earth-icon home-cta"
|
||||
onclick={handleExplore}
|
||||
onkeypress={(e) => e.key === 'Enter' && handleExplore()}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="earth-icon clickable-filter-black"></div>
|
||||
<p class="home-cta-text clickable">
|
||||
{data.hero.ctaText}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@
|
|||
</div>
|
||||
<div class="portfolio-links">
|
||||
{#each currentProject.externalLinks as link}
|
||||
<a href={link.url} target="_blank" rel="noopener noreferrer" class="button earth-icon">{link.label}</a>
|
||||
<a href={link.url} target="_blank" rel="noopener noreferrer" class="button with-icon earth-icon">{link.label}</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -107,11 +107,7 @@
|
|||
<p class="status status--error">{t('wp_error')}</p>
|
||||
{/if}
|
||||
|
||||
<button type="submit" class="submit button" disabled={submitting || !isDownloadable}>
|
||||
<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>
|
||||
<button type="submit" class="submit button download-icon" disabled={submitting || !isDownloadable}>
|
||||
{t('wp_download')}
|
||||
</button>
|
||||
</form>
|
||||
|
|
@ -124,11 +120,11 @@
|
|||
color: var(--color-text);
|
||||
padding: 8rem 5rem;
|
||||
display: flex;
|
||||
column-gap: 5rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.catch-area {
|
||||
width: min(100%, 45vw);
|
||||
width: 45vw;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -184,7 +180,7 @@
|
|||
/* ── Form area: desktop — right column ── */
|
||||
.form-area {
|
||||
margin-top: 2rem;
|
||||
width: min(100%, 30vw);
|
||||
width: 30vw;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
|
@ -311,30 +307,32 @@
|
|||
/* ── Mobile ── */
|
||||
@media (max-width: 700px) {
|
||||
.white-paper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: block;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
padding: 6vh 1.25rem 0;
|
||||
padding: 6rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.catch-area {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: var(--font-size-paragraph-small);
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-title-section);
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2rem, 10vw, 3.5rem);
|
||||
}
|
||||
|
||||
.description {
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@
|
|||
|
||||
@media (max-width: 700px) {
|
||||
.white-papers {
|
||||
padding: 0 1.25rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue