Skip to content

Commit 7418ed8

Browse files
daffldaffl
committed
Theming
1 parent 842744c commit 7418ed8

4 files changed

Lines changed: 172 additions & 39 deletions

File tree

‎astro.config.mjs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,30 @@ export default defineConfig({
3030
},
3131
],
3232
customCss: ["./styles/global.css"],
33+
head: [
34+
{
35+
tag: "link",
36+
attrs: {
37+
rel: "preconnect",
38+
href: "https://fonts.googleapis.com",
39+
},
40+
},
41+
{
42+
tag: "link",
43+
attrs: {
44+
rel: "preconnect",
45+
href: "https://fonts.gstatic.com",
46+
crossorigin: "",
47+
},
48+
},
49+
{
50+
tag: "link",
51+
attrs: {
52+
rel: "stylesheet",
53+
href: "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap",
54+
},
55+
},
56+
],
3357
}),
3458
],
3559
vite: {

‎content/docs/index.mdx‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,61 @@
11
---
2-
title: Welcome to Starlight
3-
description: Get started building your docs site with Starlight.
4-
template: splash # Remove or comment out this line to display the site sidebar on this page.
2+
title: feathers.dev
3+
description: Identity. Data. Realtime.
4+
template: splash
55
hero:
66
title: |
7-
Welcome to Starlight with
7+
Identity. Data. Realtime.
88
<span
99
class="font-black text-transparent
10-
bg-clip-text bg-gradient-to-b
11-
from-accent-700 to-accent-400
12-
dark:from-accent-500 dark:to-accent-200"
10+
bg-clip-text bg-gradient-to-r
11+
from-[#FF25B6] to-[#EA591E]"
1312
>
14-
Tailwind
13+
Beyond The Cloud
1514
</span>
16-
tagline: Congrats on setting up a new Starlight project!
17-
image:
18-
file: ../../assets/houston.webp
15+
tagline: Redefining modern web application development with seamless identity management, powerful data synchronization, and instant real-time updates—all in one place.
1916
actions:
20-
- text: Example Guide
21-
link: /guides/example/
17+
- text: Get Started
18+
link: /auth/
2219
icon: right-arrow
23-
- text: Read the Starlight docs
24-
link: https://starlight.astro.build
25-
icon: external
26-
variant: minimal
20+
variant: primary
2721
---
2822

2923
import { Card, CardGrid } from '@astrojs/starlight/components';
3024

31-
## Next steps
25+
## Our Products
26+
27+
Explore our suite of tools designed to help you build modern web applications with confidence.
3228

3329
<CardGrid stagger>
34-
<Card title="Update content" icon="pencil">
35-
Edit `src/content/docs/index.mdx` to see this page change.
36-
</Card>
37-
<Card title="Change page layout" icon="document">
38-
Delete `template: splash` in `src/content/docs/index.mdx` to display a
39-
sidebar on this page.
40-
</Card>
41-
<Card title="Add new content" icon="add-document">
42-
Add Markdown or MDX files to `src/content/docs` to create new pages.
30+
<Card title="Feathers Auth" icon="star">
31+
**Seamless Identity and Data Sync**
32+
33+
Feathers Auth is a secure and scalable user authentication system for any framework and web runtime, even on sites with no server. It ships with a powerful, offline-capable, data synchronization layer that lets you build web applications quickly.
34+
35+
[Learn more →](/auth/)
4336
</Card>
44-
<Card title="Configure your site" icon="setting">
45-
Edit your `sidebar` and other config in `astro.config.mjs`.
37+
<Card title="Feathers JS" icon="rocket">
38+
**The API and real-time application framework**
39+
40+
Feathers is a full-stack web-framework for creating APIs and real-time applications with TypeScript or JavaScript. Feathers can interact with any backend technology, supports many databases out of the box and works with any frontend technology like React, VueJS, Angular, React Native, Android or iOS.
41+
42+
[Learn more →](https://feathersjs.com)
4643
</Card>
47-
<Card title="Read the docs" icon="open-book">
48-
Learn more in [the Starlight Docs](https://starlight.astro.build/).
44+
<Card title="Feathers Pinion" icon="setting">
45+
**A flexible code generator and task runner**
46+
47+
Pinion is a flexible task runner and code generator for any language. Using TypeScript, it gives you full flexibility over what you can do with type-safe tasks and templates out of the box.
48+
49+
[Learn more →](/pinion/)
4950
</Card>
5051
</CardGrid>
52+
53+
## Join our community
54+
55+
Get help and support from the Feathers community.
56+
57+
<div style="text-align: center; margin-top: 2rem;">
58+
<a href="https://discord.gg/XV5qBcG6M9" target="_blank" rel="noopener noreferrer" class="sl-link-button primary">
59+
Join our Discord
60+
</a>
61+
</div>

‎old/content/pinion/docs/api.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
2-
outline: deep
2+
title: Pinion API
3+
description: The Pinion API
34
---
45

56
# API

‎styles/global.css‎

Lines changed: 104 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,111 @@
11
@layer base, starlight, theme, components, utilities;
22

3-
@import '@astrojs/starlight-tailwind';
4-
@import 'tailwindcss/theme.css' layer(theme);
5-
@import 'tailwindcss/utilities.css' layer(utilities);
3+
@import "@astrojs/starlight-tailwind";
4+
@import "tailwindcss/theme.css" layer(theme);
5+
@import "tailwindcss/utilities.css" layer(utilities);
6+
7+
/* Dark mode colors - Feathers theme ported from DaisyUI */
8+
:root {
9+
/* Accent colors derived from primary: oklch(48% 39% 348) */
10+
--sl-color-accent-low: oklch(20% 20% 348);
11+
--sl-color-accent: oklch(48% 39% 348);
12+
--sl-color-text-accent: oklch(48% 39% 348);
13+
--sl-color-accent-high: oklch(75% 30% 348);
14+
15+
/* Base colors from DaisyUI theme */
16+
--sl-color-white: oklch(93.3% 0.01 260); /* base-content */
17+
--sl-color-gray-1: oklch(80% 0.05 270); /* lighter gray */
18+
--sl-color-gray-2: oklch(65% 0.1 280); /* light gray */
19+
--sl-color-gray-3: oklch(50% 25% 285); /* medium gray */
20+
--sl-color-gray-4: oklch(35% 44% 287); /* base-300 */
21+
--sl-color-gray-5: oklch(25% 32% 295); /* between base-300 and base-200 */
22+
--sl-color-gray-6: oklch(15% 19% 307); /* base-200 */
23+
--sl-color-black: oklch(3.6% 0.01 270); /* base-100 */
24+
}
25+
26+
/* Light mode colors - inverted for light theme */
27+
:root[data-theme="light"] {
28+
/* Accent colors adjusted for light mode */
29+
--sl-color-accent-low: oklch(85% 20% 348);
30+
--sl-color-accent: oklch(50% 39% 348);
31+
--sl-color-text-accent: oklch(48% 39% 348);
32+
--sl-color-accent-high: oklch(25% 30% 348);
33+
34+
/* Inverted base colors */
35+
--sl-color-white: oklch(3.6% 0.01 270); /* base-100 inverted */
36+
--sl-color-gray-1: oklch(15% 19% 307); /* base-200 inverted */
37+
--sl-color-gray-2: oklch(25% 32% 295);
38+
--sl-color-gray-3: oklch(35% 44% 287); /* base-300 inverted */
39+
--sl-color-gray-4: oklch(50% 25% 285);
40+
--sl-color-gray-5: oklch(65% 0.1 280);
41+
--sl-color-gray-6: oklch(80% 0.05 270);
42+
--sl-color-gray-7: oklch(90% 0.02 265);
43+
--sl-color-black: oklch(93.3% 0.01 260); /* base-content inverted */
44+
}
645

746
@theme {
8-
/*
9-
Configure your Tailwind theme that will be used by Starlight.
10-
https://starlight.astro.build/guides/css-and-tailwind/#styling-starlight-with-tailwind
11-
*/
47+
/* Tailwind v4 theme configuration */
48+
49+
/* Font Family */
50+
--font-family-sans: Poppins, ui-sans-serif, system-ui, sans-serif;
51+
52+
/* Custom DaisyUI-compatible colors for Tailwind classes */
53+
--color-base-100: oklch(3.6% 0.01 270);
54+
--color-base-200: oklch(15% 19% 307);
55+
--color-base-300: oklch(35% 44% 287);
56+
--color-base-content: oklch(93.3% 0.01 260);
57+
58+
--color-primary: oklch(48% 39% 348);
59+
--color-primary-content: oklch(100% 0 0);
60+
--color-secondary: oklch(60% 44% 272);
61+
--color-secondary-content: oklch(0% 0 0);
62+
--color-accent: oklch(34.1% 0.13 297.4);
63+
--color-accent-content: oklch(100% 0 0);
64+
--color-neutral: oklch(20.1% 0.05 260.7);
65+
--color-neutral-content: oklch(100% 0 0);
66+
67+
--color-info: oklch(56.8% 0.14 255.1);
68+
--color-success: oklch(77.1% 0.13 149.9);
69+
--color-warning: oklch(89.5% 0.17 97.7);
70+
--color-error: oklch(64.1% 0.21 29.3);
71+
72+
/* Border Radius */
73+
--radius-sm: 0.5rem;
74+
--radius-md: 1rem;
75+
--radius-lg: 1rem;
76+
--radius-xl: 1rem;
77+
--radius-2xl: 1rem;
78+
--radius-3xl: 1rem;
79+
--radius-4xl: 2rem;
80+
}
81+
82+
@layer base {
83+
@media (min-width: 640px) {
84+
html {
85+
font-size: 18px;
86+
}
87+
}
88+
89+
html {
90+
background-color: var(--sl-color-black);
91+
font-family: var(--font-family-sans);
92+
}
93+
94+
html,
95+
body {
96+
height: 100%;
97+
width: 100%;
98+
}
99+
100+
/* Remove text decoration from heading links in prose */
101+
.prose h1 a,
102+
.prose h2 a,
103+
.prose h3 a,
104+
.prose h4 a,
105+
.prose h5 a,
106+
.prose h6 a {
107+
text-decoration: none !important;
108+
}
12109
}
13110

14111
/*

0 commit comments

Comments
 (0)