Skip to content

Commit b417d88

Browse files
lucassabreulucassabreu
committed
header to App
1 parent 757d21e commit b417d88

File tree

5 files changed

+128
-97
lines changed

5 files changed

+128
-97
lines changed

‎src/App.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.CWSPApp header {
2+
font-family: Oswald, Roboto, sans-serif;
3+
font-size: 120%;
4+
padding: 1rem;
5+
text-align: center;
6+
margin-bottom: 1rem;
7+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
8+
}
9+
10+
.CWSPApp header a {
11+
color: #000;
12+
border-bottom: 0;
13+
}
14+
15+
@media (min-width: 400px) {
16+
.CWSPApp header {
17+
font-size: 150%;
18+
}
19+
}
20+
21+
@media (min-width: 576px) {
22+
.CWSPApp header {
23+
font-size: 200%;
24+
}
25+
}
26+
27+
.CWSPApp header * {
28+
padding: 0;
29+
margin: 0;
30+
vertical-align: middle;
31+
}
32+
33+
.CWSPApp header .text {
34+
font-size: 100%;
35+
margin: .75em;
36+
display: inline-block;
37+
}
38+
39+
.CWSPApp header .logo {
40+
height: 2em;
41+
}
42+
43+
.CWSPApp section {
44+
text-align: center;
45+
padding: 1rem 0;
46+
}
47+
48+
.CWSPApp section:not(:last-child) {
49+
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
50+
}
51+
52+
.CWSPApp section h2,
53+
.CWSPApp section h4 {
54+
text-align: center;
55+
margin: 2rem 0;
56+
padding: 0;
57+
text-align: center;
58+
}

‎src/App.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
11
import React from 'react';
22
import './App.css';
3+
import CoderockrLogo from './assets/images/hand-yellow.svg'
34
import Home from './Home'
5+
import Footer from './Footer';
46
import { Switch, Route } from 'react-router-dom'
57

68
const App = () => (
7-
<Switch>
8-
<Route exact path="/" component={Home} />
9-
</Switch>
9+
<div className="CWSPApp">
10+
<header>
11+
<a href="/">
12+
<CoderockrLogo className="logo" />
13+
<h1 className="text">CODEROCKR WAY PROJECT SETUP</h1>
14+
</a>
15+
</header>
16+
<div className=" container">
17+
<Switch>
18+
<Route exact path="/" component={Home} />
19+
</Switch>
20+
</div>
21+
<Footer />
22+
</div>
1023
)
1124

1225
export default App;

‎src/Home.css‎

