feat: implement the new design for the initiatives page (resolves #433)…

… (#434)

src/_includes/components/workshop.njk

@@ -1,10 +1,15 @@
-<article class="workshop">
-	<h2>{{ workshop.title | safe }}</h2>
-	{% if workshop.imageUrl %}
-	<a href="/initiatives/{{ workshop.id }}">
-		<img class="workshop-image" src="{{ workshop.imageUrl | safe }}" alt="{{ workshop.imageAlt }}">
-	</a>
-	{% endif %}
-
-	<div class="description">{{ workshop.shortDescription | safe }}</div>
-</article>
+<div class="one-workshop">
+	<div class="workshop-narrative">
+		<h2 class="h3"><a href="/initiatives/{{ workshop.id }}">{{ workshop.title | safe }}</a></h2>
+		<div class="description">{{ workshop.shortDescription | safe }}</div>
+	</div>
+	<div class="workshop-image">
+		<a href="/initiatives/{{ workshop.id }}">
+			{% if workshop.previewImageUrl %}
+				<img src="{{ workshop.previewImageUrl | safe }}" alt="{{ workshop.imageAlt }}">
+			{% else %}
+				<img src="/images/workshop.png" alt="{{ workshop.title | safe }}">
+			{% endif %}
+		</a>
+	</div>
+</div>

src/page.njk

@@ -41,14 +41,13 @@ permalink: "/{{ '/' if pageItem.slug === 'home' else pageItem.slug	}}/"
 	<h1 class="title">{{ pageTitle }}</h1>
 	<div class="api-content">
 		{{ pageItem.content | safe }}
-	</div>
 
-	<div>
-		{% for workshop in collections.workshops %}
-		<div class="api-content">
-			{% include "components/workshop.njk" %}
+		<div class="workshops">
+			{% for workshop in collections.workshops %}
+				{% include "components/workshop.njk" %}
+			{% endfor %}
 		</div>
-		{% endfor %}
+
 	</div>
 </article>
 

src/scss/abstracts/_mixins.scss

@@ -158,11 +158,19 @@
 	}
 
 	// Initiatives page: Workshop section
-	.workshop {
+	.one-workshop {
+		box-shadow: rem(0) rem(0) rem(7) currentColor;
+
+		&:hover {
+			box-shadow: 0 0 rem(35) currentColor;
+		}
+	}
+
+	.workshop-image {
 		a:focus,
 		a:hover {
 			img {
-				box-shadow: rem(-10) rem(10) rem(10) currentColor;
+				box-shadow: 0 0 0 rem(4) currentColor inset;
 			}
 		}
 	}

src/scss/abstracts/_variables.scss

@@ -28,6 +28,7 @@ $black: #000;
 $grey-lighter: #f3f3f3;
 $grey-light: #6c6c6c;
 $grey-dark: #313131;
+$grey-shade: #c4c4c4;
 $navy-dark: #162439;
 $navy: #203149;
 $navy-light: #2e405b;

src/scss/components/_initiatives.scss

@@ -1,26 +1,76 @@
 // Initiatives page: Workshop section
-.workshop {
-	padding: 0;
+.workshops {
+	// Every workshop card
+	.one-workshop {
+		border-radius: rem(18);
+		box-shadow: rem(0) rem(0) rem(7) rgba(0, 0, 0, 0.25);
+		display: grid;
+		grid-template-rows: auto rem(227);
+		margin: rem(32) 0 rem(32) 0;
+
+		&:hover {
+			box-shadow: 0 0 rem(35) rgba(0, 0, 0, 0.55);
+		}
+
+		// Workshop title and descriptions
+		.workshop-narrative {
+			border-radius: rem(18) rem(18) 0 0;
+			min-height: rem(350);
+			padding: 0 rem(16) rem(16) rem(16);
 
-	a:focus,
-	a:hover {
-		img {
-			box-shadow: rem(-10) rem(10) rem(10) rgba(0, 0, 0, 0.25);
+			// Workshop titles
+			h2 {
+				border-bottom: rem(2) solid $grey-shade;
+				padding-bottom: rem(16);
+			}
 		}
-	}
-}
 
-.workshop-image {
-	max-width: 100%;
+		// Workshop images
+		.workshop-image {
+			// In order to apply border-radius, all inner elements need to have the same border-radius applied.
+			// This includes the wrapper div.workshop-image and inner img element.
+
+			border-radius: 0 0 rem(18) rem(18);
+			height: 100%;
+
+			img {
+				border-radius: 0 0 rem(18) rem(18);
+				box-shadow: 0 0 0 rem(4) transparent inset;
+				height: 100%;
+				// Add initial padding to leave room for the inset box shadow to display at focus/hover
+				padding: rem(4);
+				width: 100%;
+			}
+
+			a:focus,
+			a:hover {
+				// Override the default background-color for a:hover
+				background-color: transparent;
+
+				img {
+					box-shadow: 0 0 0 rem(4) $navy-light inset;
+				}
+			}
+		}
+	}
 }
 
 // Workshop page
-.workshop-page .description {
-	margin-bottom: rem(100);
+.workshop-page {
+	.workshop-cover-image {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		max-width: 100%;
+	}
 
-	h3 {
-		border-bottom: rem(5) solid $gold;
-		line-height: rem(60);
+	.description {
+		margin-bottom: rem(100);
+
+		h3 {
+			border-bottom: rem(5) solid $gold;
+			line-height: rem(60);
+		}
 	}
 }
 
@@ -194,6 +244,30 @@
 }
 
 @include breakpoint-up(lg) {
+	// Initiatives page: Workshop section
+	.workshops {
+		.one-workshop {
+			grid-template-columns: 70% 30%;
+			grid-template-rows: 100%;
+
+			.workshop-narrative {
+				border-radius: rem(18) 0 0 rem(18);
+				min-height: rem(336);
+				padding: 0 rem(16) 0 rem(32);
+			}
+
+			// In order to apply border-radius, all inner elements need to have the same border-radius applied.
+			// This includes the wrapper div.workshop-image and inner img element.
+			.workshop-image {
+				border-radius: 0 rem(18) rem(18) 0;
+
+				img {
+					border-radius: 0 rem(18) rem(18) 0;
+				}
+			}
+		}
+	}
+
 	#comment-form button {
 		width: auto;
 	}

src/utils/data-fetcher-airtable.js

@@ -23,7 +23,8 @@ module.exports = {
 				sort: [{field: "date", direction: "desc"}]
 			}).eachPage(function page(records, fetchNextPage) {
 				records.forEach(record => {
-					let image = record.get("image");
+					let previewImage = record.get("preview_image");
+					let coverImage = record.get("cover_image");
 					let title = record.get("title");
 					let shortDescription = record.get("short_description");
 					let fullDescription = record.get("full_description");
@@ -59,7 +60,8 @@ module.exports = {
 						date: record.get("date"),
 						shortDescription: shortDescription ? md.render(shortDescription) : undefined,
 						fullDescription: fullDescription ? md.render(fullDescription) : undefined,
-						imageUrl: image ? image[0].url : undefined,
+						previewImageUrl: previewImage ? previewImage[0].url : undefined,
+						coverImageUrl: coverImage ? coverImage[0].url : undefined,
 						imageAlt: record.get("image_alt"),
 						comments
 					});

src/workshop-comments.njk

@@ -12,8 +12,8 @@ permalink: "initiatives/{{ workshopItem.id }}/"
 {% block content %}
 	<article class="workshop-page">
 		<h1>{{ workshopItem.title | safe }}</h1>
-		{% if workshopItem.imageUrl %}
-			<img class="workshop-image" src="{{ workshopItem.imageUrl | safe }}" alt="{{ workshopItem.imageAlt }}">
+		{% if workshopItem.coverImageUrl %}
+		<img class="workshop-cover-image" src="{{ workshopItem.coverImageUrl | safe }}" alt="{{ workshopItem.imageAlt }}">
 		{% endif %}
 
 		<div class="description">{{ workshopItem.fullDescription | safe }}</div>