Skip to content

Commit a45c0b6

Browse files
bdsohabdsoha
committed
🎨 Use color palette
Closes kloudkit/workspace#21
1 parent 126e4f6 commit a45c0b6

File tree

8 files changed

+81
-54
lines changed

8 files changed

+81
-54
lines changed

‎.vitepress/config.mts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export default defineConfig({
3838
markdown: {
3939
config: md => {
4040
md.use(markdownItFootnote)
41-
}
41+
},
42+
theme: 'catppuccin-frappe'
4243
}
4344
})

‎.vitepress/theme/palette.css‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,29 @@
1-
:root {
2-
--vp-c-black: #232634;
1+
.dark {
2+
--vp-c-bg: var(--vp-c-black);
3+
--vp-c-bg-alt: var(--vp-c-black-2);
4+
--vp-c-bg-elv: var(--vp-c-gray-3);
5+
--vp-c-bg-soft: var(--vp-c-gray-2);
6+
}
37

4-
--vp-font-family-mono: 'Fira Code', ui-monospace, Menlo,
5-
Consolas, 'Courier New', monospace;
8+
body {
9+
font-size: 18px;
10+
}
611

7-
--vp-button-brand-text: #232634;
8-
--vp-button-brand-hover-text: #292c3c;
9-
--vp-button-brand-active-text: #292c3c;
10-
--vp-button-brand-bg: #81c8be;
11-
--vp-button-brand-hover-bg: #99d1db;
12-
--vp-button-brand-active-bg: #99d1db;
12+
aside.VPSidebar,
13+
.vp-doc pre {
14+
scrollbar-width: thin;
15+
scrollbar-color: var(--vp-c-bg-soft) transparent;
16+
scrollbar-gutter: stable;
1317
}
1418

15-
.dark {
16-
--vp-c-bg: #232634;
17-
--vp-c-bg-alt: #292c3c;
18-
--vp-c-bg-elv: #303446;
19-
--vp-c-bg-soft: #414559;
19+
.VPDoc.has-aside .content .content-container {
20+
max-width: 740px;
21+
}
22+
23+
.vp-doc .custom-block {
24+
margin: 3em 0;
25+
}
26+
27+
.vp-doc p > em {
28+
font-size: 85%;
2029
}

‎.vitepress/theme/style.css‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,21 @@
44
--vp-c-default-3: var(--vp-c-gray-3);
55
--vp-c-default-soft: var(--vp-c-gray-soft);
66

7-
--vp-c-brand-1: var(--vp-c-indigo-1);
8-
--vp-c-brand-2: var(--vp-c-indigo-2);
9-
--vp-c-brand-3: var(--vp-c-indigo-3);
10-
--vp-c-brand-soft: var(--vp-c-indigo-soft);
7+
--vp-c-black: #232634;
8+
--vp-c-black-2: #292c3c;
9+
10+
--vp-c-gray-1: #51576d;
11+
--vp-c-gray-2: #414559;
12+
--vp-c-gray-3: #303446;
13+
14+
--vp-c-brand-1: #81c8be;
15+
--vp-c-brand-2: #99d1db;
16+
--vp-c-brand-3: #99d1db;
17+
--vp-c-brand-soft: #81c8be33;
18+
19+
--vp-c-yellow-1: #e5c890;
20+
--vp-c-yellow-2: #CCAF77;
21+
--vp-c-yellow-soft: #e5c89044;
1122

1223
--vp-c-tip-1: var(--vp-c-brand-1);
1324
--vp-c-tip-2: var(--vp-c-brand-2);
@@ -23,10 +34,14 @@
2334
--vp-c-danger-2: var(--vp-c-red-2);
2435
--vp-c-danger-3: var(--vp-c-red-3);
2536
--vp-c-danger-soft: var(--vp-c-red-soft);
26-
}
2737

28-
:root {
29-
--vp-sidebar-width: 250px;
38+
--vp-font-family-mono: 'Fira Code', ui-monospace, Menlo,
39+
Consolas, 'Courier New', monospace;
40+
41+
--vp-code-line-height: 1.8;
42+
--vp-code-font-size: 0.9em;
43+
44+
--vp-sidebar-width: 240px;
3045
}
3146

3247
/**
@@ -35,14 +50,14 @@
3550

3651
:root {
3752
--vp-button-brand-border: transparent;
38-
--vp-button-brand-text: var(--vp-c-white);
39-
--vp-button-brand-bg: var(--vp-c-brand-3);
53+
--vp-button-brand-text: var(--vp-c-black);
54+
--vp-button-brand-bg: var(--vp-c-brand-1);
4055
--vp-button-brand-hover-border: transparent;
41-
--vp-button-brand-hover-text: var(--vp-c-white);
56+
--vp-button-brand-hover-text: var(--vp-c-black-2);
4257
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
4358
--vp-button-brand-active-border: transparent;
44-
--vp-button-brand-active-text: var(--vp-c-white);
45-
--vp-button-brand-active-bg: var(--vp-c-brand-1);
59+
--vp-button-brand-active-text: var(--vp-c-black-2);
60+
--vp-button-brand-active-bg: var(--vp-c-brand-2);
4661
}
4762

4863
/**
@@ -51,17 +66,13 @@
5166

5267
:root {
5368
--vp-home-hero-name-color: transparent;
54-
--vp-home-hero-name-background: -webkit-linear-gradient(
55-
120deg,
56-
#40C3AC 30%,
57-
#41d1ff
58-
);
59-
60-
--vp-home-hero-image-background-image: linear-gradient(
61-
-45deg,
62-
#40C3AC 50%,
63-
#47caff 50%
64-
);
69+
--vp-home-hero-name-background: -webkit-linear-gradient(120deg,
70+
#40C3AC 30%,
71+
#41d1ff);
72+
73+
--vp-home-hero-image-background-image: linear-gradient(-45deg,
74+
#40C3AC 50%,
75+
#47caff 50%);
6576
--vp-home-hero-image-filter: blur(44px);
6677
}
6778

@@ -77,17 +88,6 @@
7788
}
7889
}
7990

80-
/**
81-
* Component: Custom Block
82-
* -------------------------------------------------------------------------- */
83-
84-
:root {
85-
--vp-custom-block-tip-border: transparent;
86-
--vp-custom-block-tip-text: var(--vp-c-text-1);
87-
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
88-
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
89-
}
90-
9191
/**
9292
* Component: Algolia
9393
* -------------------------------------------------------------------------- */

‎docs/editor/authentication.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ configured to not require authentication.
1010

1111
The following sections will help you setup our *opt-in* authentication mechanism.
1212

13+
::: warning
14+
Remember to click `Sign out` at the bottom of the `File` menu when you are done working,
15+
as your login session won't expire automatically.
16+
:::
17+
1318
## Password Authentication
1419

1520
Passed authentication can be easily configured by setting an environment variable when
@@ -36,8 +41,8 @@ To generate a hashed password, execute the following
3641
*(replacing `"super_duper_secret"` with your desired password)*:
3742

3843
```sh
39-
$ echo -n super_duper_secret | npx -s argon2-cli -e
40-
$argon2i$v=19$m=4096,t=3,p=1$z4DjJlJgI6S7fAdQC35ZQw$Rpu8CLMWedxJaH0eiFCetyoRbg+S8ow/RRyVCZzM6QE
44+
$ echo -n super_duper_secret | npx -s argon2-cli -e
45+
$argon2i$v=19$m=4096,t=3,p=1$z4DjJlJgI6S7fAdQC35ZQw$Rpu8CLMWedxJaH0eiFCetyoRbg+S8ow/RRyVCZzM6QE
4146
```
4247

4348
Then deploy the workspace:

‎docs/editor/theme-and-fonts.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ Download the missing font and install them on your machine:
7777
## Licenses
7878

7979
The table below describes the pre-package fonts and their respective license.
80+
8081
👏 Many thanks to the amazing designers of these fonts.
8182

8283
| Name | License |

‎docs/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ features:
3838
onboarding process and ensures a seamless start of your coding tasks.
3939
---
4040

41+
---
42+
4143
Over the past decade, both companies and individual developers have increasingly embraced
4244
cloud-based workflows for CI, deployment, testing, and staging.
4345
Yet, the shift of actual development processes to the cloud has lagged behind.

‎docs/pages/getting-started.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,15 @@ Run the command below to deploy an
3434
docker run -p 8080:8080 ghcr.io/kloudkit/workspace:latest
3535
```
3636

37+
```yaml [compose]
38+
version: '3.8'
39+
services:
40+
workspace:
41+
image: ghcr.io/kloudkit/workspace:latest
42+
ports:
43+
- 8080:8080
44+
```
45+
3746
```yaml [kubernetes]
3847
apiVersion: apps/v1
3948
kind: Deployment

‎docs/pages/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
55
## Overview
66

7-
Run your customized and pre-configured version of [VS Code][] using Docker, Kubernetes, or
8-
OpenShift and access it in the browser *(or via `ssh`)*.
7+
Run your customized and pre-configured version of [VS Code][] *(powered by Coder)* using
8+
Docker, Kubernetes, or OpenShift and access it in the browser *(or via `ssh`)*.
99

1010
## Addons
1111

0 commit comments

Comments
 (0)