Skip to content

Commit 2e261cc

Browse files
author
mrmrs
committed
Added a bunch of full bleed galleries that adhere to aspect ratio
1 parent feb2b01 commit 2e261cc

File tree

6 files changed

+756
-0
lines changed

6 files changed

+756
-0
lines changed

‎src/components/layout/full-bleed-16x9.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
5+
<main class="cf w-100">
6+
<div class="fl w-50 w-third-m w-25-ns">
7+
<div class="aspect-ratio aspect-ratio--16x9">
8+
<img style="background-image:url(http://mrmrs.io/images/0006.jpg);"
9+
class="db bg-center cover aspect-ratio--object" />
10+
</div>
11+
</div>
12+
<div class="fl w-50 w-third-m w-25-ns">
13+
<div class="aspect-ratio aspect-ratio--16x9">
14+
<img style="background-image:url(http://mrmrs.io/images/0002.jpg);"
15+
class="db bg-center cover aspect-ratio--object" />
16+
</div>
17+
</div>
18+
<div class="fl w-50 w-third-m w-25-ns">
19+
<div class="aspect-ratio aspect-ratio--16x9">
20+
<img style="background-image:url(http://mrmrs.io/images/0003.jpg);"
21+
class="db bg-center cover aspect-ratio--object" />
22+
</div>
23+
</div>
24+
<div class="fl w-50 w-third-m w-25-ns">
25+
<div class="aspect-ratio aspect-ratio--16x9">
26+
<img style="background-image:url(http://mrmrs.io/images/0004.jpg);"
27+
class="db bg-center cover aspect-ratio--object" />
28+
</div>
29+
</div>
30+
<div class="fl w-50 w-third-m w-25-ns">
31+
<div class="aspect-ratio aspect-ratio--16x9">
32+
<img style="background-image:url(http://mrmrs.io/images/0007.jpg);"
33+
class="db bg-center cover aspect-ratio--object" />
34+
</div>
35+
</div>
36+
<div class="fl w-50 w-third-m w-25-ns">
37+
<div class="aspect-ratio aspect-ratio--16x9">
38+
<img style="background-image:url(http://mrmrs.io/images/0008.jpg);"
39+
class="db bg-center cover aspect-ratio--object" />
40+
</div>
41+
</div>
42+
<div class="fl w-50 w-third-m w-25-ns">
43+
<div class="aspect-ratio aspect-ratio--16x9">
44+
<img style="background-image:url(http://mrmrs.io/images/0009.jpg);"
45+
class="db bg-center cover aspect-ratio--object" />
46+
</div>
47+
</div>
48+
<div class="fl w-50 w-third-m w-25-ns">
49+
<div class="aspect-ratio aspect-ratio--16x9">
50+
<img style="background-image:url(http://mrmrs.io/images/0010.jpg);"
51+
class="db bg-center cover aspect-ratio--object" />
52+
</div>
53+
</div>
54+
<div class="fl w-50 w-third-m w-25-ns">
55+
<div class="aspect-ratio aspect-ratio--16x9">
56+
<img style="background-image:url(http://mrmrs.io/images/0011.jpg);"
57+
class="db bg-center cover aspect-ratio--object" />
58+
</div>
59+
</div>
60+
<div class="fl w-50 w-third-m w-25-ns">
61+
<div class="aspect-ratio aspect-ratio--16x9">
62+
<img style="background-image:url(http://mrmrs.io/images/0012.jpg);"
63+
class="db bg-center cover aspect-ratio--object" />
64+
</div>
65+
</div>
66+
<div class="fl w-50 w-third-m w-25-ns">
67+
<div class="aspect-ratio aspect-ratio--16x9">
68+
<img style="background-image:url(http://mrmrs.io/images/0013.jpg);"
69+
class="db bg-center cover aspect-ratio--object" />
70+
</div>
71+
</div>
72+
<div class="fl w-50 w-third-m w-25-ns">
73+
<div class="aspect-ratio aspect-ratio--16x9">
74+
<img style="background-image:url(http://mrmrs.io/images/0014.jpg);"
75+
class="db bg-center cover aspect-ratio--object" />
76+
</div>
77+
</div>
78+
<div class="fl w-50 w-third-m w-25-ns">
79+
<div class="aspect-ratio aspect-ratio--16x9">
80+
<img style="background-image:url(http://mrmrs.io/images/0015.jpg);"
81+
class="db bg-center cover aspect-ratio--object" />
82+
</div>
83+
</div>
84+
<div class="fl w-50 w-third-m w-25-ns">
85+
<div class="aspect-ratio aspect-ratio--16x9">
86+
<img style="background-image:url(http://mrmrs.io/images/0016.jpg);"
87+
class="db bg-center cover aspect-ratio--object" />
88+
</div>
89+
</div>
90+
<div class="fl w-50 w-third-m w-25-ns">
91+
<div class="aspect-ratio aspect-ratio--16x9">
92+
<img style="background-image:url(http://mrmrs.io/images/0017.jpg);"
93+
class="db bg-center cover aspect-ratio--object" />
94+
</div>
95+
</div>
96+
<div class="fl w-50 w-third-m w-25-ns">
97+
<div class="aspect-ratio aspect-ratio--16x9">
98+
<img style="background-image:url(http://mrmrs.io/images/0018.jpg);"
99+
class="db bg-center cover aspect-ratio--object" />
100+
</div>
101+
</div>
102+
<div class="fl w-50 w-third-m w-25-ns">
103+
<div class="aspect-ratio aspect-ratio--16x9">
104+
<img style="background-image:url(http://mrmrs.io/images/0019.jpg);"
105+
class="db bg-center cover aspect-ratio--object" />
106+
</div>
107+
</div>
108+
<div class="fl w-50 w-third-m w-25-ns">
109+
<div class="aspect-ratio aspect-ratio--16x9">
110+
<img style="background-image:url(http://mrmrs.io/images/0020.jpg);"
111+
class="db bg-center cover aspect-ratio--object" />
112+
</div>
113+
</div>
114+
<div class="fl w-50 w-third-m w-25-ns">
115+
<div class="aspect-ratio aspect-ratio--16x9">
116+
<img style="background-image:url(http://mrmrs.io/images/0021.jpg);"
117+
class="db bg-center cover aspect-ratio--object" />
118+
</div>
119+
</div>
120+
<div class="fl w-50 w-third-m w-25-ns">
121+
<div class="aspect-ratio aspect-ratio--16x9">
122+
<img style="background-image:url(http://mrmrs.io/images/0022.jpg);"
123+
class="db bg-center cover aspect-ratio--object" />
124+
</div>
125+
</div>
126+
</main>

