mirror of
https://github.com/zadam/trilium.git
synced 2025-10-19 22:58:52 +02:00
chore(website): port benefits section
This commit is contained in:
Elian Doran
parent
b5a491820c
commit
32c15f5e03
@ -34,60 +34,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="benefits">
|
||||
<div class="content-wrapper">
|
||||
<h2>Benefits</h2>
|
||||
<div class="benefits-container">
|
||||
<div class="card"><span class="text-big">Note structure</span> <br>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. </div>
|
||||
<div class="card"><span class="text-big"> Labels and relationships between
|
||||
notes </span> <br>Define <em> relations </em> between notes
|
||||
or add <em> labels </em> 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. </div>
|
||||
<div class="card"><span class="text-big"> Note revisions </span>
|
||||
<br>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.
|
||||
</div>
|
||||
<div class="card"><span class="text-big"> Quick search and commands
|
||||
</span> <br>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. </div>
|
||||
<div class="card"><span class="text-big"> Powerful search </span>
|
||||
<br>Or search for text inside notes and narrow down the search by filtering by the parent note, or
|
||||
by depth.
|
||||
</div>
|
||||
<div class="card"><span class="text-big"> Protected notes </span>
|
||||
<br>Protect sensitive personal information by encrypting the notes and locking them behind a
|
||||
password-protected session.
|
||||
</div>
|
||||
<div class="card"><span class="text-big"> Import/export </span>
|
||||
<br>Easily import Markdown and ENEX formats from other note-taking applications, or export to
|
||||
Markdown or HTML.
|
||||
</div>
|
||||
<div class="card"><span class="text-big"> Workspaces and hoisting </span>
|
||||
<br>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. </div>
|
||||
<div class="card"><span class="text-big"> Web clipper </span>
|
||||
<br>Grab web pages (or screenshots) and place them directly into Trilium using the web clipper
|
||||
browser extension.
|
||||
</div>
|
||||
<div class="card"><span class="text-big"> Synchronization </span>
|
||||
<br>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).
|
||||
</div>
|
||||
<div class="card"><span class="text-big"> Share notes on the web </span>
|
||||
<br>If you have a server instance, you can easily use it to share a subset of your notes with
|
||||
other people. </div>
|
||||
<div class="card"><span class="text-big"> Advanced scripting and REST API
|
||||
</span> <br>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. </div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="note-types">
|
||||
<div class="content-wrapper">
|
||||
<h2>Note types</h2>
|
||||
|
||||
@ -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 */
|
||||
17
apps/website3/src/components/Card.tsx
Normal file
17
apps/website3/src/components/Card.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { ComponentChildren } from "preact";
|
||||
|
||||
interface CardProps {
|
||||
title: string;
|
||||
children: ComponentChildren;
|
||||
}
|
||||
|
||||
export default function Card({ title, children }: CardProps) {
|
||||
return (
|
||||
<div className="card">
|
||||
<p>
|
||||
<span class="text-big">{title}</span><br />
|
||||
{children}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
18
apps/website3/src/components/Section.tsx
Normal file
18
apps/website3/src/components/Section.tsx
Normal file
@ -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 (
|
||||
<section className={className}>
|
||||
<div className="content-wrapper">
|
||||
{title && <h2>{title}</h2>}
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@ -1,39 +1,29 @@
|
||||
import preactLogo from '../../assets/preact.svg';
|
||||
import Card from '../../components/Card';
|
||||
import Section from '../../components/Section';
|
||||
import './style.css';
|
||||
|
||||
export function Home() {
|
||||
return (
|
||||
<div class="home">
|
||||
<a href="https://preactjs.com" target="_blank">
|
||||
<img src={preactLogo} alt="Preact logo" height="160" width="160" />
|
||||
</a>
|
||||
<h1>Get Started building Vite-powered Preact Apps </h1>
|
||||
<section>
|
||||
<Resource
|
||||
title="Learn Preact"
|
||||
description="If you're new to Preact, try the interactive tutorial to learn important concepts"
|
||||
href="https://preactjs.com/tutorial"
|
||||
/>
|
||||
<Resource
|
||||
title="Differences to React"
|
||||
description="If you're coming from React, you may want to check out our docs to see where Preact differs"
|
||||
href="https://preactjs.com/guide/v10/differences-to-react"
|
||||
/>
|
||||
<Resource
|
||||
title="Learn Vite"
|
||||
description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
|
||||
href="https://vitejs.dev"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Resource(props) {
|
||||
return (
|
||||
<a href={props.href} target="_blank" class="resource">
|
||||
<h2>{props.title}</h2>
|
||||
<p>{props.description}</p>
|
||||
</a>
|
||||
<Section className="benefits" title="Benefits">
|
||||
<div className="benefits-container">
|
||||
<Card title="Note structure">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.</Card>
|
||||
<Card title="Labels and relationships between notes">Define <em> relations </em> between notes
|
||||
or add <em> labels </em> 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.</Card>
|
||||
<Card title="Note revisions">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.</Card>
|
||||
<Card title="Quick search and commands">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.</Card>
|
||||
<Card title="Powerful search">Or search for text inside notes and narrow down the search by filtering by the parent note, or by depth.</Card>
|
||||
<Card title="Protected notes">Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session.</Card>
|
||||
<Card title="Import/export">Easily import Markdown and ENEX formats from other note-taking applications, or export to Markdown or HTML.</Card>
|
||||
<Card title="Workspaces and hoisting">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.</Card>
|
||||
<Card title="Web clipper">Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension.</Card>
|
||||
<Card title="Synchronization">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).</Card>
|
||||
<Card title="Share notes on the web">If you have a server instance, you can easily use it to share a subset of your notes with other people.</Card>
|
||||
<Card title="Advanced scripting and REST API">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.</Card>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,70 +1,232 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
--card-bg: #fff;
|
||||
--brand-1: #e47b19;
|
||||
--brand-2: #4fa52b;
|
||||
--brand-3: #e33f3b;
|
||||
--bg-dark: #0a0e14;
|
||||
--text-on-dark: #ffffff;
|
||||
}
|
||||
|
||||
color: #222;
|
||||
background-color: #ffffff;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
font-family: sans-serif;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* #region Header */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background-color: #673ab8;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
.content-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
header a {
|
||||
color: #fff;
|
||||
padding: 0.75rem;
|
||||
text-decoration: none;
|
||||
section {
|
||||
padding: 3em 0;
|
||||
}
|
||||
|
||||
header a.active {
|
||||
background-color: #0005;
|
||||
section h2 {
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
margin-top: 0;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
background-color: #0008;
|
||||
section.hero-section {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end));
|
||||
}
|
||||
|
||||
main {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
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);
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
main {
|
||||
margin: 2rem;
|
||||
}
|
||||
/* 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%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #ccc;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
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 */
|
||||
Loading…
x
Reference in New Issue
Block a user