keii.dev
1:root {
2 --gap: 12px;
3 --gap-l: calc(var(--gap) * 2);
4 --gap-xl: calc(var(--gap) * 4);
5 --page-width: 850px;
6}
7
8* {
9 box-sizing: border-box;
10}
11
12body,
13html {
14 margin: 0;
15 font-family: sans-serif;
16 font-size: 17px;
17 line-height: 1.25;
18}
19
20a {
21 text-decoration-style: dotted;
22}
23
24a:hover {
25 text-decoration-thickness: 2px;
26}
27
28.home-hero {
29 margin: 0;
30 padding: 0;
31 min-height: 70vh;
32
33 display: flex;
34 align-items: center;
35 justify-content: center;
36 flex-direction: column;
37
38 background-color: hsla(90, 60%, 64%, 1);
39 background-image: radial-gradient(
40 at 65% 68%,
41 hsla(87, 56%, 61%, 1) 0px,
42 transparent 50%
43 ),
44 radial-gradient(at 99% 98%, hsla(66, 44%, 75%, 1) 0px, transparent 50%),
45 radial-gradient(at 39% 18%, hsla(53, 67%, 66%, 1) 0px, transparent 50%),
46 radial-gradient(at 0% 1%, hsla(88, 76%, 80%, 1) 0px, transparent 50%),
47 radial-gradient(at 15% 73%, hsla(152, 89%, 71%, 1) 0px, transparent 50%),
48 radial-gradient(at 50% 99%, hsla(97, 48%, 79%, 1) 0px, transparent 50%),
49 radial-gradient(at 98% 0%, hsla(121, 69%, 81%, 1) 0px, transparent 50%);
50}
51
52.home-hero img {
53 width: 360px;
54}
55
56.home-hero nav {
57 position: absolute;
58 top: 0;
59 text-align: right;
60 width: 100%;
61 padding: var(--gap-l);
62}
63
64.home-hero nav a {
65 color: black;
66 opacity: 0.8;
67 margin: 0 var(--gap);
68}
69
70.content-width {
71 max-width: 100%;
72 width: var(--page-width);
73 margin: 0 auto;
74 padding: var(--gap-l);
75}
76
77.features {
78 display: flex;
79 flex-wrap: wrap;
80 gap: var(--gap-l);
81}
82
83.features li {
84 list-style: none;
85 width: calc((var(--page-width) - var(--gap-l) * 3) * 0.5);
86 max-width: 100%;
87}
88
89pre {
90 font-size: 16px;
91 padding: var(--gap-l);
92 background-color: #f5f5f5;
93 box-shadow: 7px 7px #c0c0c0;
94 margin: var(--gap-l) 0;
95 overflow-x: auto;
96}
97
98footer {
99 display: flex;
100 flex-direction: column;
101 align-items: center;
102 padding: var(--gap-xl);
103}