feat(footer): suppression newsletter, h3 → p.footer-label, corrections CSS mobile
- Retire la section newsletter commentée et tout son CSS associé - Remplace les h3 par des p.footer-label (sémantique plus correcte) - Réduit le gap des colonnes footer - Fix divider mobile (7% width, 2px height) - Ajoute offset margin-left pour .collection .page-scrollable-footer mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
1625ee1c44
commit
517c701ab9
1 changed files with 14 additions and 117 deletions
|
|
@ -45,7 +45,7 @@
|
||||||
<!-- Location -->
|
<!-- Location -->
|
||||||
{#if contact.address}
|
{#if contact.address}
|
||||||
<div class="footer-col">
|
<div class="footer-col">
|
||||||
<h3>{t('location')}</h3>
|
<p class="footer-label">{t('location')}</p>
|
||||||
<address>{@html contact.address}</address>
|
<address>{@html contact.address}</address>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
<!-- Contact -->
|
<!-- Contact -->
|
||||||
{#if contact.email}
|
{#if contact.email}
|
||||||
<div class="footer-col">
|
<div class="footer-col">
|
||||||
<h3>{t('contact')}</h3>
|
<p class="footer-label">{t('contact')}</p>
|
||||||
<a href="mailto:{contact.email}">{contact.email}</a>
|
<a href="mailto:{contact.email}">{contact.email}</a>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
<!-- Follow us -->
|
<!-- Follow us -->
|
||||||
{#if socials.length > 0}
|
{#if socials.length > 0}
|
||||||
<div class="footer-col">
|
<div class="footer-col">
|
||||||
<h3>{t('follow_us')}</h3>
|
<p class="footer-label">{t('follow_us')}</p>
|
||||||
<ul class="footer-socials" role="list">
|
<ul class="footer-socials" role="list">
|
||||||
{#each socials as social}
|
{#each socials as social}
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -77,27 +77,6 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Newsletter -->
|
|
||||||
<!-- <div class="footer-newsletter">
|
|
||||||
<h3>{t('newsletter_heading')}</h3>
|
|
||||||
<form class="footer-newsletter-form" onsubmit={handleSubscribe}>
|
|
||||||
<input
|
|
||||||
class="footer-newsletter-input"
|
|
||||||
type="email"
|
|
||||||
placeholder={t('newsletter_placeholder')}
|
|
||||||
bind:value={email}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<button type="submit" class="button">{t('newsletter_submit')}</button>
|
|
||||||
</form>
|
|
||||||
{#if status}
|
|
||||||
<p class="footer-newsletter-status footer-newsletter-status--{status.type}">
|
|
||||||
{status.message}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Copyright bar -->
|
<!-- Copyright bar -->
|
||||||
|
|
@ -147,18 +126,19 @@
|
||||||
.footer-col {
|
.footer-col {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 0.5rem;
|
||||||
width: 136px;
|
width: 136px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-col h3 {
|
.footer-label {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: "Danzza", sans-serif;
|
font-family: "Danzza", sans-serif;
|
||||||
font-size: var(--font-size-paragraph);
|
font-size: var(--font-size-paragraph);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
line-height: 16px;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-col address,
|
.footer-col address,
|
||||||
|
|
@ -187,76 +167,11 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-socials :global(svg),
|
.footer-socials :global(svg) {
|
||||||
.footer-socials img {
|
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Newsletter --- */
|
|
||||||
.footer-newsletter {
|
|
||||||
width: 493px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-newsletter h3 {
|
|
||||||
color: #fff;
|
|
||||||
font-family: "Danzza", sans-serif;
|
|
||||||
font-size: var(--font-size-paragraph);
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-newsletter-form {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-newsletter-input {
|
|
||||||
width: 315px;
|
|
||||||
height: 45px;
|
|
||||||
padding: 12px;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid #fff;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: "Danzza", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-newsletter-input::placeholder {
|
|
||||||
opacity: 0.7;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Override .button width for footer context */
|
|
||||||
.footer-newsletter-form :global(.button) {
|
|
||||||
width: auto;
|
|
||||||
min-width: unset;
|
|
||||||
position: static;
|
|
||||||
height: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-newsletter-status {
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-newsletter-status--success {
|
|
||||||
background: #4dfca1;
|
|
||||||
color: #1e1938;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-newsletter-status--error {
|
|
||||||
background: #ff6b6b;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Copyright bar --- */
|
/* --- Copyright bar --- */
|
||||||
.footer-bottom {
|
.footer-bottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -292,20 +207,6 @@
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-newsletter {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-newsletter-input {
|
|
||||||
width: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-newsletter-form :global(.button) {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom {
|
.footer-bottom {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
|
@ -314,8 +215,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-divider {
|
.footer-divider {
|
||||||
width: 100%;
|
width: 7%;
|
||||||
height: 1px;
|
height: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.collection .page-scrollable-footer) {
|
||||||
|
margin-left: -6.2vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -328,14 +233,6 @@
|
||||||
padding: 20px 30px;
|
padding: 20px 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-newsletter {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-newsletter-input {
|
|
||||||
width: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom {
|
.footer-bottom {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue