jalil/jalil.arfaoui.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extraction du footer photo en composant et correction responsive mobile

Browse source
This commit is contained in:
Jalil Arfaoui 2026-02-18 00:49:21 +01:00
parent 37339f4ebe
commit 835519a0c2
3 changed files with 67 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
astro.config.mjs
View file

@ -4,6 +4,7 @@ import tailwind from "@astrojs/tailwind";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
devToolbar: { enabled: false },
integrations: [tailwind()], integrations: [tailwind()],
i18n: { i18n: {
defaultLocale: "fr", defaultLocale: "fr",

63
src/components/photo/PhotoFooter.astro Normal file
View file

@ -0,0 +1,63 @@
<footer class="photo-footer">
<div class="photo-footer-inner">
<div class="photo-footer-links">
<a href="/a-propos">À propos</a>
<a href="mailto:jalil@arfaoui.net">Contact</a>
<a href="https://instagram.com/l.i.l.a.j" target="_blank" rel="noopener noreferrer">Instagram</a>
</div>
<div class="photo-footer-copy">
© Jalil Arfaoui <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener noreferrer">Creative Commons CC-BY-NC 4.0</a>
</div>
</div>
</footer>
<style>
.photo-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 40;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px);
transition: transform 0.3s;
}
.photo-footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 54px;
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
}
.photo-footer-links {
display: flex;
gap: 15px;
}
.photo-footer-links a,
.photo-footer-copy,
.photo-footer-copy a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.2s;
}
.photo-footer-links a:hover,
.photo-footer-copy a:hover {
color: white;
}
@media (max-width: 640px) {
.photo-footer-inner {
flex-direction: column;
height: auto;
padding: 10px 20px;
gap: 4px;
font-size: 13px;
}
}
</style>

16
src/layouts/PhotoLayout.astro
View file

@ -1,4 +1,6 @@
--- ---
import PhotoFooter from '../components/photo/PhotoFooter.astro';
const { title = "Galerie Photo - Jalil Arfaoui", enableScroll = false } = Astro.props; const { title = "Galerie Photo - Jalil Arfaoui", enableScroll = false } = Astro.props;
--- ---
@ -25,19 +27,7 @@ const { title = "Galerie Photo - Jalil Arfaoui", enableScroll = false } = Astro.
<body class={`antialiased bg-black text-white ${enableScroll ? '' : 'overflow-hidden'}`} style="font-family: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;"> <body class={`antialiased bg-black text-white ${enableScroll ? '' : 'overflow-hidden'}`} style="font-family: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<slot /> <slot />
<!-- Footer bandeau --> <PhotoFooter />
<footer class="fixed bottom-0 left-0 right-0 z-40 bg-black/30 backdrop-blur-sm transition-transform duration-300">
<div class="flex justify-between items-center w-full" style="padding-left: 20px; padding-right: 20px; height: 54px; line-height: 54px;">
<div class="footer-left flex items-center text-white/70" style="font-size: 16px; font-weight: normal;">
<a href="/a-propos" class="hover:text-white transition-colors" style="margin-right: 15px;">À propos</a>
<a href="mailto:jalil@arfaoui.net" class="hover:text-white transition-colors" style="margin-right: 15px;">Contact</a>
<a href="https://instagram.com/l.i.l.a.j" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">Instagram</a>
</div>
<div class="footer-right text-white/70" style="font-size: 16px; font-weight: normal;">
© Jalil Arfaoui Creative Commons CC-BY-NC 4.0
</div>
</div>
</footer>
<Fragment set:html={import.meta.env.FOOTER_INJECT} /> <Fragment set:html={import.meta.env.FOOTER_INJECT} />
</body> </body>