summaryrefslogtreecommitdiff
path: root/examples/portfolio/src/styles/global.css
blob: c4c23dd53025b077bc27a4fb5ae0fe525c281fff (plain) (blame)
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
84
85
86
87
88
89
90
91
92
93
94
/* Global variables */
:root {
	/* Colors */
	--c-black: #05091e;
	--c-blue: #46b4ff;
	--c-gray: #90aab7;
	--c-green: #9ef2cb;
	--c-pink: #ffb8d9;
	--c-orange: #ffb7a3;
	--c-yellow: #ffdace;
	--c-white: #fff;

	/* Fonts */
	--f-u18: 11.390625em;
	--f-u17: 9.950627481136905em;
	--f-u16: 8.692673779389363em;
	--f-u15: 7.59375em;
	--f-u14: 6.63375165409127em;
	--f-u13: 5.795115852926242em;
	--f-u12: 5.0625em;
	--f-u11: 4.422501102727513em;
	--f-u10: 3.8634105686174953em;
	--f-u9: 3.375em;
	--f-u8: 2.9483340684850083em;
	--f-u7: 2.575607045744997em;
	--f-u6: 2.25em;
	--f-u5: 1.9655560456566725em;
	--f-u4: 1.7170713638299977em;
	--f-u3: 1.5em;
	--f-u2: 1.3103706971044482em;
	--f-u1: 1.1447142425533319em;
	--f-d1: 0.8735804647362989em;
	--f-d2: 0.7631428283688879em;
	--f-d3: 0.6666666666666666em;
	--f-d4: 0.5823869764908659em;
	--f-d5: 0.5087618855792586em;
	--f-d6: 0.4444444444444444em;
	--f-d7: 0.3882579843272439em;
	--f-d8: 0.3391745903861724em;
	--f-d9: 0.2962962962962963em;
	--f-d10: 0.2588386562181626em;
	--f-d11: 0.22611639359078162em;
	--f-d12: 0.19753086419753085em;
	--f-d13: 0.17255910414544176em;
	--f-d14: 0.15074426239385438em;
	--f-d15: 0.13168724279835392em;
	--f-d16: 0.11503940276362785em;
	--f-d17: 0.10049617492923625em;
	--f-d18: 0.0877914951989026em;

	--t-fg: var(--c-black);
	--t-bg: var(--c-white);
	--t-subdue: var(--c-gray);
	--t-active: var(--c-blue);
}

body {
	margin: 0;
	color: var(--t-fg);
	font-family: 'Inter', 'system-ui', sans-serif;
}

* {
	box-sizing: content-box;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--t-active);
}

h1 {
	font-size: var(--f-u8);
}

.button {
	display: inline-block;
	border: 3px solid currentColor;
	padding: 0.5em 1em;
	font-weight: 700;
	text-transform: uppercase;
}

.wrapper {
	max-width: 80em;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}