Skip to content
This repository was archived by the owner on Oct 10, 2025. It is now read-only.

Commit 02e70b6

Browse files
s-illlys-illly
authored
font selection (#609)
1 parent b04b918 commit 02e70b6

File tree

7 files changed

+177
-46
lines changed

7 files changed

+177
-46
lines changed

‎astro.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export default defineConfig({
9090
components: {
9191
Header: './src/components/overrides/Header.astro',
9292
Banner: './src/components/overrides/Banner.astro',
93+
ThemeSelect: './src/components/overrides/ThemeSelect.astro',
9394
},
9495
sidebar: [
9596
{

‎src/components/overrides/Banner.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,4 +108,6 @@
108108
#close-banner:hover {
109109
color: var(--sl-color-white);
110110
}
111+
111112
</style>
113+

‎src/components/overrides/Header.astro‎

Lines changed: 7 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { Props } from "@astrojs/starlight/props";
33
import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
44
import Search from "@astrojs/starlight/components/Search.astro";
55
import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
6-
import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
6+
import ThemeSelect from "./ThemeSelect.astro";
77
import { Icon } from "@astrojs/starlight/components";
88
import Banner from './Banner.astro';
99
---
@@ -30,7 +30,9 @@ import Banner from './Banner.astro';
3030
<div class="sl-flex social-icons">
3131
<SocialIcons {...Astro.props} />
3232
</div>
33+
<div class="sl-flex toggle-wrapper">
3334
<ThemeSelect {...Astro.props} />
35+
</div>
3436
</div>
3537
</div>
3638

@@ -128,46 +130,11 @@ import Banner from './Banner.astro';
128130
gap: 1rem;
129131
}
130132

131-
/* Enterprise Waitlist Link Custom CSS */
132-
.enterprise-waitlist-link {
133-
background-color: rgba(249, 115, 22, 0.3); /* Tailwind's orange-500 is #f97316 */
134-
border: 1px solid #f97316;
135-
border-radius: 10px;
133+
.toggle-wrapper {
136134
display: flex;
137135
align-items: center;
138-
text-align: center;
139-
justify-content: center;
140-
gap: 0.5rem; /* gap-2 */
141-
padding-left: 1rem; /* px-6 */
142-
padding-right: 1.5rem;
143-
padding-top: 0.25em; /* py-2 */
144-
padding-bottom: 0.25rem;
145-
text-decoration: none;
146-
max-width: 100%;
147-
overflow: hidden;
148-
}
149-
.enterprise-waitlist-text {
150-
color: var(--sl-color-text);
151-
font-size: 0.875rem; /* text-sm */
152-
animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
153-
white-space: nowrap;
154-
overflow: hidden;
155-
text-overflow: ellipsis;
156-
max-width: 100%;
157-
display: inline-block;
158-
}
159-
@media (min-width: 768px) {
160-
.enterprise-waitlist-text {
161-
font-size: 0.875rem; /* text-lg */
162-
}
163-
}
164-
@media (prefers-color-scheme: dark) {
165-
.enterprise-waitlist-text {
166-
color: var(--sl-color-text); /* white text for dark mode */
167-
}
168-
}
169-
@keyframes pulse {
170-
0%, 100% { opacity: 1; }
171-
50% { opacity: .5; }
136+
height: 100%;
172137
}
138+
173139
</style>
140+

‎src/components/overrides/ThemeSelect.astro‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
import Select from '@astrojs/starlight/components/Select.astro';
3+
---
4+
5+
<starlight-theme-select class="toggle-container">
6+
<label class="toggle">
7+
<input type="checkbox" id="theme-toggle" />
8+
<span class="track">
9+
<i class="fas fa-moon"></i>
10+
<i class="fas fa-sun"></i>
11+
<span class="ball"></span>
12+
</span>
13+
</label>
14+
</starlight-theme-select>
15+
16+
<script is:inline>
17+
StarlightThemeProvider.updatePickers();
18+
</script>
19+
20+
<script>
21+
type Theme = 'dark' | 'light';
22+
23+
const storageKey = 'starlight-theme';
24+
25+
const parseTheme = (theme) =>
26+
theme === 'dark' || theme === 'light' ? theme : 'dark';
27+
28+
const loadTheme = () =>
29+
parseTheme(typeof localStorage !== 'undefined' && localStorage.getItem(storageKey));
30+
31+
function storeTheme(theme) {
32+
if (typeof localStorage !== 'undefined') {
33+
localStorage.setItem(storageKey, theme);
34+
}
35+
}
36+
37+
function onThemeChange(theme) {
38+
StarlightThemeProvider.updatePickers(theme);
39+
document.documentElement.dataset.theme = theme;
40+
storeTheme(theme);
41+
}
42+
43+
class StarlightThemeSelect extends HTMLElement {
44+
constructor() {
45+
super();
46+
47+
const checkbox = this.querySelector('input[type="checkbox"]');
48+
if (!checkbox) return;
49+
50+
// Set checkbox based on current theme
51+
const initialTheme = loadTheme();
52+
checkbox.checked = initialTheme === 'dark';
53+
onThemeChange(initialTheme);
54+
55+
// Listen to toggle change
56+
checkbox.addEventListener('change', () => {
57+
const newTheme = checkbox.checked ? 'dark' : 'light';
58+
onThemeChange(newTheme);
59+
});
60+
}
61+
}
62+
63+
customElements.define('starlight-theme-select', StarlightThemeSelect);
64+
</script>
65+
66+
67+
68+
<style>
69+
.toggle-container {
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
height: 100%;
74+
}
75+
76+
.toggle {
77+
position: relative;
78+
display: inline-block;
79+
}
80+
81+
.toggle input {
82+
position: absolute;
83+
opacity: 0;
84+
pointer-events: none;
85+
}
86+
87+
.track {
88+
width: 50px;
89+
height: 20px;
90+
background: var(--sl-color-gray-6);
91+
border-radius: 200px;
92+
display: flex;
93+
align-items: center;
94+
justify-content: space-between;
95+
padding: 0 4px;
96+
box-sizing: border-box;
97+
position: relative;
98+
transition: background 0.3s;
99+
}
100+
101+
.track .ball {
102+
position: absolute;
103+
top: 1px;
104+
left: 2px;
105+
width: 18px;
106+
height: 18px;
107+
background: var(--sl-color-accent);
108+
border-radius: 50%;
109+
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
110+
transition: transform 0.3s, background 0.3s;
111+
}
112+
113+
.toggle input:checked + .track {
114+
background: var(--sl-color-gray-5);
115+
}
116+
117+
.toggle input:checked + .track .ball {
118+
transform: translateX(30px);
119+
background: var(--sl-color-accent-low);
120+
}
121+
122+
123+
</style>

‎src/content/docs/get-started/index.mdx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: "Create your first graph"
33
---
44

5+
<div class="font-nunito">
6+
57
import { Tabs, TabItem } from '@astrojs/starlight/components';
68
import {version} from '../../../version.json';
79
import { Code } from 'astro-expressive-code/components';
@@ -54,7 +56,6 @@ let package = Package(
5456

5557
}
5658

57-
5859
Kuzu implements a **structured property graph model** and requires a pre-defined schema.
5960

6061
- Schema definition involves node and relationship tables and their associated properties.
@@ -898,3 +899,5 @@ The following result is obtained:
898899
:::tip[Congratulations]
899900
You've now created and queried your first graph in Kuzu!
900901
:::
902+
903+
</div>

‎src/content/docs/installation.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: Install Kuzu
33
---
44

5+
<div class="padauk-regular">
6+
57
import { Tabs, TabItem } from '@astrojs/starlight/components';
68
import { version } from '../../version.json';
79
import { Code } from 'astro-expressive-code/components';
@@ -268,3 +270,5 @@ If you want access to the latest features in development, you can use our nightl
268270
- Java: The latest snapshot version is available on [GitHub Packages](https://github.com/kuzudb/kuzu/packages/2258307)
269271
- For the CLI, C/C++ shared libraries, and Rust crate, the latest nightly versions for each can be
270272
downloaded from the latest run of [this GitHub Actions workflow](https://github.com/kuzudb/kuzu/actions/workflows/build-and-deploy.yml).
273+
274+
</div>

‎src/styles/custom.css‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Padauk:wght@400;700&display=swap');
14
/**
25
See all the properties that can be customized for the Astro Starlight theme here:
36
https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css
@@ -70,7 +73,7 @@ https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.
7073
--sl-line-height: 1.8;
7174
--sl-line-height-headings: 1.2;
7275

73-
--sl-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
76+
--sl-font-system: 'Overpass', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
7477
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
7578
'Segoe UI Symbol', 'Noto Color Emoji';
7679
--sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
@@ -83,9 +86,9 @@ https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.
8386
--sl-nav-pad-x: 1rem;
8487
--sl-nav-pad-y: 0.75rem;
8588
--sl-mobile-toc-height: 3rem;
86-
--sl-sidebar-width: 18.75rem;
87-
--sl-sidebar-pad-x: 1rem;
88-
--sl-content-width: 45rem;
89+
--sl-sidebar-width: 25vw;
90+
/* --sl-sidebar-pad-x: 8rem; */
91+
--sl-content-width: 50vw;
8992
--sl-content-pad-x: 1rem;
9093
--sl-menu-button-size: 2rem;
9194
--sl-nav-gap: var(--sl-content-pad-x);
@@ -99,6 +102,23 @@ https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.
99102
--sl-z-index-skiplink: 20;
100103
}
101104

105+
body {
106+
font-family: 'Overpass', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
107+
}
108+
109+
.font-nunito {
110+
font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
111+
}
112+
113+
.font-overpass {
114+
font-family: 'Overpass', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
115+
}
116+
.padauk-regular {
117+
font-family: "Padauk", sans-serif;
118+
font-weight: 400;
119+
font-style: normal;
120+
}
121+
102122
:root[data-theme='light'],
103123
[data-theme='light'] ::backdrop {
104124
/* Colours (light mode) */
@@ -210,4 +230,15 @@ https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.
210230
.heading-link {
211231
text-decoration: none;
212232
color: var(--sl-color-text) !important;
213-
}
233+
}
234+
235+
.content-panel {
236+
padding-left: 5rem;
237+
padding-right: 5rem;
238+
}
239+
240+
.sidebar-content {
241+
float: right;
242+
padding-right: 1.5rem;
243+
}
244+

0 commit comments

Comments
 (0)