Skip to content

Commit bdc9e95

Browse files
thejacksheltonthejackshelton
committed
feat(docs): docs redesign
1 parent dd029ce commit bdc9e95

File tree

20 files changed

+269
-108
lines changed

20 files changed

+269
-108
lines changed

‎apps/website/public/images/fluffy-hero.webp

42.9 KB
Binary file not shown.

‎apps/website/public/images/morphing-diamonds.svg

Loading

‎apps/website/public/images/qwikui-hero.webp

23.8 KB
Binary file not shown.

‎apps/website/src/global.css

Lines changed: 81 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -42,49 +42,91 @@
4242
--light-color-bg: rgb(203 213 225);
4343
--light-color-text: #333;
4444

45-
--shadow-color: 0deg 0% 63%;
46-
--shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
47-
0.9px 1px 1.5px -1.2px hsl(var(--shadow-color) / 0.34),
48-
2.1px 2.3px 3.5px -2.5px hsl(var(--shadow-color) / 0.34);
49-
--shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.36),
50-
1.7px 1.9px 2.9px -0.8px hsl(var(--shadow-color) / 0.36),
51-
4.3px 4.8px 7.2px -1.7px hsl(var(--shadow-color) / 0.36),
52-
10.4px 11.6px 17.5px -2.5px hsl(var(--shadow-color) / 0.36);
53-
--shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
54-
3px 3.4px 5.1px -0.4px hsl(var(--shadow-color) / 0.34),
55-
5.6px 6.3px 9.5px -0.7px hsl(var(--shadow-color) / 0.34),
56-
9.3px 10.4px 15.7px -1.1px hsl(var(--shadow-color) / 0.34),
57-
14.8px 16.6px 25px -1.4px hsl(var(--shadow-color) / 0.34),
58-
23.1px 26px 39.1px -1.8px hsl(var(--shadow-color) / 0.34),
59-
35.1px 39.5px 59.4px -2.1px hsl(var(--shadow-color) / 0.34),
60-
51.8px 58.2px 87.7px -2.5px hsl(var(--shadow-color) / 0.34);
45+
/* primary colors */
46+
--qwikui-purple-50: #f9f5ff;
47+
--qwikui-purple-100: #f2e8ff;
48+
--qwikui-purple-200: #e7d6fe;
49+
--qwikui-purple-300: #d4b5fd;
50+
--qwikui-purple-400: #b37bfa;
51+
--qwikui-purple-500: #9f57f5;
52+
--qwikui-purple-600: #8835e8;
53+
--qwikui-purple-700: #7424cc;
54+
--qwikui-purple-800: #6323a6;
55+
--qwikui-purple-900: #521d86;
56+
--qwikui-purple-950: #360863;
6157

