Skip to content

Commit 7200ad9

Browse files
DanielFeshbachDanielFeshbach
committed
changed code for media page because the boxes were overlapping in the website online (though it was fine before through localhost,s commit by pushing it
1 parent 7c3c981 commit 7200ad9

1 file changed

Lines changed: 122 additions & 56 deletions

File tree

‎_pages/media.html‎

Lines changed: 122 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,78 @@
77
---
88

99
<style>
10-
/* Force card borders with maximum specificity */
11-
.media-page .media-card {
10+
/* Maximum specificity - target the exact page structure */
11+
body .page__inner-wrap .media-page .media-card,
12+
body .media-page .media-card,
13+
.media-card {
1214
min-width: 0 !important;
1315
background: #fff !important;
14-
border: 3px solid #333 !important;
16+
border: 1px solid #e1e4e8 !important; /* Professional gray border */
1517
border-radius: 8px !important;
1618
padding: 1rem !important;
17-
box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
18-
margin-bottom: 1rem !important;
19-
align-self: start !important;
19+
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Subtle shadow */
20+
margin: 0 !important; /* Remove margin, let grid handle spacing */
21+
display: block !important;
22+
width: 100% !important;
23+
box-sizing: border-box !important;
24+
transition: box-shadow 0.2s ease !important; /* Smooth hover effect */
2025
}
2126

22-
/* Grid with small row units for masonry effect */
27+
/* Hover effect for cards */
28+
.media-card:hover {
29+
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
30+
border-color: #d1d5da !important;
31+
}
32+
33+
/* Grid container with tighter spacing */
34+
body .media-page .media-grid,
2335
.media-grid {
2436
display: grid !important;
25-
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
26-
grid-auto-rows: 10px !important; /* Smaller units for better fit */
27-
gap: 0.75rem !important;
37+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
38+
grid-auto-rows: 10px !important; /* Smaller row height for tighter packing */
39+
gap: 12px !important; /* Slightly smaller gap */
2840
align-items: start !important;
41+
width: 100% !important;
42+
max-width: none !important;
43+
padding: 0 !important;
44+
margin: 20px 0 !important;
45+
}
46+
47+
/* Ensure full width for default layout */
48+
body .media-page {
49+
max-width: none !important;
50+
width: 100% !important;
51+
padding: 0 20px !important;
2952
}
3053

31-
/* Tighter spacing between elements */
32-
.media-page .media-card h3 { margin: 0.1rem 0 0.25rem; font-size: 1rem; }
33-
.media-page .publication-meta { margin: 0 0 0.1rem !important; color: #666; font-size: 0.9rem; }
34-
.media-page .media-summary { margin-top: 0.25rem; }
54+
/* Spacing with higher specificity */
55+
.media-page .media-card h3,
56+
body .media-card h3 {
57+
margin: 0 0 0.25rem !important;
58+
font-size: 1rem !important;
59+
color: #333 !important;
60+
}
61+
62+
.media-page .publication-meta,
63+
body .media-card .publication-meta {
64+
margin: 0 0 0.5rem !important;
65+
color: #666 !important;
66+
font-size: 0.9rem !important;
67+
}
68+
69+
.media-page .media-summary,
70+
body .media-card .media-summary {
71+
margin-top: 0.5rem !important;
72+
font-size: 0.9rem !important;
73+
}
3574

3675
/* Teaser image styling */
37-
.media-page .media-card .teaser-image {
38-
width: 100%;
39-
height: auto;
40-
border-radius: 4px;
41-
margin-bottom: 0.5rem;
76+
.media-page .media-card .teaser-image,
77+
body .media-card .teaser-image {
78+
width: 100% !important;
79+
height: auto !important;
80+
border-radius: 4px !important;
81+
margin-bottom: 0.5rem !important;
4282
}
4383
</style>
4484

@@ -47,15 +87,15 @@ <h1>Media</h1>
4787
<section class="media-grid">
4888
{% assign media_items = site.media | sort: "date" | reverse %}
4989
{% for item in media_items %}
50-
<article class="media-card" style="border: 2px solid #ccc !important; background: #fff !important; padding: 1rem !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;">
90+
<article class="media-card">
5191

5292
{% if item.date %}
53-
<p class="publication-meta" style="margin: 0 0 0.1rem !important;">
93+
<p class="publication-meta">
5494
<time datetime="{{ item.date | date_to_xmlschema }}">{{ item.date | date: "%B %Y" }}</time>
5595
</p>
5696
{% endif %}
5797

58-
<h3 class="archive__item-title" style="margin: 0.1rem 0 0.25rem !important;">
98+
<h3 class="archive__item-title">
5999
{% if item.link %}<a href="{{ item.link }}">{{ item.title }}</a>{% else %}{{ item.title }}{% endif %}
60100
</h3>
61101

@@ -80,44 +120,70 @@ <h3 class="archive__item-title" style="margin: 0.1rem 0 0.25rem !important;">
80120

81121
<script async src="https://www.instagram.com/embed.js"></script>
82122
<script>
83-
window.addEventListener('load', function() {
84-
function masonryLayout() {
85-
const grid = document.querySelector('.media-grid');
86-
const items = grid.querySelectorAll('.media-card');
87-
const rowHeight = 10; // Must match grid-auto-rows
88-
const gap = 12; // 0.75rem in pixels
89-
90-
items.forEach(item => {
91-
// Reset any previous spanning
92-
item.style.gridRowEnd = 'auto';
93-
94-
// Force layout calculation
95-
const rect = item.getBoundingClientRect();
96-
const height = rect.height;
97-
98-
// Calculate how many 10px rows this item needs (including gap)
99-
const rowSpan = Math.ceil((height + gap) / (rowHeight + gap));
100-
101-
// Apply the span
102-
item.style.gridRowEnd = `span ${rowSpan}`;
103-
});
104-
}
123+
function masonryLayout() {
124+
const grid = document.querySelector('.media-grid');
125+
if (!grid) return;
105126

106-
// Run layout multiple times to ensure proper sizing
107-
function runLayout() {
108-
masonryLayout();
109-
setTimeout(masonryLayout, 100); // Run again after brief delay
110-
setTimeout(masonryLayout, 500); // And once more after embeds settle
111-
}
127+
const items = grid.querySelectorAll('.media-card');
128+
const rowHeight = 10; // Match the updated CSS grid-auto-rows
129+
const gap = 12; // Match the updated CSS gap
130+
131+
// First, reset all items to auto height
132+
items.forEach(item => {
133+
item.style.gridRowEnd = 'auto';
134+
});
135+
136+
// Force browser to recalculate layout
137+
grid.offsetHeight;
112138

139+
// Now calculate proper row spans for each item
140+
items.forEach(item => {
141+
const rect = item.getBoundingClientRect();
142+
const itemHeight = rect.height;
143+
144+
// Calculate how many grid rows this item needs
145+
const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap));
146+
147+
// Apply the calculated row span
148+
item.style.gridRowEnd = `span ${Math.max(1, rowSpan)}`;
149+
});
150+
}
151+
152+
// Enhanced initialization with better timing
153+
function initMasonry() {
154+
// Multiple attempts with different delays to handle Instagram embeds
155+
const delays = [50, 200, 500, 1000, 2000, 3000];
156+
157+
delays.forEach(delay => {
158+
setTimeout(() => {
159+
masonryLayout();
160+
}, delay);
161+
});
162+
}
163+
164+
// Wait for Instagram embeds to load
165+
window.addEventListener('load', function () {
113166
if (window.instgrm && instgrm.Embeds) {
114167
instgrm.Embeds.process();
115-
setTimeout(runLayout, 2000); // Wait for Instagram embeds to load
116-
} else {
117-
runLayout();
118168
}
119169

120-
// Re-run layout on window resize
121-
window.addEventListener('resize', runLayout);
170+
// Run masonry after a short delay to let embeds render
171+
setTimeout(initMasonry, 100);
172+
});
173+
174+
// Handle window resize
175+
window.addEventListener('resize', function() {
176+
clearTimeout(window.resizeTimer);
177+
window.resizeTimer = setTimeout(masonryLayout, 300);
122178
});
123-
</script>
179+
180+
// Initial load
181+
document.addEventListener('DOMContentLoaded', initMasonry);
182+
183+
// Also try to run masonry when Instagram embeds finish loading
184+
if (window.instgrm) {
185+
window.instgrm.Embeds.process().then(() => {
186+
setTimeout(masonryLayout, 500);
187+
});
188+
}
189+
</script>

0 commit comments

Comments
 (0)