diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/ColorSwatch.astro | 49 | ||||
| -rw-r--r-- | src/pages/styleguide.astro | 136 |
2 files changed, 185 insertions, 0 deletions
diff --git a/src/components/ColorSwatch.astro b/src/components/ColorSwatch.astro new file mode 100644 index 0000000..df01d5a --- /dev/null +++ b/src/components/ColorSwatch.astro @@ -0,0 +1,49 @@ +--- +import { cn } from '@/lib/utils' + +interface Props { + class?: string + color: string + [key: string]: any +} + +const { color: colorName, class: className, ...rest } = Astro.props +--- + +<button + class={cn( + 'cursor-pointer bg-primary text-primary-foreground border-border border flex min-h-20 w-full items-center justify-center rounded font-mono text-sm font-bold', + className, + )} + {...rest} + title={'Click to copy: ' + colorName} + data-color={colorName} + data-color-swatch +> + <span>{colorName}</span> +</button> + +<script> + const initClipboard = () => { + const buttons = document.querySelectorAll( + '[data-color-swatch]', + ) as NodeListOf<HTMLButtonElement> + + buttons.forEach((button) => { + const color = button?.dataset.color as string + button?.addEventListener('click', async () => { + try { + await navigator.clipboard.writeText(color) + button.innerText = 'Copied!' + setTimeout(() => { + button.innerText = color + }, 1000) + } catch (err) { + console.error('Error copying to clipboard.', err) + } + }) + }) + } + + document.addEventListener('astro:page-load', initClipboard) +</script> diff --git a/src/pages/styleguide.astro b/src/pages/styleguide.astro new file mode 100644 index 0000000..575718a --- /dev/null +++ b/src/pages/styleguide.astro @@ -0,0 +1,136 @@ +--- +import Breadcrumbs from '@/components/Breadcrumbs.astro' +import ColorSwatch from '@/components/ColorSwatch.astro' +import PageHead from '@/components/PageHead.astro' +import Layout from '@/layouts/Layout.astro' +--- + +<Layout class="max-w-3xl"> + <PageHead slot="head" title="Assets and Style Guide" /> + <Breadcrumbs + items={[{ label: 'Assets and Style Guide', icon: 'lucide:palette' }]} + /> + <article class="prose mx-auto mt-6 flex w-full max-w-4xl flex-col gap-6"> + <h1>Assets and Style Guide</h1> + + <section> + <h2>Logo</h2> + <img src="/static/logo.svg" alt="Logo" height={200} class="h-20" /> + <ul> + <li> + <a href="/staic/logo.svg" download="fosscet-logo.svg"> + SVG, logo only + </a> + </li> + <li> + <a + href="/static/web-app-manifest-192x192.png" + download="fosscet-logo-192.svg" + > + PNG 192x192, logo only + </a> + </li> + + <li> + <a + href="/static/web-app-manifest-512x512.png" + download="fosscet-logo-512.svg" + > + PNG 512x512, logo only + </a> + </li> + </ul> + </section> + + <section> + <h2>Logo and Word Mark</h2> + <img + src="/static/1200x630.png" + alt="Logo and word mark" + height={200} + class="h-30" + /> + <ul> + <li> + <a href="/static/1200x630.png" download="fosscet-logo-wordmark.png"> + PNG 1200x630, logo and word mark + </a> + </li> + </ul> + </section> + + <section> + <h2>Fonts</h2> + + <div + class="grid grid-cols-1 items-center justify-center gap-x-8 gap-y-4 md:grid-cols-2 md:gap-y-8" + > + <div + class="border-border from-primary/10 to-primary/2 flex h-full items-center justify-center rounded border bg-linear-to-bl px-6 py-2 text-center font-mono text-4xl" + > + 0xProto + </div> + <p> + Tailwind class <code>font-mono</code>. + <br /> + Use for headings, code blocks, and aesthetic details. + <br /> + Download from <a href="https://github.com/0xType/0xProto/releases"> + GitHub: 0xType/0xProto + </a> + </p> + <div + class="border-border flex h-full items-center justify-center rounded border px-6 py-2 text-center font-sans text-4xl" + > + Geist + </div> + <p> + Tailwind class <code>font-sans</code>. + <br /> + Use for text everywhere else. + <br /> + Download from <a href="https://fonts.google.com/specimen/Geist"> + Google Fonts: Geist + </a> + </p> + </div> + </section> + + <section class="mt-10"> + <h2>Colours</h2> + <p> + General guidelines: + <ul> + <li> + Use the <code>primary</code> colour sparingly, for design elements and + accents. Avoid using it for text. + </li> + <li> + Use <code>foreground</code> for headings, navigation elements, and text + that stands out. + </li> + <li> + Use <code>muted-foreground</code> for paragraphs. + </li> + </ul> + </p> + <div class="flex flex-1 flex-col gap-4 md:flex-row"> + <ColorSwatch + color="primary" + class="bg-primary text-primary-foreground" + /> + + <ColorSwatch color="foreground" class="bg-foreground text-background" /> + + <ColorSwatch + color="muted-foreground" + class="bg-muted-foreground text-muted" + /> + + <ColorSwatch color="muted" class="bg-muted text-muted-foreground" /> + + <ColorSwatch color="background" class="bg-background text-foreground" /> + </div> + </section> + </article> +</Layout> |