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 @@ + + +
+
+ + + + + +
+
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 @@ + + +
class=""> + +
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 @@ +'; + 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( + '
  • %s%s
    • ', + esc_attr( $slug ), + esc_html( $number ), + esc_html( $title ) + ); + } + echo ''; +} + +/** + * 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 @@ + + +
    +
    +
    +
    +
    +
    + '; + ?> +
    +
    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..8940c09ea --- /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:#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.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 @@ + + +
    class=""> +'; +?> +
    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..73079d5ce --- /dev/null +++ b/web/wp-content/themes/cncf-twenty-two/blocks/learning-journey/learning-journey.scss @@ -0,0 +1,247 @@ +: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 { + &: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); + } + .timeline__item:after { + background-color: var(--lj-color-1); + } + } + &: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); + } + .timeline__item:after { + background-color: var(--lj-color-2); + } + } + &: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); + } + .timeline__item:after { + background-color: var(--lj-color-3); + } + } + &: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); + } + .timeline__item:after { + background-color: var(--lj-color-4); + } + } + &: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); + } + .timeline__item:after { + background-color: var(--lj-color-5); + } + } + &: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); + } + .timeline__item:after { + background-color: var(--lj-color-6); + } + } + &: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); + } + .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' ); 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..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,13 +135,13 @@ class="is-style-link-cta">Join the Community

    -

    New to CNCF?

    +

    New to cloud native?

    Goldie

    About CNCF

    + class="is-style-link-cta">Start your Journey

    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..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 @@ -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 { @@ -412,20 +413,19 @@ } } &__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: 80px; 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; - right: 50px; - } } @media (min-width: 710px) { max-height: 110px; @@ -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; }