Skip to content

Commit e5871ed

Browse files
shiroinegaishiroinegai
committed
refactor(website): modify styles on landing page & kit-selection-cta component
includes minor improvements to markup in header
1 parent ad312dd commit e5871ed

File tree

12 files changed

+126
-122
lines changed

12 files changed

+126
-122
lines changed

‎apps/website/public/Button-bg.svg

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

‎apps/website/public/fonts/poppins-400.woff2

7.7 KB
Binary file not shown.

‎apps/website/public/fonts/poppins-500.woff2

7.57 KB
Binary file not shown.

‎apps/website/public/fonts/poppins-700.woff2

7.63 KB
Binary file not shown.

‎apps/website/public/qwik-headless.png renamed to ‎apps/website/public/images/kit-cta-headless.png

File renamed without changes.

‎apps/website/public/qwik-daisy.png renamed to ‎apps/website/public/images/kit-cta-tailwind.png

File renamed without changes.

‎apps/website/src/components/header/header.tsx

Lines changed: 36 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -27,52 +27,44 @@ export default component$(() => {
2727
const isDocsRoute = location.url.pathname.indexOf('/docs/') !== -1;
2828

2929
return (
30-
<header class="fixed w-full z-10 border-b border-slate-600">
31-
<div class="flex p-4">
32-
<button
33-
type="button"
34-
aria-label="Toggle navigation"
35-
onClick$={toggleMenu$}
36-
class="block lg:hidden"
37-
>
38-
{menuOpenSignal.value ? <CloseIcon /> : <MenuIcon />}
39-
</button>
40-
{menuOpenSignal.value && (
41-
<aside class="fixed top-0 left-0">
42-
<div class="fixed h-screen w-screen bg-gray-900/20 backdrop-blur-sm"></div>
43-
<div class="fixed h-screen w-80 overflow-y-scroll bg-white">
44-
<Menu onClose$={toggleMenu$} />
45-
</div>
46-
</aside>
47-
)}
48-
<div class="pl-6">
49-
<a href="/">
50-
<img src="/qwik-ui.png" class="w-32" />
51-
</a>
52-
</div>
53-
<div class="flex gap-2 w-full justify-end">
54-
<div data-tip="Qwik-UI Version" class="pt-2.5 px-2">
55-
v.{version}
30+
<header class="fixed w-full h-20 z-10 flex gap-4 p-4 items-center backdrop-blur">
31+
<button
32+
type="button"
33+
aria-label="Toggle navigation"
34+
onClick$={toggleMenu$}
35+
class="block lg:hidden"
36+
>
37+
{menuOpenSignal.value ? <CloseIcon /> : <MenuIcon />}
38+
</button>
39+
{menuOpenSignal.value && (
40+
<aside class="fixed top-0 left-0">
41+
<div class="fixed h-screen w-screen bg-gray-900/20 backdrop-blur-sm"></div>
42+
<div class="fixed h-screen w-80 overflow-y-scroll bg-white">
43+
<Menu onClose$={toggleMenu$} />
5644
</div>
57-
{isDocsRoute && <SelectTheme />}
58-
<button
59-
type="button"
60-
aria-label="Toggle dark mode"
61-
onClick$={toggleDarkMode}
62-
>
63-
{appState.mode === 'dark' ? <MoonIcon /> : <SunIcon />}
64-
</button>
65-
<div class="px-2 pt-2">
66-
<a
67-
target="_blank"
68-
href="https://github.com/qwikifiers/qwik-ui"
69-
aria-label="Qwik-UI GitHub repository"
70-
>
71-
<GitHubIcon />
72-
</a>
73-
</div>
74-
</div>
45+
</aside>
46+
)}
47+
<a href="/" class="lg:ml-8 mr-auto">
48+
<img src="/qwik-ui.png" class="w-32" />
49+
</a>
50+
<div data-tip="Qwik-UI Version" class="">
51+
v.{version}
7552
</div>
53+
{isDocsRoute && <SelectTheme />}
54+
<button
55+
type="button"
56+
aria-label="Toggle dark mode"
57+
onClick$={toggleDarkMode}
58+
>
59+
{appState.mode === 'dark' ? <MoonIcon /> : <SunIcon />}
60+
</button>
61+
<a
62+
target="_blank"
63+
href="https://github.com/qwikifiers/qwik-ui"
64+
aria-label="Qwik-UI GitHub repository"
65+
>
66+
<GitHubIcon />
67+
</a>
7668
</header>
7769
);
7870
});

