docs/src/style.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

/* Dark mode colors. */
:root {
    --sl-color-accent-low: #10243e;
    --sl-color-accent: #3584e4;
    --sl-color-accent-high: #99c1f1;
    --sl-color-white: #ffffff;
    --sl-color-gray-1: #eeeeee;
    --sl-color-gray-2: #c2c2c2;
    --sl-color-gray-3: #8b8b8b;
    --sl-color-gray-4: #585858;
    --sl-color-gray-5: #383838;
    --sl-color-gray-6: #272727;
    --sl-color-black: #171718;
}

/* Light mode colors. */
:root[data-theme='light'] {
    --sl-color-accent-low: #c5d9f2;
    --sl-color-accent: #156ac7;
    --sl-color-accent-high: #11325b;
    --sl-color-white: #181818;
    --sl-color-gray-1: #272727;
    --sl-color-gray-2: #383838;
    --sl-color-gray-3: #585858;
    --sl-color-gray-4: #8b8b8b;
    --sl-color-gray-5: #c2c2c2;
    --sl-color-gray-6: #eeeeee;
    --sl-color-gray-7: #f6f6f6;
    --sl-color-black: #ffffff;
}

:root {
    --card-radius: 7px;
}

article.card {
    border-radius: var(--card-radius);
    background-color: color-mix(in srgb, var(--sl-color-black), var(--sl-color-white) 2%);
    border-color: var(--sl-color-gray-6);
}

/* landing page gradient */
:root {
    --overlay-gradient: color-mix(in srgb, var(--sl-color-accent), transparent 85%);
}

:root[data-theme='light'] {
    --overlay-gradient: color-mix(in srgb, var(--sl-color-accent), transparent 55%);
}

[data-has-hero] .page {
    background:
        linear-gradient(215deg, var(--overlay-gradient), transparent 40%),
        radial-gradient(var(--overlay-gradient), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
        radial-gradient(var(--overlay-gradient), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
}

[data-has-hero] header {
    border-bottom: 1px solid transparent;
    background-color: transparent;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

[data-has-hero] .hero>img {
    filter: drop-shadow(0 0 3rem var(--overlay-gradient));
}

div.showcases {
    display: flex;
    flex-direction: column;
}