|
1 | | - |
2 | | - |
3 | | -Zaggonaut is a retro-inspired theme for Astro, built using TypeScript, TailwindCSS, and of course, Astro. |
4 | | - |
5 | | -## Getting Started |
6 | | - |
7 | | -[View the demo](https://zaggonaut.dev) or [view the source code](https://github.com/RATIU5/zaggonaut). |
8 | | - |
9 | | -Alternatively, you can create a new Astro project with Zaggonaut like this: |
10 | | - |
11 | | -```bash |
12 | | -# pnpm |
13 | | -pnpm create astro@latest --template RATIU5/zaggonaut |
14 | | -``` |
15 | | - |
16 | | -> [!IMPORTANT] |
17 | | -> Currently, `pnpm` is the only supported package manager due to `pnpm` throwing peer-dependency conflicts. |
18 | | -
|
19 | | -## Features |
20 | | - |
21 | | -- Dark & light mode |
22 | | -- Customizable colors |
23 | | -- 100 / 100 Lighthouse score |
24 | | -- Fully accessible |
25 | | -- Fully responsive |
26 | | -- Type-safe |
27 | | -- SEO-friendly |
28 | | - |
29 | | -## Customization |
30 | | - |
31 | | -The entire theme is fully customizable. The theme is setup a specific way to make it easy to customize. |
32 | | - |
33 | | -### Colors |
34 | | - |
35 | | -You can customize the colors of the theme by editing the `src/styles/global.css` file. |
36 | | -This file uses Tailwind CSS and CSS variables to customize the colors of the theme. |
37 | | -Zaggonaut uses the following CSS variables: |
38 | | - |
39 | | -- `--color-zag-dark`: The dark color of the theme |
40 | | -- `--color-zag-light`: The light color of the theme |
41 | | -- `--color-zag-dark-muted`: The dark color of the theme with a slight opacity |
42 | | -- `--color-zag-light-muted`: The light color of the theme with a slight opacity |
43 | | -- `--color-zag-accent-light`: The light accent color of the theme |
44 | | -- `--color-zag-accent-light-muted`: The light accent color of the theme with a slight opacity |
45 | | -- `--color-zag-accent-dark`: The dark accent color of the theme |
46 | | -- `--color-zag-accent-dark-muted`: The dark accent color of the theme with a slight opacity |
47 | | - |
48 | | -### Text |
49 | | - |
50 | | -You can customize the text of the theme by editing the `src/lib/variables.ts` file. |
51 | | -This file contains all of the text used throughout the theme. |
52 | | - |
53 | | -For example, you can change the `username` variable to your own username and everywhere the username is used will be replaced with your username. |
54 | | - |
55 | | -```typescript |
56 | | -export const GLOBAL = { |
57 | | - // Site metadata |
58 | | - username: "zaggonaut-fan123", |
59 | | - |
60 | | - // ... |
61 | | - |
62 | | - // Profile image |
63 | | - profileImage: "profile.webp", |
64 | | - |
65 | | - // Menu items |
66 | | - menu: { |
67 | | - home: "/", |
68 | | - projects: "/projects", |
69 | | - blog: "/blog", |
70 | | - } |
71 | | -}; |
72 | | -``` |
73 | | - |
74 | | -## Ready To Try? |
75 | | - |
76 | | -Check out [the theme website](https://zaggonaut.dev) to give it a spin! |
| 1 | +# ReallyFatYoshi.github.io |
0 commit comments