Skip to content

Commit b45e487

Browse files
CodeDoctorDECodeDoctorDE
committed
Update docs design
1 parent 8b551f0 commit b45e487

9 files changed

Lines changed: 920 additions & 890 deletions

File tree

‎Cargo.lock‎

Lines changed: 12 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/astro.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export default defineConfig({
1616
starlight({
1717
title: "Linwood Luna",
1818
customCss: [
19-
// Relative path to your custom CSS file
20-
"./src/styles/custom.css",
19+
"./src/styles/linwood-style.scss",
20+
"./src/styles/custom.scss",
2121
],
2222
logo: {
2323
src: "./public/img/logo.svg",

‎docs/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@
1212
"dependencies": {
1313
"@astrojs/check": "^0.9.6",
1414
"@astrojs/react": "^4.4.2",
15-
"@astrojs/starlight": "^0.37.2",
15+
"@astrojs/starlight": "^0.37.3",
16+
"@linwooddev/style": "github:LinwoodDev/style#efbdf8f05d4ef1cf6fec65c90194d30b68b3c64e&path:/packages/web",
1617
"@phosphor-icons/react": "^2.1.10",
1718
"@types/react": "^19.2.8",
1819
"@types/react-dom": "^19.2.3",
19-
"astro": "^5.16.8",
20+
"astro": "^5.16.11",
2021
"react": "^19.2.3",
2122
"react-dom": "^19.2.3",
2223
"remark-gemoji": "^8.0.0",

‎docs/pnpm-lock.yaml‎

Lines changed: 739 additions & 835 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/src/content/docs/community/branding.md‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎docs/src/content/docs/community/branding.mdx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: Branding
3+
---
4+
5+
import { LinkButton } from '@astrojs/starlight/components';
6+
7+
These assets are licensed under the [CC-BY-SA-4.0](https://github.com/LinwoodDev/Luna/blob/develop/BRANDING_LICENSE).
8+
9+
## Logo
10+
11+
![Logo](/img/logo.svg)
12+
13+
<div class="sl-flex stack">
14+
<LinkButton href="/img/logo.svg">SVG</LinkButton>
15+
<LinkButton href="/img/logo.png">PNG</LinkButton>
16+
</div>
17+
18+
## Colors
19+
20+
* Primary: `#4d55d8`

‎docs/src/content/docs/index.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ hero:
1818
link: https://demo.luna.linwood.dev
1919
icon: rocket
2020
variant: secondary
21+
- text: Blog
22+
link: https://linwood.dev/luna
23+
icon: external
24+
variant: secondary
2125
---
2226

2327
import { LinkCard, Card, CardGrid } from '@astrojs/starlight/components';

docs/src/styles/custom.css renamed to docs/src/styles/custom.scss

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,14 @@
1-
/* Background: Secondary color + chroma=0.02 */
1+
2+
/* Background: #35EF53 with 0.1 chroma */
23
/* Dark mode colors. */
34
:root {
4-
--sl-color-accent-low: #062d09;
55
--sl-color-accent: #00811b;
6-
--sl-color-accent-high: #abd6ab;
7-
--sl-color-white: #ffffff;
8-
--sl-color-gray-1: #ebeef3;
9-
--sl-color-gray-2: #bfc2c9;
10-
--sl-color-gray-3: #878b98;
11-
--sl-color-gray-4: #545864;
12-
--sl-color-gray-5: #343843;
13-
--sl-color-gray-6: #232631;
14-
--sl-color-black: #16181d;
6+
--sl-color-white: #ffffff;
157
--sl-font-system: "Inter", sans-serif;
168
}
179
/* Light mode colors. */
18-
:root[data-theme='light'] {
19-
--sl-color-accent-low: #c1e1c0;
20-
--sl-color-accent: #007c1a;
21-
--sl-color-accent-high: #003f08;
22-
--sl-color-white: #16181d;
23-
--sl-color-gray-1: #232631;
24-
--sl-color-gray-2: #343843;
25-
--sl-color-gray-3: #545864;
26-
--sl-color-gray-4: #878b98;
27-
--sl-color-gray-5: #bfc2c9;
28-
--sl-color-gray-6: #ebeef3;
29-
--sl-color-gray-7: #f5f6f9;
30-
--sl-color-black: #ffffff;
10+
:root[data-theme="light"] {
11+
--sl-color-white: #151915;
3112
}
3213

3314
.inline-icon {
@@ -166,3 +147,10 @@ br {
166147
font-weight: 100;
167148
font-style: normal;
168149
}
150+
151+
.row {
152+
display: flex;
153+
flex-wrap: wrap;
154+
gap: 0.5rem;
155+
align-items: center;
156+
}

‎docs/src/styles/linwood-style.scss‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@use '@linwooddev/style/scss/mixins.scss' as lw;
2+
3+
:root {
4+
--ls-primary: var(--sl-color-accent);
5+
--ls-primary-text: #fff;
6+
--sl-color-accent-low: var(--sl-color-accent);
7+
--sl-color-accent-high: var(--sl-color-accent);
8+
--sl-color-black: var(--ls-background);
9+
--sl-color-gray-1: var(--ls-elevation);
10+
--sl-color-gray-2: var(--ls-elevation);
11+
--sl-color-gray-3: var(--ls-elevation);
12+
--sl-color-gray-4: var(--ls-elevation);
13+
--sl-color-gray-5: var(--ls-elevation);
14+
--sl-color-gray-6: var(--ls-elevation);
15+
--sl-color-gray-7: var(--ls-elevation);
16+
--sl-color-text: var(--ls-background-text);
17+
}
18+
:root[data-theme="light"] {
19+
--ls-elevation: rgba(0, 0, 0, 0.1);
20+
--ls-background-text: #000;
21+
--ls-background: #fff;
22+
}
23+
header {
24+
backdrop-filter: lw.$elevation-filter;
25+
}
26+
.tagline, label, .site-title {
27+
color: var(--ls-background-text);
28+
}
29+
30+
.sl-link-button {
31+
@include lw.button-base();
32+
}
33+
34+
a.btn {
35+
@include lw.button-base;
36+
}
37+
38+
.sl-markdown-content a:not(:where(.not-content *)) {
39+
@include lw.link-base;
40+
}
41+
42+
.actions {
43+
gap: 0.5rem;
44+
}
45+
46+
input {
47+
@include lw.input-base();
48+
}
49+
.label-icon {
50+
z-index: 1;
51+
margin-left: 0.5rem;
52+
}
53+
select {
54+
@include lw.choice-base;
55+
@include lw.select-enhancements();
56+
background-image: none;
57+
width: revert-layer;
58+
padding-left: 1.75rem;
59+
}
60+
option {
61+
@include lw.option-base();
62+
color: var(--ls-background-text);
63+
}
64+
.sl-link-card a {
65+
text-decoration: none;
66+
}
67+
.sidebar-content {
68+
padding-left: 6px;
69+
summary {
70+
@extend .secondary;
71+
@include lw.button-base;
72+
justify-content: space-between;
73+
margin-bottom: 4px;
74+
&:hover {
75+
text-decoration: none;
76+
}
77+
span {
78+
color: inherit;
79+
}
80+
81+
}
82+
li a {
83+
@include lw.button-base;
84+
justify-content: start;
85+
}
86+
[aria-current='page'],
87+
[aria-current='page']:hover,
88+
[aria-current='page']:focus {
89+
@extend .primary;
90+
}
91+
}
92+
93+
:where(site-search button):not(:where(site-search dialog button)) {
94+
@include lw.input-base();
95+
width: revert-layer;
96+
}
97+
98+
.social-icons {
99+
display: flex;
100+
gap: 1.5rem;
101+
}
102+
103+
span {
104+
--sl-color-gray-2: var(--ls-background-text);
105+
}
106+
107+
a {
108+
--sl-color-gray-3: var(--ls-background-text);
109+
--sl-color-gray-2: var(--ls-background-text);
110+
111+
&[aria-current="true"] {
112+
color: var(--ls-primary);
113+
}
114+
.tab &:hover {
115+
text-decoration: none;
116+
color: var(--ls-primary);
117+
}
118+
&:not(:where(.pagination-links *, .sl-link-button, .sl-link-card *, .tab *)):hover {
119+
text-decoration: underline;
120+
}
121+
}
122+
123+
.social-icons a {
124+
@extend .secondary;
125+
@include lw.button-base();
126+
padding: 0.5rem;
127+
border-radius: 50%;
128+
}

0 commit comments

Comments
 (0)