From 7857bb7ea0a09e5dbd3d55f51a9f7852a2ede78e Mon Sep 17 00:00:00 2001
From: James Hunt <10615884+thetwopct@users.noreply.github.com>
Date: Sat, 19 Aug 2023 00:14:26 +0100
Subject: [PATCH 1/8] Learning Journey

Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>
---
 .../lf-mu/public/class-lf-mu-public.php       |  10 +-
 .../acf-json/group_64de953286db1.json         |  87 +++++++
 .../acf-json/group_64de963e397f7.json         |  62 +++++
 .../blocks/learning-journey-item/block.json   |  48 ++++
 .../learning-journey-item.php                 |  64 +++++
 .../learning-journey-navigation/block.json    |  57 +++++
 .../learning-journey-navigation/editor.css    |   1 +
 .../learning-journey-navigation/editor.scss   |  13 +
 .../learning-journey-navigation.css           |   1 +
 .../learning-journey-navigation.php           |  45 ++++
 .../learning-journey-navigation.scss          |  92 +++++++
 .../learning-journey-navigation/menu.php      |  63 +++++
 .../learning-journey-section/block.json       |  49 ++++
 .../learning-journey-section/editor.css       |   1 +
 .../learning-journey-section/editor.scss      |  13 +
 .../learning-journey-section.php              |  49 ++++
 .../blocks/learning-journey/block.json        |  64 +++++
 .../blocks/learning-journey/editor.css        |   1 +
 .../blocks/learning-journey/editor.scss       |  13 +
 .../learning-journey/learning-journey.css     |   1 +
 .../learning-journey/learning-journey.php     |  59 +++++
 .../learning-journey/learning-journey.scss    | 240 ++++++++++++++++++
 .../themes/cncf-twenty-two/includes/acf.php   |   4 +
 23 files changed, 1033 insertions(+), 4 deletions(-)
 create mode 100644 web/wp-content/themes/cncf-twenty-two/acf-json/group_64de953286db1.json
 create mode 100644 web/wp-content/themes/cncf-twenty-two/acf-json/group_64de963e397f7.json
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-item/block.json
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-item/learning-journey-item.php
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/block.json
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/editor.css
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/editor.scss
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.css
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.php
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.scss
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/menu.php
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/block.json
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/editor.css
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/editor.scss
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/learning-journey-section.php
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/block.json
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/editor.css
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/editor.scss
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.php
 create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss

