diff --git a/website/src/css/design3.css b/website/src/css/design3.css
index 30f7deb644..d53e48e6c2 100644
--- a/website/src/css/design3.css
+++ b/website/src/css/design3.css
@@ -216,7 +216,7 @@
/* Compute cover drawn size and inner safe frame (60% of full image on each axis) */
/* --cover-bg-w: calc(min((3200 / 1920) * 100vw, (3200 / 1080) * 100vh));
--cover-bg-h: calc(min((1800 / 1920) * 100vw, (1800 / 1080) * 100vh));
- --cover-safe-w: calc(var(--cover-bg-w) * 0.6);
+ --cover-safe-w: calc(var(--cover-bg-w) * 0.6);
--cover-safe-h: calc(var(--cover-bg-h) * 0.6);
--cover-vw: calc(var(--cover-safe-w) / 100);
--cover-vh: calc(var(--cover-safe-h) / 100); */
@@ -701,7 +701,7 @@ main .section-bg {
}
}
-.page-6 .communities-images {
+.page-6 .group-images {
position: absolute;
top: 0;
right: 0;
@@ -716,14 +716,14 @@ main .section-bg {
gap: calc(var(--sec-vwu-desktop) * 2);
}
-.page-6 .communities-images img {
+.page-6 .group-images img {
width: 100%;
height: auto;
border-radius: calc(var(--sec-vhu-desktop) * 1.8);
}
@media screen and (max-width: 767px) {
- .page-6 .communities-images {
+ .page-6 .group-images {
width: 100%;
height: 10%;
padding: calc(var(--sec-vhu-desktop) * 6) calc(var(--sec-vwu-desktop) * 3);
@@ -734,76 +734,78 @@ main .section-bg {
gap: calc(var(--sec-vwu-desktop) * 1.5);
}
- .page-6 .communities-images img {
+ .page-6 .group-images img {
border-radius: calc(var(--sec-vhu-desktop) * 0.8);
}
}
-/*
+/*
Utility: position an image on the grid using CSS vars
Usage example:
- places the image starting at column 3, row 2, spanning 2 columns × 2 rows.
+ places the image starting at column 3, row 2, spanning 2 columns × 2 rows.
*/
-.page-6 .communities-images>img:nth-child(1) { --c: 2; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(2) { --c: 4; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(3) { --c: 5; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(4) { --c: 7; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(5) { --c: 1; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(6) { --c: 3; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(7) { --c: 4; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(8) { --c: 5; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(9) { --c: 6; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(10) { --c: 8; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(11) { --c: 2; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(12) { --c: 3; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(13) { --c: 4; --r: 3; --w: 2; --h: 2 }
-.page-6 .communities-images>img:nth-child(14) { --c: 6; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(15) { --c: 7; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(16) { --c: 1; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(17) { --c: 3; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(18) { --c: 6; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(19) { --c: 8; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(20) { --c: 2; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(21) { --c: 4; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(22) { --c: 5; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(23) { --c: 6; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(24) { --c: 7; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(25) { --c: 3; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(26) { --c: 4; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(27) { --c: 6; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.simplex-image { --c: 4; --r: 3; --w: 2; --h: 2 }
+
+.page-6 .group-images>a.group-image:nth-child(1) { --c: 2; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(2) { --c: 4; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(3) { --c: 5; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(4) { --c: 7; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(5) { --c: 1; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(6) { --c: 3; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(7) { --c: 4; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(8) { --c: 5; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(9) { --c: 6; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(10) { --c: 8; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(11) { --c: 2; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(12) { --c: 3; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(14) { --c: 6; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(15) { --c: 7; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(16) { --c: 1; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(17) { --c: 3; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(18) { --c: 6; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(19) { --c: 8; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(20) { --c: 2; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(21) { --c: 4; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(22) { --c: 5; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(23) { --c: 6; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(24) { --c: 7; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(25) { --c: 3; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(26) { --c: 4; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(27) { --c: 6; --r: 6; --w: 1; --h: 1 }
@media screen and (max-width: 767px) {
-.page-6 .communities-images>img:nth-child(1) { --c: 3; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(2) { --c: 6; --r: 1; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(3) { --c: 2; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(4) { --c: 4; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(5) { --c: 5; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(6) { --c: 7; --r: 2; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(7) { --c: 3; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(8) { --c: 4; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(9) { --c: 5; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(10) { --c: 6; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(11) { --c: 8; --r: 3; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(12) { --c: 2; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(13) { --c: 4; --r: 4; --w: 2; --h: 2 }
-.page-6 .communities-images>img:nth-child(14) { --c: 3; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(15) { --c: 6; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(16) { --c: 7; --r: 4; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(17) { --c: 1; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(18) { --c: 3; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(19) { --c: 6; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(20) { --c: 7; --r: 5; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(21) { --c: 2; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(22) { --c: 4; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(23) { --c: 5; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(24) { --c: 6; --r: 6; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(25) { --c: 3; --r: 7; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(26) { --c: 4; --r: 7; --w: 1; --h: 1 }
-.page-6 .communities-images>img:nth-child(27) { --c: 6; --r: 7; --w: 1; --h: 1 }
+.page-6 .group-images>a.simplex-image { --c: 4; --r: 4; --w: 2; --h: 2 }
+
+.page-6 .group-images>a.group-image:nth-child(1) { --c: 3; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(2) { --c: 6; --r: 1; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(3) { --c: 2; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(4) { --c: 4; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(5) { --c: 5; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(6) { --c: 7; --r: 2; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(7) { --c: 3; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(8) { --c: 4; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(9) { --c: 5; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(10) { --c: 6; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(11) { --c: 8; --r: 3; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(12) { --c: 2; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(14) { --c: 3; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(15) { --c: 6; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(16) { --c: 7; --r: 4; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(17) { --c: 1; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(18) { --c: 3; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(19) { --c: 6; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(20) { --c: 7; --r: 5; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(21) { --c: 2; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(22) { --c: 4; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(23) { --c: 5; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(24) { --c: 6; --r: 6; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(25) { --c: 3; --r: 7; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(26) { --c: 4; --r: 7; --w: 1; --h: 1 }
+.page-6 .group-images>a.group-image:nth-child(27) { --c: 6; --r: 7; --w: 1; --h: 1 }
}
-.page-6 .communities-images img {
+.page-6 .group-images a {
grid-column: var(--c) / span var(--w, 1);
grid-row: var(--r) / span var(--h, 1);
}
diff --git a/website/src/index.html b/website/src/index.html
index 07e1d9b6fd..35cb9448e9 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -13,13 +13,13 @@
{#
#}
-
+