Skip to content

Commit 49ee1cc

Browse files
kaizer1vkaizer1v
committed
ZLL case study added
1 parent 62bb410 commit 49ee1cc

File tree

6 files changed

+351
-3
lines changed

6 files changed

+351
-3
lines changed

‎public/assets/work/visual-inspection.jpg

107 KB
Loading

‎public/assets/work/zll/1_stats.webp

48 KB
Binary file not shown.

‎public/assets/work/zll/2_stats.webp

69.1 KB
Binary file not shown.

‎public/assets/work/zll/3_stats.webp

25.8 KB
Binary file not shown.

‎src/components/Collage.astro

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<style>
2+
ul.collage {
3+
display: flex;
4+
flex-wrap: wrap;
5+
margin: 2vmin;
6+
}
7+
8+
.collage > li {
9+
height: 40vh;
10+
flex-grow: 1;
11+
margin: 2vmin;
12+
}
13+
14+
.collage > li:last-child {
15+
// There's no science in using "10" here. In all my testing, this delivered the best results.
16+
flex-grow: 10;
17+
}
18+
19+
.collage img {
20+
max-height: 100%;
21+
min-width: 100%;
22+
object-fit: cover;
23+
vertical-align: bottom;
24+
border-radius: 1vmin;
25+
}
26+
27+
@media (max-aspect-ratio: 1/1) {
28+
.collage > li { height: 30vh; }
29+
}
30+
31+
@media (max-height: 480px) {
32+
.collage > li {
33+
height: 80vh;
34+
}
35+
}
36+
37+
// Smaller screens in portrait
38+
39+
@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
40+
ul.collage {
41+
flex-direction: row;
42+
}
43+
44+
.collage > li {
45+
height: auto;
46+
width: 100%;
47+
}
48+
.collage img {
49+
width: 100%;
50+
max-height: 75vh;
51+
min-width: 0;
52+
}
53+
}
54+
</style>
55+
56+
<ul class="collage">
57+
<li>
58+
<a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" data-fancybox data-fancybox="gallery" data-caption="A Toyota Previa covered in graffiti">
59+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" alt="A Toyota Previa covered in graffiti" loading="lazy">
60+
</a>
61+
</li>
62+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg" data-fancybox data-fancybox="gallery" data-caption="Interesting living room light through a window">
63+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg" alt="Interesting living room light through a window" loading="lazy">
64+
</a></li>
65+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" data-fancybox data-caption="Sara on a red bike">
66+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" alt="Sara on a red bike" loading="lazy">
67+
</a></li>
68+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" data-fancybox data-caption="XOXO venue in between talks">
69+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" alt="XOXO venue in between talks" loading="lazy">
70+
</a></li>
71+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" data-fancybox data-caption="Trees lit by green light during dusk">
72+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" alt="Trees lit by green light during dusk" loading="lazy">
73+
</a></li>
74+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" data-fancybox data-caption="Portrait of Justin Pervorse">
75+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" alt="Portrait of Justin Pervorse" loading="lazy">
76+
</a></li>
77+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05465_dtkwef.jpg" data-fancybox data-caption="Empty bike racks outside a hotel">
78+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05465_dtkwef.jpg" alt="Empty bike racks outside a hotel" loading="lazy">
79+
</a></li>
80+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" data-fancybox data-caption="Heavy rain on an intersection">
81+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" alt="Heavy rain on an intersection" loading="lazy">
82+
</a></li>
83+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" data-fancybox data-caption="Payam Rajabi eating peanut chicken">
84+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" alt="Payam Rajabi eating peanut chicken" loading="lazy">
85+
</a></li>
86+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" data-fancybox data-caption="Portland skyline sunset">
87+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" alt="Portland skyline sunset" loading="lazy">
88+
</a></li>
89+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" data-fancybox data-caption="Interior at Nong's">
90+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" alt="Interior at Nong's" loading="lazy">
91+
</a></li>
92+
<li>
93+
<a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" data-fancybox data-fancybox="gallery" data-caption="A Toyota Previa covered in graffiti">
94+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" alt="A Toyota Previa covered in graffiti" loading="lazy">
95+
</a>
96+
</li>
97+
98+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" data-fancybox data-caption="Sara on a red bike">
99+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" alt="Sara on a red bike" loading="lazy">
100+
</a></li>
101+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" data-fancybox data-caption="XOXO venue in between talks">
102+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" alt="XOXO venue in between talks" loading="lazy">
103+
</a></li>
104+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" data-fancybox data-caption="Trees lit by green light during dusk">
105+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" alt="Trees lit by green light during dusk" loading="lazy">
106+
</a></li>
107+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" data-fancybox data-caption="Portrait of Justin Pervorse">
108+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" alt="Portrait of Justin Pervorse" loading="lazy">
109+
</a></li>
110+
111+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" data-fancybox data-caption="Heavy rain on an intersection">
112+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" alt="Heavy rain on an intersection" loading="lazy">
113+
</a></li>
114+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" data-fancybox data-caption="Payam Rajabi eating peanut chicken">
115+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" alt="Payam Rajabi eating peanut chicken" loading="lazy">
116+
</a></li>
117+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" data-fancybox data-caption="Portland skyline sunset">
118+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" alt="Portland skyline sunset" loading="lazy">
119+
</a></li>
120+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" data-fancybox data-caption="Interior at Nong's">
121+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" alt="Interior at Nong's" loading="lazy">
122+
</a></li>
123+
<li>
124+
<a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" data-fancybox data-fancybox="gallery" data-caption="A Toyota Previa covered in graffiti">
125+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" alt="A Toyota Previa covered in graffiti" loading="lazy">
126+
</a>
127+
</li>
128+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg" data-fancybox data-fancybox="gallery" data-caption="Interesting living room light through a window">
129+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg" alt="Interesting living room light through a window" loading="lazy">
130+
</a></li>
131+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" data-fancybox data-caption="Sara on a red bike">
132+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" alt="Sara on a red bike" loading="lazy">
133+
</a></li>
134+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" data-fancybox data-caption="XOXO venue in between talks">
135+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" alt="XOXO venue in between talks" loading="lazy">
136+
</a></li>
137+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" data-fancybox data-caption="Trees lit by green light during dusk">
138+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" alt="Trees lit by green light during dusk" loading="lazy">
139+
</a></li>
140+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" data-fancybox data-caption="Portrait of Justin Pervorse">
141+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" alt="Portrait of Justin Pervorse" loading="lazy">
142+
</a></li>
143+
144+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" data-fancybox data-caption="Heavy rain on an intersection">
145+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" alt="Heavy rain on an intersection" loading="lazy">
146+
</a></li>
147+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" data-fancybox data-caption="Payam Rajabi eating peanut chicken">
148+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" alt="Payam Rajabi eating peanut chicken" loading="lazy">
149+
</a></li>
150+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" data-fancybox data-caption="Portland skyline sunset">
151+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" alt="Portland skyline sunset" loading="lazy">
152+
</a></li>
153+
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" data-fancybox data-caption="Interior at Nong's">
154+
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" alt="Interior at Nong's" loading="lazy">
155+
</a></li>
156+
157+
<!-- Adding an empty <li> here so the final photo doesn't stretch like crazy. Try removing it and see what happens! -->
158+
<li></li>
159+
</ul>

0 commit comments

Comments
 (0)