Develop

.eslintrc.js → .eslintrc.cjs

@@ -1,3 +1,7 @@
 module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
   extends: '@mate-academy/eslint-config',
 };

.github/workflows/test.yml-template

@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data

.stylelintrc.cjs

@@ -0,0 +1,236 @@
+module.exports = {
+  extends: [
+    '@mate-academy/stylelint-config',
+    'stylelint-config-standard-scss',
+    'stylelint-prettier/recommended',
+  ],
+  plugins: ['stylelint-order', 'stylelint-scss'],
+  rules: {
+    'prettier/prettier': true,
+    'order/order': [
+      [
+        'custom-properties',
+        'dollar-variables',
+        {
+          type: 'at-rule',
+          hasBlock: false,
+        },
+        'declarations',
+        'at-rules',
+        'rules',
+      ],
+      { disableFix: false },
+    ],
+    'order/properties-order': [
+      [
+        {
+          groupName: 'Positioning',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: [
+            'z-index',
+            'position',
+            'inset',
+            'top',
+            'right',
+            'bottom',
+            'left',
+          ],
+        },
+        {
+          groupName: 'Visibility',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: ['opacity', 'visibility', 'pointer-events', 'cursor'],
+        },
+        {
+          groupName: 'Box Model',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: [
+            'box-sizing',
+            'display',
+            'width',
+            'min-width',
+            'max-width',
+            'height',
+            'min-height',
+            'max-height',
+            'overflow',
+            'overflow-x',
+            'overflow-y',
+          ],
+        },
+        {
+          groupName: 'Margins & Paddings',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: [
+            'margin',
+            'margin-inline',
+            'margin-block',
+            'margin-top',
+            'margin-right',
+            'margin-bottom',
+            'margin-left',
+            'padding',
+            'padding-inline',
+            'padding-block',
+            'padding-top',
+            'padding-right',
+            'padding-bottom',
+            'padding-left',
+          ],
+        },
+        {
+          groupName: 'Typography',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: [
+            'font',
+            'font-family',
+            'font-size',
+            'font-weight',
+            'font-style',
+            'font-variant',
+            'line-height',
+            'letter-spacing',
+            'text-align',
+            'text-transform',
+            'text-decoration',
+            'text-shadow',
+            'color',
+            'word-spacing',
+          ],
+        },
+        {
+          groupName: 'Grid Box',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: [
+            'grid',
+            'grid-area',
+            'grid-template',
+            'grid-template-areas',
+            'grid-template-rows',
+            'grid-template-columns',
+            'grid-row',
+            'grid-row-start',
+            'grid-row-end',
+            'grid-column',
+            'grid-column-start',
+            'grid-column-end',
+            'grid-auto-rows',
+            'grid-auto-columns',
+            'grid-auto-flow',
+            'grid-gap',
+            'grid-row-gap',
+            'grid-column-gap',
+          ],
+        },
+        {
+          groupName: 'Flex Box',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: [
+            'flex',
+            'flex-direction',
+            'flex-wrap',
+            'flex-flow',
+            'flex-basis',
+            'flex-grow',
+            'flex-shrink',
+            'justify-content',
+            'align-items',
+            'align-content',
+            'align-self',
+            'order',
+            'gap',
+          ],
+        },
+        {
+          groupName: 'Background and Images',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: [
+            'object-fit',
+            'object-position',
+            'background',
+            'background-color',
+            'background-image',
+            'background-repeat',
+            'background-attachment',
+            'background-position',
+          ],
+        },
+        {
+          groupName: 'Borders and Shadows',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: [
+            'box-shadow',
+            'border',
+            'border-top',
+            'border-right',
+            'border-bottom',
+            'border-left',
+            'border-width',
+            'border-style',
+            'border-color',
+            'border-radius',
+          ],
+        },
+        {
+          groupName: 'Masking',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: [
+            'clip',
+            'mask',
+            'mask-image',
+            'mask-mode',
+            'mask-repeat',
+            'mask-position',
+            'mask-clip',
+            'mask-size',
+            'mask-origin',
+            'mask-composite',
+            'mask-type',
+          ],
+        },
+        {
+          groupName: 'Transforms and Transitions',
+          emptyLineBefore: 'always',
+          noEmptyLineBetween: true,
+          properties: [
+            'transform',
+            'transform-origin',
+            'transform-style',
+            'perspective',
+            'perspective-origin',
+            'transition',
+            'transition-property',
+            'transition-duration',
+            'transition-timing-function',
+            'transition-delay',
+          ],
+        },
+      ],
+      {
+        unspecified: 'bottomAlphabetical',
+        emptyLineBeforeUnspecified: 'always',
+      },
+    ],
+    'declaration-empty-line-before': [
+      'always',
+      {
+        except: ['first-nested'],
+        ignore: [
+          'after-comment',
+          'inside-single-line-block',
+          'after-declaration',
+        ],
+      },
+    ],
+  },
+};

README.md

@@ -1,4 +1,5 @@
 # Museum 2 landing page
+
 Implement landing page according to [Figma design](https://www.figma.com/file/HL3XGt5ZatvJoYBhOaWY5x/museum-prototype?node-id=323%3A1957) - Use BEM and SCSS
 
 Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Playfair+Display?query=Playfair+Display), [Raleway](https://fonts.google.com/specimen/Raleway?query=Raleway)
@@ -16,8 +17,8 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play
 1. Implement `Підпишіться на дайджест` block.
 1. Implement footer.
 
-
 ## Github flow
+
 1. **Fork** the repo.
 2. **Clone** the forked one. (The project link should have your name but not `mate-academy`)
 3. Run `npm install` (or just `npm i`).
@@ -31,7 +32,7 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play
 11. `git push origin develop` - to send you code for PR.
 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo.
 13. Replace `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.github.io/Museum_2/).
+    [DEMO LINK](https://PodvAx.github.io/Museum_2/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.

TipsAttrHtml.txt

@@ -0,0 +1,8 @@
+Button, Link:
+  ontouchstart - attr, for work :active effects, on IOS phones and tablets.
+  -webkit-tap-highlight-color: transparent - CSS property for removing half-transparent block on click, on IOS phones and tablets.
+  @media (hover:none) { cursor: default } - CSS rule, for removing half transparent blue block on Chrome DevTools, Android phones.
+  role="button" - to describe that link acts like a button.
+  aria-label - attr for screen readers, to read the meaning of the button.
+  aria-pressed - attr for screen reader, to understand if button is pressed or not. Change value when press on btn.
+  title - attr for better accesability. Show add description while hover.