Compare commits
No commits in common. "cd1ca94b116504b16c1fabc815c805c0a2983740" and "61152685878df0157a629ded3e9bd90321ad9771" have entirely different histories.
cd1ca94b11
...
6115268587
7 changed files with 94 additions and 229 deletions
|
|
@ -6,4 +6,63 @@
|
|||
|
||||
.prose img {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
#sun {
|
||||
transform: translate3d(0, 0px, 0);
|
||||
}
|
||||
|
||||
#moon {
|
||||
transform: translate3d(0, 0px, 0);
|
||||
}
|
||||
|
||||
#darkToggle:hover #sun {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
||||
#darkToggle:hover #moon {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
||||
html.dark #darkToggle:hover .horizon {
|
||||
border-color: #718096 !important;
|
||||
}
|
||||
|
||||
.horizon .setting {
|
||||
animation: 1s ease 0s 1 setting;
|
||||
}
|
||||
|
||||
.horizon .rising {
|
||||
animation: 1s ease 0s 1 rising;
|
||||
}
|
||||
|
||||
@keyframes setting {
|
||||
0% {
|
||||
transform: translate3d(0, 10px, 0)
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translate3d(0, -2px, 0)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 30px, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rising {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 30px, 0)
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -2px, 0)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 10, 0)
|
||||
}
|
||||
}
|
||||
|
|
@ -31,13 +31,12 @@ const currentMenus = menus[currentLang] || menus.fr;
|
|||
class="flex items-center justify-between h-full max-w-5xl pl-6 pr-4 mx-auto border-b border-l-0 border-r-0 border-transparent select-none lg:border-r lg:border-l lg:rounded-b-xl"
|
||||
>
|
||||
<Logo />
|
||||
<button
|
||||
<div
|
||||
id="mobileMenuBackground"
|
||||
type="button"
|
||||
aria-label="Fermer le menu"
|
||||
class="fixed inset-0 z-20 hidden w-screen h-screen duration-300 ease-out bg-white/90 dark:bg-neutral-950/90 appearance-none border-0 p-0 cursor-default"
|
||||
onclick="closeMobileMenu()"
|
||||
class="fixed inset-0 z-20 hidden w-screen h-screen duration-300 ease-out bg-white/90 dark:bg-neutral-950/90"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<nav
|
||||
class="relative z-30 flex flex-row-reverse justify-start w-full text-sm sm:justify-end text-neutral-500 dark:text-neutral-400 sm:flex-row"
|
||||
>
|
||||
|
|
@ -95,9 +94,3 @@ const currentMenus = menus[currentLang] || menus.fr;
|
|||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script is:inline>
|
||||
document.getElementById('mobileMenuBackground').addEventListener('click', function () {
|
||||
window.closeMobileMenu();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import { Picture } from 'astro:assets';
|
||||
import HeroViewport from './HeroViewport.astro';
|
||||
import ScrollIndicator from './ScrollIndicator.astro';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
|
@ -15,26 +15,25 @@ const { title, description, date, tags, coverImage, scrollTarget = '.info-sectio
|
|||
---
|
||||
|
||||
{coverImage && (
|
||||
<HeroViewport targetSelector={scrollTarget}>
|
||||
<div class="hero-image">
|
||||
<Picture src={coverImage} alt={title} widths={[800, 1200, 1920]} formats={['webp']} />
|
||||
<div class="hero-overlay">
|
||||
<div class="hero-content">
|
||||
<h1 class="album-title">{title}</h1>
|
||||
{description && <p class="album-description">{description}</p>}
|
||||
{date && (
|
||||
<time class="album-date">
|
||||
{date.toLocaleDateString('fr-FR', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</time>
|
||||
)}
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<Picture src={coverImage} alt={title} widths={[800, 1200, 1920]} formats={['webp']} />
|
||||
<div class="hero-overlay">
|
||||
<div class="hero-content">
|
||||
<h1 class="album-title">{title}</h1>
|
||||
{description && <p class="album-description">{description}</p>}
|
||||
{date && (
|
||||
<time class="album-date">
|
||||
{date.toLocaleDateString('fr-FR', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</time>
|
||||
)}
|
||||
</div>
|
||||
<ScrollIndicator targetSelector={scrollTarget} />
|
||||
</div>
|
||||
</HeroViewport>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tags && tags.length > 0 && (
|
||||
|
|
@ -48,13 +47,10 @@ const { title, description, date, tags, coverImage, scrollTarget = '.info-sectio
|
|||
)}
|
||||
|
||||
<style>
|
||||
:global(.hero-viewport) {
|
||||
--hero-height: calc(100vh - var(--header-height, 53px) - var(--footer-height, 54px));
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100vh - var(--header-height, 53px) - var(--footer-height, 54px));
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import CategoryNav from './CategoryNav.astro';
|
||||
import HeroViewport from './HeroViewport.astro';
|
||||
import ScrollIndicator from './ScrollIndicator.astro';
|
||||
import Lightbox from './Lightbox.astro';
|
||||
import { Picture } from 'astro:assets';
|
||||
import { getEntry } from 'astro:content';
|
||||
|
|
@ -49,7 +49,7 @@ const lightboxImages = images.map(img => ({
|
|||
<CategoryNav currentCategory={category} opaque={true} />
|
||||
|
||||
<!-- Image hero avec titre en overlay -->
|
||||
<HeroViewport targetSelector="#thumbnails">
|
||||
<header class="hero-cover">
|
||||
<div class="hero-image">
|
||||
{images[0] && <Picture src={images[0].src} alt={images[0].alt} widths={[800, 1200, 1920]} formats={['webp']} class="hero-bg" />}
|
||||
<div class="hero-overlay">
|
||||
|
|
@ -61,9 +61,10 @@ const lightboxImages = images.map(img => ({
|
|||
<p class="hero-subtitle">{categoryData.data.subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
<ScrollIndicator targetSelector="#thumbnails" />
|
||||
</div>
|
||||
</div>
|
||||
</HeroViewport>
|
||||
</header>
|
||||
|
||||
<!-- Grille de thumbnails -->
|
||||
<div id="thumbnails" class="thumbnails-grid">
|
||||
|
|
@ -143,8 +144,11 @@ document.addEventListener('scroll', onScroll);
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.category-container :global(.hero-viewport) {
|
||||
--hero-height: calc(100vh - var(--header-height) - var(--footer-height));
|
||||
.hero-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--header-height) - var(--footer-height));
|
||||
overflow: hidden;
|
||||
margin-top: var(--header-height);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,150 +0,0 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const photoCategories = await getCollection('photoCategories');
|
||||
const sortedCategories = photoCategories.sort((a, b) => (a.data.order || 99) - (b.data.order || 99));
|
||||
---
|
||||
|
||||
<section id="explore-section" class="explore-section">
|
||||
<div class="explore-content">
|
||||
<div class="explore-card">
|
||||
<h2 class="explore-card-title">Catégories</h2>
|
||||
<p class="explore-card-desc">Parcourir les photos par thème</p>
|
||||
<ul class="category-list">
|
||||
{sortedCategories.map(cat => (
|
||||
<li>
|
||||
<a href={`/photo/albums/${cat.id}`} class="category-link">
|
||||
{cat.data.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="explore-card">
|
||||
<h2 class="explore-card-title">Fil Photo</h2>
|
||||
<p class="explore-card-desc">Parcourir les séries chronologiques, reportages et histoires en images</p>
|
||||
<a href="/photo/blog" class="explore-cta">
|
||||
Voir le fil
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
<polyline points="12 5 19 12 12 19"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.explore-section {
|
||||
position: relative;
|
||||
background: #000;
|
||||
z-index: 20;
|
||||
padding: 4rem 2rem;
|
||||
padding-top: 8rem;
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.explore-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30vh;
|
||||
background: linear-gradient(to bottom, transparent, #000);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.explore-content {
|
||||
display: flex;
|
||||
gap: 3rem;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.explore-card {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.explore-card-title {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.explore-card-desc {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.category-link {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 0.9rem;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 20px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.category-link:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.explore-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.explore-cta:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.explore-section {
|
||||
padding: 3rem 1.25rem;
|
||||
}
|
||||
|
||||
.explore-content {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.explore-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
---
|
||||
import ScrollIndicator from './ScrollIndicator.astro';
|
||||
|
||||
interface Props {
|
||||
targetSelector?: string;
|
||||
transparent?: boolean;
|
||||
}
|
||||
|
||||
const { targetSelector = '#content', transparent = false } = Astro.props;
|
||||
---
|
||||
|
||||
<div class:list={['hero-viewport', { transparent }]}>
|
||||
<slot />
|
||||
<ScrollIndicator targetSelector={targetSelector} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hero-viewport {
|
||||
position: relative;
|
||||
height: var(--hero-height, 100vh);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-viewport.transparent {
|
||||
z-index: 25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-viewport.transparent :global(.scroll-indicator) {
|
||||
pointer-events: auto;
|
||||
bottom: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,10 @@
|
|||
---
|
||||
import PhotoLayout from '../layouts/PhotoLayout.astro';
|
||||
import PhotoGallery from '../components/photo/PhotoGallery.astro';
|
||||
import HeroViewport from '../components/photo/HeroViewport.astro';
|
||||
import ExploreSection from '../components/photo/ExploreSection.astro';
|
||||
|
||||
const title = "Galerie Photo - Jalil Arfaoui";
|
||||
---
|
||||
|
||||
<PhotoLayout title={title} enableScroll={true}>
|
||||
<PhotoLayout title={title}>
|
||||
<PhotoGallery category="all" />
|
||||
<HeroViewport targetSelector="#explore-section" transparent />
|
||||
<ExploreSection />
|
||||
</PhotoLayout>
|
||||
</PhotoLayout>
|
||||
Loading…
Add table
Reference in a new issue