‎src/components/layout/full-bleed-6x4.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
5+
<main class="cf w-100">
6+
<div class="fl w-50 w-third-m w-25-ns">
7+
<div class="aspect-ratio aspect-ratio--6x4">
8+
<img style="background-image:url(http://mrmrs.io/images/0006.jpg);"
9+
class="db bg-center cover aspect-ratio--object" />
10+
</div>
11+
</div>
12+
<div class="fl w-50 w-third-m w-25-ns">
13+
<div class="aspect-ratio aspect-ratio--6x4">
14+
<img style="background-image:url(http://mrmrs.io/images/0002.jpg);"
15+
class="db bg-center cover aspect-ratio--object" />
16+
</div>
17+
</div>
18+
<div class="fl w-50 w-third-m w-25-ns">
19+
<div class="aspect-ratio aspect-ratio--6x4">
20+
<img style="background-image:url(http://mrmrs.io/images/0003.jpg);"
21+
class="db bg-center cover aspect-ratio--object" />
22+
</div>
23+
</div>
24+
<div class="fl w-50 w-third-m w-25-ns">
25+
<div class="aspect-ratio aspect-ratio--6x4">
26+
<img style="background-image:url(http://mrmrs.io/images/0004.jpg);"
27+
class="db bg-center cover aspect-ratio--object" />
28+
</div>
29+
</div>
30+
<div class="fl w-50 w-third-m w-25-ns">
31+
<div class="aspect-ratio aspect-ratio--6x4">
32+
<img style="background-image:url(http://mrmrs.io/images/0007.jpg);"
33+
class="db bg-center cover aspect-ratio--object" />
34+
</div>
35+
</div>
36+
<div class="fl w-50 w-third-m w-25-ns">
37+
<div class="aspect-ratio aspect-ratio--6x4">
38+
<img style="background-image:url(http://mrmrs.io/images/0008.jpg);"
39+
class="db bg-center cover aspect-ratio--object" />
40+
</div>
41+
</div>
42+
<div class="fl w-50 w-third-m w-25-ns">
43+
<div class="aspect-ratio aspect-ratio--6x4">
44+
<img style="background-image:url(http://mrmrs.io/images/0009.jpg);"
45+
class="db bg-center cover aspect-ratio--object" />
46+
</div>
47+
</div>
48+
<div class="fl w-50 w-third-m w-25-ns">
49+
<div class="aspect-ratio aspect-ratio--6x4">
50+
<img style="background-image:url(http://mrmrs.io/images/0010.jpg);"
51+
class="db bg-center cover aspect-ratio--object" />
52+
</div>
53+
</div>
54+
<div class="fl w-50 w-third-m w-25-ns">
55+
<div class="aspect-ratio aspect-ratio--6x4">
56+
<img style="background-image:url(http://mrmrs.io/images/0011.jpg);"
57+
class="db bg-center cover aspect-ratio--object" />
58+
</div>
59+
</div>
60+
<div class="fl w-50 w-third-m w-25-ns">
61+
<div class="aspect-ratio aspect-ratio--6x4">
62+
<img style="background-image:url(http://mrmrs.io/images/0012.jpg);"
63+
class="db bg-center cover aspect-ratio--object" />
64+
</div>
65+
</div>
66+
<div class="fl w-50 w-third-m w-25-ns">
67+
<div class="aspect-ratio aspect-ratio--6x4">
68+
<img style="background-image:url(http://mrmrs.io/images/0013.jpg);"
69+
class="db bg-center cover aspect-ratio--object" />
70+
</div>
71+
</div>
72+
<div class="fl w-50 w-third-m w-25-ns">
73+
<div class="aspect-ratio aspect-ratio--6x4">
74+
<img style="background-image:url(http://mrmrs.io/images/0014.jpg);"
75+
class="db bg-center cover aspect-ratio--object" />
76+
</div>
77+
</div>
78+
<div class="fl w-50 w-third-m w-25-ns">
79+
<div class="aspect-ratio aspect-ratio--6x4">
80+
<img style="background-image:url(http://mrmrs.io/images/0015.jpg);"
81+
class="db bg-center cover aspect-ratio--object" />
82+
</div>
83+
</div>
84+
<div class="fl w-50 w-third-m w-25-ns">
85+
<div class="aspect-ratio aspect-ratio--6x4">
86+
<img style="background-image:url(http://mrmrs.io/images/0016.jpg);"
87+
class="db bg-center cover aspect-ratio--object" />
88+
</div>
89+
</div>
90+
<div class="fl w-50 w-third-m w-25-ns">
91+
<div class="aspect-ratio aspect-ratio--6x4">
92+
<img style="background-image:url(http://mrmrs.io/images/0017.jpg);"
93+
class="db bg-center cover aspect-ratio--object" />
94+
</div>
95+
</div>
96+
<div class="fl w-50 w-third-m w-25-ns">
97+
<div class="aspect-ratio aspect-ratio--6x4">
98+
<img style="background-image:url(http://mrmrs.io/images/0018.jpg);"
99+
class="db bg-center cover aspect-ratio--object" />
100+
</div>
101+
</div>
102+
<div class="fl w-50 w-third-m w-25-ns">
103+
<div class="aspect-ratio aspect-ratio--6x4">
104+
<img style="background-image:url(http://mrmrs.io/images/0019.jpg);"
105+
class="db bg-center cover aspect-ratio--object" />
106+
</div>
107+
</div>
108+
<div class="fl w-50 w-third-m w-25-ns">
109+
<div class="aspect-ratio aspect-ratio--6x4">
110+
<img style="background-image:url(http://mrmrs.io/images/0020.jpg);"
111+
class="db bg-center cover aspect-ratio--object" />
112+
</div>
113+
</div>
114+
<div class="fl w-50 w-third-m w-25-ns">
115+
<div class="aspect-ratio aspect-ratio--6x4">
116+
<img style="background-image:url(http://mrmrs.io/images/0021.jpg);"
117+
class="db bg-center cover aspect-ratio--object" />
118+
</div>
119+
</div>
120+
<div class="fl w-50 w-third-m w-25-ns">
121+
<div class="aspect-ratio aspect-ratio--6x4">
122+
<img style="background-image:url(http://mrmrs.io/images/0022.jpg);"
123+
class="db bg-center cover aspect-ratio--object" />
124+
</div>
125+
</div>
126+
</main>

