mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 15:19:01 +02:00
chore(website): extract stylesheet
This commit is contained in:
Elian Doran
parent
398db56fe7
commit
23936596fa
@ -1,255 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
: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;
|
||||
}
|
||||
|
||||
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 img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
header img + span {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
max-width: 920px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 2em 0;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
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;
|
||||
min-width: 80vw;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./style.css" />
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<header>
|
||||
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
|
||||
<img src="api/attachments/1lkpAqzZVPxF/image/Trilium%20Notes.svg" width="300" height="300">
|
||||
|
||||
<span>
|
||||
|
||||
196
apps/website2/src/style.css
Normal file
196
apps/website2/src/style.css
Normal file
@ -0,0 +1,196 @@
|
||||
: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;
|
||||
}
|
||||
|
||||
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 img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
header img+span {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
max-width: 920px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 2em 0;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
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;
|
||||
min-width: 80vw;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user