‎apps/website/src/components/kit-selection-cta/kit-selection-cta.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Slot, component$ } from '@builder.io/qwik';
2+
import { Card, CardBody, CardTitle, CardImage } from '@qwik-ui/headless';
3+
export interface Kit {
4+
kit: 'headless' | 'tailwind';
5+
}
6+
export default component$(({ kit }: Kit) => {
7+
return (
8+
<a
9+
href={`/docs/install/${kit}`}
10+
class="rounded-3xl border-2 overflow-hidden hover:-outline-offset-4 hover:outline-4 hover:outline hover:outline-[var(--qwik-light-blue)] hover:scale-105 focus:-outline-offset-4 focus:outline-4 focus:outline focus:outline-[var(--qwik-light-blue)] focus:scale-105 duration-150"
11+
>
12+
<Card class={`max-w-md`}>
13+
<CardImage
14+
src={`/images/kit-cta-${kit}.png`}
15+
alt={`${kit} kit`}
16+
class="bg-gradient-to-r from-[var(--qwik-light-blue)] to-[var(--qwik-light-purple)] h-64 w-full object-cover"
17+
/>
18+
<CardBody class={`px-8 py-6`}>
19+
<CardTitle class="text-xl font-bold">
20+
{kit.charAt(0).toUpperCase() + kit.slice(1)} Kit
21+
</CardTitle>
22+
<p class="mt-2 leading-normal">
23+
<Slot />
24+
</p>
25+
</CardBody>
26+
</Card>
27+
</a>
28+
);
29+
});

‎apps/website/src/components/optionalThemeButton/optionalThemeButton.tsx

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

‎apps/website/src/global.css

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,39 @@
22
@tailwind base;
33
@tailwind utilities;
44

5+
@font-face {
6+
font-family: 'Poppins';
7+
font-style: normal;
8+
font-weight: 400;
9+
font-display: swap;
10+
src: url('/fonts/poppins-400.woff2') format('woff2');
11+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
12+
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
13+
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
14+
}
15+
16+
@font-face {
17+
font-family: 'Poppins';
18+
font-style: normal;
19+
font-weight: 500;
20+
font-display: swap;
21+
src: url('/fonts/poppins-500.woff2') format('woff2');
22+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
23+
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
24+
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
25+
}
26+
27+
@font-face {
28+
font-family: 'Poppins';
29+
font-style: normal;
30+
font-weight: 700;
31+
font-display: swap;
32+
src: url('/fonts/poppins-700.woff2') format('woff2');
33+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
34+
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
35+
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
36+
}
37+
538
:root {
639
--qwik-dark-blue: #006ce9;
740
--qwik-light-blue: #18b6f6;
@@ -14,13 +47,13 @@
1447
}
1548

1649
.light {
17-
--color-bg: rgb(203 213 225);
50+
--color-bg: rgb(255, 255, 255);
1851
--color-text: #333;
1952
}
2053

2154
.dark {
2255
--color-bg: rgb(30 41 59);
23-
--color-text: rgb(203 213 225);
56+
--color-text: rgb(243, 243, 243);
2457
}
2558

2659
html {
@@ -30,6 +63,8 @@ html {
3063

3164
background-color: var(--color-bg) !important;
3265
color: var(--color-text) !important;
66+
67+
font-family: 'Poppins', sans-serif;
3368
}
3469

3570
[data-theme='light'] {

0 commit comments

Comments
 (0)