bwc9876.dev
Files for my website
bwc9876.dev
1@import "@fontsource/maple-mono/index.css";
2@import "@fontsource/charis-sil/index.css";
3/* Breakpoint Queries, Using Bootstrap's */
4/* Smallest: 576px */
5
6@custom-media --sm (width >=576px);
7@custom-media --md (width >=768px);
8@custom-media --lg (width >=1200px);
9@custom-media --xl (width >=1700px);
10
11.container {
12 --gutter: var(--2);
13 margin: 0 var(--gutter);
14}
15
16@media (--md) {
17 .container {
18 --gutter: var(--10);
19 }
20}
21
22@media (--xl) {
23 .container {
24 --gutter: var(--14);
25 }
26}
27
28/* Color Definitions */
29:root {
30 --text: #cecece;
31 --background: #110f12;
32 --primary: #0ee19b;
33 --secondary: #012d1e;
34 --accent: #53d164;
35
36 --font-maple-mono: "Maple Mono", "monospace";
37 --font-charis-sil: "Charis", "serif";
38}
39
40/* Color Aliases */
41
42h1,
43h2,
44h3,
45h4,
46h5,
47h6 {
48 text-wrap: balance;
49 font-family: var(--font-maple-mono);
50}
51
52nav a,
53pre,
54code {
55 font-family: var(--font-maple-mono);
56}
57
58:root {
59 font-family: var(--font-charis);
60}
61
62/* Spacing Scale, Major Third */
63:root {
64 /* 1rem = 16px */
65 --scale: 1.25;
66 --small: calc(1rem * pow(var(--scale), -1));
67 --half: calc(1rem * pow(var(--scale), -0.5));
68 --1: calc(1rem * pow(var(--scale), 0));
69 --2: calc(1rem * pow(var(--scale), 1));
70 --3: calc(1rem * pow(var(--scale), 2));
71 --4: calc(1rem * pow(var(--scale), 3));
72 --5: calc(1rem * pow(var(--scale), 4));
73 --6: calc(1rem * pow(var(--scale), 5));
74 --7: calc(1rem * pow(var(--scale), 6));
75 --8: calc(1rem * pow(var(--scale), 7));
76 --9: calc(1rem * pow(var(--scale), 8));
77 --10: calc(1rem * pow(var(--scale), 9));
78 --11: calc(1rem * pow(var(--scale), 10));
79 --12: calc(1rem * pow(var(--scale), 11));
80 --14: calc(1rem * pow(var(--scale), 13));
81 --component-padding: var(--small) var(--1);
82}
83
84/* Element Defaults */
85
86small {
87 font-size: var(--small);
88 color: var(--text-disabled);
89}
90
91h1 {
92 font-size: var(--5);
93}
94
95h2 {
96 font-size: var(--4);
97}
98
99h3 {
100 font-size: var(--3);
101}
102
103h4 {
104 font-size: var(--2);
105}
106
107h5 {
108 font-size: var(--1);
109}
110
111body {
112 color: var(--text);
113 background-color: var(--background);
114}
115
116a {
117 color: var(--accent);
118
119 &:hover {
120 text-decoration: underline;
121 }
122}
123
124button,
125button.primary,
126[role="button"] {
127 padding: var(--component-padding);
128 color: var(--text);
129 border-radius: 10px;
130 border: solid 2px transparent;
131 background-color: var(--secondary);
132 cursor: pointer;
133 transition: background-color 100ms linear;
134 text-decoration: none;
135}
136
137button:active,
138[role="button"]:active {
139 filter: hue-rotate(50deg);
140}
141
142button:hover,
143[role="button"]:hover {
144 filter: saturate(150%);
145}
146
147.gradient-text {
148 background: linear-gradient(120deg, var(--primary), var(--accent) 70%);
149 background-clip: text;
150 -webkit-background-clip: text;
151 -webkit-text-fill-color: transparent;
152}
153
154/* Tooltips */
155[data-tooltip] {
156 position: relative;
157
158 &[data-placement="top"]::before,
159 &[data-placement="top"]::after,
160 &::before,
161 &::after {
162 display: block;
163 z-index: 99;
164 position: absolute;
165 bottom: 100%;
166 left: 50%;
167 padding: 0.25rem 0.5rem;
168 overflow: hidden;
169 transform: translate(-50%, -0.25rem);
170 border-radius: 5px;
171 background: var(--secondary);
172 content: attr(data-tooltip);
173 color: var(--text);
174 font-style: normal;
175 font-size: 0.875rem;
176 text-decoration: none;
177 text-overflow: ellipsis;
178 white-space: nowrap;
179 opacity: 0;
180 pointer-events: none;
181 }
182
183 &[data-placement="top"]::after,
184 &::after {
185 padding: 0;
186 transform: translate(-50%, 0rem);
187 border-top: 0.3rem solid;
188 border-right: 0.3rem solid transparent;
189 border-left: 0.3rem solid transparent;
190 border-radius: 0;
191 background-color: transparent;
192 content: "";
193 color: var(--secondary);
194 }
195
196 &[data-placement="bottom"] {
197 &::before,
198 &::after {
199 top: 100%;
200 bottom: auto;
201 transform: translate(-50%, 0.25rem);
202 }
203
204 &:after {
205 transform: translate(-50%, -0.3rem);
206 border: 0.3rem solid transparent;
207 border-bottom: 0.3rem solid;
208 }
209 }
210
211 &[data-placement="left"] {
212 &::before,
213 &::after {
214 top: 50%;
215 right: 100%;
216 bottom: auto;
217 left: auto;
218 transform: translate(-0.25rem, -50%);
219 }
220
221 &:after {
222 transform: translate(0.3rem, -50%);
223 border: 0.3rem solid transparent;
224 border-left: 0.3rem solid;
225 }
226 }
227
228 &[data-placement="right"] {
229 &::before,
230 &::after {
231 top: 50%;
232 right: auto;
233 bottom: auto;
234 left: 100%;
235 transform: translate(0.25rem, -50%);
236 }
237
238 &:after {
239 transform: translate(-0.3rem, -50%);
240 border: 0.3rem solid transparent;
241 border-right: 0.3rem solid;
242 }
243 }
244
245 &:focus,
246 &:hover {
247 &::before,
248 &::after {
249 opacity: 1;
250 }
251 }
252
253 @media (hover: hover) and (pointer: fine) {
254 &:focus,
255 &:hover {
256 &::before,
257 &::after {
258 --tooltip-slide-to: translate(-50%, -0.25rem);
259 transform: translate(-50%, 0.75rem);
260 animation-duration: 0.2s;
261 animation-fill-mode: forwards;
262 animation-name: tooltip-slide;
263 opacity: 0;
264 }
265
266 &::after {
267 --tooltip-caret-slide-to: translate(-50%, 0rem);
268 transform: translate(-50%, -0.25rem);
269 animation-name: tooltip-caret-slide;
270 }
271 }
272
273 &[data-placement="bottom"] {
274 &:focus,
275 &:hover {
276 &::before,
277 &::after {
278 --tooltip-slide-to: translate(-50%, 0.25rem);
279 transform: translate(-50%, -0.75rem);
280 animation-name: tooltip-slide;
281 }
282
283 &::after {
284 --tooltip-caret-slide-to: translate(-50%, -0.3rem);
285 transform: translate(-50%, -0.5rem);
286 animation-name: tooltip-caret-slide;
287 }
288 }
289 }
290
291 &[data-placement="left"] {
292 &:focus,
293 &:hover {
294 &::before,
295 &::after {
296 --tooltip-slide-to: translate(-0.25rem, -50%);
297 transform: translate(0.75rem, -50%);
298 animation-name: tooltip-slide;
299 }
300
301 &::after {
302 --tooltip-caret-slide-to: translate(0.3rem, -50%);
303 transform: translate(0.05rem, -50%);
304 animation-name: tooltip-caret-slide;
305 }
306 }
307 }
308
309 &[data-placement="right"] {
310 &:focus,
311 &:hover {
312 &::before,
313 &::after {
314 --tooltip-slide-to: translate(0.25rem, -50%);
315 transform: translate(-0.75rem, -50%);
316 animation-name: tooltip-slide;
317 }
318
319 &::after {
320 --tooltip-caret-slide-to: translate(-0.3rem, -50%);
321 transform: translate(-0.05rem, -50%);
322 animation-name: tooltip-caret-slide;
323 }
324 }
325 }
326 }
327}
328
329@keyframes tooltip-slide {
330 to {
331 transform: var(--tooltip-slide-to);
332 opacity: 1;
333 }
334}
335
336@keyframes tooltip-caret-slide {
337 50% {
338 opacity: 0;
339 }
340
341 to {
342 transform: var(--tooltip-caret-slide-to);
343 opacity: 1;
344 }
345}