chris/toadstoolTally
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify layout to column-based masonry

Browse Source
This commit is contained in:
chris 2025-12-10 14:10:38 -05:00
parent 54c6fef694
commit cafed99725
2 changed files with 22 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/app.js
View File

@ -445,23 +445,6 @@ function handleAmbientDrift() {
} }
handleAmbientDrift(); handleAmbientDrift();
function applyMasonry() {
const grid = document.querySelector('.projects-grid');
if (!grid) return;
const rowHeight = 12; // matches grid-auto-rows
const gap = 20; // matches grid gap
grid.querySelectorAll('.project-container').forEach(card => {
const height = card.getBoundingClientRect().height;
const span = Math.ceil((height + gap) / (rowHeight + gap));
card.style.gridRowEnd = `span ${span}`;
});
}
let resizeTimer = null;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(applyMasonry, 150);
});
const logoIcon = document.querySelector('.brand-icon'); const logoIcon = document.querySelector('.brand-icon');
if (logoIcon) { if (logoIcon) {
@ -857,7 +840,6 @@ function render() {
lastCountPulse = null; lastCountPulse = null;
lastFinishedId = null; lastFinishedId = null;
app.appendChild(grid); app.appendChild(grid);
applyMasonry();
} }
render(); render();

30
assets/style.css
View File

@ -244,17 +244,28 @@ h1 {
} }
.projects-grid { .projects-grid {
display: grid; display: block;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); column-width: 340px;
gap: 20px; column-gap: 20px;
align-items: start; width: 100%;
grid-auto-rows: 12px; /* Base row height for masonry calc */
grid-auto-flow: dense;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.projects-grid { .projects-grid {
grid-template-columns: 1fr; column-width: 100%;
}
}
@media (max-width: 1100px) {
.projects-grid {
display: block;
column-width: 340px;
column-gap: 20px;
}
.project-container {
break-inside: avoid;
margin: 0 0 20px;
width: auto;
} }
} }
@ -263,10 +274,13 @@ h1 {
background: var(--card-bg); background: var(--card-bg);
border-radius: 18px; border-radius: 18px;
padding: 5px 15px 15px 15px; padding: 5px 15px 15px 15px;
margin: 0; margin: 0 0 20px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: background-color 0.3s; transition: background-color 0.3s;
border: 1px solid var(--border); border: 1px solid var(--border);
break-inside: avoid;
display: inline-block;
width: 100%;
} }
.project-header { .project-header {