58+
--qwikui-blue-50: #effaff;
59+
--qwikui-blue-100: #def3ff;
60+
--qwikui-blue-200: #b6eaff;
61+
--qwikui-blue-300: #76dbff;
62+
--qwikui-blue-400: #2dcaff;
63+
--qwikui-blue-500: #02b9fc;
64+
--qwikui-blue-600: #0090d2;
65+
--qwikui-blue-700: #0073aa;
66+
--qwikui-blue-800: #00618c;
67+
--qwikui-blue-900: #075073;
68+
--qwikui-blue-950: #04334d;
69+
70+
/* neutrals */
71+
--qwikui-slate-50: #f8fafc;
72+
--qwikui-slate-100: #f1f5f9;
73+
--qwikui-slate-200: #e2e8f0;
74+
--qwikui-slate-300: #cbd5e1;
75+
--qwikui-slate-400: #94a3b8;
76+
--qwikui-slate-500: #64748b;
77+
--qwikui-slate-600: #475569;
78+
--qwikui-slate-700: #334155;
79+
--qwikui-slate-800: #1e293b;
80+
--qwikui-slate-900: #0f172a;
81+
--qwikui-slate-950: #020617;
82+
83+
/* light themed shadows */
84+
--light-shadow-color: 0deg 0% 63%;
85+
--light-shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--light-shadow-color) / 0.34),
86+
0.4px 0.8px 1px -1.2px hsl(var(--light-shadow-color) / 0.34),
87+
1px 2px 2.5px -2.5px hsl(var(--light-shadow-color) / 0.34);
88+
--light-shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--light-shadow-color) / 0.36),
89+
0.8px 1.6px 2px -0.8px hsl(var(--light-shadow-color) / 0.36),
90+
2.1px 4.1px 5.2px -1.7px hsl(var(--light-shadow-color) / 0.36),
91+
5px 10px 12.6px -2.5px hsl(var(--light-shadow-color) / 0.36);
92+
--light-shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--light-shadow-color) / 0.3),
93+
1.3px 2.6px 3.3px -0.3px hsl(var(--light-shadow-color) / 0.3),
94+
2.4px 4.8px 6px -0.6px hsl(var(--light-shadow-color) / 0.3),
95+
3.7px 7.5px 9.4px -0.9px hsl(var(--light-shadow-color) / 0.3),
96+
5.7px 11.3px 14.2px -1.2px hsl(var(--light-shadow-color) / 0.3),
97+
8.5px 16.9px 21.3px -1.6px hsl(var(--light-shadow-color) / 0.3),
98+
12.4px 24.9px 31.3px -1.9px hsl(var(--light-shadow-color) / 0.3),
99+
17.8px 35.7px 44.9px -2.2px hsl(var(--light-shadow-color) / 0.3),
100+
25px 50px 62.9px -2.5px hsl(var(--light-shadow-color) / 0.3);
101+
102+
/* dark themed shadows */
62103
--dark-shadow-color: 218deg 49% 7%;
63-
--dark-shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
64-
0.9px 1.1px 1.6px -1.2px hsl(var(--dark-shadow-color) / 0.34),
65-
2.2px 2.6px 3.8px -2.5px hsl(var(--dark-shadow-color) / 0.34);
66-
--dark-shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.36),
67-
1.8px 2.1px 3.1px -0.8px hsl(var(--dark-shadow-color) / 0.36),
68-
4.4px 5.3px 7.7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
69-
10.8px 12.8px 18.8px -2.5px hsl(var(--dark-shadow-color) / 0.36);
70-
--dark-shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.34),
71-
3.1px 3.7px 5.4px -0.4px hsl(var(--dark-shadow-color) / 0.34),
72-
5.9px 7px 10.3px -0.7px hsl(var(--dark-shadow-color) / 0.34),
73-
9.6px 11.5px 16.9px -1.1px hsl(var(--dark-shadow-color) / 0.34),
74-
15.4px 18.3px 26.9px -1.4px hsl(var(--dark-shadow-color) / 0.34),
75-
24.1px 28.6px 42.1px -1.8px hsl(var(--dark-shadow-color) / 0.34),
76-
36.6px 43.5px 64px -2.1px hsl(var(--dark-shadow-color) / 0.34),
77-
53.9px 64.1px 94.2px -2.5px hsl(var(--dark-shadow-color) / 0.34);
104+
--dark-shadow-elevation-low: 0.4px 0.6px 0.8px hsl(var(--dark-shadow-color) / 0.34),
105+
0.7px 1px 1.4px -1.2px hsl(var(--dark-shadow-color) / 0.34),
106+
1.7px 2.5px 3.4px -2.5px hsl(var(--dark-shadow-color) / 0.34);
107+
--dark-shadow-elevation-medium: 0.4px 0.6px 0.8px hsl(var(--dark-shadow-color) / 0.36),
108+
1.4px 2px 2.7px -0.8px hsl(var(--dark-shadow-color) / 0.36),
109+
3.5px 5.1px 7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
110+
8.6px 12.3px 16.9px -2.5px hsl(var(--dark-shadow-color) / 0.36);
111+
--dark-shadow-elevation-high: 0.4px 0.6px 0.8px hsl(var(--dark-shadow-color) / 0.3),
112+
2.3px 3.2px 4.4px -0.3px hsl(var(--dark-shadow-color) / 0.3),
113+
4.1px 5.8px 8px -0.6px hsl(var(--dark-shadow-color) / 0.3),
114+
6.4px 9.2px 12.6px -0.9px hsl(var(--dark-shadow-color) / 0.3),
115+
9.8px 13.9px 19.1px -1.2px hsl(var(--dark-shadow-color) / 0.3),
116+
14.6px 20.8px 28.6px -1.6px hsl(var(--dark-shadow-color) / 0.3),
117+
21.4px 30.6px 42px -1.9px hsl(var(--dark-shadow-color) / 0.3),
118+
30.8px 43.9px 60.3px -2.2px hsl(var(--dark-shadow-color) / 0.3),
119+
43.1px 61.5px 84.5px -2.5px hsl(var(--dark-shadow-color) / 0.3);
78120
}
79121

80122
.light {
81123
--color-bg: rgb(255, 255, 255);
82-
--color-text: #333;
124+
--color-text: var(--qwikui-slate-950);
83125
}
84126

