mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 15:19:01 +02:00
refactor(website): split CSS
This commit is contained in:
Elian Doran
parent
68ef6ea142
commit
4eff105af5
19
apps/website3/src/components/DownloadButton.css
Normal file
19
apps/website3/src/components/DownloadButton.css
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button.big {
|
||||||
|
padding: 1em 2em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { useLayoutEffect } from "preact/hooks";
|
|
||||||
import { getRecommendedDownload } from "../download-helper";
|
import { getRecommendedDownload } from "../download-helper";
|
||||||
|
import "./DownloadButton.css";
|
||||||
|
|
||||||
interface DownloadButtonProps {
|
interface DownloadButtonProps {
|
||||||
big?: boolean;
|
big?: boolean;
|
||||||
|
|||||||
35
apps/website3/src/components/Header.css
Normal file
35
apps/website3/src/components/Header.css
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
import "./Header.css";
|
||||||
import { useLocation } from 'preact-iso';
|
import { useLocation } from 'preact-iso';
|
||||||
import DownloadButton from './DownloadButton';
|
import DownloadButton from './DownloadButton';
|
||||||
|
|
||||||
|
|||||||
100
apps/website3/src/pages/Home/index.css
Normal file
100
apps/website3/src/pages/Home/index.css
Normal file
@ -0,0 +1,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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
@ -2,6 +2,7 @@ import { ComponentChildren } from 'preact';
|
|||||||
import Card from '../../components/Card';
|
import Card from '../../components/Card';
|
||||||
import Section from '../../components/Section';
|
import Section from '../../components/Section';
|
||||||
import DownloadButton from '../../components/DownloadButton';
|
import DownloadButton from '../../components/DownloadButton';
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
export function Home() {
|
export function Home() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -24,44 +24,6 @@ a {
|
|||||||
color: var(--brand-3);
|
color: var(--brand-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #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 {
|
.content-wrapper {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -78,113 +40,6 @@ section h2 {
|
|||||||
margin-bottom: 2em;
|
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 {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -212,25 +67,3 @@ footer {
|
|||||||
span.text-big {
|
span.text-big {
|
||||||
font-size: 1.25em;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-button.big {
|
|
||||||
padding: 1em 2em;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
/* #endregion */
|
|
||||||
Loading…
x
Reference in New Issue
Block a user