Lines changed: 6 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,33 @@
1-
.Home header {
2-
font-family: Oswald, Roboto, sans-serif;
3-
font-size: 120%;
4-
padding: 1rem;
5-
text-align: center;
6-
margin-bottom: 1rem;
7-
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
8-
}
9-
10-
@media (min-width: 400px) {
11-
.Home header {
12-
font-size: 150%;
13-
}
14-
}
15-
16-
@media (min-width: 576px) {
17-
.Home header {
18-
font-size: 200%;
19-
}
20-
}
21-
22-
.Home header * {
23-
padding: 0;
24-
margin: 0;
25-
vertical-align: middle;
26-
}
27-
28-
.Home header .text {
29-
font-size: 100%;
30-
margin: .75em;
31-
display: inline-block;
32-
}
33-
34-
.Home header .logo {
35-
height: 2em;
36-
}
37-
38-
.Home section {
39-
text-align: center;
40-
}
41-
42-
.Home section:not(:last-child) {
43-
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
44-
padding: 1rem 0;
45-
}
46-
47-
.Home section.description {
1+
.CWSPApp .Home section.description {
482
font: 300 140% aller, Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;
493
clear: both;
504
margin-top: 1rem;
515
text-align: center;
526
padding: 4rem;
537
}
548

55-
.Home section h2,
56-
.Home section h4 {
57-
text-align: center;
58-
margin: 2rem 0;
59-
padding: 0;
60-
text-align: center;
61-
}
62-
63-
.Home .project-handlers-buttons {
9+
.CWSPApp .Home .project-handlers-buttons {
6410
list-style: none;
6511
margin: 0;
6612
padding: 0;
6713
}
6814

69-
.Home .project-handlers-buttons .btn {
15+
.CWSPApp .Home .project-handlers-buttons .btn {
7016
display: inline-block;
7117
padding: 1rem 3rem;
7218
width: 100%;
7319
margin-bottom: 1rem;
7420
}
7521

76-
.Home .project-handlers-buttons .btn .icon {
22+
.CWSPApp .Home .project-handlers-buttons .btn .icon {
7723
position: relative;
7824
top: -2px;
7925
width: 3rem;
8026
display: block;
8127
margin: auto;
8228
}
8329

84-
.Home .project-handlers-buttons .btn:hover .icon path {
30+
.CWSPApp .Home .project-handlers-buttons .btn:active .icon path,
31+
.CWSPApp .Home .project-handlers-buttons .btn:hover .icon path {
8532
fill: white;
8633
}

‎src/Home.js‎

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React from 'react';
2-
import Footer from './Footer';
32
import { withRouter } from 'react-router-dom';
43

5-
import CoderockrLogo from './assets/images/hand-yellow.svg'
64
import githubLogo from './assets/images/github.svg'
75
import gitlabLogo from './assets/images/gitlab.svg'
86
import trelloLogo from './assets/images/trello.svg'
@@ -32,38 +30,32 @@ const SETUPABLE = [
3230

3331
const Home = () => (
3432
<div className="Home">
35-
<header>
36-
<CoderockrLogo className="logo" />
37-
<h1 className="text">CODEROCKR WAY PROJECT SETUP</h1>
38-
</header>
39-
<div className="container">
40-
<section className="description">
41-
<p>
42-
This web client helps to setup a project at GitHub, GitLab or Trello to use the
43-
Coderockr Way's labels, making easier to bootstrap the basic configuration at
44-
your project.
45-
</p>
46-
</section>
47-
<section className="project-handlers">
48-
<h2>Where is your project?</h2>
49-
<ul className="row project-handlers-buttons justify-content-md-center">
50-
{SETUPABLE.map(({ name, logo: Logo, url, enabled }) => (
51-
<li key={name} className="col-md-4">
52-
<a className={`btn btn-primary ${enabled ? null : 'disabled'}`} href={url}
53-
alt={enabled ? '' : `${name} will be supported soon`}>
54-
<Logo className="icon" />
55-
{name}
56-
</a>
57-
</li>
58-
))}
59-
</ul>
60-
</section>
61-
<section className="more-about">
62-
<h4>Wanna know more about?</h4>
63-
<p>Look this link: <a href="https://blog.coderockr.com/simplificando-o-setup-de-projetos-no-github-f29b76c83194">Simplificando o Setup de Projetos no GitHub</a>
64-
</p>
65-
</section>
66-
</div>
33+
<section className="description">
34+
<p>
35+
This web client helps to setup a project at GitHub, GitLab or Trello to use the
36+
Coderockr Way's labels, making easier to bootstrap the basic configuration at
37+
your project.
38+
</p>
39+
</section>
40+
<section className="project-handlers">
41+
<h2>Where is your project?</h2>
42+
<ul className="row project-handlers-buttons justify-content-md-center">
43+
{SETUPABLE.map(({ name, logo: Logo, url, enabled }) => (
44+
<li key={name} className="col-md-4">
45+
<a className={`btn btn-primary ${enabled ? null : 'disabled'}`} href={url}
46+
alt={enabled ? '' : `${name} will be supported soon`}>
47+
<Logo className="icon" />
48+
{name}
49+
</a>
50+
</li>
51+
))}
52+
</ul>
53+
</section>
54+
<section className="more-about">
55+
<h4>Wanna know more about?</h4>
56+
<p>Look this link: <a href="https://blog.coderockr.com/simplificando-o-setup-de-projetos-no-github-f29b76c83194">Simplificando o Setup de Projetos no GitHub</a>
57+
</p>
58+
</section>
6759
</div>
6860
)
6961

‎src/index.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
body {
22
margin: 0;
33
padding: 0;
4-
font-family: sans-serif;
4+
/* font-family: "Helvetica Neue,Segoe UI,Helvetica,Arial,sans-serif"; */
55
--primary: #f1a10a;
6+
--white: #fff;
7+
}
8+
9+
.pull-right {
10+
float: right!important;
611
}
712

813
a {
914
color: #f1a10a;
1015
border-bottom: 2px solid #f1a10a;
1116
}
1217

18+
a:hover {
19+
color: #000;
20+
border-color: #000;
21+
text-decoration: none;
22+
}
23+
1324
.btn,
1425
.btn-primary.disabled,
1526
.btn-success.disabled,
@@ -27,6 +38,16 @@ a {
2738
color: white;
2839
}
2940

41+
.btn-primary:focus,
42+
.btn-primary:not(:disabled):not(.disabled):active:focus {
43+
box-shadow: 0 0 0 0.2rem rgba(241, 161, 10, .5);
44+
}
45+
46+
.btn-primary:not(:disabled):not(.disabled):active {
47+
background-color: var(--primary);
48+
border-color: var(--primary);
49+
}
50+
3051
.btn-primary,
3152
.btn-primary:hover,
3253
.btn-primary.disabled {

0 commit comments

Comments
 (0)