studio-variable/world-game
3
0
Fork 0
Code Issues 20 Pull requests Projects Releases Packages Wiki Activity Actions

feat(footer): suppression newsletter, h3 → p.footer-label, corrections CSS mobile

Browse source 
- 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:
isUnknown 2026-03-20 11:08:14 +01:00
parent 1625ee1c44
commit 517c701ab9
1 changed files with 14 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

131
src/components/layout/Footer.svelte
View file

@ -45,7 +45,7 @@
<!-- Location -->
{#if contact.address}
<div class="footer-col">
<h3>{t('location')}</h3>
<p class="footer-label">{t('location')}</p>
<address>{@html contact.address}</address>
</div>
{/if}
@ -53,7 +53,7 @@
<!-- Contact -->
{#if contact.email}
<div class="footer-col">
<h3>{t('contact')}</h3>
<p class="footer-label">{t('contact')}</p>
<a href="mailto:{contact.email}">{contact.email}</a>
</div>
{/if}
@ -61,7 +61,7 @@
<!-- Follow us -->
{#if socials.length > 0}
<div class="footer-col">
<h3>{t('follow_us')}</h3>
<p class="footer-label">{t('follow_us')}</p>
<ul class="footer-socials" role="list">
{#each socials as social}
<li>
@ -77,27 +77,6 @@
</ul>
</div>
{/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>
<!-- Copyright bar -->
@ -147,18 +126,19 @@
.footer-col {
display: flex;
flex-direction: column;
gap: 16px;
gap: 0.5rem;
width: 136px;
text-align: left;
margin-bottom: .5rem;
}
.footer-col h3 {
.footer-label {
color: #fff;
font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph);
font-weight: 500;
text-transform: uppercase;
line-height: 16px;
line-height: 1.2;
}
.footer-col address,
@ -187,76 +167,11 @@
justify-content: center;
}
.footer-socials :global(svg),
.footer-socials img {
.footer-socials :global(svg) {
width: 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 --- */
.footer-bottom {
display: flex;
@ -292,20 +207,6 @@
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 {
flex-direction: column;
gap: 16px;
@ -314,8 +215,12 @@
}
.footer-divider {
width: 100%;
height: 1px;
width: 7%;
height: 2px;
}
:global(.collection .page-scrollable-footer) {
margin-left: -6.2vw;
}
}
@ -328,14 +233,6 @@
padding: 20px 30px;
}
.footer-newsletter {
width: 100%;
}
.footer-newsletter-input {
width: 60%;
}
.footer-bottom {
flex-direction: column;
gap: 16px;