Moyo header

backstopConfig.js

@@ -40,13 +40,15 @@ const config = {
     },
     {
       ...basic,
+      misMatchThreshold: 2,
       label: 'Link with data-qa_hover',
       selectors: ['[data-qa="hover"]'],
       hoverSelector: '[data-qa="hover"]',
       postInteractionWait: 1000,
     },
     {
       ...basic,
+      misMatchThreshold: 2,
       label: 'Link with class_is-active',
       selectors: ['a.is-active'],
     },

readme.md

@@ -1,31 +1,31 @@
 # Moyo header
-Create HTML page with the header using `flexbox` based on the [Figma Mockup](https://www.figma.com/file/1sog2rmfyCjnVxkeZ3ptnc/MOYO-%2F-Header?node-id=0%3A1&mode=dev).
+Create an HTML page with the header using `flexbox` based on the [Figma Mockup](https://www.figma.com/design/1sog2rmfyCjnVxkeZ3ptnc/MOYO---Header).
 
-The page should match the design Pixel Perfect: all the sizes, colors and distanced MUST be the same as on the design.
+The page should match the design Pixel Perfect: all the sizes, colors and distances MUST be the same as on the design.
 
 > Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline)
 
 ## Requirements:
 
-- reset browser default margins.
-- use [Roboto font](https://fonts.google.com/specimen/Roboto).
-- use semantic tags: `<header>`, `<img>`, `<nav>`, `<ul>`, `<li>` and `<a>`.
-- the header should stretch the full page width (don't use horizontal margin).
-- the height should be set for nav links (not the header), take it from the design.
-- header content should be vertically centered.
-- Logo should also be a link with an image inside (from [src/images](src/images)). But it should not be a part of the `<nav>`.
-- ❗️ the blue link with a line below should have a class `is-active` in addition to any other classes you add.
+- reset browser default margins
+- use [Roboto font](https://fonts.google.com/specimen/Roboto): select ONLY **roman** style, **medium (500)** weight and **normal** width for embedding. **THIS STEP IS IMPORTANT, OR YOUR AUTO TEST MAY FAIL. Take a look at the image at the end of the Readme.**
+- use semantic tags: `<header>`, `<img>`, `<nav>`, `<ul>`, `<li>` and `<a>`
+- the header should stretch the full page width (don't use a horizontal margin)
+- the height should be set for nav links (not the header), take it from the design
+- header content should be vertically centered
+- the logo should also be a link with an image inside (from [src/images](src/images)). But it should not be a part of the `<nav>`
+- ❗️ the blue link with a line below should have a class `is-active` in addition to any other classes you add
 - ❗️ add `data-qa="hover"` attribute to the 4th link for testing (`Laptops & computers`)
 - link color should be changed on `:hover`
-- Use the `::after` and position it relative to a link with `is-active` class
-- Don't use flex `gap` property for indents. It's not supported in tests, use `margin` instead.
-- There should not be margins before the first and after the last list items
-- Don't just copy all styles from Figma. Think, which of them are relevant. Uneven sizes (e.g. `line-height: 14.6px`) are definitely useless.
-- Nav Links should not have any padding, but have text centered
+- use the `::after` and position it relative to a link with `is-active` class
+- don't use the flex `gap` property for indents. It's not supported in tests, use `margin` instead
+- there should not be margins before the first and after the last list items
+- don't just copy all styles from Figma. Think, which of them are relevant. Uneven sizes (e.g. `line-height: 14.6px`) are definitely useless
+- Nav Links should not have any padding but have the text centered
 
 ## Checklist
 
-❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:
+❗️ Replace `<your_account>` with your GitHub username and copy the links to the `Pull Request` description:
 
 - [DEMO LINK](https://<your_account>.github.io/layout_moyo-header/)
 - [TEST REPORT LINK](https://<your_account>.github.io/layout_moyo-header/report/html_report/)
@@ -39,3 +39,5 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan
 - [ ] **CSS Variable** is used for a blue color
 - [ ] Pseudo-element is used for a blue line below the active link
 - [ ] Code follows all the [Code Style Rules ❗️](./checklist.md)
+- [ ] The Google Fonts Configuration follows requirements. 
+![alt text](./assets/image.png)