style.css
ASCII text
1
/* Colors */
2
3
:root {
4
--primary: #101010;
5
--secondary: #f9a911;
6
--teriary: #efee00;
7
8
--primary-text: #fff;
9
--primary-code: #1f1f1f;
10
}
11
12
/* Fonts */
13
14
@font-face {
15
font-family: "Gully";
16
src: url("gully.ttf") format("truetype");
17
}
18
19
@font-face {
20
font-family: "Stampatello Faceto";
21
src: url("StampatelloFaceto.otf") format("truetype");
22
}
23
24
@font-face {
25
font-family: "RH Mono";
26
src: url("RedHatMonoVF.ttf") format("truetype");
27
}
28
29
@font-face {
30
font-family: "Willow";
31
src: url("willow.otf") format("truetype");
32
}
33
34
/* Styles */
35
36
body {
37
background-color: var(--primary);
38
color: var(--primary-text);
39
font-family: "Gully";
40
width: min(896px, 100vw);
41
margin: 0 auto;
42
padding: 35px;
43
height: calc(100% - 70px);
44
box-shadow: 0px 0px 50px #000;
45
}
46
47
html {
48
background-image: url("./background.webp");
49
background-color: #FFF;
50
height: 100%;
51
}
52
53
:is(h1, h2, h3, h4, h5, h6) {
54
font-family: "Willow";
55
}
56
57
:any-link {
58
background: linear-gradient(
59
90deg,
60
rgb(255, 150, 150) 0%,
61
rgb(255, 194, 102) 10%,
62
rgb(244, 255, 107) 20%,
63
rgb(176, 253, 173) 30%,
64
rgb(155, 255, 254) 40%,
65
rgb(192, 246, 255) 50%,
66
rgb(96, 172, 255) 60%,
67
rgb(138, 79, 255) 70%,
68
rgb(217, 110, 255) 80%,
69
rgb(255, 126, 237) 90%,
70
rgb(255, 145, 145) 100%
71
);
72
background-clip: text;
73
-webkit-text-fill-color: transparent;
74
}
75
76
th,
77
td {
78
text-align: center;
79
}
80
81
#ThemeList {
82
padding: 0;
83
margin: 0;
84
}
85
86
#ThemeList li {
87
width: fit-content;
88
display: inline-block;
89
list-style: none;
90
91
}
92
93
code {
94
background-color: var(--primary-code);
95
display: inline-block;
96
font-family: "RH Mono";
97
}
98
99
code:has(pre) {
100
display: block;
101
padding: 5px;
102
}
103
104
[aria-label=breadcrumbs] ol {
105
padding: 0;
106
}
107
108
[aria-label=breadcrumbs] li {
109
list-style: none;
110
display: inline-block;
111
}
112
113
[aria-label=breadcrumbs] li + li::before {
114
content: " / ";
115
}
116