diff --git a/package-lock.json b/package-lock.json index 199392962..009e4c8fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,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", @@ -763,10 +763,11 @@ } }, "node_modules/@mate-academy/scripts": { - "version": "1.8.5", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.5.tgz", - "integrity": "sha512-mHRY2FkuoYCf5U0ahIukkaRo5LSZsxrTSgMJheFoyf3VXsTvfM9OfWcZIDIDB521kdPrScHHnRp+JRNjCfUO5A==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 4084d88ef..1a435e196 100644 --- a/package.json +++ b/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", diff --git a/src/components/Article/Article.css b/src/components/Article/Article.css index 56e2e0542..14c5f7036 100644 --- a/src/components/Article/Article.css +++ b/src/components/Article/Article.css @@ -1 +1,31 @@ /* Put article styles here */ +.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) { + .article { + margin: 3.5em auto 0; + padding: 2em; + } +} + +@media (min-width: 800px) { + .article { + margin: 3.5em auto; + } +} diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx index 073476529..0244f51e8 100644 --- a/src/components/Article/Article.jsx +++ b/src/components/Article/Article.jsx @@ -3,3 +3,75 @@ // Create an Article function returning the HTML of article block // Add a default export statement for Article component to use it in the other files +import React from 'react'; +import './Article.css'; + +function Article() { + return ( +
+

Headline

+ +

+ In elementum lorem eget est euismod ornare. Phasellus sit amet + pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam nibh. + Mauris molestie, urna accumsan ornare semper, augue nibh posuere lorem, + vitae feugiat sem magna eget massa. Vivamus quis tincidunt dolor. Fusce + efficitur, orci non vestibulum consequat, lectus turpis bibendum odio, + in efficitur leo felis sed justo. Fusce commodo iaculis orci, quis + imperdiet urna. Sed mollis facilisis lacus non condimentum. Nunc + efficitur massa non neque elementum semper. Vestibulum lorem arcu, + tincidunt in quam et, feugiat venenatis augue. Donec sed tincidunt + tellus, a facilisis magna. Proin sit amet viverra nibh, bibendum gravida + felis. Vivamus ut nunc id mauris posuere pellentesque. Praesent + tincidunt id odio id feugiat. +

+ +

+ In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae, + fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et + cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien + ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit + molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor + congue magna, sit amet bibendum libero nisi id massa. +

+ +

+ Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. Cras + congue, massa nec sagittis mollis, dui felis ultrices magna, tincidunt + finibus lorem quam in sem. Morbi odio turpis, pulvinar sit amet + vulputate quis, ultricies eu libero. Donec ac maximus neque, nec maximus + nibh. Morbi rhoncus convallis urna, accumsan porta lorem hendrerit in. + Cras eget nisl dui. Morbi faucibus nisi eget ipsum semper vulputate. + Mauris nec tincidunt lectus. Aenean ac mi consequat velit dignissim + consectetur. Fusce placerat ac ipsum ac eleifend. Aenean quis faucibus + ex. +

+ +

+ Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla + facilisi. In at elit id leo tristique condimentum. Donec at est nulla. + Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit + vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna nibh, + blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo. + Praesent in ullamcorper est. +

+ +

+ Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam + convallis faucibus ante sed porta. Nullam ut convallis elit, quis + venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et + orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo + dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae + turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur + consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt + quis sodales vitae, ornare a turpis. Proin sit amet finibus enim. Fusce + tempus a neque vitae tempor. Aenean rutrum, libero iaculis interdum + vulputate, dui eros vehicula nisi, at interdum enim lacus eu diam. +

+
+ ); +} + +export default Article; diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 0b160f66f..44b5f263a 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1 +1,28 @@ /* Put header styles here */ +.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; +} + +@media (min-width: 500px) { + .header { + text-align: left; + display: flex; + justify-content: space-between; + } +} diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 3f2fea103..c81de1d58 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -3,3 +3,17 @@ // Create a Header function returning the HTML of header block // Add a default export statement for Header component to use it in the other files +import React from 'react'; +import './Header.css'; +import Navigation from '../Navigation/Navigation'; + +function Header() { + return ( +
+

Site Name

+ +
+ ); +} + +export default Header; diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css new file mode 100644 index 000000000..a67620c16 --- /dev/null +++ b/src/components/Navigation/Navigation.css @@ -0,0 +1,14 @@ +.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; +} diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx new file mode 100644 index 000000000..2d0a2c424 --- /dev/null +++ b/src/components/Navigation/Navigation.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import './Navigation.css'; + +function Navigation() { + return ( + + ); +} + +export default Navigation; diff --git a/src/components/Navigation/Navigation.spec.jsx b/src/components/Navigation/Navigation.spec.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Welcome/Welcome.css b/src/components/Welcome/Welcome.css index 564ff918a..af6498e91 100644 --- a/src/components/Welcome/Welcome.css +++ b/src/components/Welcome/Welcome.css @@ -1 +1,14 @@ -/* Put welcome styles here */ +.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; +} diff --git a/src/components/Welcome/Welcome.jsx b/src/components/Welcome/Welcome.jsx index fbaaa3c4d..30ffd4e27 100644 --- a/src/components/Welcome/Welcome.jsx +++ b/src/components/Welcome/Welcome.jsx @@ -3,3 +3,16 @@ // Create a Welcome function returning the HTML of welcome block // Add a default export statement for Welcome component to use it in the other files +/* Put welcome styles here */ +import React from 'react'; +import './Welcome.css'; + +function Welcome() { + return ( +
+ Sticky Header! +
+ ); +} + +export default Welcome;