···5566type FeatureItem = {
77 title: string;
88- Svg: React.ComponentType<React.ComponentProps<'svg'>>;
98 description: ReactNode;
109};
11101211const FeatureList: FeatureItem[] = [
1312 {
1414- title: 'Easy to Use',
1515- Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
1313+ title: 'Terminal-First Interface',
1614 description: (
1715 <>
1818- Docusaurus was designed from the ground up to be easily installed and
1919- used to get your website up and running quickly.
1616+ Built for the command line with a beautiful, keyboard-driven interface
1717+ using the Bubble Tea framework.
2018 </>
2119 ),
2220 },
2321 {
2424- title: 'Focus on What Matters',
2525- Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
2222+ title: 'Task Management',
2623 description: (
2724 <>
2828- Docusaurus lets you focus on your docs, and we'll do the chores. Go
2929- ahead and move your docs into the <code>docs</code> directory.
2525+ Organize your tasks with projects, priorities, tags, and due dates.
2626+ Track your progress with statuses and time estimates.
3027 </>
3128 ),
3229 },
3330 {
3434- title: 'Powered by React',
3535- Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
3131+ title: 'Knowledge Base',
3632 description: (
3733 <>
3838- Extend or customize your website layout by reusing React. Docusaurus can
3939- be extended while reusing the same header and footer.
3434+ Keep notes, track books, movies, and TV shows. Link everything together
3535+ with tags and projects.
4036 </>
4137 ),
4238 },
4339];
44404545-function Feature({title, Svg, description}: FeatureItem) {
4141+function Feature({title, description}: FeatureItem) {
4642 return (
4743 <div className={clsx('col col--4')}>
4848- <div className="text--center">
4949- <Svg className={styles.featureSvg} role="img" />
5050- </div>
5144 <div className="text--center padding-horiz--md">
5245 <Heading as="h3">{title}</Heading>
5346 <p>{description}</p>
+79-21
website/src/css/custom.css
···11/**
22- * Any CSS included here will be global. The classic template
33- * bundles Infima by default. Infima is a CSS framework designed to
44- * work well for content-centric websites.
22+ * Noteleaf Documentation Site Styles
33+ * Using color palette from internal/ui/palette.go
44+ * Font: Lato
55 */
6677-/* You can override the default Infima variables here. */
77+@import '@fontsource/lato/300.css';
88+@import '@fontsource/lato/400.css';
99+@import '@fontsource/lato/700.css';
1010+@import '@fontsource/lato/900.css';
1111+812:root {
99- --ifm-color-primary: #2e8555;
1010- --ifm-color-primary-dark: #29784c;
1111- --ifm-color-primary-darker: #277148;
1212- --ifm-color-primary-darkest: #205d3b;
1313- --ifm-color-primary-light: #33925d;
1414- --ifm-color-primary-lighter: #359962;
1515- --ifm-color-primary-lightest: #3cad6e;
1313+ /* Noteleaf Color Palette - Light Mode */
1414+ --ifm-color-primary: #00A4FF; /* Malibu - Blue primary */
1515+ --ifm-color-primary-dark: #0094e6;
1616+ --ifm-color-primary-darker: #008ad9;
1717+ --ifm-color-primary-darkest: #0072b3;
1818+ --ifm-color-primary-light: #1aadff;
1919+ --ifm-color-primary-lighter: #33b7ff;
2020+ --ifm-color-primary-lightest: #66c9ff;
2121+2222+ --ifm-color-success: #00FFB2; /* Julep - Green */
2323+ --ifm-color-info: #5CDFEA; /* Lichen - Teal */
2424+ --ifm-color-warning: #FF985A; /* Tang - Orange */
2525+ --ifm-color-danger: #EB4268; /* Sriracha - Red */
2626+2727+ /* Background colors - Light mode uses lighter values */
2828+ --ifm-background-color: #FFFAF1; /* Butter */
2929+ --ifm-background-surface-color: #F1EFEF; /* Salt */
3030+3131+ /* Text colors */
3232+ --ifm-font-color-base: #201F26; /* Pepper */
3333+ --ifm-font-color-secondary: #605F6B; /* Oyster */
3434+3535+ /* Code blocks */
3636+ --ifm-code-background: #F1EFEF; /* Salt */
1637 --ifm-code-font-size: 95%;
1717- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
3838+3939+ /* Font family */
4040+ --ifm-font-family-base: 'Lato', sans-serif;
4141+4242+ --docusaurus-highlighted-code-line-bg: rgba(0, 164, 255, 0.1);
1843}
19442020-/* For readability concerns, you should choose a lighter palette in dark mode. */
2145[data-theme='dark'] {
2222- --ifm-color-primary: #25c2a0;
2323- --ifm-color-primary-dark: #21af90;
2424- --ifm-color-primary-darker: #1fa588;
2525- --ifm-color-primary-darkest: #1a8870;
2626- --ifm-color-primary-light: #29d5b0;
2727- --ifm-color-primary-lighter: #32d8b4;
2828- --ifm-color-primary-lightest: #4fddbf;
2929- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
4646+ /* Noteleaf Color Palette - Dark Mode */
4747+ --ifm-color-primary: #00A4FF; /* Malibu - Blue primary */
4848+ --ifm-color-primary-dark: #0094e6;
4949+ --ifm-color-primary-darker: #008ad9;
5050+ --ifm-color-primary-darkest: #0072b3;
5151+ --ifm-color-primary-light: #1aadff;
5252+ --ifm-color-primary-lighter: #33b7ff;
5353+ --ifm-color-primary-lightest: #66c9ff;
5454+5555+ --ifm-color-success: #00FFB2; /* Julep - Green */
5656+ --ifm-color-info: #5CDFEA; /* Lichen - Teal */
5757+ --ifm-color-warning: #FF985A; /* Tang - Orange */
5858+ --ifm-color-danger: #EB4268; /* Sriracha - Red */
5959+6060+ /* Background colors - Dark mode */
6161+ --ifm-background-color: #201F26; /* Pepper - Darkest base */
6262+ --ifm-background-surface-color: #2d2c35; /* BBQ - Secondary background */
6363+6464+ /* Card/elevated backgrounds */
6565+ --ifm-card-background-color: #3A3943; /* Charcoal - Tertiary */
6666+6767+ /* Text colors */
6868+ --ifm-font-color-base: #F1EFEF; /* Salt - Primary text */
6969+ --ifm-font-color-secondary: #BFBCC8; /* Smoke - Secondary text */
7070+ --ifm-font-color-base-inverse: #201F26; /* Pepper */
7171+7272+ /* Headings */
7373+ --ifm-heading-color: #00A4FF; /* Malibu */
7474+7575+ /* Code blocks */
7676+ --ifm-code-background: #2d2c35; /* BBQ */
7777+ --ifm-pre-background: #2d2c35; /* BBQ */
7878+7979+ /* Borders */
8080+ --ifm-color-emphasis-300: #4D4C57; /* Iron */
8181+ --ifm-hr-background-color: #4D4C57; /* Iron */
8282+8383+ /* Links */
8484+ --ifm-link-color: #5CDFEA; /* Lichen - Accent */
8585+ --ifm-link-hover-color: #00FFB2; /* Julep - Success */
8686+8787+ --docusaurus-highlighted-code-line-bg: rgba(0, 164, 255, 0.15);
3088}