diff --git a/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/public/class-lf-mu-public.php b/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/public/class-lf-mu-public.php
index fac109a6d..59995a387 100644
--- a/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/public/class-lf-mu-public.php
+++ b/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/public/class-lf-mu-public.php
@@ -336,12 +336,13 @@ public function add_header_cache() {
 	/**
 	 * This is a temporary fix for the disappearing meta tags from TSF. See https://github.com/cncf/cncf.io/issues/642.
 	 *
-	 * @param bool $supported Input param
+	 * @param bool $supported Input param.
 	 */
 	public function tsf_meta_temp_fix( $supported ) {
-		// If it's already supported, we didn't encounter the bug; circle back:
-		if ( $supported )
+		// If it's already supported, we didn't encounter the bug; circle back.
+		if ( $supported ) {
 			return $supported;
+		}
 
 		$tsf = tsf();
 
@@ -374,8 +375,9 @@ public function tsf_meta_temp_fix( $supported ) {
 				$supported = true;
 		}
 
-		if ( ! $supported && $tsf->is_query_exploited() )
+		if ( ! $supported && $tsf->is_query_exploited() ) {
 			$supported = true;
+		}
 
 		return $supported;
 	}
diff --git a/web/wp-content/themes/cncf-twenty-two/acf-json/group_64de953286db1.json b/web/wp-content/themes/cncf-twenty-two/acf-json/group_64de953286db1.json
new file mode 100644
index 000000000..52a559dd3
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/acf-json/group_64de953286db1.json
@@ -0,0 +1,87 @@
+{
+    "key": "group_64de953286db1",
+    "title": "Block - Learning Journey Section",
+    "fields": [
+        {
+            "key": "field_64dea2d8a18e9",
+            "label": "Section Number",
+            "name": "ljs_section_number",
+            "aria-label": "",
+            "type": "number",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": 0,
+            "min": "",
+            "max": "",
+            "placeholder": "",
+            "step": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_64de95327f2d7",
+            "label": "Title",
+            "name": "ljs_title",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "Title",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_64de95f3da7d0",
+            "label": "Last Section?",
+            "name": "ljs_last_section",
+            "aria-label": "",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "message": "",
+            "default_value": 0,
+            "ui": 0,
+            "ui_on_text": "",
+            "ui_off_text": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "lf\/learning-journey-section"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1692364418
+}
diff --git a/web/wp-content/themes/cncf-twenty-two/acf-json/group_64de963e397f7.json b/web/wp-content/themes/cncf-twenty-two/acf-json/group_64de963e397f7.json
new file mode 100644
index 000000000..d8113999a
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/acf-json/group_64de963e397f7.json
@@ -0,0 +1,62 @@
+{
+    "key": "group_64de963e397f7",
+    "title": "Block - Learning Journey Item",
+    "fields": [
+        {
+            "key": "field_64de963ec5c38",
+            "label": "Title",
+            "name": "lji_title",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "Title",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_64de966dc5c39",
+            "label": "Link",
+            "name": "lji_link",
+            "aria-label": "",
+            "type": "url",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "placeholder": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "lf\/learning-journey-item"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1692364254
+}
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-item/block.json b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-item/block.json
new file mode 100644
index 000000000..7f142cb12
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-item/block.json
@@ -0,0 +1,48 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "lf/learning-journey-item",
+	"title": "Learning Journey Item",
+	"description": "A item within the Learning Journey",
+	"editorScript": [],
+	"category": "lf",
+	"icon": "editor-insertmore",
+	"parent": ["lf/learning-journey-section"],
+	"keywords": [
+		"learning journey",
+		"",
+		""
+	],
+	"acf": {
+		"mode": "preview",
+		"renderTemplate": "learning-journey-item.php",
+		"postTypes": [ "page" ]
+	},
+	"supports": {
+		"mode": false,
+		"align": false,
+		"alignWide": false,
+		"alignContent": false,
+		"alignText": false,
+		"anchor": false,
+		"color": {
+			"background": true,
+			"gradients": false,
+			"link": false,
+			"text": false
+		},
+		"fullHeight": false,
+		"html": false,
+		"multiple": true,
+		"spacing": {
+			"margin": false,
+			"padding": false
+		},
+		"typography": {
+			"fontSize": false,
+			"lineHeight": false
+		},
+		"layout": true
+	},
+	"example": {}
+}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-item/learning-journey-item.php b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-item/learning-journey-item.php
new file mode 100644
index 000000000..b65563bcb
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-item/learning-journey-item.php
@@ -0,0 +1,64 @@
+<?php
+/**
+ * Learning Journey Item Block
+ *
+ * This block was generated by create-acf-block-json.
+ *
+ * @package WordPress
+ *
+ * @param   array $block The block settings and attributes.
+ * @param   string $content The block inner HTML (empty).
+ * @param   bool $is_preview True during AJAX preview.
+ * @param   (int|string) $post_id The post ID this block is saved to.
+ */
+
+// Block Name (sluggified).
+$block_name = 'learning-journey-item';
+
+$namespace = 'lf';
+
+// Create full block name to use in classes.
+$block_name = 'wp-block-' . $namespace . '-' . $block_name;
+
+// setup various classes sent through from $block.
+$background = ( empty( $block['backgroundColor'] ) ) ? '' : 'has-' . $block['backgroundColor'] . '-background-color';
+
+$has_background = $background ? 'has-background' : '';
+
+$additional_classes = $block['className'] ?? '';
+
+$all_classes = array(
+	$block_name,
+	$additional_classes,
+);
+
+$classes = implode( ' ', $all_classes );
+
+$inner_block_classes = implode(
+	' ',
+	array(
+		$background,
+		$has_background,
+		'timeline__item',
+	)
+);
+
+$lji_title = get_field( 'lji_title' );
+$lji_link  = get_field( 'lji_link' );
+
+?>
+
+<div class="<?php echo esc_attr( $classes ); ?>">
+	<div class="<?php echo esc_attr( $inner_block_classes ); ?>">
+
+	<?php
+	// Hide the link when in admin to stop editors clicking accidentally.
+	if ( ! is_admin() ) :
+		?>
+		<a class="box-link" href="<?php echo esc_url( $lji_link ); ?>" title="<?php echo esc_attr( $lji_title ); ?>"></a>
+		<?php
+	endif;
+	?>
+	<span><?php echo esc_html( $lji_title ); ?></span>
+	</div>
+</div>
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/block.json b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/block.json
new file mode 100644
index 000000000..ecb260bf9
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/block.json
@@ -0,0 +1,57 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "lf/learning-journey-navigation",
+	"title": "Learning Journey Navigation",
+	"description": "Navigation block for the Learning Journey block",
+	"style": "file:./learning-journey-navigation.css",
+	"editorStyle": "file:./editor.css",
+	"editorScript": [],
+	"category": "common",
+	"icon": "menu",
+	"keywords": [
+		"navigation",
+		"",
+		""
+	],
+	"acf": {
+		"mode": "preview",
+		"renderTemplate": "learning-journey-navigation.php"
+	},
+	"supports": {
+		"mode": false,
+		"align": false,
+		"alignWide": false,
+		"alignContent": false,
+		"alignText": false,
+		"anchor": true,
+		"className": true,
+		"color": {
+			"background": false,
+			"gradients": false,
+			"link": false,
+			"text": false,
+			"enableContrastChecker": false
+		},
+		"customClassName": false,
+		"defaultStylePicker": true,
+		"html": false,
+		"multiple": false,
+		"reusable": true,
+		"spacing": {
+			"margin": false,
+			"padding": false
+		},
+		"typography": {
+			"fontSize": false,
+			"lineHeight": false
+		}
+	},
+	"attributes": {
+		"variable": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"example": {}
+}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/editor.css b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/editor.css
new file mode 100644
index 000000000..41af9c2df
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/editor.css
@@ -0,0 +1 @@
+.wp-block.wp-block-lf-learning-journey-navigation{border:1px solid #757ba2;padding:1rem 0}.wp-block.wp-block-lf-learning-journey-navigation:before{color:#757ba2;content:"Learning Journey Nav";font-size:10px;left:1px;line-height:1;position:absolute;top:0}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/editor.scss b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/editor.scss
new file mode 100644
index 000000000..8142dba84
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/editor.scss
@@ -0,0 +1,13 @@
+.wp-block.wp-block-lf-learning-journey-navigation {
+	border: 1px solid #757ba2;
+	padding: 1rem 0;
+	&:before {
+		content: 'Learning Journey Nav';
+		color: #757ba2;
+		position: absolute;
+		left: 1px;
+		top: 0;
+		line-height: 1;
+		font-size: 10px;
+	}
+}
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.css b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.css
new file mode 100644
index 000000000..96c5153a3
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.css
@@ -0,0 +1 @@
+.wp-block-lf-learning-journey-navigation ul{display:flex;flex-direction:column;gap:26px;margin-bottom:0}@media(min-width:500px){.wp-block-lf-learning-journey-navigation ul{flex-direction:row;flex-wrap:wrap;gap:13px}}.wp-block-lf-learning-journey-navigation ul li{align-items:center;background-color:#c4c4c4;border:1px solid #000;border-radius:64px;display:inline-flex;flex-shrink:0;margin-left:0;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.wp-block-lf-learning-journey-navigation ul li a{color:#000;font-size:14px;font-weight:700;line-height:100%;padding:12px 20px}.wp-block-lf-learning-journey-navigation ul li a:hover{text-decoration:none}.wp-block-lf-learning-journey-navigation ul li a span{font-weight:800;letter-spacing:.7px;margin-right:10px}.wp-block-lf-learning-journey-navigation li:first-of-type{background-color:var(--lj-color-1-tint);border:1px solid var(--lj-color-1)}.wp-block-lf-learning-journey-navigation li:first-of-type span{color:var(--lj-color-1)}.wp-block-lf-learning-journey-navigation li:nth-of-type(2){background-color:var(--lj-color-2-tint);border:1px solid var(--lj-color-2)}.wp-block-lf-learning-journey-navigation li:nth-of-type(2) span{color:var(--lj-color-2)}.wp-block-lf-learning-journey-navigation li:nth-of-type(3){background-color:var(--lj-color-3-tint);border:1px solid var(--lj-color-3)}.wp-block-lf-learning-journey-navigation li:nth-of-type(3) span{color:var(--lj-color-3)}.wp-block-lf-learning-journey-navigation li:nth-of-type(4){background-color:var(--lj-color-4-tint);border:1px solid var(--lj-color-4)}.wp-block-lf-learning-journey-navigation li:nth-of-type(4) span{color:var(--lj-color-4)}.wp-block-lf-learning-journey-navigation li:nth-of-type(5){background-color:var(--lj-color-5-tint);border:1px solid var(--lj-color-5)}.wp-block-lf-learning-journey-navigation li:nth-of-type(5) span{color:var(--lj-color-5)}.wp-block-lf-learning-journey-navigation li:nth-of-type(6){background-color:var(--lj-color-6-tint);border:1px solid var(--lj-color-6)}.wp-block-lf-learning-journey-navigation li:nth-of-type(6) span{color:var(--lj-color-6)}.wp-block-lf-learning-journey-navigation li:nth-of-type(7){background-color:var(--lj-color-7-tint);border:1px solid var(--lj-color-7)}.wp-block-lf-learning-journey-navigation li:nth-of-type(7) span{color:var(--lj-color-7)}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.php b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.php
new file mode 100644
index 000000000..f529a9d3a
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * Learning Journey Navigation Block
+ *
+ * This block was generated by create-acf-block-json.
+ *
+ * @package WordPress
+ *
+ * @param   array $block The block settings and attributes.
+ * @param   string $content The block inner HTML (empty).
+ * @param   bool $is_preview True during AJAX preview.
+ * @param   (int|string) $post_id The post ID this block is saved to.
+ */
+
+// Block Name (sluggified).
+$block_name = 'learning-journey-navigation';
+
+$namespace = 'lf';
+
+// Create full block name to use in classes.
+$block_name = 'wp-block-' . $namespace . '-' . $block_name;
+
+$align = ( empty( $block['align'] ) ) ? '' : 'align' . $block['align'];
+
+$anchor = ( empty( $block['anchor'] ) ) ? null : 'id=' . $block['anchor'];
+
+$additional_classes = $block['className'] ?? '';
+
+$all_classes = array(
+	$block_name,
+	$align,
+	$additional_classes,
+);
+
+$classes = implode( ' ', $all_classes );
+
+require_once __DIR__ . '/menu.php';
+
+?>
+
+<div <?php echo esc_attr( $anchor ); ?> class="<?php echo esc_attr( $classes ); ?>">
+<?php
+output_learning_journey_menu();
+?>
+</div>
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.scss b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.scss
new file mode 100644
index 000000000..7f01fc2d5
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/learning-journey-navigation.scss
@@ -0,0 +1,92 @@
+.wp-block-lf-learning-journey-navigation {
+	ul {
+		margin-bottom: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 26px;
+		@media (min-width: 500px) {
+			flex-direction: row;
+			flex-wrap: wrap;
+			gap: 13px;
+		}
+		li {
+			width: fit-content;
+			white-space: nowrap;
+			display: inline-flex;
+			align-items: center;
+			flex-shrink: 0;
+			border-radius: 64px;
+			margin-left: 0;
+			border: 1px solid #000000; // default.
+			background-color: #c4c4c4; // default.
+			a {
+				padding: 12px 20px;
+				color: #000;
+				font-size: 14px;
+				font-weight: 700;
+				line-height: 100%;
+				&:hover {
+					text-decoration: none;
+				}
+				// Number
+				span {
+					font-weight: 800;
+					letter-spacing: 0.7px;
+					margin-right: 10px;
+				}
+			}
+		}
+	}
+}
+
+.wp-block-lf-learning-journey-navigation li {
+	&:nth-of-type(1) {
+		border: 1px solid var(--lj-color-1);
+		background-color: var(--lj-color-1-tint);
+		span {
+			color: var(--lj-color-1);
+		}
+	}
+	&:nth-of-type(2) {
+		border: 1px solid var(--lj-color-2);
+		background-color: var(--lj-color-2-tint);
+		span {
+			color: var(--lj-color-2);
+		}
+	}
+	&:nth-of-type(3) {
+		border: 1px solid var(--lj-color-3);
+		background-color: var(--lj-color-3-tint);
+		span {
+			color: var(--lj-color-3);
+		}
+	}
+	&:nth-of-type(4) {
+		border: 1px solid var(--lj-color-4);
+		background-color: var(--lj-color-4-tint);
+		span {
+			color: var(--lj-color-4);
+		}
+	}
+	&:nth-of-type(5) {
+		border: 1px solid var(--lj-color-5);
+		background-color: var(--lj-color-5-tint);
+		span {
+			color: var(--lj-color-5);
+		}
+	}
+	&:nth-of-type(6) {
+		border: 1px solid var(--lj-color-6);
+		background-color: var(--lj-color-6-tint);
+		span {
+			color: var(--lj-color-6);
+		}
+	}
+	&:nth-of-type(7) {
+		border: 1px solid var(--lj-color-7);
+		background-color: var(--lj-color-7-tint);
+		span {
+			color: var(--lj-color-7);
+		}
+	}
+}
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/menu.php b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/menu.php
new file mode 100644
index 000000000..a9ac9102d
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-navigation/menu.php
@@ -0,0 +1,63 @@
+<?php
+/**
+ *
+ * Learning Journey Menu
+ *
+ * @package WordPress
+ * @subpackage cncf-theme
+ * @since 1.0.0
+ **/
+
+/**
+ * Output Learning Journey Menu
+ *
+ * @return void
+ */
+function output_learning_journey_menu() {
+	$blocks       = parse_blocks( get_the_content() );
+	$found_blocks = recursive_find_blocks( $blocks );
+
+	if ( empty( $found_blocks ) ) {
+		if ( is_admin() ) {
+			echo 'This block requires the Learning Journey Block to be used on the page.';
+		}
+		return;
+	}
+
+	echo '<ul>';
+	foreach ( $found_blocks as $block ) {
+		$number = isset( $block['attrs']['data']['ljs_section_number'] ) ? $block['attrs']['data']['ljs_section_number'] : '';
+		$title  = isset( $block['attrs']['data']['ljs_title'] ) ? $block['attrs']['data']['ljs_title'] : '';
+		$slug   = strtolower( trim( preg_replace( '/[^A-Za-z0-9-]+/', '-', $title ), '-' ) );
+
+		printf(
+			'<li><a href="#%s"><span>%s</span>%s</a></li>',
+			esc_attr( $slug ),
+			esc_html( $number ),
+			esc_html( $title )
+		);
+	}
+	echo '</ul>';
+}
+
+/**
+ * Recursive Find Block
+ *
+ * @param array $block_objects Blocks.
+ * @return array $results Blocks.
+ */
+function recursive_find_blocks( $block_objects ) {
+	$results = array();
+
+	foreach ( $block_objects as $block_object ) {
+		if ( 'lf/learning-journey-section' === $block_object['blockName'] ) {
+			$results[] = $block_object;
+		}
+
+		if ( ! empty( $block_object['innerBlocks'] ) ) {
+			$results = array_merge( $results, recursive_find_blocks( $block_object['innerBlocks'] ) );
+		}
+	}
+
+	return $results;
+}
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/block.json b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/block.json
new file mode 100644
index 000000000..f152feded
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/block.json
@@ -0,0 +1,49 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "lf/learning-journey-section",
+	"title": "Learning Journey Section",
+	"description": "A section of the Learning Journey pathway",
+	"editorStyle": "file:./editor.css",
+	"editorScript": [],
+	"category": "lf",
+	"icon": "welcome-widgets-menus",
+	"parent": ["lf/learning-journey"],
+	"keywords": [
+		"",
+		"",
+		""
+	],
+	"acf": {
+		"mode": "preview",
+		"renderTemplate": "learning-journey-section.php",
+		"postTypes": [ "page" ]
+	},
+	"supports": {
+		"mode": false,
+		"align": false,
+		"alignWide": false,
+		"alignContent": false,
+		"alignText": false,
+		"anchor": false,
+		"className": false,
+		"color": {
+			"background": false,
+			"gradients": false,
+			"link": false,
+			"text": false
+		},
+		"fullHeight": false,
+		"html": false,
+		"multiple": true,
+		"spacing": {
+			"margin": false,
+			"padding": false
+		},
+		"typography": {
+			"fontSize": false,
+			"lineHeight": false
+		}
+	},
+	"example": {}
+}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/editor.css b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/editor.css
new file mode 100644
index 000000000..c7833cee0
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/editor.css
@@ -0,0 +1 @@
+.wp-block.wp-block-lf-learning-journey-section{border:1px solid #757ba2;padding:1rem}.wp-block.wp-block-lf-learning-journey-section:before{color:#757ba2;content:"Learning Journey Section";font-size:10px;left:1px;line-height:1;position:absolute;top:0}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/editor.scss b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/editor.scss
new file mode 100644
index 000000000..5ad1267cc
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/editor.scss
@@ -0,0 +1,13 @@
+.wp-block.wp-block-lf-learning-journey-section {
+	border: 1px solid #757ba2;
+	padding: 1rem;
+	&:before {
+		content: 'Learning Journey Section';
+		color: #757ba2;
+		position: absolute;
+		left: 1px;
+		top: 0;
+		line-height: 1;
+		font-size: 10px;
+	}
+}
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/learning-journey-section.php b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/learning-journey-section.php
new file mode 100644
index 000000000..32b85ad79
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey-section/learning-journey-section.php
@@ -0,0 +1,49 @@
+<?php
+/**
+ * Learning Journey Section Block
+ *
+ * This block was generated by create-acf-block-json.
+ *
+ * @package WordPress
+ *
+ * @param   array $block The block settings and attributes.
+ * @param   string $content The block inner HTML (empty).
+ * @param   bool $is_preview True during AJAX preview.
+ * @param   (int|string) $post_id The post ID this block is saved to.
+ */
+
+// Block Name (sluggified).
+$block_name = 'learning-journey-section';
+
+$namespace = 'lf';
+
+// Create full block name to use in classes.
+$block_name = 'wp-block-' . $namespace . '-' . $block_name;
+
+$ljs_section_number = get_field( 'ljs_section_number' );
+$ljs_title          = get_field( 'ljs_title' );
+$ljs_last_section   = get_field( 'ljs_last_section' ) ? 'end' : '';
+$ljs_title_slug     = strtolower( trim( preg_replace( '/[^A-Za-z0-9-]+/', '-', $ljs_title ), '-' ) );
+
+$allowed_blocks = array( 'lf/learning-journey-item' );
+
+$all_classes = array(
+	$block_name,
+	$ljs_last_section,
+);
+
+$classes = implode( ' ', $all_classes );
+
+?>
+
+<div id="<?php echo esc_attr( $ljs_title_slug ); ?>" class="<?php echo esc_attr( $classes ); ?>">
+	<div class="timeline__section">
+		<div class="timeline__header">
+			<div class="timeline__number"><?php echo esc_html( $ljs_section_number ); ?></div>
+			<div class="timeline__title"><?php echo esc_html( $ljs_title ); ?></div>
+		</div>
+		<?php
+		echo '<InnerBlocks allowedBlocks="' . esc_attr( wp_json_encode( $allowed_blocks ) ) . '" />';
+		?>
+	</div>
+</div>
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/block.json b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/block.json
new file mode 100644
index 000000000..bfc9ff88b
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/block.json
@@ -0,0 +1,64 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "lf/learning-journey",
+	"title": "Learning Journey",
+	"description": "The learning block that encapsulates the different sections and items of the Journey",
+	"style": "file:./learning-journey.css",
+	"editorStyle": "file:./editor.css",
+	"editorScript": [],
+	"category": "lf",
+	"icon": "cover-image",
+	"keywords": [
+		"learning journey",
+		"",
+		""
+	],
+	"acf": {
+		"mode": "preview",
+		"renderTemplate": "learning-journey.php",
+		"postTypes": [ "page" ]
+	},
+	"supports": {
+		"mode": false,
+		"align": [
+			"wide",
+			"full",
+			"left",
+			"center",
+			"right"
+		],
+		"alignWide": true,
+		"alignContent": false,
+		"alignText": false,
+		"anchor": true,
+		"className": true,
+		"color": {
+			"background": false,
+			"gradients": false,
+			"link": false,
+			"text": false,
+			"enableContrastChecker": false
+		},
+		"customClassName": false,
+		"defaultStylePicker": true,
+		"html": false,
+		"multiple": false,
+		"reusable": true,
+		"spacing": {
+			"margin": false,
+			"padding": false
+		},
+		"typography": {
+			"fontSize": false,
+			"lineHeight": false
+		}
+	},
+	"attributes": {
+		"variable": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"example": {}
+}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/editor.css b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/editor.css
new file mode 100644
index 000000000..68a3ad896
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/editor.css
@@ -0,0 +1 @@
+.wp-block.wp-block-lf-learning-journey{border:1px solid #757ba2;padding:1rem}.wp-block.wp-block-lf-learning-journey:before{color:#757ba2;content:"Learning Journey";font-size:10px;left:1px;line-height:1;position:absolute;top:0}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/editor.scss b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/editor.scss
new file mode 100644
index 000000000..8df3bc246
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/editor.scss
@@ -0,0 +1,13 @@
+.wp-block.wp-block-lf-learning-journey {
+	border: 1px solid #757ba2;
+	padding: 1rem;
+	&:before {
+		content: 'Learning Journey';
+		color: #757ba2;
+		position: absolute;
+		left: 1px;
+		top: 0;
+		line-height: 1;
+		font-size: 10px;
+	}
+}
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
new file mode 100644
index 000000000..1bfd95c59
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
@@ -0,0 +1 @@
+:root{--circle-size:42px;--marker:7px;--item-title-size:20px;--line-color:#bdbdbd;--lj-color-1:#ff272f;--lj-color-1-tint:#ffeeef;--lj-color-2:#a82ccb;--lj-color-2-tint:#fcf0ff;--lj-color-3:#3140cb;--lj-color-3-tint:#eaeeff;--lj-color-4:#076b00;--lj-color-4-tint:#edfaec;--lj-color-5:#b58d00;--lj-color-5-tint:#fffdf5;--lj-color-6:#00a7a6;--lj-color-6-tint:#e8fafa;--lj-color-7:#8b4513;--lj-color-7-tint:#fdf5ec}@media(min-width:1024px){:root{--circle-size:72px;--marker:12px;--item-title-size:30px}}.wp-block-lf-learning-journey-section:first-of-type .timeline__number{background-color:var(--lj-color-1-tint);border:1px solid var(--lj-color-1)}.wp-block-lf-learning-journey-section:first-of-type .timeline__item:after{background-color:var(--lj-color-1)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__number{background-color:var(--lj-color-2-tint);border:1px solid var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__item:after{background-color:var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__number{background-color:var(--lj-color-3-tint);border:1px solid var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__item:after{background-color:var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__number{background-color:var(--lj-color-4-tint);border:1px solid var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__item:after{background-color:var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__number{background-color:var(--lj-color-5-tint);border:1px solid var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__item:after{background-color:var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__number{background-color:var(--lj-color-6-tint);border:1px solid var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__item:after{background-color:var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__number{background-color:var(--lj-color-7-tint);border:1px solid var(--lj-color-7)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__item:after{background-color:var(--lj-color-7)}.timeline{margin-bottom:50px}.timeline__section{margin-top:50px}.timeline__header{align-items:center;display:flex}.timeline__number{align-items:center;background-color:#c4c4c4;border:1px solid #000;border-radius:64px;display:flex;flex-shrink:0;font-weight:800;height:var(--circle-size);justify-content:center;line-height:100%;text-align:center;width:var(--circle-size);z-index:2}.timeline__number,.timeline__title{color:#000;font-size:var(--item-title-size);font-style:normal}.timeline__title{font-weight:700;line-height:150%;margin-left:calc(var(--circle-size)/2)}.timeline__item{background-color:#fff;border-radius:6px;box-shadow:0 0 10px 0 rgba(0,0,0,.1);margin-left:calc(var(--circle-size) + var(--circle-size)/2);margin-top:30px;padding:calc(var(--circle-size)/2);position:relative;transition:box-shadow .3s ease}@media(min-width:1000px){.timeline__item{margin-top:50px}}.timeline__item:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.2)}.timeline__item span{align-items:center;color:#000;display:flex;font-weight:400;font-weight:14px;justify-content:space-between}@media(min-width:800px){.timeline__item span{font-size:20px;line-height:125%}}@media(min-width:1200px){.timeline__item span{font-size:30px}}.timeline__item span:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='51' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.195 21.335h43.29M34.092 6.92 48.45 21.062 34.093 35.205' opacity='.5' stroke='%23000' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:18px 16px;content:"";flex-grow:0;flex-shrink:0;height:16px;margin-left:20px;width:18px}@media(min-width:1000px){.timeline__item span:after{background-size:51px 44px;height:44px;margin-left:40px;width:51px}}.timeline__item:before{background-color:var(--line-color);content:"";height:235%;left:calc(var(--circle-size)*-1);position:absolute;top:calc(var(--circle-size)*-1);width:1px;z-index:1}@media(min-width:412px){.timeline__item:before{height:230%}}@media(min-width:600px){.timeline__item:before{height:255%}}@media(min-width:1000px){.timeline__item:before{height:250%}}.timeline__item:after{background-color:#000;border-radius:100%;content:"";height:var(--marker);left:calc(var(--circle-size)*-1);position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:var(--marker);z-index:2}.wp-block-lf-learning-journey-section.end .wp-block-lf-learning-journey-item:last-of-type .timeline__item:before{background-color:var(--line-color);content:"";height:0;position:absolute;width:1px}.no-focus-outline .wp-block-lf-learning-journey-section:focus,.no-focus-outline .wp-block-lf-learning-journey-section:focus-visible{outline:0!important;outline-width:0!important}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.php b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.php
new file mode 100644
index 000000000..b65516ecc
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.php
@@ -0,0 +1,59 @@
+<?php
+/**
+ * Learning Journey Block
+ *
+ * This block was generated by create-acf-block-json.
+ *
+ * @package WordPress
+ *
+ * @param   array $block The block settings and attributes.
+ * @param   string $content The block inner HTML (empty).
+ * @param   bool $is_preview True during AJAX preview.
+ * @param   (int|string) $post_id The post ID this block is saved to.
+ */
+
+// Block Name (sluggified).
+$block_name = 'learning-journey';
+
+$namespace = 'lf';
+
+// Create full block name to use in classes.
+$block_name = 'wp-block-' . $namespace . '-' . $block_name;
+
+// setup various classes sent through from $block.
+$background = ( empty( $block['backgroundColor'] ) ) ? '' : 'has-' . $block['backgroundColor'] . '-background-color';
+
+$has_background = $background ? 'has-background' : '';
+
+$font_size = ( empty( $block['fontSize'] ) ) ? '' : 'has-' . $block['fontSize'] . '-font-size';
+
+$align = ( empty( $block['align'] ) ) ? '' : 'align' . $block['align'];
+
+$align_text = ( empty( $block['align_text'] ) ) ? '' : 'has-text-align-' . $block['align_text'];
+
+$anchor = ( empty( $block['anchor'] ) ) ? null : 'id=' . $block['anchor'];
+
+$additional_classes = $block['className'] ?? '';
+
+$all_classes = array(
+	'timeline',
+	$block_name,
+	$background,
+	$has_background,
+	$font_size,
+	$align,
+	$align_text,
+	$additional_classes,
+);
+
+$classes = implode( ' ', $all_classes );
+
+$allowed_blocks = array( 'lf/learning-journey-section' );
+
+?>
+
+<div <?php echo esc_attr( $anchor ); ?> class="<?php echo esc_attr( $classes ); ?>">
+<?php
+echo '<InnerBlocks allowedBlocks="' . esc_attr( wp_json_encode( $allowed_blocks ) ) . '" />';
+?>
+</div>
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
new file mode 100644
index 000000000..48ea4d2a9
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
@@ -0,0 +1,240 @@
+:root {
+	--circle-size: 42px;
+	--marker: 7px;
+	--item-title-size: 20px;
+	--line-color: #bdbdbd;
+	--lj-color-1: #ff272f;
+	--lj-color-1-tint: #ffeeef;
+	--lj-color-2: #a82ccb;
+	--lj-color-2-tint: #fcf0ff;
+	--lj-color-3: #3140cb;
+	--lj-color-3-tint: #eaeeff;
+	--lj-color-4: #076b00;
+	--lj-color-4-tint: #edfaec;
+	--lj-color-5: #b58d00;
+	--lj-color-5-tint: #fffdf5;
+	--lj-color-6: #00a7a6;
+	--lj-color-6-tint: #e8fafa;
+	--lj-color-7: #8b4513;
+	--lj-color-7-tint: #fdf5ec;
+}
+@media (min-width: 1024px) {
+	:root {
+		--circle-size: 72px;
+		--marker: 12px;
+		--item-title-size: 30px;
+	}
+}
+
+.wp-block-lf-learning-journey-section {
+	&:nth-of-type(1) {
+		.timeline__number {
+			border: 1px solid var(--lj-color-1);
+			background-color: var(--lj-color-1-tint);
+		}
+		.timeline__item:after {
+			background-color: var(--lj-color-1);
+		}
+	}
+	&:nth-of-type(2) {
+		.timeline__number {
+			border: 1px solid var(--lj-color-2);
+			background-color: var(--lj-color-2-tint);
+		}
+		.timeline__item:after {
+			background-color: var(--lj-color-2);
+		}
+	}
+	&:nth-of-type(3) {
+		.timeline__number {
+			border: 1px solid var(--lj-color-3);
+			background-color: var(--lj-color-3-tint);
+		}
+		.timeline__item:after {
+			background-color: var(--lj-color-3);
+		}
+	}
+	&:nth-of-type(4) {
+		.timeline__number {
+			border: 1px solid var(--lj-color-4);
+			background-color: var(--lj-color-4-tint);
+		}
+		.timeline__item:after {
+			background-color: var(--lj-color-4);
+		}
+	}
+	&:nth-of-type(5) {
+		.timeline__number {
+			border: 1px solid var(--lj-color-5);
+			background-color: var(--lj-color-5-tint);
+		}
+		.timeline__item:after {
+			background-color: var(--lj-color-5);
+		}
+	}
+	&:nth-of-type(6) {
+		.timeline__number {
+			border: 1px solid var(--lj-color-6);
+			background-color: var(--lj-color-6-tint);
+		}
+		.timeline__item:after {
+			background-color: var(--lj-color-6);
+		}
+	}
+	&:nth-of-type(7) {
+		.timeline__number {
+			border: 1px solid var(--lj-color-7);
+			background-color: var(--lj-color-7-tint);
+		}
+		.timeline__item:after {
+			background-color: var(--lj-color-7);
+		}
+	}
+}
+
+.timeline {
+	margin-bottom: 50px;
+	&__section {
+		margin-top: 50px;
+	}
+	&__header {
+		display: flex;
+		align-items: center;
+	}
+	&__number {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: var(--circle-size);
+		height: var(--circle-size);
+		flex-shrink: 0;
+		border-radius: 64px;
+		text-align: center;
+		font-size: var(--item-title-size);
+		font-style: normal;
+		font-weight: 800;
+		line-height: 100%;
+		z-index: 2;
+		color: #000000;
+		border: 1px solid #000000; // default.
+		background-color: #c4c4c4; // default.
+	}
+	&__title {
+		color: #000;
+		font-size: var(--item-title-size);
+		font-style: normal;
+		font-weight: 700;
+		line-height: 150%;
+		margin-left: calc(var(--circle-size) / 2);
+	}
+	&__item {
+		border-radius: 6px;
+		background-color: #fff;
+		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+		transition: box-shadow 0.3s ease;
+		margin-left: calc(var(--circle-size) + var(--circle-size) / 2);
+		margin-top: 30px;
+		@media (min-width: 1000px) {
+			margin-top: 50px;
+		}
+		padding: calc(var(--circle-size) / 2);
+		position: relative;
+		&:hover {
+			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+		}
+		span {
+			color: #000;
+			font-weight: 400;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-weight: 14px;
+			@media (min-width: 800px) {
+				font-size: 20px;
+				line-height: 125%;
+			}
+			@media (min-width: 1200px) {
+				font-size: 30px;
+			}
+			&:after {
+				flex-shrink: 0;
+				flex-grow: 0;
+				margin-left: 20px;
+				content: '';
+				background-image: url("data:image/svg+xml,%3Csvg width='51' height='44' viewBox='0 0 51 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.195 21.335h43.29M34.092 6.92 48.45 21.062 34.093 35.205' opacity='.5' stroke='%23000' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
+				background-position: 50% 50%;
+				background-repeat: no-repeat;
+				background-size: 18px 16px;
+				width: 18px;
+				height: 16px;
+				@media (min-width: 1000px) {
+					margin-left: 40px;
+					background-size: 51px 44px;
+					width: 51px;
+					height: 44px;
+				}
+			}
+		}
+		// Line
+		&:before {
+			content: '';
+			width: 1px;
+			background-color: var(--line-color);
+			position: absolute;
+			top: calc(-1 * var(--circle-size));
+			left: calc(-1 * var(--circle-size));
+			z-index: 1;
+			height: 235%;
+			@media (min-width: 412px) {
+				height: 230%;
+			}
+			@media (min-width: 600px) {
+				height: 255%;
+			}
+			@media (min-width: 1000px) {
+				height: 250%;
+			}
+		}
+		// Circle.
+		&:after {
+			content: '';
+			width: var(--marker);
+			height: var(--marker);
+			position: absolute;
+			background-color: #000000;
+			border-radius: 100%;
+			left: calc(-1 * var(--circle-size));
+			top: 50%;
+			transform: translateX(-50%) translateY(-50%);
+			z-index: 2;
+		}
+	}
+}
+
+.wp-block-lf-learning-journey-section {
+	&.end {
+		.wp-block-lf-learning-journey-item:last-of-type {
+			.timeline__item {
+				// End Line
+				&:before {
+					content: '';
+					width: 1px;
+					height: 0%;
+					background-color: var(--line-color);
+					position: absolute;
+				}
+			}
+		}
+	}
+}
+
+// Stops outline for non-keyboard users when clicking anchor links.
+.no-focus-outline {
+	.wp-block-lf-learning-journey-section {
+		&:focus-visible,
+		&:focus {
+			outline: 0 !important;
+			outline-width: 0 !important;
+		}
+	}
+}
diff --git a/web/wp-content/themes/cncf-twenty-two/includes/acf.php b/web/wp-content/themes/cncf-twenty-two/includes/acf.php
index f317dbdca..ecb0dab6c 100644
--- a/web/wp-content/themes/cncf-twenty-two/includes/acf.php
+++ b/web/wp-content/themes/cncf-twenty-two/includes/acf.php
@@ -23,6 +23,10 @@ function lf_register_all_our_blocks() {
 	register_block_type( $block_directory . '/icon-and-text-column/block.json' );
 	register_block_type( $block_directory . '/icon-text-stat/block.json' );
 	register_block_type( $block_directory . '/image-switcher/block.json' );
+	register_block_type( $block_directory . '/learning-journey/block.json' );
+	register_block_type( $block_directory . '/learning-journey-section/block.json' );
+	register_block_type( $block_directory . '/learning-journey-item/block.json' );
+	register_block_type( $block_directory . '/learning-journey-navigation/block.json' );
 	register_block_type( $block_directory . '/phippy-family/block.json' );
 	register_block_type( $block_directory . '/phippy-group/block.json' );
 	register_block_type( $block_directory . '/post-breadcrumb/block.json' );

From 6b7c59be2b12eb0b09b38c4dd4a47f729057c58b Mon Sep 17 00:00:00 2001
From: Chris Abraham <cjyabraham@gmail.com>
Date: Sat, 19 Aug 2023 11:33:10 -0400
Subject: [PATCH 2/8] fix colors to make them WCAG compliant

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
---
 .../blocks/learning-journey/learning-journey.css       |  2 +-
 .../blocks/learning-journey/learning-journey.scss      | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
index 1bfd95c59..858650cbb 100644
--- a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
@@ -1 +1 @@
-:root{--circle-size:42px;--marker:7px;--item-title-size:20px;--line-color:#bdbdbd;--lj-color-1:#ff272f;--lj-color-1-tint:#ffeeef;--lj-color-2:#a82ccb;--lj-color-2-tint:#fcf0ff;--lj-color-3:#3140cb;--lj-color-3-tint:#eaeeff;--lj-color-4:#076b00;--lj-color-4-tint:#edfaec;--lj-color-5:#b58d00;--lj-color-5-tint:#fffdf5;--lj-color-6:#00a7a6;--lj-color-6-tint:#e8fafa;--lj-color-7:#8b4513;--lj-color-7-tint:#fdf5ec}@media(min-width:1024px){:root{--circle-size:72px;--marker:12px;--item-title-size:30px}}.wp-block-lf-learning-journey-section:first-of-type .timeline__number{background-color:var(--lj-color-1-tint);border:1px solid var(--lj-color-1)}.wp-block-lf-learning-journey-section:first-of-type .timeline__item:after{background-color:var(--lj-color-1)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__number{background-color:var(--lj-color-2-tint);border:1px solid var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__item:after{background-color:var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__number{background-color:var(--lj-color-3-tint);border:1px solid var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__item:after{background-color:var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__number{background-color:var(--lj-color-4-tint);border:1px solid var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__item:after{background-color:var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__number{background-color:var(--lj-color-5-tint);border:1px solid var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__item:after{background-color:var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__number{background-color:var(--lj-color-6-tint);border:1px solid var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__item:after{background-color:var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__number{background-color:var(--lj-color-7-tint);border:1px solid var(--lj-color-7)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__item:after{background-color:var(--lj-color-7)}.timeline{margin-bottom:50px}.timeline__section{margin-top:50px}.timeline__header{align-items:center;display:flex}.timeline__number{align-items:center;background-color:#c4c4c4;border:1px solid #000;border-radius:64px;display:flex;flex-shrink:0;font-weight:800;height:var(--circle-size);justify-content:center;line-height:100%;text-align:center;width:var(--circle-size);z-index:2}.timeline__number,.timeline__title{color:#000;font-size:var(--item-title-size);font-style:normal}.timeline__title{font-weight:700;line-height:150%;margin-left:calc(var(--circle-size)/2)}.timeline__item{background-color:#fff;border-radius:6px;box-shadow:0 0 10px 0 rgba(0,0,0,.1);margin-left:calc(var(--circle-size) + var(--circle-size)/2);margin-top:30px;padding:calc(var(--circle-size)/2);position:relative;transition:box-shadow .3s ease}@media(min-width:1000px){.timeline__item{margin-top:50px}}.timeline__item:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.2)}.timeline__item span{align-items:center;color:#000;display:flex;font-weight:400;font-weight:14px;justify-content:space-between}@media(min-width:800px){.timeline__item span{font-size:20px;line-height:125%}}@media(min-width:1200px){.timeline__item span{font-size:30px}}.timeline__item span:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='51' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.195 21.335h43.29M34.092 6.92 48.45 21.062 34.093 35.205' opacity='.5' stroke='%23000' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:18px 16px;content:"";flex-grow:0;flex-shrink:0;height:16px;margin-left:20px;width:18px}@media(min-width:1000px){.timeline__item span:after{background-size:51px 44px;height:44px;margin-left:40px;width:51px}}.timeline__item:before{background-color:var(--line-color);content:"";height:235%;left:calc(var(--circle-size)*-1);position:absolute;top:calc(var(--circle-size)*-1);width:1px;z-index:1}@media(min-width:412px){.timeline__item:before{height:230%}}@media(min-width:600px){.timeline__item:before{height:255%}}@media(min-width:1000px){.timeline__item:before{height:250%}}.timeline__item:after{background-color:#000;border-radius:100%;content:"";height:var(--marker);left:calc(var(--circle-size)*-1);position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:var(--marker);z-index:2}.wp-block-lf-learning-journey-section.end .wp-block-lf-learning-journey-item:last-of-type .timeline__item:before{background-color:var(--line-color);content:"";height:0;position:absolute;width:1px}.no-focus-outline .wp-block-lf-learning-journey-section:focus,.no-focus-outline .wp-block-lf-learning-journey-section:focus-visible{outline:0!important;outline-width:0!important}
\ No newline at end of file
+:root{--circle-size:42px;--marker:7px;--item-title-size:20px;--line-color:#bdbdbd;--lj-color-1:#e40000;--lj-color-1-tint:#ffeeef;--lj-color-2:#a82ccb;--lj-color-2-tint:#fcf0ff;--lj-color-3:#3140cb;--lj-color-3-tint:#eaeeff;--lj-color-4:#076b00;--lj-color-4-tint:#edfaec;--lj-color-5:#8b7017;--lj-color-5-tint:#fffdf5;--lj-color-6:#00a7a6;--lj-color-6-tint:#e8fafa;--lj-color-7:#8b4513;--lj-color-7-tint:#fdf5ec}@media(min-width:1024px){:root{--circle-size:72px;--marker:12px;--item-title-size:30px}}.wp-block-lf-learning-journey-section:first-of-type .timeline__number{background-color:var(--lj-color-1-tint);border:1px solid var(--lj-color-1)}.wp-block-lf-learning-journey-section:first-of-type .timeline__item:after{background-color:var(--lj-color-1)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__number{background-color:var(--lj-color-2-tint);border:1px solid var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__item:after{background-color:var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__number{background-color:var(--lj-color-3-tint);border:1px solid var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__item:after{background-color:var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__number{background-color:var(--lj-color-4-tint);border:1px solid var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__item:after{background-color:var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__number{background-color:var(--lj-color-5-tint);border:1px solid var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__item:after{background-color:var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__number{background-color:var(--lj-color-6-tint);border:1px solid var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__item:after{background-color:var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__number{background-color:var(--lj-color-7-tint);border:1px solid var(--lj-color-7)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__item:after{background-color:var(--lj-color-7)}.timeline{margin-bottom:50px}.timeline__section{margin-top:50px}.timeline__header{align-items:center;display:flex}.timeline__number{align-items:center;background-color:#c4c4c4;border:1px solid #000;border-radius:64px;display:flex;flex-shrink:0;font-weight:800;height:var(--circle-size);justify-content:center;line-height:100%;text-align:center;width:var(--circle-size);z-index:2}.timeline__number,.timeline__title{color:#000;font-size:var(--item-title-size);font-style:normal}.timeline__title{font-weight:700;line-height:150%;margin-left:calc(var(--circle-size)/2)}.timeline__item{background-color:#fff;border-radius:6px;box-shadow:0 0 10px 0 rgba(0,0,0,.1);margin-left:calc(var(--circle-size) + var(--circle-size)/2);margin-top:30px;padding:calc(var(--circle-size)/2);position:relative;transition:box-shadow .3s ease}@media(min-width:1000px){.timeline__item{margin-top:50px}}.timeline__item:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.2)}.timeline__item span{align-items:center;color:#000;display:flex;font-weight:400;font-weight:14px;justify-content:space-between}@media(min-width:800px){.timeline__item span{font-size:20px;line-height:125%}}@media(min-width:1200px){.timeline__item span{font-size:30px}}.timeline__item span:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='51' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.195 21.335h43.29M34.092 6.92 48.45 21.062 34.093 35.205' opacity='.5' stroke='%23000' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:18px 16px;content:"";flex-grow:0;flex-shrink:0;height:16px;margin-left:20px;width:18px}@media(min-width:1000px){.timeline__item span:after{background-size:51px 44px;height:44px;margin-left:40px;width:51px}}.timeline__item:before{background-color:var(--line-color);content:"";height:235%;left:calc(var(--circle-size)*-1);position:absolute;top:calc(var(--circle-size)*-1);width:1px;z-index:1}@media(min-width:412px){.timeline__item:before{height:230%}}@media(min-width:600px){.timeline__item:before{height:255%}}@media(min-width:1000px){.timeline__item:before{height:250%}}.timeline__item:after{background-color:#000;border-radius:100%;content:"";height:var(--marker);left:calc(var(--circle-size)*-1);position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:var(--marker);z-index:2}.wp-block-lf-learning-journey-section.end .wp-block-lf-learning-journey-item:last-of-type .timeline__item:before{background-color:var(--line-color);content:"";height:0;position:absolute;width:1px}.no-focus-outline .wp-block-lf-learning-journey-section:focus,.no-focus-outline .wp-block-lf-learning-journey-section:focus-visible{outline:0!important;outline-width:0!important}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
index 48ea4d2a9..937d5f845 100644
--- a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
@@ -3,15 +3,15 @@
 	--marker: 7px;
 	--item-title-size: 20px;
 	--line-color: #bdbdbd;
-	--lj-color-1: #ff272f;
+	--lj-color-1: #E40000;
 	--lj-color-1-tint: #ffeeef;
-	--lj-color-2: #a82ccb;
+	--lj-color-2: #A82CCB;
 	--lj-color-2-tint: #fcf0ff;
-	--lj-color-3: #3140cb;
+	--lj-color-3: #3140CB;
 	--lj-color-3-tint: #eaeeff;
-	--lj-color-4: #076b00;
+	--lj-color-4: #076B00;
 	--lj-color-4-tint: #edfaec;
-	--lj-color-5: #b58d00;
+	--lj-color-5: #8B7017;
 	--lj-color-5-tint: #fffdf5;
 	--lj-color-6: #00a7a6;
 	--lj-color-6-tint: #e8fafa;

From a8abfd0fad8d4a22ae307754383eca0bc7c523cb Mon Sep 17 00:00:00 2001
From: Chris Abraham <cjyabraham@gmail.com>
Date: Sat, 19 Aug 2023 11:39:08 -0400
Subject: [PATCH 3/8] fix tint color

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
---
 .../blocks/learning-journey/learning-journey.css                | 2 +-
 .../blocks/learning-journey/learning-journey.scss               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
index 858650cbb..e21e06646 100644
--- a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
@@ -1 +1 @@
-:root{--circle-size:42px;--marker:7px;--item-title-size:20px;--line-color:#bdbdbd;--lj-color-1:#e40000;--lj-color-1-tint:#ffeeef;--lj-color-2:#a82ccb;--lj-color-2-tint:#fcf0ff;--lj-color-3:#3140cb;--lj-color-3-tint:#eaeeff;--lj-color-4:#076b00;--lj-color-4-tint:#edfaec;--lj-color-5:#8b7017;--lj-color-5-tint:#fffdf5;--lj-color-6:#00a7a6;--lj-color-6-tint:#e8fafa;--lj-color-7:#8b4513;--lj-color-7-tint:#fdf5ec}@media(min-width:1024px){:root{--circle-size:72px;--marker:12px;--item-title-size:30px}}.wp-block-lf-learning-journey-section:first-of-type .timeline__number{background-color:var(--lj-color-1-tint);border:1px solid var(--lj-color-1)}.wp-block-lf-learning-journey-section:first-of-type .timeline__item:after{background-color:var(--lj-color-1)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__number{background-color:var(--lj-color-2-tint);border:1px solid var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__item:after{background-color:var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__number{background-color:var(--lj-color-3-tint);border:1px solid var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__item:after{background-color:var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__number{background-color:var(--lj-color-4-tint);border:1px solid var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__item:after{background-color:var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__number{background-color:var(--lj-color-5-tint);border:1px solid var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__item:after{background-color:var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__number{background-color:var(--lj-color-6-tint);border:1px solid var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__item:after{background-color:var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__number{background-color:var(--lj-color-7-tint);border:1px solid var(--lj-color-7)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__item:after{background-color:var(--lj-color-7)}.timeline{margin-bottom:50px}.timeline__section{margin-top:50px}.timeline__header{align-items:center;display:flex}.timeline__number{align-items:center;background-color:#c4c4c4;border:1px solid #000;border-radius:64px;display:flex;flex-shrink:0;font-weight:800;height:var(--circle-size);justify-content:center;line-height:100%;text-align:center;width:var(--circle-size);z-index:2}.timeline__number,.timeline__title{color:#000;font-size:var(--item-title-size);font-style:normal}.timeline__title{font-weight:700;line-height:150%;margin-left:calc(var(--circle-size)/2)}.timeline__item{background-color:#fff;border-radius:6px;box-shadow:0 0 10px 0 rgba(0,0,0,.1);margin-left:calc(var(--circle-size) + var(--circle-size)/2);margin-top:30px;padding:calc(var(--circle-size)/2);position:relative;transition:box-shadow .3s ease}@media(min-width:1000px){.timeline__item{margin-top:50px}}.timeline__item:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.2)}.timeline__item span{align-items:center;color:#000;display:flex;font-weight:400;font-weight:14px;justify-content:space-between}@media(min-width:800px){.timeline__item span{font-size:20px;line-height:125%}}@media(min-width:1200px){.timeline__item span{font-size:30px}}.timeline__item span:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='51' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.195 21.335h43.29M34.092 6.92 48.45 21.062 34.093 35.205' opacity='.5' stroke='%23000' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:18px 16px;content:"";flex-grow:0;flex-shrink:0;height:16px;margin-left:20px;width:18px}@media(min-width:1000px){.timeline__item span:after{background-size:51px 44px;height:44px;margin-left:40px;width:51px}}.timeline__item:before{background-color:var(--line-color);content:"";height:235%;left:calc(var(--circle-size)*-1);position:absolute;top:calc(var(--circle-size)*-1);width:1px;z-index:1}@media(min-width:412px){.timeline__item:before{height:230%}}@media(min-width:600px){.timeline__item:before{height:255%}}@media(min-width:1000px){.timeline__item:before{height:250%}}.timeline__item:after{background-color:#000;border-radius:100%;content:"";height:var(--marker);left:calc(var(--circle-size)*-1);position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:var(--marker);z-index:2}.wp-block-lf-learning-journey-section.end .wp-block-lf-learning-journey-item:last-of-type .timeline__item:before{background-color:var(--line-color);content:"";height:0;position:absolute;width:1px}.no-focus-outline .wp-block-lf-learning-journey-section:focus,.no-focus-outline .wp-block-lf-learning-journey-section:focus-visible{outline:0!important;outline-width:0!important}
\ No newline at end of file
+:root{--circle-size:42px;--marker:7px;--item-title-size:20px;--line-color:#bdbdbd;--lj-color-1:#e40000;--lj-color-1-tint:#fff3f3;--lj-color-2:#a82ccb;--lj-color-2-tint:#fcf0ff;--lj-color-3:#3140cb;--lj-color-3-tint:#eaeeff;--lj-color-4:#076b00;--lj-color-4-tint:#edfaec;--lj-color-5:#8b7017;--lj-color-5-tint:#fffdf5;--lj-color-6:#00a7a6;--lj-color-6-tint:#e8fafa;--lj-color-7:#8b4513;--lj-color-7-tint:#fdf5ec}@media(min-width:1024px){:root{--circle-size:72px;--marker:12px;--item-title-size:30px}}.wp-block-lf-learning-journey-section:first-of-type .timeline__number{background-color:var(--lj-color-1-tint);border:1px solid var(--lj-color-1)}.wp-block-lf-learning-journey-section:first-of-type .timeline__item:after{background-color:var(--lj-color-1)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__number{background-color:var(--lj-color-2-tint);border:1px solid var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__item:after{background-color:var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__number{background-color:var(--lj-color-3-tint);border:1px solid var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__item:after{background-color:var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__number{background-color:var(--lj-color-4-tint);border:1px solid var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__item:after{background-color:var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__number{background-color:var(--lj-color-5-tint);border:1px solid var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__item:after{background-color:var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__number{background-color:var(--lj-color-6-tint);border:1px solid var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__item:after{background-color:var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__number{background-color:var(--lj-color-7-tint);border:1px solid var(--lj-color-7)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__item:after{background-color:var(--lj-color-7)}.timeline{margin-bottom:50px}.timeline__section{margin-top:50px}.timeline__header{align-items:center;display:flex}.timeline__number{align-items:center;background-color:#c4c4c4;border:1px solid #000;border-radius:64px;display:flex;flex-shrink:0;font-weight:800;height:var(--circle-size);justify-content:center;line-height:100%;text-align:center;width:var(--circle-size);z-index:2}.timeline__number,.timeline__title{color:#000;font-size:var(--item-title-size);font-style:normal}.timeline__title{font-weight:700;line-height:150%;margin-left:calc(var(--circle-size)/2)}.timeline__item{background-color:#fff;border-radius:6px;box-shadow:0 0 10px 0 rgba(0,0,0,.1);margin-left:calc(var(--circle-size) + var(--circle-size)/2);margin-top:30px;padding:calc(var(--circle-size)/2);position:relative;transition:box-shadow .3s ease}@media(min-width:1000px){.timeline__item{margin-top:50px}}.timeline__item:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.2)}.timeline__item span{align-items:center;color:#000;display:flex;font-weight:400;font-weight:14px;justify-content:space-between}@media(min-width:800px){.timeline__item span{font-size:20px;line-height:125%}}@media(min-width:1200px){.timeline__item span{font-size:30px}}.timeline__item span:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='51' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.195 21.335h43.29M34.092 6.92 48.45 21.062 34.093 35.205' opacity='.5' stroke='%23000' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:18px 16px;content:"";flex-grow:0;flex-shrink:0;height:16px;margin-left:20px;width:18px}@media(min-width:1000px){.timeline__item span:after{background-size:51px 44px;height:44px;margin-left:40px;width:51px}}.timeline__item:before{background-color:var(--line-color);content:"";height:235%;left:calc(var(--circle-size)*-1);position:absolute;top:calc(var(--circle-size)*-1);width:1px;z-index:1}@media(min-width:412px){.timeline__item:before{height:230%}}@media(min-width:600px){.timeline__item:before{height:255%}}@media(min-width:1000px){.timeline__item:before{height:250%}}.timeline__item:after{background-color:#000;border-radius:100%;content:"";height:var(--marker);left:calc(var(--circle-size)*-1);position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:var(--marker);z-index:2}.wp-block-lf-learning-journey-section.end .wp-block-lf-learning-journey-item:last-of-type .timeline__item:before{background-color:var(--line-color);content:"";height:0;position:absolute;width:1px}.no-focus-outline .wp-block-lf-learning-journey-section:focus,.no-focus-outline .wp-block-lf-learning-journey-section:focus-visible{outline:0!important;outline-width:0!important}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
index 937d5f845..902348f04 100644
--- a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
@@ -4,7 +4,7 @@
 	--item-title-size: 20px;
 	--line-color: #bdbdbd;
 	--lj-color-1: #E40000;
-	--lj-color-1-tint: #ffeeef;
+	--lj-color-1-tint: #FFF3F3;
 	--lj-color-2: #A82CCB;
 	--lj-color-2-tint: #fcf0ff;
 	--lj-color-3: #3140CB;

From 338e0e9e23a4166b3ff913d02fbfe9a96c7f53e9 Mon Sep 17 00:00:00 2001
From: Chris Abraham <cjyabraham@gmail.com>
Date: Sat, 19 Aug 2023 12:14:33 -0400
Subject: [PATCH 4/8] Color numbers the appropriate colors

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
---
 .../blocks/learning-journey/learning-journey.css           | 2 +-
 .../blocks/learning-journey/learning-journey.scss          | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
index e21e06646..8940c09ea 100644
--- a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.css
@@ -1 +1 @@
-:root{--circle-size:42px;--marker:7px;--item-title-size:20px;--line-color:#bdbdbd;--lj-color-1:#e40000;--lj-color-1-tint:#fff3f3;--lj-color-2:#a82ccb;--lj-color-2-tint:#fcf0ff;--lj-color-3:#3140cb;--lj-color-3-tint:#eaeeff;--lj-color-4:#076b00;--lj-color-4-tint:#edfaec;--lj-color-5:#8b7017;--lj-color-5-tint:#fffdf5;--lj-color-6:#00a7a6;--lj-color-6-tint:#e8fafa;--lj-color-7:#8b4513;--lj-color-7-tint:#fdf5ec}@media(min-width:1024px){:root{--circle-size:72px;--marker:12px;--item-title-size:30px}}.wp-block-lf-learning-journey-section:first-of-type .timeline__number{background-color:var(--lj-color-1-tint);border:1px solid var(--lj-color-1)}.wp-block-lf-learning-journey-section:first-of-type .timeline__item:after{background-color:var(--lj-color-1)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__number{background-color:var(--lj-color-2-tint);border:1px solid var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__item:after{background-color:var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__number{background-color:var(--lj-color-3-tint);border:1px solid var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__item:after{background-color:var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__number{background-color:var(--lj-color-4-tint);border:1px solid var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__item:after{background-color:var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__number{background-color:var(--lj-color-5-tint);border:1px solid var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__item:after{background-color:var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__number{background-color:var(--lj-color-6-tint);border:1px solid var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__item:after{background-color:var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__number{background-color:var(--lj-color-7-tint);border:1px solid var(--lj-color-7)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__item:after{background-color:var(--lj-color-7)}.timeline{margin-bottom:50px}.timeline__section{margin-top:50px}.timeline__header{align-items:center;display:flex}.timeline__number{align-items:center;background-color:#c4c4c4;border:1px solid #000;border-radius:64px;display:flex;flex-shrink:0;font-weight:800;height:var(--circle-size);justify-content:center;line-height:100%;text-align:center;width:var(--circle-size);z-index:2}.timeline__number,.timeline__title{color:#000;font-size:var(--item-title-size);font-style:normal}.timeline__title{font-weight:700;line-height:150%;margin-left:calc(var(--circle-size)/2)}.timeline__item{background-color:#fff;border-radius:6px;box-shadow:0 0 10px 0 rgba(0,0,0,.1);margin-left:calc(var(--circle-size) + var(--circle-size)/2);margin-top:30px;padding:calc(var(--circle-size)/2);position:relative;transition:box-shadow .3s ease}@media(min-width:1000px){.timeline__item{margin-top:50px}}.timeline__item:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.2)}.timeline__item span{align-items:center;color:#000;display:flex;font-weight:400;font-weight:14px;justify-content:space-between}@media(min-width:800px){.timeline__item span{font-size:20px;line-height:125%}}@media(min-width:1200px){.timeline__item span{font-size:30px}}.timeline__item span:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='51' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.195 21.335h43.29M34.092 6.92 48.45 21.062 34.093 35.205' opacity='.5' stroke='%23000' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:18px 16px;content:"";flex-grow:0;flex-shrink:0;height:16px;margin-left:20px;width:18px}@media(min-width:1000px){.timeline__item span:after{background-size:51px 44px;height:44px;margin-left:40px;width:51px}}.timeline__item:before{background-color:var(--line-color);content:"";height:235%;left:calc(var(--circle-size)*-1);position:absolute;top:calc(var(--circle-size)*-1);width:1px;z-index:1}@media(min-width:412px){.timeline__item:before{height:230%}}@media(min-width:600px){.timeline__item:before{height:255%}}@media(min-width:1000px){.timeline__item:before{height:250%}}.timeline__item:after{background-color:#000;border-radius:100%;content:"";height:var(--marker);left:calc(var(--circle-size)*-1);position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:var(--marker);z-index:2}.wp-block-lf-learning-journey-section.end .wp-block-lf-learning-journey-item:last-of-type .timeline__item:before{background-color:var(--line-color);content:"";height:0;position:absolute;width:1px}.no-focus-outline .wp-block-lf-learning-journey-section:focus,.no-focus-outline .wp-block-lf-learning-journey-section:focus-visible{outline:0!important;outline-width:0!important}
\ No newline at end of file
+:root{--circle-size:42px;--marker:7px;--item-title-size:20px;--line-color:#bdbdbd;--lj-color-1:#e40000;--lj-color-1-tint:#fff3f3;--lj-color-2:#a82ccb;--lj-color-2-tint:#fcf0ff;--lj-color-3:#3140cb;--lj-color-3-tint:#eaeeff;--lj-color-4:#076b00;--lj-color-4-tint:#edfaec;--lj-color-5:#8b7017;--lj-color-5-tint:#fffdf5;--lj-color-6:#00a7a6;--lj-color-6-tint:#e8fafa;--lj-color-7:#8b4513;--lj-color-7-tint:#fdf5ec}@media(min-width:1024px){:root{--circle-size:72px;--marker:12px;--item-title-size:30px}}.wp-block-lf-learning-journey-section:first-of-type .timeline__number{background-color:var(--lj-color-1-tint);border:1px solid var(--lj-color-1);color:var(--lj-color-1)}.wp-block-lf-learning-journey-section:first-of-type .timeline__item:after{background-color:var(--lj-color-1)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__number{background-color:var(--lj-color-2-tint);border:1px solid var(--lj-color-2);color:var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(2) .timeline__item:after{background-color:var(--lj-color-2)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__number{background-color:var(--lj-color-3-tint);border:1px solid var(--lj-color-3);color:var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(3) .timeline__item:after{background-color:var(--lj-color-3)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__number{background-color:var(--lj-color-4-tint);border:1px solid var(--lj-color-4);color:var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(4) .timeline__item:after{background-color:var(--lj-color-4)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__number{background-color:var(--lj-color-5-tint);border:1px solid var(--lj-color-5);color:var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(5) .timeline__item:after{background-color:var(--lj-color-5)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__number{background-color:var(--lj-color-6-tint);border:1px solid var(--lj-color-6);color:var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(6) .timeline__item:after{background-color:var(--lj-color-6)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__number{background-color:var(--lj-color-7-tint);border:1px solid var(--lj-color-7);color:var(--lj-color-7)}.wp-block-lf-learning-journey-section:nth-of-type(7) .timeline__item:after{background-color:var(--lj-color-7)}.timeline{margin-bottom:50px}.timeline__section{margin-top:50px}.timeline__header{align-items:center;display:flex}.timeline__number{align-items:center;background-color:#c4c4c4;border:1px solid #000;border-radius:64px;display:flex;flex-shrink:0;font-weight:800;height:var(--circle-size);justify-content:center;line-height:100%;text-align:center;width:var(--circle-size);z-index:2}.timeline__number,.timeline__title{color:#000;font-size:var(--item-title-size);font-style:normal}.timeline__title{font-weight:700;line-height:150%;margin-left:calc(var(--circle-size)/2)}.timeline__item{background-color:#fff;border-radius:6px;box-shadow:0 0 10px 0 rgba(0,0,0,.1);margin-left:calc(var(--circle-size) + var(--circle-size)/2);margin-top:30px;padding:calc(var(--circle-size)/2);position:relative;transition:box-shadow .3s ease}@media(min-width:1000px){.timeline__item{margin-top:50px}}.timeline__item:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.2)}.timeline__item span{align-items:center;color:#000;display:flex;font-weight:400;font-weight:14px;justify-content:space-between}@media(min-width:800px){.timeline__item span{font-size:20px;line-height:125%}}@media(min-width:1200px){.timeline__item span{font-size:30px}}.timeline__item span:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='51' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.195 21.335h43.29M34.092 6.92 48.45 21.062 34.093 35.205' opacity='.5' stroke='%23000' stroke-width='4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:18px 16px;content:"";flex-grow:0;flex-shrink:0;height:16px;margin-left:20px;width:18px}@media(min-width:1000px){.timeline__item span:after{background-size:51px 44px;height:44px;margin-left:40px;width:51px}}.timeline__item:before{background-color:var(--line-color);content:"";height:235%;left:calc(var(--circle-size)*-1);position:absolute;top:calc(var(--circle-size)*-1);width:1px;z-index:1}@media(min-width:412px){.timeline__item:before{height:230%}}@media(min-width:600px){.timeline__item:before{height:255%}}@media(min-width:1000px){.timeline__item:before{height:250%}}.timeline__item:after{background-color:#000;border-radius:100%;content:"";height:var(--marker);left:calc(var(--circle-size)*-1);position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:var(--marker);z-index:2}.wp-block-lf-learning-journey-section.end .wp-block-lf-learning-journey-item:last-of-type .timeline__item:before{background-color:var(--line-color);content:"";height:0;position:absolute;width:1px}.no-focus-outline .wp-block-lf-learning-journey-section:focus,.no-focus-outline .wp-block-lf-learning-journey-section:focus-visible{outline:0!important;outline-width:0!important}
\ No newline at end of file
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
index 902348f04..73079d5ce 100644
--- a/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
+++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss
@@ -29,6 +29,7 @@
 .wp-block-lf-learning-journey-section {
 	&:nth-of-type(1) {
 		.timeline__number {
+			color: var(--lj-color-1);
 			border: 1px solid var(--lj-color-1);
 			background-color: var(--lj-color-1-tint);
 		}
@@ -38,6 +39,7 @@
 	}
 	&:nth-of-type(2) {
 		.timeline__number {
+			color: var(--lj-color-2);
 			border: 1px solid var(--lj-color-2);
 			background-color: var(--lj-color-2-tint);
 		}
@@ -47,6 +49,7 @@
 	}
 	&:nth-of-type(3) {
 		.timeline__number {
+			color: var(--lj-color-3);
 			border: 1px solid var(--lj-color-3);
 			background-color: var(--lj-color-3-tint);
 		}
@@ -56,6 +59,7 @@
 	}
 	&:nth-of-type(4) {
 		.timeline__number {
+			color: var(--lj-color-4);
 			border: 1px solid var(--lj-color-4);
 			background-color: var(--lj-color-4-tint);
 		}
@@ -65,6 +69,7 @@
 	}
 	&:nth-of-type(5) {
 		.timeline__number {
+			color: var(--lj-color-5);
 			border: 1px solid var(--lj-color-5);
 			background-color: var(--lj-color-5-tint);
 		}
@@ -74,6 +79,7 @@
 	}
 	&:nth-of-type(6) {
 		.timeline__number {
+			color: var(--lj-color-6);
 			border: 1px solid var(--lj-color-6);
 			background-color: var(--lj-color-6-tint);
 		}
@@ -83,6 +89,7 @@
 	}
 	&:nth-of-type(7) {
 		.timeline__number {
+			color: var(--lj-color-7);
 			border: 1px solid var(--lj-color-7);
 			background-color: var(--lj-color-7-tint);
 		}

From 72fb31addba1fab9f004450c4dff66a7ac29271c Mon Sep 17 00:00:00 2001
From: Chris Abraham <cjyabraham@gmail.com>
Date: Sat, 19 Aug 2023 14:44:21 -0400
Subject: [PATCH 5/8] Update homepage to include learning journey link

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
---
 .../themes/cncf-twenty-two/includes/shortcodes/home.php   | 4 ++--
 .../source/scss/components/_front-page.scss               | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/wp-content/themes/cncf-twenty-two/includes/shortcodes/home.php b/web/wp-content/themes/cncf-twenty-two/includes/shortcodes/home.php
index 38e2c371c..60b235498 100644
--- a/web/wp-content/themes/cncf-twenty-two/includes/shortcodes/home.php
+++ b/web/wp-content/themes/cncf-twenty-two/includes/shortcodes/home.php
@@ -135,13 +135,13 @@ class="is-style-link-cta"><a href="/enduser/">Join the Community</a></p>
 	</div>
 
 	<div class="home-intro-box has-animation-scale-2">
-		<h3 class="home-intro-box__title">New to CNCF?</h3>
+		<h3 class="home-intro-box__title">New to Cloud Native?</h3>
 		<img class="home-intro-box__goldie" loading="lazy"
 			src="<?php LF_utils::get_image( 'home-goldie.png' ); ?>"
 			alt="Goldie">
 		<div class="home-intro-box__text-wrapper">
 			<p
-				class="is-style-link-cta"><a href="/about/who-we-are/" title="Learn more about CNCF">About CNCF</a></p>
+				class="is-style-link-cta"><a href="/cloud-native-learning-journey/" title="Learn about cloud native">Start your Journey</a></p>
 		</div>
 	</div>
 </div>
diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
index e193199be..e7f705a6e 100644
--- a/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
+++ b/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
@@ -387,7 +387,8 @@
 			@media (min-width: 1000px) {
 				background-color: transparent;
 				padding: 22px 0px 22px 0px;
-				text-align: center;
+				text-align: left;
+				margin-left: 260px;
 			}
 		}
 		.home-intro-box__text-wrapper {
@@ -424,7 +425,6 @@
 			}
 			@media (min-width: 500px) {
 				max-height: 110px;
-				right: 50px;
 			}
 		}
 		@media (min-width: 710px) {
@@ -436,13 +436,13 @@
 		@media (min-width: 1000px) {
 			padding: 0; // reset.
 			position: absolute;
-			right: 19%;
+			right: 26%;
 			top: -10px;
 			bottom: -10px;
 		}
 		@media (min-width: 1200px) {
 			max-height: 118px;
-			right: 22%;
+			right: 30%;
 			top: -20px;
 			bottom: -20px;
 		}

From 53ce05820279d5816d9195b0a1f3571995f79837 Mon Sep 17 00:00:00 2001
From: Chris Abraham <cjyabraham@gmail.com>
Date: Sat, 19 Aug 2023 14:53:35 -0400
Subject: [PATCH 6/8] remove caps

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
---
 .../themes/cncf-twenty-two/includes/shortcodes/home.php         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/wp-content/themes/cncf-twenty-two/includes/shortcodes/home.php b/web/wp-content/themes/cncf-twenty-two/includes/shortcodes/home.php
index 60b235498..e7f349de0 100644
--- a/web/wp-content/themes/cncf-twenty-two/includes/shortcodes/home.php
+++ b/web/wp-content/themes/cncf-twenty-two/includes/shortcodes/home.php
@@ -135,7 +135,7 @@ class="is-style-link-cta"><a href="/enduser/">Join the Community</a></p>
 	</div>
 
 	<div class="home-intro-box has-animation-scale-2">
-		<h3 class="home-intro-box__title">New to Cloud Native?</h3>
+		<h3 class="home-intro-box__title">New to cloud native?</h3>
 		<img class="home-intro-box__goldie" loading="lazy"
 			src="<?php LF_utils::get_image( 'home-goldie.png' ); ?>"
 			alt="Goldie">

From 502cff33234ac1ed8ac6dfbe97a064ad1ea29f21 Mon Sep 17 00:00:00 2001
From: Chris Abraham <cjyabraham@gmail.com>
Date: Sat, 19 Aug 2023 15:01:16 -0400
Subject: [PATCH 7/8] tweak size of goldie

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
---
 .../source/scss/components/_front-page.scss        | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
index e7f705a6e..a39136395 100644
--- a/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
+++ b/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
@@ -415,17 +415,17 @@
 	&__goldie {
 		@media (max-width: 709px) {
 			position: absolute;
-			max-height: 80px;
+			max-height: 60px;
 			height: auto;
 			bottom: 25px; // match padding.
 			right: 12px;
 			z-index: 1;
-			@media (min-width: 420px) {
-				max-height: 90px;
-			}
-			@media (min-width: 500px) {
-				max-height: 110px;
-			}
+		}
+		@media (min-width: 440px) {
+			max-height: 90px;
+		}
+		@media (min-width: 530px) {
+			max-height: 110px;
 		}
 		@media (min-width: 710px) {
 			max-height: 110px;

From 28211558c14f7ca2a2f265fac5404b649b3a3e43 Mon Sep 17 00:00:00 2001
From: Chris Abraham <cjyabraham@gmail.com>
Date: Sat, 19 Aug 2023 15:15:25 -0400
Subject: [PATCH 8/8] try to simplify this css so it works on dev consistently

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
---
 .../source/scss/components/_front-page.scss        | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
index a39136395..54ad4c651 100644
--- a/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
+++ b/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
@@ -413,20 +413,20 @@
 		}
 	}
 	&__goldie {
+		max-height: 60px;
+		@media (min-width: 440px) {
+			max-height: 90px;
+		}
+		@media (min-width: 530px) {
+			max-height: 110px;
+		}
 		@media (max-width: 709px) {
 			position: absolute;
-			max-height: 60px;
 			height: auto;
 			bottom: 25px; // match padding.
 			right: 12px;
 			z-index: 1;
 		}
-		@media (min-width: 440px) {
-			max-height: 90px;
-		}
-		@media (min-width: 530px) {
-			max-height: 110px;
-		}
 		@media (min-width: 710px) {
 			max-height: 110px;
 			align-self: flex-start;