jr/jakesphotos
1
0
Fork 0
mirror of https://github.com/runyanjake/jakesphotos.git synced 2026-03-26 05:23:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix titles on carousel template

Browse Source
This commit is contained in:
Jake Runyan 2026-03-04 12:27:49 -08:00
parent 157298daaa
commit 59390262b1
2 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/templates/CarouselTemplate.css
View File

@ -41,7 +41,7 @@
text-align: center; text-align: center;
color: #fff; color: #fff;
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 1.4rem; font-size: clamp(0.65rem, 2vw, 1.4rem);
font-weight: 300; font-weight: 300;
letter-spacing: 0.2em; letter-spacing: 0.2em;
text-transform: uppercase; text-transform: uppercase;
@ -49,6 +49,18 @@
pointer-events: none; pointer-events: none;
} }
@media (max-width: 600px) {
.carousel-slide {
width: 100vw;
}
.carousel-caption {
font-size: clamp(0.8rem, 4vw, 1.2rem);
letter-spacing: 0.12em;
bottom: 48px;
}
}
.carousel-btn { .carousel-btn {
position: absolute; position: absolute;
top: 50%; top: 50%;

13
src/templates/CarouselTemplate.js
View File

@ -5,6 +5,7 @@ import './CarouselTemplate.css';
const VISIBLE = 3; const VISIBLE = 3;
const AUTOPLAY_DELAY = 4000; const AUTOPLAY_DELAY = 4000;
const MOBILE_BREAKPOINT = 600;
function parseSlides(content) { function parseSlides(content) {
const parts = content.split(/^## /m); const parts = content.split(/^## /m);
@ -48,8 +49,18 @@ export default function CarouselTemplate({ page }) {
const [trackIndex, setTrackIndex] = useState(VISIBLE); const [trackIndex, setTrackIndex] = useState(VISIBLE);
const [animated, setAnimated] = useState(true); const [animated, setAnimated] = useState(true);
const [paused, setPaused] = useState(false); const [paused, setPaused] = useState(false);
const [slideWidthPct, setSlideWidthPct] = useState(
window.innerWidth <= MOBILE_BREAKPOINT ? 100 : 100 / 3
);
const timerRef = useRef(null); const timerRef = useRef(null);
useEffect(() => {
const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
const handler = (e) => setSlideWidthPct(e.matches ? 100 : 100 / 3);
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, []);
const advance = useCallback(() => setTrackIndex(i => i + 1), []); const advance = useCallback(() => setTrackIndex(i => i + 1), []);
const startTimer = useCallback(() => { const startTimer = useCallback(() => {
@ -105,7 +116,7 @@ export default function CarouselTemplate({ page }) {
<div <div
className="carousel-track" className="carousel-track"
style={{ style={{
transform: `translateX(calc(-${trackIndex * 100 / 3}vw))`, transform: `translateX(calc(-${trackIndex * slideWidthPct}vw))`,
transition: animated ? 'transform 1.2s ease' : 'none', transition: animated ? 'transform 1.2s ease' : 'none',
}} }}
onTransitionEnd={handleTransitionEnd} onTransitionEnd={handleTransitionEnd}