85127
.dark {
86-
--color-bg: rgb(30 41 59);
87-
--color-text: rgb(243, 243, 243);
128+
--color-bg: var(--qwikui-slate-800);
129+
--color-text: #fff;
88130
}
89131

90132
html {
@@ -120,4 +162,9 @@ body {
120162
.accordion-animation-1[data-state='closed'] {
121163
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
122164
}
165+
166+
.bg-wallpaper {
167+
background-color: #020617;
168+
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23475569' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
169+
}
123170
}

‎apps/website/src/routes/_components/footer/footer.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ export const Footer = component$(() => {
1010
<div class="px-5 py-2">
1111
<a
1212
href="/about"
13-
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
13+
class="text-base text-gray-800 dark:text-white hover:text-gray-900 dark:hover:text-gray-300"
1414
>
1515
About
1616
</a>
1717
</div>
1818
<div class="px-5 py-2">
1919
<a
2020
href="/docs/headless/introduction"
21-
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
21+
class="text-base text-gray-800 dark:text-white hover:text-gray-900 dark:hover:text-gray-300"
2222
>
2323
Headless Kit
2424
</a>
@@ -28,7 +28,7 @@ export const Footer = component$(() => {
2828
<a
2929
href="https://discord.gg/PVWUUejrez"
3030
target="_blank"
31-
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
31+
class="text-base text-gray-800 dark:text-white hover:text-gray-900 dark:hover:text-gray-300"
3232
>
3333
Community
3434
</a>
@@ -38,7 +38,7 @@ export const Footer = component$(() => {
3838
<a
3939
href="https://www.w3.org/standards/webdesign/accessibility"
4040
target="_blank"
41-
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
41+
class="text-base text-gray-800 dark:text-white hover:text-gray-900 dark:hover:text-gray-300"
4242
>
4343
Accessibility
4444
</a>
@@ -47,7 +47,7 @@ export const Footer = component$(() => {
4747
<a
4848
href="https://qwik.builder.io/docs"
4949
target="_blank"
50-
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
50+
class="text-base text-gray-800 dark:text-white hover:text-gray-900 dark:hover:text-gray-300"
5151
>
5252
Qwik Documentation
5353
</a>
@@ -58,15 +58,15 @@ export const Footer = component$(() => {
5858
target="_blank"
5959
href="https://github.com/qwikifiers/qwik-ui"
6060
aria-label="Qwik-UI GitHub repository"
61-
class="text-gray-400 hover:text-gray-500"
61+
class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
6262
>
6363
<GitHubIcon />
6464
</a>
6565
<a
6666
target="_blank"
6767
href="https://discord.gg/PVWUUejrez"
6868
aria-label="Qwik-UI Discord server"
69-
class="text-gray-400 hover:text-gray-500"
69+
class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
7070
>
7171
<DiscordIcon />
7272
</a>

‎apps/website/src/routes/_components/header/header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@ export default component$(
4848
<header
4949
class={[
5050
`fixed top-0 w-full h-20 md:h-20 z-20 md:bg-[var(--color-bg)] flex gap-8 p-4 items-center`,
51-
`ease-in-out duration-300`,
51+
`ease-in-out duration-300 shadow-light-medium dark:shadow-dark-medium`,
5252
rootStore.isSidebarOpened
5353
? 'bg-blue-200 brightness-75 dark:bg-indigo-900'
5454
: 'bg-[var(--color-bg)]',
55-
showBottomBorder ? `border-b-[1px] border-slate-300 dark:border-slate-600` : ``,
55+
showBottomBorder ? `shadow-light-medium dark:shadow-dark-medium` : ``,
5656
]}
5757
>
5858
<section class="flex flex-col md:flex-row gap-1 md:gap-8 mr-auto">

‎apps/website/src/routes/_components/kit-selection-cta/kit-selection-cta.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Slot, component$ } from '@builder.io/qwik';
22
import { Card, CardBody, CardImage, CardTitle } from '@qwik-ui/headless';
33
export interface Kit {
4-
kit: 'headless' | 'tailwind';
4+
kit: 'headless' | 'fluffy';
55
}
66
export default component$(({ kit }: Kit) => {
77
return (
@@ -13,7 +13,7 @@ export default component$(({ kit }: Kit) => {
1313
>
1414
<Card>
1515
<CardImage
16-
src={`/images/kit-cta-${kit}.png`}
16+
src={`/images/fluffy-hero.webp`}
1717
width="611"
1818
height="408"
1919
alt={`${kit} kit`}

‎apps/website/src/routes/docs.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.docs {
22
& {
3-
@apply lg:ml-80 w-full lg:max-w-4xl xl:max-w-6xl py-8 px-8 lg:px-16;
3+
@apply lg:ml-80 w-full lg:max-w-4xl xl:max-w-6xl py-8 px-8 lg:px-16 overflow-hidden;
44
}
55

66
/*

‎apps/website/src/routes/docs/_components/component-status-badge/component-status-badge.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ export interface StatusBadgeProps {
1010
export function getClassByStatus(status: ComponentStatus) {
1111
switch (status) {
1212
case ComponentStatus.Ready:
13-
return 'text-green-900 bg-green-300';
13+
return 'text-green-900 bg-green-300 tracking-wide';
1414
case ComponentStatus.Beta:
15-
return 'dark:text-blue-900 dark:bg-blue-300 bg-purple-300 text-purple-900';
15+
return 'dark:text-slate-100 dark:bg-qwikui-purple-500 bg-qwikui-blue-500 text-white dark:border-qwikui-purple-600 border-[1px] border-qwikui-blue-700 tracking-wide shadow-light-low dark:shadow-dark-low';
1616
case ComponentStatus.Draft:
17-
return 'text-amber-900 bg-amber-300';
17+
return 'text-slate-200 bg-slate-700 dark:bg-slate-800 border-[1px] dark:border-slate-400 shadow-light-low tracking-wide dark:shadow-dark-low';
1818
case ComponentStatus.Planned:
19-
return 'text-slate-900 bg-slate-300';
19+
return 'text-slate-900 bg-slate-300 border-[1px] dark:border-slate-400 tracking-wide shadow-light-low dark:shadow-dark-low';
2020
default:
2121
return null;
2222
}
@@ -26,7 +26,7 @@ export const StatusBadge = component$<StatusBadgeProps>(({ status }) => {
2626
return (
2727
<Badge
2828
title={tooltipByStatus[status]}
29-
class={`text-lg lg:text-xs leading-3 font-medium rounded-full p-3 lg:py-1 lg:px-2
29+
class={`text-lg lg:text-xs leading-3 font-medium rounded-lg p-3 lg:py-1 lg:px-2
3030
${getClassByStatus(status)}`}
3131
>
3232
{status}

‎apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
2929
return (
3030
<nav
3131
class={`flex-col gap-4 fixed top-20 inset-0 z-10 lg:w-80 pb-6
32-
overflow-y-auto bg-blue-200 dark:bg-indigo-900
32+
overflow-y-auto bg-slate-100 dark:bg-slate-900
3333
${rootStore.isSidebarOpened ? 'flex w-100' : 'hidden lg:flex'} `}
3434
>
3535
<ul class="show lg:hidden pl-12 mt-8 flex flex-col gap-2">
@@ -57,27 +57,31 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
5757
{linksGroups?.map((group) => {
5858
return (
5959
<>
60-
<h1 class="pl-12 mt-8 font-medium text-3xl lg:text-lg">{group.name}</h1>
61-
<ul class="pl-12 flex flex-col gap-2">
62-
{group.children?.map((link) => {
63-
return (
64-
<li class="pl-4" key={link.name + link.href}>
65-
<a
66-
class={`px-4 py-2 -ml-4 mr-8 text-xl lg:text-sm flex items-center
67-
rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]`}
68-
href={link.href}
69-
>
70-
<div class="flex flex-row gap-2 w-full">
71-
<div class="w-48">{link.name}</div>
72-
<div class="flex-auto">
73-
{link.status && <StatusBadge status={link.status} />}
60+
<div class="px-6 pt-6">
61+
<h2 class="mb-4 font-bold text-white text-3xl lg:text-lg bg-qwikui-blue-400 px-4 py-1 rounded-lg dark:bg-qwikui-purple-500">
62+
{group.name}
63+
</h2>
64+
<ul class="flex flex-col gap-2">
65+
{group.children?.map((link) => {
66+
return (
67+
<li key={link.name + link.href}>
68+
<a
69+
class={`px-4 py-2 text-xl lg:text-sm flex items-center
70+
rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800`}
71+
href={link.href}
72+
>
73+
<div class="flex flex-row gap-2 w-full">
74+
<div class="w-48">{link.name}</div>
75+
<div class="flex-auto">
76+
{link.status && <StatusBadge status={link.status} />}
77+
</div>
7478
</div>
75-
</div>
76-
</a>
77-
</li>
78-
);
79-
})}
80-
</ul>
79+
</a>
80+
</li>
81+
);
82+
})}
83+
</ul>
84+
</div>
8185
</>
8286
);
8387
})}

0 commit comments

Comments
 (0)