Note types
diff --git a/apps/website2/src/style.css b/apps/website2/src/style.css deleted file mode 100644 index 4609bd361..000000000 --- a/apps/website2/src/style.css +++ /dev/null @@ -1,232 +0,0 @@ -:root { - --card-bg: #fff; - --brand-1: #e47b19; - --brand-2: #4fa52b; - --brand-3: #e33f3b; - --bg-dark: #0a0e14; - --text-on-dark: #ffffff; -} - -html, -body { - margin: 0; - line-height: 1.5; - font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -} - -body { - font-family: sans-serif; - background: white; - color: black; -} - -/* #region Header */ -header { - padding: 1em; - position: sticky; - top: 0; - background: rgba(255, 255, 255, 0.75); - box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(20px); - z-index: 1000; -} - -header .content-wrapper { - display: flex; - align-items: center; - justify-items: center; -} - -header > .content-wrapper, -section.hero-section > .content-wrapper { - min-width: 80vw; -} - -header img { - width: 48px; - height: 48px; -} - -header img+span { - font-size: 1.1em; -} - -header nav { - flex-grow: 1; - display: flex; - justify-content: flex-end; -} -/* #endregion */ - -.content-wrapper { - max-width: 1200px; - margin: auto; -} - -section { - padding: 3em 0; -} - -section h2 { - text-align: center; - font-weight: 100; - margin-top: 0; - margin-bottom: 2em; -} - -section.hero-section { - position: relative; - background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end)); -} - -section.hero-section.dark { - color: var(--text-on-dark); - background: radial-gradient(circle at top left, #0e141b, var(--bg-dark) 70%), linear-gradient(135deg, #0a0e14, #141c24); -} - -/* Extra colored spots */ -section.hero-section::before { - content: ""; - position: absolute; - inset: 0; - pointer-events: none; - background: - radial-gradient(40vmax 40vmax at 15% 25%, rgba(228, 123, 25, 0.25), transparent 70%), - radial-gradient(35vmax 35vmax at 75% 20%, rgba(79, 165, 43, 0.22), transparent 70%), - radial-gradient(28vmax 28vmax at 60% 75%, rgba(227, 63, 59, 0.22), transparent 70%), - radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.18), transparent 70%), - radial-gradient(15vmax 15vmax at 40% 50%, rgba(79, 165, 43, 0.15), transparent 70%); -} - -section.hero-section.dark::before { - background: - radial-gradient(40vmax 40vmax at 20% 30%, rgba(228, 123, 25, 0.25), transparent 70%), - radial-gradient(30vmax 30vmax at 75% 25%, rgba(79, 165, 43, 0.25), transparent 70%), - radial-gradient(25vmax 25vmax at 60% 75%, rgba(227, 63, 59, 0.25), transparent 70%), - radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.15), transparent 70%); -} - -/* Soft vignette for focus */ -section.hero-section::after { - content: ""; - position: absolute; - inset: 0; - background: radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.06) 100%); - pointer-events: none; -} - -/* Optional subtle noise for depth */ -section.hero-section.dark::after { - content: ""; - position: absolute; - inset: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); - opacity: 0.04; - pointer-events: none; -} - -section.hero-section > .content-wrapper { - display: flex; - padding: 3em; - align-items: center; - justify-content: center; - min-height: 60vh; -} - -section.hero-section .title-section { - flex-basis: 40%; -} - -section.hero-section .title-section h1 { - line-height: 1.1; - font-weight: 100; -} - -section.hero-section .image, -section.hero-section .image img { - width: 100%; - height: auto; - position: relative; -} - -section:nth-of-type(2n+1) { - background: linear-gradient(135deg, rgba(228, 123, 25, 0.08), rgba(79, 165, 43, 0.08)); -} - -.benefits-container { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 1em; -} - -.benefits-container .card { - padding: 1em; -} - -.note-types-container { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 1em; -} - -.collections-container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1em; -} - -.columns-2>div { - flex: 50%; - flex-shrink: 0; - flex-grow: 0; -} - -img { - width: 100%; - height: auto; -} - -footer { - margin: 0; - padding: 1em 0; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); -} - -.card { - border: 0; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); - background-color: var(--card-bg); - border-radius: 16px; - overflow: hidden; -} - -.card p { - margin: 0; - padding: 1em; -} - -span.text-big { - font-size: 1.25em; -} - -/* #region Download button */ -.download-button { - text-decoration: none; - background: var(--brand-1); - padding: 0.5em 1em; - border-radius: 6px; - color: white; - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); - display: inline-block; -} - -.download-button .platform { - font-size: 0.75em; - opacity: 0.75; -} - -.hero-section .download-button { - padding: 1em 2em; - margin: 1em 0; -} -/* #endregion */ \ No newline at end of file diff --git a/apps/website3/src/components/Card.tsx b/apps/website3/src/components/Card.tsx new file mode 100644 index 000000000..ee09c0460 --- /dev/null +++ b/apps/website3/src/components/Card.tsx @@ -0,0 +1,17 @@ +import { ComponentChildren } from "preact"; + +interface CardProps { + title: string; + children: ComponentChildren; +} + +export default function Card({ title, children }: CardProps) { + return ( +
+
+ )
+}
diff --git a/apps/website3/src/components/Section.tsx b/apps/website3/src/components/Section.tsx
new file mode 100644
index 000000000..c73211802
--- /dev/null
+++ b/apps/website3/src/components/Section.tsx
@@ -0,0 +1,18 @@
+import { ComponentChildren } from "preact";
+
+interface SectionProps {
+ title?: string;
+ children: ComponentChildren;
+ className?: string;
+}
+
+export default function Section({ className, title, children }: SectionProps) {
+ return (
+
+ {title}
+ {children}
+
+ {title &&
+ {title}
} + {children} +{props.title}
-{props.description}
- +
+ Notes can be arranged hierarchically. There's no need for folders, since each note can contain sub-notes. A single note can be added in multiple places in the hierarchy.
+ Define relations between notes
+ or add labels for easy categorization. Using promoted attributes, there's an easy way to
+ enter structured information about the notes which can later be displayed in other formats such as a
+ table.
+ Notes are periodically saved in the background and revisions can be used to check the old content of a note or delete accidental changes. Revisions can also be created on-demand.
+ Jump quickly to notes across the hierarchy by searching for their title, with
+ fuzzy matching to account for typos or slight differences. Or search through all the various
+ commands of the application.
+ Or search for text inside notes and narrow down the search by filtering by the parent note, or by depth.
+ Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session.
+ Easily import Markdown and ENEX formats from other note-taking applications, or export to Markdown or HTML.
+ Easily separate your personal and work notes by grouping them under a workspace, which focuses your note tree to only show a specific set of notes.
+ Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension.
+ Use a self-hosted or cloud instance to easily synchronize your notes across multiple devices, and to access it from your mobile phone using a PWA (progressive web application).
+ If you have a server instance, you can easily use it to share a subset of your notes with other people.
+ Create your own integrations within Trilium by writing custom widgets, or custom-server side logic. Interact externally with the Trilium database by using the built-in REST API.
+
+