final #4471
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,89 +18,4 @@ body { | |
| background: #eee; | ||
| } | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,30 @@ | ||
| .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; | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,67 @@ | ||
| import React from 'react'; | ||
| import './Article.css'; | ||
|
|
||
| function Article() { | ||
| return ( | ||
| <article className="article"> | ||
|
There was a problem hiding this comment. This isolated empty line between imports and the |
||
| <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, | ||
| 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 | ||
|
Comment on lines
+9
to
+14
There was a problem hiding this comment. The multiple isolated empty lines between CSS blocks (e.g., between |
||
| 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. | ||
| </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 | ||
| 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 | ||
| 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> | ||
| ); | ||
| } | ||
|
|
||
| export default Article; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,43 @@ | ||
| .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 { | ||
|
There was a problem hiding this comment. Navigation is still implemented directly in |
||
| 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; | ||
| } | ||
|
|
||
| @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,23 @@ | ||
| import React from 'react'; | ||
| import './Header.css'; | ||
|
|
||
|
There was a problem hiding this comment. The extra empty line between imports and the |
||
| function Header() { | ||
| return ( | ||
|
There was a problem hiding this comment. Multiple isolated empty lines between style blocks ( |
||
| <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> | ||
|
Comment on lines
+8
to
+18
There was a problem hiding this comment. Navigation is implemented inline here inside |
||
| </header> | ||
| ); | ||
| } | ||
|
|
||
| export default Header; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,14 @@ | ||
| .welcome { | ||
| height: 100vh; | ||
| background: coral; | ||
|
There was a problem hiding this comment. The empty line between the imports and the There was a problem hiding this comment. Similarly to |
||
| } | ||
|
|
||
|
There was a problem hiding this comment. The extra blank line between the |
||
| .welcome__text { | ||
| margin: 0; | ||
| font-size: 400%; | ||
| text-align: center; | ||
| line-height: 1; | ||
| padding-top: calc(50vh - 20pt); | ||
| display: block; | ||
| font-weight: 700; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,12 @@ | ||
| import React from 'react'; | ||
| import './Welcome.css'; | ||
|
|
||
| function Welcome() { | ||
| return ( | ||
|
There was a problem hiding this comment. The extra empty line between |
||
| <section className="welcome"> | ||
| <span className="welcome__text">Sticky Header!</span> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| export default Welcome; | ||
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.
This violates checklist item #1:
Don't overuse empty lines between components.There is an extra empty line between the import block and theAppfunction that matches the BAD EXAMPLE pattern.