Implement image galleries

public/css/index.css

@@ -59,7 +59,7 @@
 	--text-color-link: var(--text-color);
 	--text-color-tag: var(--contrast-color);
 
-	/* Font Size Scaling Tokens - https://utopia.fyi/ */
+	/* Font Size Scaling Tokens - https://utopia.fyi/type/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
 	--step--2: clamp(0.8681rem, 0.8163rem + 0.259vw, 0.96rem);
 	--step--1: clamp(1.0417rem, 0.9525rem + 0.446vw, 1.2rem);
 	--step-0: clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem);
@@ -72,7 +72,7 @@
 	--step-7: clamp(4.479rem, 2.9727rem + 7.5312vw, 7.1526rem);
 	--step-8: clamp(5.3748rem, 3.3658rem + 10.0449vw, 8.9407rem);
 
-	/* Space Scaling Tokens - https://utopia.fyi/ */
+	/* Space Scaling Tokens - https://utopia.fyi/space/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|5|6|7|8|9|10|11|12,s-l&g=s,s,l,12 */
 	--space-3xs: clamp(0.3125rem, 0.2773rem + 0.1761vw, 0.375rem);
 	--space-2xs: clamp(0.625rem, 0.5546rem + 0.3521vw, 0.75rem);
 	--space-xs: clamp(0.9375rem, 0.8319rem + 0.5282vw, 1.125rem);
@@ -81,9 +81,16 @@
 	--space-l: clamp(2.5rem, 2.2183rem + 1.4085vw, 3rem);
 	--space-xl: clamp(3.75rem, 3.3275rem + 2.1127vw, 4.5rem);
 	--space-2xl: clamp(5rem, 4.4366rem + 2.8169vw, 6rem);
-	--space-3xl: clamp(7.5rem, 6.6549rem + 4.2254vw, 9rem);
+	--space-3xl: clamp(6.25rem, 5.5458rem + 3.5211vw, 7.5rem);
+	--space-4xl: clamp(7.5rem, 6.6549rem + 4.2254vw, 9rem);
+	--space-5xl: clamp(8.75rem, 7.7641rem + 4.9296vw, 10.5rem);
+	--space-6xl: clamp(10rem, 8.8732rem + 5.6338vw, 12rem);
+	--space-7xl: clamp(11.25rem, 9.9824rem + 6.338vw, 13.5rem);
+	--space-8xl: clamp(12.5rem, 11.0915rem + 7.0423vw, 15rem);
+	--space-9xl: clamp(13.75rem, 12.2007rem + 7.7465vw, 16.5rem);
+	--space-10xl: clamp(15rem, 13.3099rem + 8.4507vw, 18rem);
 
-	/* One-up pairs - https://utopia.fyi/ */
+	/* One-up pairs */
 	--space-3xs-2xs: clamp(0.3125rem, 0.066rem + 1.2324vw, 0.75rem);
 	--space-2xs-xs: clamp(0.625rem, 0.3433rem + 1.4085vw, 1.125rem);
 	--space-xs-s: clamp(0.9375rem, 0.6206rem + 1.5845vw, 1.5rem);
@@ -91,12 +98,19 @@
 	--space-m-l: clamp(1.875rem, 1.2412rem + 3.169vw, 3rem);
 	--space-l-xl: clamp(2.5rem, 1.3732rem + 5.6338vw, 4.5rem);
 	--space-xl-2xl: clamp(3.75rem, 2.4824rem + 6.338vw, 6rem);
-	--space-2xl-3xl: clamp(5rem, 2.7465rem + 11.2676vw, 9rem);
+	--space-2xl-3xl: clamp(5rem, 3.5915rem + 7.0423vw, 7.5rem);
+	--space-3xl-4xl: clamp(6.25rem, 4.7007rem + 7.7465vw, 9rem);
+	--space-4xl-5xl: clamp(7.5rem, 5.8099rem + 8.4507vw, 10.5rem);
+	--space-5xl-6xl: clamp(8.75rem, 6.919rem + 9.1549vw, 12rem);
+	--space-6xl-7xl: clamp(10rem, 8.0282rem + 9.8592vw, 13.5rem);
+	--space-7xl-8xl: clamp(11.25rem, 9.1373rem + 10.5634vw, 15rem);
+	--space-8xl-9xl: clamp(12.5rem, 10.2465rem + 11.2676vw, 16.5rem);
+	--space-9xl-10xl: clamp(13.75rem, 11.3556rem + 11.9718vw, 18rem);
 
-	/* Custom pairs - https://utopia.fyi/ */
+	/* Custom pairs */
 	--space-s-l: clamp(1.25rem, 0.2641rem + 4.9296vw, 3rem);
 
-	/* Fluid Grid Tokens - https://utopia.fyi/ */
+	/* Fluid Grid Tokens - https://utopia.fyi/grid/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,s,l,12 */
 	--grid-max-width: 55.5rem;
 	--grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem));
 	--grid-columns: 12;
@@ -208,6 +222,18 @@ body {
 	padding-top: var(--space-m);
 	padding-bottom: var(--space-m);
 }
+button {
+	height: var(--space-m-l);
+}
+.buttonContainer {
+	display: flex;
+	flex-flow: row nowrap;
+	column-gap: var(--space-xs);
+	margin-bottom: var(--space-m);
+	button {
+		margin-top: var(--space-s);
+	}
+}
 button,
 .nav-item {
 	font-family: var(--font-family-ui);
@@ -908,6 +934,22 @@ article.post {
 		margin: var(--space-2xs) auto;
 	}
 }
+.gallery-images {
+	display: flex;
+	flex-flow: row wrap;
+	row-gap: var(--space-xs-s);
+	column-gap: var(--space-m-l);
+	.gallery-image-container {
+		width: var(--space-7xl-8xl);
+		height: var(--space-7xl-8xl);
+		.gallery-image {
+			border-radius: var(--border-radius);
+			width: var(--space-7xl-8xl);
+			height: var(--space-7xl-8xl);
+			object-fit: cover;
+		}
+	}
+}
 /* Add fleuron after <p> in article when footnotes are present */
 p:has(+ hr.footnotes-sep):after {
 	content: "\2766";