feat: updated components for the app #4485
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,89 +18,6 @@ body { | |
| background: #eee; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,15 @@ | ||
| import './App.css'; | ||
| import Welcome from './components/Welcome/Welcome'; | ||
| import Header from './components/Header/Header'; | ||
| import Article from './components/Article/Article'; | ||
| // Move each BEM block to a separate component (file) and import them here | ||
|
|
||
| function App() { | ||
| return ( | ||
| <main className="app"> | ||
| <Welcome /> | ||
| <Header /> | ||
|
There was a problem hiding this comment. The navigation block is still rendered directly inside |
||
| <Article /> | ||
| </main> | ||
| ); | ||
| } | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,31 @@ | ||
| /* Put article styles here */ | ||
|
thorn086 marked this conversation as resolved.
|
||
| .article { | ||
| margin: 5em auto 0; | ||
|
There was a problem hiding this comment. The navigation block is still rendered directly in |
||
| padding: 1em; | ||
|
thorn086 marked this conversation as resolved.
|
||
| font-size: 140%; | ||
|
There was a problem hiding this comment. There is no media query here adjusting the article font size to |
||
| max-width: 800px; | ||
| background: white; | ||
| box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px; | ||
| } | ||
|
|
||
| .article__paragraph { | ||
| margin: 0; | ||
| color: #333; | ||
| } | ||
|
Comment on lines
+2
to
+14
There was a problem hiding this comment.
|
||
|
|
||
| .article__paragraph:not(:first-child) { | ||
| margin-top: 0.7em; | ||
| } | ||
|
|
||
| @media (min-width: 500px) { | ||
| .article { | ||
| margin: 3.5em auto 0; | ||
| padding: 2em; | ||
| } | ||
| } | ||
|
|
||
|
Comment on lines
+17
to
+26
There was a problem hiding this comment.
|
||
| @media (min-width: 800px) { | ||
| .article { | ||
| margin: 3.5em auto; | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,68 @@ | ||
| // import a css file containig article styles | ||
| import './Article.css'; | ||
| // Create an Article function returning the HTML of article block | ||
| function Article() { | ||
| return ( | ||
| <article className="article"> | ||
|
thorn086 marked this conversation as resolved.
|
||
| <h2 className="article__title">Headline</h2> | ||
| <p className="article__paragraph"> | ||
| 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, | ||
|
There was a problem hiding this comment. The project requirement says the navigation block must be extracted into its own |
||
| 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 | ||
|
Comment on lines
+2
to
+15
There was a problem hiding this comment. The |
||
| efficitur massa non neque elementum semper. Vestibulum lorem arcu, | ||
|
thorn086 marked this conversation as resolved.
|
||
| 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. | ||
| </p> | ||
| <p className="article__paragraph"> | ||
| 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 | ||
|
Comment on lines
+17
to
+27
There was a problem hiding this comment. The |
||
| congue magna, sit amet bibendum libero nisi id massa. | ||
| </p> | ||
| <p className="article__paragraph"> | ||
| Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. Cras | ||
|
Comment on lines
+20
to
+31
There was a problem hiding this comment. Tests expect a specific media-query font-size (44.8px) for the article; right now your media queries only adjust |
||
| 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. | ||
| </p> | ||
| <p className="article__paragraph"> | ||
| 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. | ||
| </p> | ||
| <p className="article__paragraph"> | ||
| 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. | ||
| </p> | ||
| </article> | ||
| ); | ||
| } | ||
|
|
||
| // Add a default export statement for Article component to use it in the other files | ||
| export default Article; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,43 @@ | ||
| /* Put header styles here */ | ||
| .navigation__link { | ||
|
There was a problem hiding this comment. The |
||
| display: flex; | ||
| outline: none; | ||
| text-decoration: none; | ||
| opacity: 0.7; | ||
|
There was a problem hiding this comment. Checklist item #1 says: "Don't overuse empty lines between components". The extra blank line before the |
||
| padding: 0 0.5em; | ||
| color: black; | ||
| transition: opacity 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .navigation__link:hover, | ||
| .navigation__link:focus { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .header { | ||
|
There was a problem hiding this comment. The |
||
| width: 100%; | ||
| padding: 1em; | ||
| font-size: 140%; | ||
|
There was a problem hiding this comment. Per the generalized requirements, |
||
| 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; | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,24 @@ | ||
| // import a css file containig header styles | ||
| import './Header.css'; | ||
| // Create a Header function returning the HTML of header block | ||
| function Header() { | ||
| return ( | ||
| <header className="header"> | ||
| <h1 className="header__title">Site Name</h1> | ||
| <nav className="navigation"> | ||
| <a className="navigation__link" href="#about"> | ||
| About | ||
| </a> | ||
| <a className="navigation__link" href="#services"> | ||
| Services | ||
| </a> | ||
| <a className="navigation__link" href="#contact"> | ||
| Contact | ||
| </a> | ||
| </nav> | ||
|
thorn086 marked this conversation as resolved.
Comment on lines
+8
to
+18
There was a problem hiding this comment. The navigation markup ( |
||
| </header> | ||
| ); | ||
| } | ||
|
|
||
| // Add a default export statement for Header component to use it in the other files | ||
| export default Header; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.navigation__linkstyles are placed inHeader.css, but all.navigation/.navigation__linkstyles must be moved into a dedicatedNavigation.cssfile associated with aNavigationcomponent. Keeping them here violates the requirement to split CSS per component and decompose by BEM block.