‎src/components/layout/full-bleed-7x5.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
5+
<main class="cf w-100">
6+
<div class="fl w-50 w-third-m w-25-ns">
7+
<div class="aspect-ratio aspect-ratio--7x5">
8+
<img style="background-image:url(http://mrmrs.io/images/0006.jpg);"
9+
class="db bg-center cover aspect-ratio--object" />
10+
</div>
11+
</div>
12+
<div class="fl w-50 w-third-m w-25-ns">
13+
<div class="aspect-ratio aspect-ratio--7x5">
14+
<img style="background-image:url(http://mrmrs.io/images/0002.jpg);"
15+
class="db bg-center cover aspect-ratio--object" />
16+
</div>
17+
</div>
18+
<div class="fl w-50 w-third-m w-25-ns">
19+
<div class="aspect-ratio aspect-ratio--7x5">
20+
<img style="background-image:url(http://mrmrs.io/images/0003.jpg);"
21+
class="db bg-center cover aspect-ratio--object" />
22+
</div>
23+
</div>
24+
<div class="fl w-50 w-third-m w-25-ns">
25+
<div class="aspect-ratio aspect-ratio--7x5">
26+
<img style="background-image:url(http://mrmrs.io/images/0004.jpg);"
27+
class="db bg-center cover aspect-ratio--object" />
28+
</div>
29+
</div>
30+
<div class="fl w-50 w-third-m w-25-ns">
31+
<div class="aspect-ratio aspect-ratio--7x5">
32+
<img style="background-image:url(http://mrmrs.io/images/0007.jpg);"
33+
class="db bg-center cover aspect-ratio--object" />
34+
</div>
35+
</div>
36+
<div class="fl w-50 w-third-m w-25-ns">
37+
<div class="aspect-ratio aspect-ratio--7x5">
38+
<img style="background-image:url(http://mrmrs.io/images/0008.jpg);"
39+
class="db bg-center cover aspect-ratio--object" />
40+
</div>
41+
</div>
42+
<div class="fl w-50 w-third-m w-25-ns">
43+
<div class="aspect-ratio aspect-ratio--7x5">
44+
<img style="background-image:url(http://mrmrs.io/images/0009.jpg);"
45+
class="db bg-center cover aspect-ratio--object" />
46+
</div>
47+
</div>
48+
<div class="fl w-50 w-third-m w-25-ns">
49+
<div class="aspect-ratio aspect-ratio--7x5">
50+
<img style="background-image:url(http://mrmrs.io/images/0010.jpg);"
51+
class="db bg-center cover aspect-ratio--object" />
52+
</div>
53+
</div>
54+
<div class="fl w-50 w-third-m w-25-ns">
55+
<div class="aspect-ratio aspect-ratio--7x5">
56+
<img style="background-image:url(http://mrmrs.io/images/0011.jpg);"
57+
class="db bg-center cover aspect-ratio--object" />
58+
</div>
59+
</div>
60+
<div class="fl w-50 w-third-m w-25-ns">
61+
<div class="aspect-ratio aspect-ratio--7x5">
62+
<img style="background-image:url(http://mrmrs.io/images/0012.jpg);"
63+
class="db bg-center cover aspect-ratio--object" />
64+
</div>
65+
</div>
66+
<div class="fl w-50 w-third-m w-25-ns">
67+
<div class="aspect-ratio aspect-ratio--7x5">
68+
<img style="background-image:url(http://mrmrs.io/images/0013.jpg);"
69+
class="db bg-center cover aspect-ratio--object" />
70+
</div>
71+
</div>
72+
<div class="fl w-50 w-third-m w-25-ns">
73+
<div class="aspect-ratio aspect-ratio--7x5">
74+
<img style="background-image:url(http://mrmrs.io/images/0014.jpg);"
75+
class="db bg-center cover aspect-ratio--object" />
76+
</div>
77+
</div>
78+
<div class="fl w-50 w-third-m w-25-ns">
79+
<div class="aspect-ratio aspect-ratio--7x5">
80+
<img style="background-image:url(http://mrmrs.io/images/0015.jpg);"
81+
class="db bg-center cover aspect-ratio--object" />
82+
</div>
83+
</div>
84+
<div class="fl w-50 w-third-m w-25-ns">
85+
<div class="aspect-ratio aspect-ratio--7x5">
86+
<img style="background-image:url(http://mrmrs.io/images/0016.jpg);"
87+
class="db bg-center cover aspect-ratio--object" />
88+
</div>
89+
</div>
90+
<div class="fl w-50 w-third-m w-25-ns">
91+
<div class="aspect-ratio aspect-ratio--7x5">
92+
<img style="background-image:url(http://mrmrs.io/images/0017.jpg);"
93+
class="db bg-center cover aspect-ratio--object" />
94+
</div>
95+
</div>
96+
<div class="fl w-50 w-third-m w-25-ns">
97+
<div class="aspect-ratio aspect-ratio--7x5">
98+
<img style="background-image:url(http://mrmrs.io/images/0018.jpg);"
99+
class="db bg-center cover aspect-ratio--object" />
100+
</div>
101+
</div>
102+
<div class="fl w-50 w-third-m w-25-ns">
103+
<div class="aspect-ratio aspect-ratio--7x5">
104+
<img style="background-image:url(http://mrmrs.io/images/0019.jpg);"
105+
class="db bg-center cover aspect-ratio--object" />
106+
</div>
107+
</div>
108+
<div class="fl w-50 w-third-m w-25-ns">
109+
<div class="aspect-ratio aspect-ratio--7x5">
110+
<img style="background-image:url(http://mrmrs.io/images/0020.jpg);"
111+
class="db bg-center cover aspect-ratio--object" />
112+
</div>
113+
</div>
114+
<div class="fl w-50 w-third-m w-25-ns">
115+
<div class="aspect-ratio aspect-ratio--7x5">
116+
<img style="background-image:url(http://mrmrs.io/images/0021.jpg);"
117+
class="db bg-center cover aspect-ratio--object" />
118+
</div>
119+
</div>
120+
<div class="fl w-50 w-third-m w-25-ns">
121+
<div class="aspect-ratio aspect-ratio--7x5">
122+
<img style="background-image:url(http://mrmrs.io/images/0022.jpg);"
123+
class="db bg-center cover aspect-ratio--object" />
124+
</div>
125+
</div>
126+
</main>

0 commit comments

Comments
 (0)