diff --git a/functions.php b/functions.php index 6d97fad..793d70a 100644 --- a/functions.php +++ b/functions.php @@ -6,7 +6,6 @@ function nn_enqueue_styles(){ wp_enqueue_style('nn-styles', get_stylesheet_uri()); } - /** * Register custom block styles for core blocks. */ @@ -42,4 +41,52 @@ function remove_button_outline_style() { filemtime( get_stylesheet_directory() . '/assets/js/button-unregister-styles.js' ) ); } -add_action( 'enqueue_block_editor_assets', 'remove_button_outline_style', 20 ); \ No newline at end of file +add_action( 'enqueue_block_editor_assets', 'remove_button_outline_style', 20 ); + +/** + * Allow SVG and WEBP format in media uploader + */ +add_filter('wp_check_filetype_and_ext', 'muse_check_filetype_and_ext', 10, 4); +function muse_check_filetype_and_ext($data, $file, $filename, $mimes){ + global $wp_version; + + if ($wp_version !== '4.7.1') { + return $data; + } + + $filetype = wp_check_filetype($filename, $mimes); + + return [ + 'ext' => $filetype['ext'], + 'type' => $filetype['type'], + 'proper_filename' => $data['proper_filename'] + ]; +} +add_filter('upload_mimes', 'muse_mime_types', 1, 1); +function muse_mime_types($mimes) { + $mimes['svg'] = 'image/svg+xml'; + $mimes['svgz'] = 'image/svg+xml'; + $mimes['webp'] = 'image/webp'; + return $mimes; +} +/** + * Change hamburger menu icon according to Figma design + */ +function custom_render_block_core_navigation (string $block_content, array $block) +{ + if ( + $block['blockName'] === 'core/navigation' && + !is_admin() && + !wp_is_json_request() + ) { + return preg_replace('/\/', ' + + + +', $block_content); + } + + return $block_content; +} + +add_filter('render_block', 'custom_render_block_core_navigation', null, 2); \ No newline at end of file diff --git a/parts/header.html b/parts/header.html new file mode 100644 index 0000000..3f71a36 --- /dev/null +++ b/parts/header.html @@ -0,0 +1,20 @@ + +
+ +
+ +
+ +
+ + + +
+ +
+ +
+ +
+ \ No newline at end of file diff --git a/style.css b/style.css index 5b225c0..7aa66f1 100644 --- a/style.css +++ b/style.css @@ -18,4 +18,64 @@ > .wp-block-button__link:not(.has-text-color, .has-background):hover { background-color: var(--wp--preset--color--blue); color: var(--wp--preset--color--base); +} +header .wp-block-navigation { + flex-grow: 1; +} +header .wp-block-navigation .wp-block-navigation__responsive-container-content { + justify-content: space-between; +} +header .header-navigation { + width: 60%; +} +header .header-navigation ul.wp-block-navigation { + justify-content: flex-start; + gap: 58px; +} +header .header-navigation ul.wp-block-navigation li.current-menu-item { + color: var(--wp--preset--color--blue); +} +.wp-block-navigation__responsive-container-open:not(.always-shown) { + display: none; +} +@media screen and (max-width: 1199px) { + header .header-navigation { + width: auto; + } + .wp-block-navigation__responsive-container-open { + display: flex !important; + } + .wp-block-navigation__responsive-container-open:not(.always-shown) { + display: flex !important; + } + .wp-block-navigation__responsive-container { + display: none; + } +} +@media (min-width: 600px) and (max-width: 1199px) { + .wp-block-navigation__responsive-container-open:not(.always-shown) { + display: flex; + } + .wp-block-navigation__responsive-container { + display: none; + } + .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { + display: none; + } +} +@media screen and (max-width: 480px) { + .wp-block-site-logo { + width: 130px; + } + header > .wp-block-group { + padding-top: 20px !important; + padding-left: 15px; + padding-right: 15px; + } + h1 { + font-size: var(--wp--preset--font-size--x-large); + } + h2 { + font-size: var(--wp--preset--font-size--large); + } } \ No newline at end of file diff --git a/theme.json b/theme.json index d7aa8b5..fdafc07 100644 --- a/theme.json +++ b/theme.json @@ -63,7 +63,7 @@ ] }, "layout": { - "contentSize": "620px", + "contentSize": "1200px", "wideSize": "1280px" }, "spacing": { @@ -176,6 +176,12 @@ "name": "Body", "size": "19px", "slug": "body" + }, + { + "fluid": false, + "name": "Menu", + "size": "16px", + "slug": "menu" } ], "writingMode": true @@ -230,6 +236,28 @@ "lineHeight": "130%", "letterSpacing": "0.96px" } + }, + "core/navigation": { + "elements": { + "link": { + ":hover": { + "typography": { + "textDecoration": "underline" + } + }, + "typography": { + "textDecoration": "none", + "fontSize":"var(--wp--preset--font-size--menu)", + "fontFamily":"var(--wp--preset--font-family--body)", + "fontStyle":"normal", + "fontWeight":"600", + "lineHeight":"1.3em" + } + } + }, + "typography": { + "fontWeight": "500" + } } }, "color": { @@ -246,15 +274,15 @@ }, ":focus": { "color": { - "background": "var(--wp--preset--color--contrast)", + "background": "var(--wp--preset--color--blue)", "text": "var(--wp--preset--color--base)" }, "outline": { - "color": "var(--wp--preset--color--contrast)", + "color": "var(--wp--preset--color--blue)", "offset": "2px" }, "border": { - "color": "var(--wp--preset--color--contrast)" + "color": "var(--wp--preset--color--blue)" } }, ":hover": { @@ -372,5 +400,12 @@ "lineHeight": "1.4em" }, "css": ":where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}.body1{font-size:var(--wp--preset--font-size--body-1);}.body2{font-size:var(--wp--preset--font-size--body-2);line-height:1.5em;}.body3{font-size:var(--wp--preset--font-size--body-3);line-height:1.5em;letter-spacing:0.005em;}.eyebrow{font-size:var(--wp--preset--font-size--eyebrow);line-height:1.4em;letter-spacing:0.12em;}" - } + }, + "templateParts": [ + { + "area": "header", + "name": "header", + "title": "Header" + } + ] } \ No newline at end of file