102 lines
2.3 KiB
JavaScript
102 lines
2.3 KiB
JavaScript
const fs = require('fs');
|
|
|
|
// 1. Update globals.css
|
|
let css = fs.readFileSync('src/app/globals.css', 'utf8');
|
|
|
|
// Replace media-wall and queries
|
|
const oldCssMatch = css.match(/\.media-wall\s*\{[^}]+\}(?:\s*@media[^}]+\{\s*\.media-wall\s*\{[^}]+\}\s*\}){4}/s);
|
|
if (oldCssMatch) {
|
|
const newCss = `.media-wall {
|
|
column-count: 2;
|
|
column-gap: 10px;
|
|
padding: 80px 10px 20px;
|
|
max-width: 1920px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (min-width: 480px) {
|
|
.media-wall {
|
|
column-count: 3;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.media-wall {
|
|
column-count: 4;
|
|
column-gap: 15px;
|
|
padding: 80px 15px 20px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.media-wall {
|
|
column-count: 5;
|
|
column-gap: 20px;
|
|
padding: 90px 20px 30px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1440px) {
|
|
.media-wall {
|
|
column-count: 6;
|
|
}
|
|
}`;
|
|
css = css.replace(oldCssMatch[0], newCss);
|
|
}
|
|
|
|
// Replace media-tile and images
|
|
const tileMatch = css.match(/\.media-tile\s*\{[^}]+\}\s*\.media-tile:hover\s*\{[^}]+\}\s*\.media-tile img,\s*\.media-tile video\s*\{[^}]+\}/s);
|
|
if (tileMatch) {
|
|
const newTile = `.media-tile {
|
|
break-inside: avoid;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: var(--radius);
|
|
background: var(--color-border);
|
|
cursor: pointer;
|
|
transition: transform var(--transition), box-shadow var(--transition);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.media-tile { margin-bottom: 15px; }
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.media-tile { margin-bottom: 20px; }
|
|
}
|
|
|
|
.media-tile:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow);
|
|
z-index: 1;
|
|
}
|
|
|
|
.media-tile img,
|
|
.media-tile video {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%; /* Filled by parent aspect-ratio */
|
|
object-fit: cover;
|
|
}`;
|
|
css = css.replace(tileMatch[0], newTile);
|
|
}
|
|
|
|
fs.writeFileSync('src/app/globals.css', css, 'utf8');
|
|
|
|
// 2. Update MediaTile.tsx
|
|
let tile = fs.readFileSync('src/components/MediaTile.tsx', 'utf8');
|
|
tile = tile.replace(
|
|
` const style: React.CSSProperties = {
|
|
gridColumn: \`span \${item.gridWidth || 1}\`,
|
|
gridRow: \`span \${item.gridHeight || 1}\`,
|
|
aspectRatio,
|
|
};`,
|
|
` const style: React.CSSProperties = {
|
|
aspectRatio,
|
|
};`
|
|
);
|
|
// Make sure featured items span all columns if needed (optional)
|
|
// Actually we'll just let them be normal items in the masonry flow
|
|
fs.writeFileSync('src/components/MediaTile.tsx', tile, 'utf8');
|