bwc9876.dev
Files for my website
bwc9876.dev
Rename and blog cleanup
+4
-2
README.md
+4
-2
README.md
+2
-2
astro.config.mjs
+2
-2
astro.config.mjs
+6
-6
flake.lock
+6
-6
flake.lock
···
5
"nixpkgs": "nixpkgs"
6
},
7
"locked": {
8
-
"lastModified": 1768222660,
9
-
"narHash": "sha256-wpotiS/H2Lgg6B5d5uLuy6jpzur9ZoeKv3W61DsL1HQ=",
10
"owner": "nix-community",
11
"repo": "flakelight",
12
-
"rev": "0adb311848bbc449f006ada255a9ca33ad692661",
13
"type": "github"
14
},
15
"original": {
···
20
},
21
"nixpkgs": {
22
"locked": {
23
-
"lastModified": 1768127708,
24
-
"narHash": "sha256-1Sm77VfZh3mU0F5OqKABNLWxOuDeHIlcFjsXeeiPazs=",
25
"owner": "NixOS",
26
"repo": "nixpkgs",
27
-
"rev": "ffbc9f8cbaacfb331b6017d5a5abb21a492c9a38",
28
"type": "github"
29
},
30
"original": {
···
5
"nixpkgs": "nixpkgs"
6
},
7
"locked": {
8
+
"lastModified": 1769432363,
9
+
"narHash": "sha256-r3DcqL4qrAJH9/UyWhkvvhuIXX/q5Kuw5uz7VcdRNcc=",
10
"owner": "nix-community",
11
"repo": "flakelight",
12
+
"rev": "579605fdfcab54acb037c435874ae1ae34d8c9a1",
13
"type": "github"
14
},
15
"original": {
···
20
},
21
"nixpkgs": {
22
"locked": {
23
+
"lastModified": 1769170682,
24
+
"narHash": "sha256-oMmN1lVQU0F0W2k6OI3bgdzp2YOHWYUAw79qzDSjenU=",
25
"owner": "NixOS",
26
"repo": "nixpkgs",
27
+
"rev": "c5296fdd05cfa2c187990dd909864da9658df755",
28
"type": "github"
29
},
30
"original": {
src/assets/blog/hw_index_page.png
src/assets/blog/hw_index_page.png
This is a binary file and will not be displayed.
src/assets/blog/hw_table_of_contents.png
src/assets/blog/hw_table_of_contents.png
This is a binary file and will not be displayed.
+1
-1
src/components/IconLink.astro
+1
-1
src/components/IconLink.astro
+26
-25
src/components/projects/ProjectCard.astro
+26
-25
src/components/projects/ProjectCard.astro
···
8
}
9
10
const stringToNumber = (str: string, seed = 3) => {
11
-
let h1 = 0xdeadbeef ^ seed,
12
-
h2 = 0x41c6ce57 ^ seed;
13
-
for (let i = 0, ch; i < str.length; i++) {
14
-
ch = str.charCodeAt(i);
15
-
h1 = Math.imul(h1 ^ ch, 2654435761);
16
-
h2 = Math.imul(h2 ^ ch, 1597334677);
17
-
}
18
-
h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
19
-
h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
20
-
return 4294967296 * (2097151 & h2) + (h1 >>> 0);
21
};
22
23
const getHueFromText = (text: string): string => `hue-rotate(${stringToNumber(text) % 360}deg)`;
···
36
alt=""
37
/>
38
<Image
39
-
style={{filter: getHueFromText(project.slug)}}
40
class="backdrop"
41
-
alt=""
42
format="webp"
43
src={backdrop}
44
alt="Backdrop"
45
/>
46
</div>
47
<div>
48
-
<h3 class="project-name">{project.data.name}</h3>
49
-
<small>{project.data.tags.join(" • ")}</small>
50
-
<p>{project.data.summary}</p>
51
</div>
52
</article>
53
</a>
···
94
justify-content: center;
95
}
96
97
-
div:first-child {
98
-
display: flex;
99
-
flex-direction: column;
100
-
align-items: center;
101
-
}
102
103
div {
104
overflow: hidden;
105
position: relative;
106
}
107
108
-
img, div:first-child {
109
-
border-top-left-radius: 5px;
110
-
border-top-right-radius: 5px;
111
-
}
112
113
img {
114
position: relative;
···
128
transform: scale(1.1);
129
inset: 0;
130
object-fit: cover;
131
-
filter: blur(6px);
132
}
133
</style>
···
8
}
9
10
const stringToNumber = (str: string, seed = 3) => {
11
+
let h1 = 0xdeadbeef ^ seed,
12
+
h2 = 0x41c6ce57 ^ seed;
13
+
for (let i = 0, ch; i < str.length; i++) {
14
+
ch = str.charCodeAt(i);
15
+
h1 = Math.imul(h1 ^ ch, 2654435761);
16
+
h2 = Math.imul(h2 ^ ch, 1597334677);
17
+
}
18
+
h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
19
+
h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
20
+
return 4294967296 * (2097151 & h2) + (h1 >>> 0);
21
};
22
23
const getHueFromText = (text: string): string => `hue-rotate(${stringToNumber(text) % 360}deg)`;
···
36
alt=""
37
/>
38
<Image
39
+
style={{ filter: getHueFromText(project.slug) }}
40
class="backdrop"
41
+
alt=""
42
format="webp"
43
src={backdrop}
44
alt="Backdrop"
45
/>
46
</div>
47
<div>
48
+
<h3 class="project-name">{project.data.name}</h3>
49
+
<small>{project.data.tags.join(" • ")}</small>
50
+
<p>{project.data.summary}</p>
51
</div>
52
</article>
53
</a>
···
94
justify-content: center;
95
}
96
97
+
div:first-child {
98
+
display: flex;
99
+
flex-direction: column;
100
+
align-items: center;
101
+
}
102
103
div {
104
overflow: hidden;
105
position: relative;
106
}
107
108
+
img,
109
+
div:first-child {
110
+
border-top-left-radius: 5px;
111
+
border-top-right-radius: 5px;
112
+
}
113
114
img {
115
position: relative;
···
129
transform: scale(1.1);
130
inset: 0;
131
object-fit: cover;
132
+
filter: blur(6px);
133
}
134
</style>
+9
-21
src/content/posts/hello_world.mdx
+9
-21
src/content/posts/hello_world.mdx
···
1
---
2
-
title: Welcome to the Cowsay!
3
date: 2023-10-15
4
-
summary: Welcome to the cowsay! A simple blog centered around cows.
5
cowsay: Hello World!
6
---
7
···
9
10
## Hey there
11
12
-
Welcome to the cowsay! A simple blog centered around cows.
13
I decided to make this blog as a way to track my progress in learning new things.
14
I hope you enjoy your stay!
15
16
This first post is going into a bit of detail about how I made this blog.
17
-
Currently the site uses Astro so I'm going to stick with that for now.
18
19
## Making The Basic Blog
20
···
39
```
40
41
This contains the metadata each blog post will need to have in order for my site
42
-
to render it. That `cowsay` is a bit special.
43
44
-
Then, we simply export an object named `collections` which Astro will then pick
45
up and generate TS bindings for.
46
47
```ts
···
50
};
51
```
52
53
-
Now we can get to writing some content! To do so simply make a folder with the
54
same name as the _key_ of the collection you want to write for. In this case, `posts`.
55
56
-
Then create a markdown file within and start writing! Here's a little excerpt
57
of what [this page looks like](https://github.com/Bwc9876/portfolio-site/tree/main/src/content/posts/hello_world.mdx):
58
59
```md
60
---
61
-
title: Welcome to the Cowsay!
62
date: 2023-10-15
63
-
summary: Welcome to the cowsay! A simple blog centered around cows.
64
cowsay: Hello World!
65
---
66
67
-
## Hey there!
68
-
69
-
Welcome to the cowsay! A simple blog centered around cows.
70
-
I decided to make this blog as a way to track my progress in learning new things.
71
-
I hope you enjoy your stay!
72
```
73
74
The frontmatter is the part between the `---` and `---`. This is where you put
···
118
}
119
</Layout>
120
```
121
-
122
-
123
124
Great! I'll probably fiddle with it in the future but it's a good start. Now we need to make a page for each post.
125
To make my URLs look nice I'm going to create a subfolder within `blog` called `posts` and then place a `[...slug].astro` in there.
···
233
}
234
```
235
236
-
237
-
238
## The Cowsay
239
240
Now for the fun part. I want to make a little cow that says something in the header of each post. I'm going to use the `cowsay` field in the frontmatter to do this.
···
293
294
<CowSay color="warn" e="><" text="Warning!" />
295
<CowSay color="info" e="^^" T="U" text="Info!" />
296
-
297
-
I'll hold off on making an error one for now. Lest the cows get too angry.
298
299
## Conclusion
300
···
1
---
2
+
title: Welcome to my blog!
3
date: 2023-10-15
4
+
summary: How I built my blog
5
cowsay: Hello World!
6
---
7
···
9
10
## Hey there
11
12
I decided to make this blog as a way to track my progress in learning new things.
13
I hope you enjoy your stay!
14
15
This first post is going into a bit of detail about how I made this blog.
16
17
## Making The Basic Blog
18
···
37
```
38
39
This contains the metadata each blog post will need to have in order for my site
40
+
to render it.
41
42
+
Then, we export an object named `collections` which Astro will pick
43
up and generate TS bindings for.
44
45
```ts
···
48
};
49
```
50
51
+
Now we can get to writing some content! Make a folder with the
52
same name as the _key_ of the collection you want to write for. In this case, `posts`.
53
54
+
Then create a markdown file and start writing! Here's a little excerpt
55
of what [this page looks like](https://github.com/Bwc9876/portfolio-site/tree/main/src/content/posts/hello_world.mdx):
56
57
```md
58
---
59
+
title: Welcome to my blog!
60
date: 2023-10-15
61
+
summary: How I built my blog.
62
cowsay: Hello World!
63
---
64
65
+
## Hey there
66
```
67
68
The frontmatter is the part between the `---` and `---`. This is where you put
···
112
}
113
</Layout>
114
```
115
116
Great! I'll probably fiddle with it in the future but it's a good start. Now we need to make a page for each post.
117
To make my URLs look nice I'm going to create a subfolder within `blog` called `posts` and then place a `[...slug].astro` in there.
···
225
}
226
```
227
228
## The Cowsay
229
230
Now for the fun part. I want to make a little cow that says something in the header of each post. I'm going to use the `cowsay` field in the frontmatter to do this.
···
283
284
<CowSay color="warn" e="><" text="Warning!" />
285
<CowSay color="info" e="^^" T="U" text="Info!" />
286
287
## Conclusion
288
+3
-3
src/content/posts/wip_screen_captures.md
+3
-3
src/content/posts/wip_screen_captures.md
···
1
---
2
-
title: Work In Progress Friday - Screen Captures
3
date: 2024-07-25
4
summary: An adventure in making scripts to capture screen shots and recordings.
5
cowsay: A picture is worth a thousand words
···
137
138
And that's it! I now have a fairly robust screenshot script.
139
140
-
### Calling the Screenshot script
141
142
Now in terms of actually calling it I'll be binding it to `Win` + `Shift` + `S` in Hyprland, as well
143
as `PrintScreen`.
···
265
}
266
```
267
268
-
### Calling the Recording script
269
270
Now to actually call the script, I'll bind it to `Win` + `Shift` + `R` in Hyprland.
271
···
1
---
2
+
title: Custom Screen Capture Flow
3
date: 2024-07-25
4
summary: An adventure in making scripts to capture screen shots and recordings.
5
cowsay: A picture is worth a thousand words
···
137
138
And that's it! I now have a fairly robust screenshot script.
139
140
+
### Screenshot Invocation
141
142
Now in terms of actually calling it I'll be binding it to `Win` + `Shift` + `S` in Hyprland, as well
143
as `PrintScreen`.
···
265
}
266
```
267
268
+
### Start/Stop Recording
269
270
Now to actually call the script, I'll bind it to `Win` + `Shift` + `R` in Hyprland.
271
+3
-5
src/content/projects/portfolio-site.mdx
+3
-5
src/content/projects/portfolio-site.mdx
···
1
---
2
name: Portfolio Site
3
-
summary: The site you're currently looking at. (trippy)
4
tags:
5
- web
6
- astro
···
18
import ExtLink from "@components/ExtLink.astro";
19
export const components = { a: ExtLink };
20
21
-
This is the site you're looking at, it was made in [Astro](https://astro.build)
22
-
and the styling used is [Pico CSS](https://picocss.com/).
23
24
After using my [GitHub profile](https://github.com/Bwc9876) as a portfolio for a
25
few years I decided to switch things up and make a site,
26
it was a good opportunity to learn some more about Astro's
27
amazing content system and other features.
28
29
-
Its styling is fairly simple, nothing too flashy.
30
-
But I'm happy with how it turned out, nice and simple.
···
1
---
2
name: Portfolio Site
3
+
summary: The site you're currently looking at
4
tags:
5
- web
6
- astro
···
18
import ExtLink from "@components/ExtLink.astro";
19
export const components = { a: ExtLink };
20
21
+
This is the site you're looking at, it was made in [Astro](https://astro.build).
22
23
After using my [GitHub profile](https://github.com/Bwc9876) as a portfolio for a
24
few years I decided to switch things up and make a site,
25
it was a good opportunity to learn some more about Astro's
26
amazing content system and other features.
27
28
+
Its styling is meh, but It's good enough for me and isn't _too_ atrocious.
src/content/projects/portfolio-site.png
src/content/projects/portfolio-site.png
This is a binary file and will not be displayed.
+1
-1
src/layouts/Layout.astro
+1
-1
src/layouts/Layout.astro
+51
-25
src/pages/blog/[...slug].astro
+51
-25
src/pages/blog/[...slug].astro
···
15
---
16
17
<Layout title={entry.data.title} description={entry.data.summary}>
18
-
<h1>{entry.data.title}</h1>
19
<div class="wrapper">
20
-
<div>
21
-
<CowSay text={entry.data.cowsay} />
22
-
<Content />
23
-
</div>
24
-
<div class="toc">
25
-
<div>
26
-
<span>On This Page</span>
27
<ul>
28
{
29
headings.map((h) => (
···
33
))
34
}
35
</ul>
36
-
</div>
37
</div>
38
</div>
39
</Layout>
···
41
<style>
42
div.wrapper {
43
display: flex;
44
-
flex-direction: column-reverse;
45
-
gap: 1rem;
46
-
}
47
48
-
div.wrapper > * {
49
-
min-width: 0;
50
}
51
52
@media (min-width: 1200px) {
53
div.wrapper {
54
flex-direction: row;
55
-
gap: 4rem;
56
}
57
}
58
59
-
div.toc {
60
-
width: 100%;
61
-
}
62
63
-
div.toc div {
64
-
top: 5rem;
65
-
margin-top: 1rem;
66
-
position: sticky;
67
-
}
68
69
-
div.toc ul li {
70
-
list-style-type: none;
71
}
72
</style>
73
···
15
---
16
17
<Layout title={entry.data.title} description={entry.data.summary}>
18
+
<h1 class="gradient-text">{entry.data.title}</h1>
19
<div class="wrapper">
20
+
<div class="toc-wrapper">
21
+
<nav aria-labelledby="on-this-page" class="toc">
22
+
<h2 id="on-this-page">On This Page</h2>
23
<ul>
24
{
25
headings.map((h) => (
···
29
))
30
}
31
</ul>
32
+
</nav>
33
+
</div>
34
+
<div>
35
+
<CowSay text={entry.data.cowsay} />
36
+
<Content />
37
</div>
38
</div>
39
</Layout>
···
41
<style>
42
div.wrapper {
43
display: flex;
44
+
flex-direction: column;
45
+
gap: var(--6);
46
47
+
:first-child {
48
+
min-width: min-content;
49
+
}
50
+
51
+
:last-child {
52
+
min-width: 0;
53
+
}
54
}
55
56
@media (min-width: 1200px) {
57
div.wrapper {
58
flex-direction: row;
59
}
60
}
61
62
+
div.toc-wrapper {
63
+
nav {
64
+
position: sticky;
65
+
top: var(--4);
66
67
+
h2 {
68
+
margin-top: 0;
69
+
}
70
+
71
+
ul {
72
+
display: flex;
73
+
flex-direction: column;
74
+
gap: var(--small);
75
+
padding-left: 0;
76
+
width: 100%;
77
78
+
li {
79
+
width: 100%;
80
+
border-left: dashed 2px var(--accent);
81
+
padding-left: var(--small);
82
+
list-style-type: none;
83
+
font-size: var(--2);
84
+
white-space: nowrap;
85
+
86
+
a {
87
+
text-decoration: none;
88
+
}
89
+
90
+
&.current,
91
+
&:hover {
92
+
border-left-style: solid;
93
+
}
94
+
}
95
+
}
96
+
}
97
}
98
</style>
99
+2
-2
src/pages/blog/index.astro
+2
-2
src/pages/blog/index.astro
+3
-4
src/pages/index.astro
+3
-4
src/pages/index.astro
···
5
import { Image } from "astro:assets";
6
---
7
8
-
<Layout title="Ben C's Portfolio" appendTitle={false}>
9
<div class="hero">
10
<div>
11
-
<h1>Ben C's <span class="gradient-text">Portfolio</span></h1>
12
<p>
13
I'm Ben C, a college student looking to enter software development, specifically full-stack
14
web development.
···
17
I like to try a lot of things, from <a href="/projects/ow-new-horizons"> modding games</a>
18
to building
19
<a href="/projects/menagerie">websites</a> and
20
-
<a href="/projects/ow-mod-man">desktop apps</a>.<br /> I enjoy pretty much any aspect of software
21
-
development.
22
</p>
23
<div class="ctas">
24
<a href="/projects" role="button" class="secondary">View My Projects</a>
···
5
import { Image } from "astro:assets";
6
---
7
8
+
<Layout title="Ben C's Website" appendTitle={false}>
9
<div class="hero">
10
<div>
11
+
<h1><span class="gradient-text">Ben C's</span> Website</h1>
12
<p>
13
I'm Ben C, a college student looking to enter software development, specifically full-stack
14
web development.
···
17
I like to try a lot of things, from <a href="/projects/ow-new-horizons"> modding games</a>
18
to building
19
<a href="/projects/menagerie">websites</a> and
20
+
<a href="/projects/ow-mod-man">desktop apps</a>.<br /> I enjoy every aspect of software development.
21
</p>
22
<div class="ctas">
23
<a href="/projects" role="button" class="secondary">View My Projects</a>
+3
-2
src/pages/projects/[...slug].astro
+3
-2
src/pages/projects/[...slug].astro
+300
-315
src/styles/style.css
+300
-315
src/styles/style.css
···
8
@custom-media --xl (width >=1700px);
9
10
.container {
11
-
--gutter: var(--2);
12
-
margin: 0 var(--gutter);
13
}
14
15
@media (--md) {
16
-
.container {
17
-
--gutter: var(--10);
18
-
}
19
}
20
21
@media (--xl) {
22
-
.container {
23
-
--gutter: var(--14);
24
-
}
25
}
26
27
/* Color Definitions */
28
:root {
29
-
--text: #daf1ef;
30
-
--background: #080609;
31
-
--primary: #53d164;
32
-
--secondary: #012d1e;
33
-
--accent: #0ee19b;
34
35
-
--text-50: #edf8f7;
36
-
--text-100: #daf1ef;
37
-
--text-200: #b5e3df;
38
-
--text-300: #90d5cf;
39
-
--text-400: #6bc7bf;
40
-
--text-500: #46b9af;
41
-
--text-600: #38948c;
42
-
--text-700: #2a6f69;
43
-
--text-800: #1c4a46;
44
-
--text-900: #0e2523;
45
-
--text-950: #071212;
46
47
-
--background-50: #f3f0f5;
48
-
--background-100: #e7e0eb;
49
-
--background-200: #cfc2d6;
50
-
--background-300: #b8a3c2;
51
-
--background-400: #a085ad;
52
-
--background-500: #886699;
53
-
--background-600: #6d527a;
54
-
--background-700: #523d5c;
55
-
--background-800: #36293d;
56
-
--background-900: #1b141f;
57
-
--background-950: #0e0a0f;
58
59
-
--primary-50: #ebfaed;
60
-
--primary-100: #d7f4db;
61
-
--primary-200: #aeeab6;
62
-
--primary-300: #86df92;
63
-
--primary-400: #5ed46e;
64
-
--primary-500: #36c949;
65
-
--primary-600: #2ba13b;
66
-
--primary-700: #20792c;
67
-
--primary-800: #15511d;
68
-
--primary-900: #0b280f;
69
-
--primary-950: #051407;
70
71
-
--secondary-50: #e6fef6;
72
-
--secondary-100: #cdfeee;
73
-
--secondary-200: #9bfddc;
74
-
--secondary-300: #69fccb;
75
-
--secondary-400: #37fbba;
76
-
--secondary-500: #05faa8;
77
-
--secondary-600: #04c887;
78
-
--secondary-700: #039665;
79
-
--secondary-800: #026443;
80
-
--secondary-900: #013222;
81
-
--secondary-950: #011911;
82
83
-
--accent-50: #e7fdf6;
84
-
--accent-100: #cffced;
85
-
--accent-200: #9ff9db;
86
-
--accent-300: #6ff6c9;
87
-
--accent-400: #3ff3b7;
88
-
--accent-500: #0ff0a5;
89
-
--accent-600: #0cc084;
90
-
--accent-700: #099063;
91
-
--accent-800: #066042;
92
-
--accent-900: #033021;
93
-
--accent-950: #021810;
94
}
95
96
/* Color Aliases */
97
98
/* Spacing Scale, Major Third */
99
:root {
100
-
/* 1rem = 16px */
101
-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
102
-
font-size: 125%;
103
-
--scale: 1.25;
104
-
--small: calc(1rem * pow(var(--scale), -1));
105
-
--half: calc(1rem * pow(var(--scale), -0.5));
106
-
--1: calc(1rem * pow(var(--scale), 0));
107
-
--2: calc(1rem * pow(var(--scale), 1));
108
-
--3: calc(1rem * pow(var(--scale), 2));
109
-
--4: calc(1rem * pow(var(--scale), 3));
110
-
--5: calc(1rem * pow(var(--scale), 4));
111
-
--6: calc(1rem * pow(var(--scale), 5));
112
-
--7: calc(1rem * pow(var(--scale), 6));
113
-
--8: calc(1rem * pow(var(--scale), 7));
114
-
--9: calc(1rem * pow(var(--scale), 8));
115
-
--10: calc(1rem * pow(var(--scale), 9));
116
-
--11: calc(1rem * pow(var(--scale), 10));
117
-
--12: calc(1rem * pow(var(--scale), 11));
118
-
--14: calc(1rem * pow(var(--scale), 13));
119
-
--component-padding: var(--small) var(--1);
120
}
121
122
/* Element Defaults */
123
124
small {
125
-
font-size: var(--small);
126
-
color: var(--text-disabled);
127
}
128
129
h1 {
130
-
font-size: var(--5);
131
}
132
133
h2 {
134
-
font-size: var(--4);
135
}
136
137
h3 {
138
-
font-size: var(--3);
139
}
140
141
h4 {
142
-
font-size: var(--2);
143
}
144
145
h5 {
146
-
font-size: var(--1);
147
}
148
149
body {
150
-
color: var(--text);
151
-
background-color: var(--background);
152
}
153
154
a {
155
-
color: var(--accent-600);
156
}
157
158
button,
159
button.primary,
160
[role="button"] {
161
-
--bg: var(--primary-400);
162
-
--hover-bg: var(--primary-500);
163
-
--active-bg: var(--primary-300);
164
-
--disabled-bg: var(--primary-600);
165
166
-
padding: var(--component-padding);
167
-
color: var(--text);
168
-
border-radius: 10px;
169
-
border: solid 2px transparent;
170
-
background-color: var(--bg);
171
-
cursor: pointer;
172
-
transition: background-color 100ms linear;
173
-
color: var(--background-800);
174
-
text-decoration: none;
175
}
176
177
button.secondary,
178
.secondary[role="button"] {
179
-
--bg: var(--secondary-500);
180
-
--hover-bg: var(--secondary-400);
181
-
--active-bg: var(--secondary-600);
182
-
--disabled-bg: var(--secondary-700);
183
}
184
185
button.accent,
186
.accent[role="button"] {
187
-
--bg: var(--accent-400);
188
-
--hover-bg: var(--accent-500);
189
-
--active-bg: var(--accent-300);
190
-
--disabled-bg: var(--accent-600);
191
}
192
193
button:active,
194
[role="button"]:active {
195
-
background-color: var(--active-bg);
196
}
197
198
button:hover,
199
[role="button"]:hover {
200
-
background-color: var(--hover-bg);
201
}
202
203
button:disabled,
204
[role="button"]:disabled {
205
-
background-color: var(--disabled-bg);
206
-
color: var(--text-disabled);
207
}
208
209
button:disabled:hover,
210
[role="button"]:disabled:hover {
211
-
cursor: default;
212
}
213
214
input {
215
-
padding: var(--component-padding);
216
-
color: var(--text);
217
-
border-radius: var(--1);
218
-
border: solid 2px var(--accent-200);
219
-
background-color: var(--background-raised);
220
}
221
222
body {
223
-
font-weight: 400;
224
}
225
226
h1,
···
228
h3,
229
h4,
230
h5 {
231
-
font-weight: 700;
232
}
233
-
234
235
.gradient-text {
236
-
background: linear-gradient(120deg, var(--primary), var(--accent) 70%);
237
-
background-clip: text;
238
-
-webkit-background-clip: text;
239
-
-webkit-text-fill-color: transparent;
240
}
241
-
242
-
243
244
/* Tooltips */
245
[data-tooltip] {
246
-
position: relative;
247
248
-
&[data-placement="top"]::before,
249
-
&[data-placement="top"]::after,
250
-
&::before,
251
-
&::after {
252
-
display: block;
253
-
z-index: 99;
254
-
position: absolute;
255
-
bottom: 100%;
256
-
left: 50%;
257
-
padding: 0.25rem 0.5rem;
258
-
overflow: hidden;
259
-
transform: translate(-50%, -0.25rem);
260
-
border-radius: 5px;
261
-
background: var(--accent-800);
262
-
content: attr(data-tooltip);
263
-
color: var(--text);
264
-
font-style: normal;
265
-
font-size: 0.875rem;
266
-
text-decoration: none;
267
-
text-overflow: ellipsis;
268
-
white-space: nowrap;
269
-
opacity: 0;
270
-
pointer-events: none;
271
-
}
272
273
-
&[data-placement="top"]::after,
274
-
&::after {
275
-
padding: 0;
276
-
transform: translate(-50%, 0rem);
277
-
border-top: 0.3rem solid;
278
-
border-right: 0.3rem solid transparent;
279
-
border-left: 0.3rem solid transparent;
280
-
border-radius: 0;
281
-
background-color: transparent;
282
-
content: "";
283
-
color: var(--accent-800);
284
-
}
285
286
-
&[data-placement="bottom"] {
287
288
-
&::before,
289
-
&::after {
290
-
top: 100%;
291
-
bottom: auto;
292
-
transform: translate(-50%, 0.25rem);
293
-
}
294
295
-
&:after {
296
-
transform: translate(-50%, -0.3rem);
297
-
border: 0.3rem solid transparent;
298
-
border-bottom: 0.3rem solid;
299
-
}
300
-
}
301
302
-
&[data-placement="left"] {
303
304
-
&::before,
305
-
&::after {
306
-
top: 50%;
307
-
right: 100%;
308
-
bottom: auto;
309
-
left: auto;
310
-
transform: translate(-0.25rem, -50%);
311
-
}
312
313
-
&:after {
314
-
transform: translate(0.3rem, -50%);
315
-
border: 0.3rem solid transparent;
316
-
border-left: 0.3rem solid;
317
-
}
318
-
}
319
320
-
&[data-placement="right"] {
321
322
-
&::before,
323
-
&::after {
324
-
top: 50%;
325
-
right: auto;
326
-
bottom: auto;
327
-
left: 100%;
328
-
transform: translate(0.25rem, -50%);
329
-
}
330
331
-
&:after {
332
-
transform: translate(-0.3rem, -50%);
333
-
border: 0.3rem solid transparent;
334
-
border-right: 0.3rem solid;
335
-
}
336
-
}
337
338
-
&:focus,
339
-
&:hover {
340
341
-
&::before,
342
-
&::after {
343
-
opacity: 1;
344
-
}
345
-
}
346
347
-
@media (hover: hover) and (pointer: fine) {
348
349
-
&:focus,
350
-
&:hover {
351
352
-
&::before,
353
-
&::after {
354
-
--tooltip-slide-to: translate(-50%, -0.25rem);
355
-
transform: translate(-50%, 0.75rem);
356
-
animation-duration: 0.2s;
357
-
animation-fill-mode: forwards;
358
-
animation-name: tooltip-slide;
359
-
opacity: 0;
360
-
}
361
-
362
-
&::after {
363
-
--tooltip-caret-slide-to: translate(-50%, 0rem);
364
-
transform: translate(-50%, -0.25rem);
365
-
animation-name: tooltip-caret-slide;
366
-
}
367
-
}
368
-
369
-
&[data-placement="bottom"] {
370
-
371
-
&:focus,
372
-
&:hover {
373
374
-
&::before,
375
-
&::after {
376
-
--tooltip-slide-to: translate(-50%, 0.25rem);
377
-
transform: translate(-50%, -0.75rem);
378
-
animation-name: tooltip-slide;
379
-
}
380
-
381
-
&::after {
382
-
--tooltip-caret-slide-to: translate(-50%, -0.3rem);
383
-
transform: translate(-50%, -0.5rem);
384
-
animation-name: tooltip-caret-slide;
385
-
}
386
-
}
387
-
}
388
-
389
-
&[data-placement="left"] {
390
-
391
-
&:focus,
392
-
&:hover {
393
-
394
-
&::before,
395
-
&::after {
396
-
--tooltip-slide-to: translate(-0.25rem, -50%);
397
-
transform: translate(0.75rem, -50%);
398
-
animation-name: tooltip-slide;
399
-
}
400
-
401
-
&::after {
402
-
--tooltip-caret-slide-to: translate(0.3rem, -50%);
403
-
transform: translate(0.05rem, -50%);
404
-
animation-name: tooltip-caret-slide;
405
-
}
406
-
}
407
-
}
408
-
409
-
&[data-placement="right"] {
410
-
411
-
&:focus,
412
-
&:hover {
413
-
414
-
&::before,
415
-
&::after {
416
-
--tooltip-slide-to: translate(0.25rem, -50%);
417
-
transform: translate(-0.75rem, -50%);
418
-
animation-name: tooltip-slide;
419
-
}
420
-
421
-
&::after {
422
-
--tooltip-caret-slide-to: translate(-0.3rem, -50%);
423
-
transform: translate(-0.05rem, -50%);
424
-
animation-name: tooltip-caret-slide;
425
-
}
426
-
}
427
-
}
428
-
}
429
}
430
431
@keyframes tooltip-slide {
432
-
to {
433
-
transform: var(--tooltip-slide-to);
434
-
opacity: 1;
435
-
}
436
}
437
438
@keyframes tooltip-caret-slide {
439
-
50% {
440
-
opacity: 0;
441
-
}
442
443
-
to {
444
-
transform: var(--tooltip-caret-slide-to);
445
-
opacity: 1;
446
-
}
447
}
···
8
@custom-media --xl (width >=1700px);
9
10
.container {
11
+
--gutter: var(--2);
12
+
margin: 0 var(--gutter);
13
}
14
15
@media (--md) {
16
+
.container {
17
+
--gutter: var(--10);
18
+
}
19
}
20
21
@media (--xl) {
22
+
.container {
23
+
--gutter: var(--14);
24
+
}
25
}
26
27
/* Color Definitions */
28
:root {
29
+
--text: #daf1ef;
30
+
--background: #080609;
31
+
--primary: #53d164;
32
+
--secondary: #012d1e;
33
+
--accent: #0ee19b;
34
35
+
--text-50: #edf8f7;
36
+
--text-100: #daf1ef;
37
+
--text-200: #b5e3df;
38
+
--text-300: #90d5cf;
39
+
--text-400: #6bc7bf;
40
+
--text-500: #46b9af;
41
+
--text-600: #38948c;
42
+
--text-700: #2a6f69;
43
+
--text-800: #1c4a46;
44
+
--text-900: #0e2523;
45
+
--text-950: #071212;
46
47
+
--background-50: #f3f0f5;
48
+
--background-100: #e7e0eb;
49
+
--background-200: #cfc2d6;
50
+
--background-300: #b8a3c2;
51
+
--background-400: #a085ad;
52
+
--background-500: #886699;
53
+
--background-600: #6d527a;
54
+
--background-700: #523d5c;
55
+
--background-800: #36293d;
56
+
--background-900: #1b141f;
57
+
--background-950: #0e0a0f;
58
59
+
--primary-50: #ebfaed;
60
+
--primary-100: #d7f4db;
61
+
--primary-200: #aeeab6;
62
+
--primary-300: #86df92;
63
+
--primary-400: #5ed46e;
64
+
--primary-500: #36c949;
65
+
--primary-600: #2ba13b;
66
+
--primary-700: #20792c;
67
+
--primary-800: #15511d;
68
+
--primary-900: #0b280f;
69
+
--primary-950: #051407;
70
71
+
--secondary-50: #e6fef6;
72
+
--secondary-100: #cdfeee;
73
+
--secondary-200: #9bfddc;
74
+
--secondary-300: #69fccb;
75
+
--secondary-400: #37fbba;
76
+
--secondary-500: #05faa8;
77
+
--secondary-600: #04c887;
78
+
--secondary-700: #039665;
79
+
--secondary-800: #026443;
80
+
--secondary-900: #013222;
81
+
--secondary-950: #011911;
82
83
+
--accent-50: #e7fdf6;
84
+
--accent-100: #cffced;
85
+
--accent-200: #9ff9db;
86
+
--accent-300: #6ff6c9;
87
+
--accent-400: #3ff3b7;
88
+
--accent-500: #0ff0a5;
89
+
--accent-600: #0cc084;
90
+
--accent-700: #099063;
91
+
--accent-800: #066042;
92
+
--accent-900: #033021;
93
+
--accent-950: #021810;
94
}
95
96
/* Color Aliases */
97
98
/* Spacing Scale, Major Third */
99
:root {
100
+
/* 1rem = 16px */
101
+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
102
+
font-size: 125%;
103
+
--scale: 1.25;
104
+
--small: calc(1rem * pow(var(--scale), -1));
105
+
--half: calc(1rem * pow(var(--scale), -0.5));
106
+
--1: calc(1rem * pow(var(--scale), 0));
107
+
--2: calc(1rem * pow(var(--scale), 1));
108
+
--3: calc(1rem * pow(var(--scale), 2));
109
+
--4: calc(1rem * pow(var(--scale), 3));
110
+
--5: calc(1rem * pow(var(--scale), 4));
111
+
--6: calc(1rem * pow(var(--scale), 5));
112
+
--7: calc(1rem * pow(var(--scale), 6));
113
+
--8: calc(1rem * pow(var(--scale), 7));
114
+
--9: calc(1rem * pow(var(--scale), 8));
115
+
--10: calc(1rem * pow(var(--scale), 9));
116
+
--11: calc(1rem * pow(var(--scale), 10));
117
+
--12: calc(1rem * pow(var(--scale), 11));
118
+
--14: calc(1rem * pow(var(--scale), 13));
119
+
--component-padding: var(--small) var(--1);
120
}
121
122
/* Element Defaults */
123
124
small {
125
+
font-size: var(--small);
126
+
color: var(--text-disabled);
127
}
128
129
h1 {
130
+
font-size: var(--5);
131
}
132
133
h2 {
134
+
font-size: var(--4);
135
}
136
137
h3 {
138
+
font-size: var(--3);
139
}
140
141
h4 {
142
+
font-size: var(--2);
143
}
144
145
h5 {
146
+
font-size: var(--1);
147
}
148
149
body {
150
+
color: var(--text);
151
+
background-color: var(--background);
152
}
153
154
a {
155
+
color: var(--accent-600);
156
}
157
158
button,
159
button.primary,
160
[role="button"] {
161
+
--bg: var(--primary-400);
162
+
--hover-bg: var(--primary-500);
163
+
--active-bg: var(--primary-300);
164
+
--disabled-bg: var(--primary-600);
165
166
+
padding: var(--component-padding);
167
+
color: var(--text);
168
+
border-radius: 10px;
169
+
border: solid 2px transparent;
170
+
background-color: var(--bg);
171
+
cursor: pointer;
172
+
transition: background-color 100ms linear;
173
+
color: var(--background-800);
174
+
text-decoration: none;
175
}
176
177
button.secondary,
178
.secondary[role="button"] {
179
+
--bg: var(--secondary-500);
180
+
--hover-bg: var(--secondary-400);
181
+
--active-bg: var(--secondary-600);
182
+
--disabled-bg: var(--secondary-700);
183
}
184
185
button.accent,
186
.accent[role="button"] {
187
+
--bg: var(--accent-400);
188
+
--hover-bg: var(--accent-500);
189
+
--active-bg: var(--accent-300);
190
+
--disabled-bg: var(--accent-600);
191
}
192
193
button:active,
194
[role="button"]:active {
195
+
background-color: var(--active-bg);
196
}
197
198
button:hover,
199
[role="button"]:hover {
200
+
background-color: var(--hover-bg);
201
}
202
203
button:disabled,
204
[role="button"]:disabled {
205
+
background-color: var(--disabled-bg);
206
+
color: var(--text-disabled);
207
}
208
209
button:disabled:hover,
210
[role="button"]:disabled:hover {
211
+
cursor: default;
212
}
213
214
input {
215
+
padding: var(--component-padding);
216
+
color: var(--text);
217
+
border-radius: var(--1);
218
+
border: solid 2px var(--accent-200);
219
+
background-color: var(--background-raised);
220
}
221
222
body {
223
+
font-weight: 400;
224
}
225
226
h1,
···
228
h3,
229
h4,
230
h5 {
231
+
font-weight: 700;
232
}
233
234
.gradient-text {
235
+
background: linear-gradient(120deg, var(--primary), var(--accent) 70%);
236
+
background-clip: text;
237
+
-webkit-background-clip: text;
238
+
-webkit-text-fill-color: transparent;
239
}
240
241
/* Tooltips */
242
[data-tooltip] {
243
+
position: relative;
244
245
+
&[data-placement="top"]::before,
246
+
&[data-placement="top"]::after,
247
+
&::before,
248
+
&::after {
249
+
display: block;
250
+
z-index: 99;
251
+
position: absolute;
252
+
bottom: 100%;
253
+
left: 50%;
254
+
padding: 0.25rem 0.5rem;
255
+
overflow: hidden;
256
+
transform: translate(-50%, -0.25rem);
257
+
border-radius: 5px;
258
+
background: var(--accent-800);
259
+
content: attr(data-tooltip);
260
+
color: var(--text);
261
+
font-style: normal;
262
+
font-size: 0.875rem;
263
+
text-decoration: none;
264
+
text-overflow: ellipsis;
265
+
white-space: nowrap;
266
+
opacity: 0;
267
+
pointer-events: none;
268
+
}
269
270
+
&[data-placement="top"]::after,
271
+
&::after {
272
+
padding: 0;
273
+
transform: translate(-50%, 0rem);
274
+
border-top: 0.3rem solid;
275
+
border-right: 0.3rem solid transparent;
276
+
border-left: 0.3rem solid transparent;
277
+
border-radius: 0;
278
+
background-color: transparent;
279
+
content: "";
280
+
color: var(--accent-800);
281
+
}
282
283
+
&[data-placement="bottom"] {
284
+
&::before,
285
+
&::after {
286
+
top: 100%;
287
+
bottom: auto;
288
+
transform: translate(-50%, 0.25rem);
289
+
}
290
291
+
&:after {
292
+
transform: translate(-50%, -0.3rem);
293
+
border: 0.3rem solid transparent;
294
+
border-bottom: 0.3rem solid;
295
+
}
296
+
}
297
298
+
&[data-placement="left"] {
299
+
&::before,
300
+
&::after {
301
+
top: 50%;
302
+
right: 100%;
303
+
bottom: auto;
304
+
left: auto;
305
+
transform: translate(-0.25rem, -50%);
306
+
}
307
308
+
&:after {
309
+
transform: translate(0.3rem, -50%);
310
+
border: 0.3rem solid transparent;
311
+
border-left: 0.3rem solid;
312
+
}
313
+
}
314
315
+
&[data-placement="right"] {
316
+
&::before,
317
+
&::after {
318
+
top: 50%;
319
+
right: auto;
320
+
bottom: auto;
321
+
left: 100%;
322
+
transform: translate(0.25rem, -50%);
323
+
}
324
325
+
&:after {
326
+
transform: translate(-0.3rem, -50%);
327
+
border: 0.3rem solid transparent;
328
+
border-right: 0.3rem solid;
329
+
}
330
+
}
331
332
+
&:focus,
333
+
&:hover {
334
+
&::before,
335
+
&::after {
336
+
opacity: 1;
337
+
}
338
+
}
339
340
+
@media (hover: hover) and (pointer: fine) {
341
+
&:focus,
342
+
&:hover {
343
+
&::before,
344
+
&::after {
345
+
--tooltip-slide-to: translate(-50%, -0.25rem);
346
+
transform: translate(-50%, 0.75rem);
347
+
animation-duration: 0.2s;
348
+
animation-fill-mode: forwards;
349
+
animation-name: tooltip-slide;
350
+
opacity: 0;
351
+
}
352
353
+
&::after {
354
+
--tooltip-caret-slide-to: translate(-50%, 0rem);
355
+
transform: translate(-50%, -0.25rem);
356
+
animation-name: tooltip-caret-slide;
357
+
}
358
+
}
359
360
+
&[data-placement="bottom"] {
361
+
&:focus,
362
+
&:hover {
363
+
&::before,
364
+
&::after {
365
+
--tooltip-slide-to: translate(-50%, 0.25rem);
366
+
transform: translate(-50%, -0.75rem);
367
+
animation-name: tooltip-slide;
368
+
}
369
370
+
&::after {
371
+
--tooltip-caret-slide-to: translate(-50%, -0.3rem);
372
+
transform: translate(-50%, -0.5rem);
373
+
animation-name: tooltip-caret-slide;
374
+
}
375
+
}
376
+
}
377
378
+
&[data-placement="left"] {
379
+
&:focus,
380
+
&:hover {
381
+
&::before,
382
+
&::after {
383
+
--tooltip-slide-to: translate(-0.25rem, -50%);
384
+
transform: translate(0.75rem, -50%);
385
+
animation-name: tooltip-slide;
386
+
}
387
388
+
&::after {
389
+
--tooltip-caret-slide-to: translate(0.3rem, -50%);
390
+
transform: translate(0.05rem, -50%);
391
+
animation-name: tooltip-caret-slide;
392
+
}
393
+
}
394
+
}
395
396
+
&[data-placement="right"] {
397
+
&:focus,
398
+
&:hover {
399
+
&::before,
400
+
&::after {
401
+
--tooltip-slide-to: translate(0.25rem, -50%);
402
+
transform: translate(-0.75rem, -50%);
403
+
animation-name: tooltip-slide;
404
+
}
405
406
+
&::after {
407
+
--tooltip-caret-slide-to: translate(-0.3rem, -50%);
408
+
transform: translate(-0.05rem, -50%);
409
+
animation-name: tooltip-caret-slide;
410
+
}
411
+
}
412
+
}
413
+
}
414
}
415
416
@keyframes tooltip-slide {
417
+
to {
418
+
transform: var(--tooltip-slide-to);
419
+
opacity: 1;
420
+
}
421
}
422
423
@keyframes tooltip-caret-slide {
424
+
50% {
425
+
opacity: 0;
426
+
}
427
428
+
to {
429
+
transform: var(--tooltip-caret-slide-to);
430
+
opacity: 1;
431
+
}
432
}