forked from MonicaHillman/3993-css-flexbox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css
83 lines (69 loc) · 2.42 KB
/
styles.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/**
*
* Precisamos padronizar os espaçamentos: https://nordhealth.design/tokens/#space
* a ideia é padronizar espaçamentos, tamannhos de fonte, line height, tudo em variáveis - controlando as quantidade de variantes como se fosse a propria TVA e evitar tamanhos de fontes expalhados e desproporcionais
*
* Sobre o flex-direction, será que poderiamos usar um row-reverse ou column-reverse (de repente no mobile)?
*
* Esse artigo poderia entrar num PS+ ou algo assim: https://www.alura.com.br/artigos/css-guia-do-flexbox
*
* Lembrar de: explicar o baseline e o strech do align-items
*
* Faltou falar sobre flex flow: https://developer.mozilla.org/pt-BR/docs/Web/CSS/flex-flow
* Faltou o align-content (para multiplas rows ou columns, dependendo do flex-direction) https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
* Faltou o flex-shrink https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
* Faltou o flex-basis https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
*
*/
:root {
--cor-texto: #1e1e1e;
--cor-texto-hover: #252530;
--cor-texto-claro: #ffffff;
--cor-texto-destaque: #6F99FF;
--cor-faixa-etaria: #F5D010;
--cor-faixa-etaria-livre: #C3FF95;
--cor-de-fundo-faixa-etaria: #EFEFEF;
--cor-de-fundo-input: #EFEFEF;
--cor-de-fundo: #ffffff;
--cor-de-fundo-newsletter: #CCDBFF;
--cor-de-fundo-footer: #1E1E1E;
--cor-de-fundo-combo: #111114;
--border-color: #A6A6A6;
--box-shadow-card: 0px 4px 24px 0px #7B7B7B26;
--fonte-texto: 'Poppins', sans-serif;
--fonte-titulo: 'Dela Gothic One', sans-serif;
--gap-xs: 0.5rem;
--gap-s: 1rem;
--gap-m: 1.5rem;
--gap-l: 2rem;
--gap-xl: 3.5rem;
--padding-xs: 0.5rem;
--padding-s: 1rem;
--padding-m: 1.5rem;
--padding-l: 2rem;
--padding-xl: 3.5rem;
--padding-xxl: 5rem;
--font-size-xs: 0.75rem;
--font-size-s: 1rem;
--font-size-m: 1.25rem;
--font-size-l: 1.5rem;
--font-size-xl: 3rem;
--font-size-xxl: 4.75rem;
--max-width-block: 75rem;
--margin-xs: 0.5rem;
--margin-s: 1rem;
--margin-m: 1.5rem;
--margin-l: 2rem;
--line-height-xs: 1.2rem;
--line-height-s: 1.5rem;
--line-height-m: 1.75rem;
--line-height-l: 2rem;
--line-height-xl: 2.5rem;
--line-height-xxl: 5.7rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
}