Develop

README.md

@@ -9,4 +9,4 @@ Split the `App.js` into components based on CSS blocks. CSS code should be split
 - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline)
 - Open one more terminal and run tests with `npm test` to ensure your solutions is correct
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_decompose/) and add it to the PR description
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://egorfomin419.github.io/react_decompose/) and add it to the PR description

package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "*",
     "@vitejs/plugin-react": "^4.3.1",
     "cypress": "^13.13.0",

src/App.css

@@ -18,89 +18,6 @@ body {
   background: #eee;
 }
 
-.welcome {
-  height: 100vh;
-  background: coral;
-}
-
-.welcome__text {
-  margin: 0;
-  font-size: 400%;
-  text-align: center;
-  line-height: 1;
-  padding-top: calc(50vh - 20pt);
-  display: block;
-  font-weight: 700;
-}
-
-.header {
-  width: 100%;
-  padding: 1em;
-  font-size: 140%;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  transition: opacity 0.2s ease-in-out;
-  text-align: center;
-}
-
-.header__title {
-  font-weight: 600;
-  display: inline;
-  margin: 0;
-  padding: 0;
-  font-size: inherit;
-}
-
-.navigation__link {
-  display: inline-block;
-  outline: none;
-  text-decoration: none;
-  opacity: 0.7;
-  padding: 0 0.5em;
-  color: black;
-  transition: opacity 0.2s ease-in-out;
-}
-
-.navigation__link:hover,
-.navigation__link:focus {
-  opacity: 1;
-}
-
-.article {
-  margin: 5em auto 0;
-  padding: 1em;
-  font-size: 140%;
-  max-width: 800px;
-  background: white;
-  box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
-}
-
-.article__paragraph {
-  margin: 0;
-  color: #333;
-}
-
-.article__paragraph:not(:first-child) {
-  margin-top: 0.7em;
-}
-
-@media (min-width: 500px) {
-  .header {
-    text-align: left;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .article {
-    margin: 3.5em auto 0;
-    padding: 2em;
-  }
-}
-
-@media (min-width: 800px) {
-  .article {
-    margin: 3.5em auto;
-  }
+.app {
+  min-height: 100vh;
 }