Skip to content

Commit 4a8e254

Browse files
higorpohigorpo
committed
✨ Stylizes home page
1 parent f26b808 commit 4a8e254

File tree

6 files changed

+86
-11
lines changed

6 files changed

+86
-11
lines changed

‎public/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1313
<link rel="stylesheet" href="normalize.css">
1414

15+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
16+
1517
<title>n! — Fatorial simples e rápida</title>
1618
</head>
1719

‎src/index.css‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/index.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
:root {
2+
--primaryColor: #A70000;
3+
--grey3: #828282;
4+
--grey6: #F2F2F2;
5+
6+
--titleFontSize: 30px;
7+
--textFontSize: 16px;
8+
}
9+
10+
body {
11+
font-family: Roboto, Arial;
12+
}
13+
14+
html, body, #root {
15+
height: 100%;
16+
}
17+
18+
h1, h2, h3, h4, h5, h6 {
19+
&.title {
20+
font-style: normal;
21+
font-weight: 900;
22+
font-size: var(--titleFontSize);
23+
line-height: calc(var(--titleFontSize) + 7px);
24+
color: var(--primaryColor);
25+
margin: 0px;
26+
margin-bottom: 20px;
27+
max-width: 400px;
28+
}
29+
30+
&.explanation {
31+
font-weight: normal;
32+
font-size: var(--textFontSize);
33+
line-height: calc(--textFontSize + 3px);
34+
color: var(--grey3);
35+
margin: 0px;
36+
margin-bottom: 20px;
37+
max-width: 95%;
38+
}
39+
}
40+
41+
div.container {
42+
display: flex;
43+
flex-direction: column;
44+
padding: 50px 30px;
45+
height: calc(100% - 100px);
46+
}

‎src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import './index.css';
3+
import './index.scss';
44
import Routes from './pages/routes';
55

66
ReactDOM.render(

‎src/pages/Home/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import React from 'react';
22
import { MdChevronRight } from 'react-icons/md'
33
import { Link } from 'react-router-dom';
44

5+
import './styles.scss';
6+
57
const Home: React.FC = () => {
68
return (
79
<div className="container">
810
<hgroup>
9-
<h1 className="title">Digite um número para calcular sua fatorial.</h1>
10-
<h3 className="explanation">Digite um número entre 1 a 150 para calcular o seu valor fatorial de maneira simples e rápida. Seus cálculos ficarão salvos para que você possa consultá-los no futuro.</h3>
11+
<h2 className="title">Digite um número para calcular sua fatorial.</h2>
12+
<h6 className="explanation">Digite um número entre 1 a 150 para calcular o seu valor fatorial de maneira simples e rápida. Seus cálculos ficarão salvos para que você possa consultá-los no futuro.</h6>
1113
</hgroup>
1214

1315
<form>

‎src/pages/Home/styles.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
form {
2+
display: flex;
3+
flex-direction: column;
4+
5+
input {
6+
border: 0px;
7+
outline: none;
8+
background: var(--grey6);
9+
border-bottom: 3.5px solid var(--primaryColor);
10+
font-size: calc(var(--textFontSize) * 1.5);
11+
padding: 20px 20px;
12+
}
13+
14+
button {
15+
margin-top: 20px;
16+
background: var(--primaryColor);
17+
color: white;
18+
font-size: 50px;
19+
border: none;
20+
outline: none;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
max-width: 100px;
25+
margin-left: auto;
26+
}
27+
}
28+
29+
nav a {
30+
color: var(--primaryColor);
31+
font-size: var(--textFontSize);
32+
text-decoration: none;
33+
}

0 commit comments

Comments
 (0)