gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

refactor(website): use nested CSS

Browse Source
This commit is contained in:
Elian Doran 2025-09-27 21:02:23 +03:00
parent fb7453f7b0
commit 2df0763141
No known key found for this signature in database
9 changed files with 430 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/website/src/components/Button.css
View File

@ -7,14 +7,14 @@ a.button {
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
}
a.button.outline { &.outline {
border: 1px solid var(--brand-1); border: 1px solid var(--brand-1);
color: var(--brand-1); color: var(--brand-1);
background-color: transparent; background-color: transparent;
} }
a.button .text { .text {
vertical-align: middle; vertical-align: middle;
} }
}

12
apps/website/src/components/DownloadButton.css
View File

@ -1,11 +1,13 @@
.download-button .platform { .download-button {
&.big {
padding: 1em 2em;
margin: 1em 0;
}
.platform {
font-size: 0.75em; font-size: 0.75em;
opacity: 0.75; opacity: 0.75;
} }
.download-button.big {
padding: 1em 2em;
margin: 1em 0;
} }
@media (min-width: 720px) { @media (min-width: 720px) {

12
apps/website/src/components/Footer.css
View File

@ -4,26 +4,26 @@ footer {
border-top: 1px solid rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(0, 0, 0, 0.3);
color: var(--muted-color); color: var(--muted-color);
font-size: 0.8em; font-size: 0.8em;
}
footer .content-wrapper { .content-wrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
}
.social-buttons { .social-buttons {
display: flex; display: flex;
gap: 1em; gap: 1em;
}
.social-buttons a.social-button { a.social-button {
color: var(--muted-color); color: var(--muted-color);
transition: color 250ms ease-in-out, opacity 250ms ease-in-out; transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
opacity: 0.7; opacity: 0.7;
}
.social-buttons a.social-button:hover { &:hover {
color: var(--brand-1); color: var(--brand-1);
opacity: 1; opacity: 1;
} }
}
}

63
apps/website/src/components/Header.css
View File

@ -8,51 +8,54 @@ header {
z-index: 1000; z-index: 1000;
--gap: 1.25em; --gap: 1.25em;
font-size: 0.8em; font-size: 0.8em;
}
header .content-wrapper { .content-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
gap: var(--gap); gap: var(--gap);
} }
header a.banner { a.banner {
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
&:hover { text-decoration: none;}
} }
header > .content-wrapper, img {
section.hero-section > .content-wrapper {
min-width: 80vw;
}
header img {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
header img+span { img+span {
font-size: 1.3em; font-size: 1.3em;
} }
header nav { nav {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: var(--gap); gap: var(--gap);
}
header nav a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
&.active {
color: var(--brand-1);
}
}
}
} }
header nav a.active {
color: var(--brand-1); header > .content-wrapper,
section.hero-section > .content-wrapper {
min-width: 80vw;
} }
@media (max-width: 719px) { @media (max-width: 719px) {
@ -67,17 +70,12 @@ header nav a.active {
right: 0; right: 0;
min-height: var(--header-height); min-height: var(--header-height);
display: flex; display: flex;
}
header + main { .content-wrapper {
margin-top: var(--header-height);
}
header .content-wrapper {
display: block; display: block;
} }
header .first-row { .first-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -85,22 +83,27 @@ header nav a.active {
align-self: stretch; align-self: stretch;
} }
header .menu-toggle { .menu-toggle {
color: inherit; color: inherit;
} }
header nav { nav {
flex-direction: column; flex-direction: column;
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 200ms ease-in; transition: max-height 200ms ease-in;
}
header nav.mobile-shown { &.mobile-shown {
display: flex; display: flex;
max-height: 100vh; max-height: 100vh;
padding: 2em 0; padding: 2em 0;
} }
}
}
header + main {
margin-top: var(--header-height);
}
header nav a { header nav a {
font-size: 1.25em; font-size: 1.25em;
@ -111,25 +114,25 @@ header nav a.active {
header .social-buttons { header .social-buttons {
justify-content: space-between; justify-content: space-between;
padding-top: 1em; padding-top: 1em;
}
header .social-buttons a { a {
border-bottom: unset; border-bottom: unset;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-size: 1em; font-size: 1em;
} }
}
} }
@media (min-width: 720px) { @media (min-width: 720px) {
header { header {
font-size: inherit; font-size: inherit;
}
header img { img {
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
} }
}

79
apps/website/src/pages/GetStarted/get-started.css
View File

@ -6,30 +6,42 @@
grid-column: 1 / 4; grid-column: 1 / 4;
} }
.download-card h3 { .download-card {
h3 {
color: var(--accent-color); color: var(--accent-color);
font-size: 1.5em; font-size: 1.5em;
position: relative; position: relative;
}
.download-card h3 a.more-info { a.more-info {
margin-left: 0.5em; margin-left: 0.5em;
right: 0; right: 0;
}
.download-card h3 a.more-info .bx { .bx {
vertical-align: sub; vertical-align: sub;
} }
}
}
.download-card .card-content-inner { .card-content-inner {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.download-card a:not(.button) { a:not(.button) {
color: var(--accent-color); color: var(--accent-color);
text-decoration: none; }
.quick-start {
border: 1px solid var(--muted-color);
padding: 0.5em;
border-radius: 6px;
code {
text-wrap: wrap;
color: var(--muted-color);
}
}
} }
.download-options { .download-options {
@ -39,15 +51,13 @@
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.download-options .recommended-options { .recommended-options {
align-self: stretch; align-self: stretch;
display: flex; display: flex;
gap: 1em; gap: 1em;
}
.download-options a.recommended { a.recommended {
display: block; display: block;
background: var(--accent-color); background: var(--accent-color);
color: var(--brand-foreground-color); color: var(--brand-foreground-color);
@ -55,43 +65,35 @@
margin: 1em 0; margin: 1em 0;
flex-grow: 1; flex-grow: 1;
} }
}
.download-options .other-options { .other-options {
display: flex; display: flex;
gap: 0.5em 1em; gap: 0.5em 1em;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
}
.download-desktop .download-card:first-of-type { --accent-color: var(--brand-1); } .download-desktop {
.download-desktop .download-card:nth-of-type(2) { --accent-color: var(--brand-2); } .download-card:first-of-type { --accent-color: var(--brand-1); }
.download-desktop .download-card:last-of-type { --accent-color: var(--brand-3); } .download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
.download-card:last-of-type { --accent-color: var(--brand-3); }
}
.download-server .download-card { .download-server .download-card {
--accent-color: var(--foreground-color); --accent-color: var(--foreground-color);
--brand-foreground-color: var(--background-color); --brand-foreground-color: var(--background-color);
} }
.download-card .quick-start {
border: 1px solid var(--muted-color);
padding: 0.5em;
border-radius: 6px;
}
.download-card .quick-start code {
text-wrap: wrap;
color: var(--muted-color);
}
.architecture-switch { .architecture-switch {
display: flex; display: flex;
gap: 1em; gap: 1em;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 1em 0; margin: 1em 0;
}
.architecture-switch a { a {
display: inline-block; display: inline-block;
background: var(--card-background-color); background: var(--card-background-color);
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
@ -99,14 +101,19 @@
text-align: center; text-align: center;
min-width: 3em; min-width: 3em;
color: inherit; color: inherit;
}
.architecture-switch .toggle-wrapper { &.active {
border-radius: calc(infinity * 1px);
overflow: hidden;
}
.architecture-switch a.active {
background-color: var(--brand-1); background-color: var(--brand-1);
color: var(--brand-foreground-color); color: var(--brand-foreground-color);
} }
&:hover {
text-decoration: none;
}
}
.toggle-wrapper {
border-radius: calc(infinity * 1px);
overflow: hidden;
}
}

131
apps/website/src/pages/Home/index.css
View File

@ -1,15 +1,7 @@
section.hero-section { section.hero-section {
position: relative; position: relative;
background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end));
}
section.hero-section.dark { &::before {
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: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -20,30 +12,23 @@ section.hero-section::before {
radial-gradient(28vmax 28vmax at 60% 75%, rgba(227, 63, 59, 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(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%); radial-gradient(15vmax 15vmax at 40% 50%, rgba(79, 165, 43, 0.15), transparent 70%);
}
@media (prefers-color-scheme: light) {
/* 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;
}
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
section.hero-section::before {
background: background:
radial-gradient(40vmax 40vmax at 20% 30%, rgba(228, 123, 25, 0.25), transparent 70%), 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(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(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%); radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.15), transparent 70%);
} }
}
&::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;
/* Subtle noise for depth */ @media (prefers-color-scheme: dark) {
section.hero-section::after {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -53,77 +38,78 @@ section.hero-section::before {
} }
} }
section.hero-section > .content-wrapper { &>.content-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
section.hero-section .title-section { .title-section {
flex-basis: 40%; flex-basis: 40%;
color: var(--muted-color); color: var(--muted-color);
}
section.hero-section .title-section h1 { h1 {
line-height: 1.1; line-height: 1.1;
font-weight: 100; font-weight: 100;
color: var(--foreground-color); color: var(--foreground-color);
} }
}
section.hero-section .screenshot { .screenshot {
position: relative; position: relative;
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 0; margin-bottom: 0;
} }
section.hero-section .download-wrapper { .download-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-content: center; align-content: center;
} }
section.hero-section .download-button { .download-button {
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
section.hero-section .more-download-options { .more-download-options {
display: inline-block; display: inline-block;
color: var(--brand-1); color: var(--brand-1);
font-size: 0.8em; font-size: 0.8em;
text-align: center; text-align: center;
} }
section.hero-section .additional-options { .additional-options {
margin-top: 1em; margin-top: 1em;
display: flex; display: flex;
gap: 1em; gap: 1em;
font-size: 0.85em; font-size: 0.85em;
align-items: center; align-items: center;
}
section.hero-section .additional-options a { a {
flex-grow: 1; flex-grow: 1;
} }
}
}
@media (max-width: 719px) { @media (max-width: 719px) {
section.hero-section { section.hero-section {
padding-bottom: 0; padding-bottom: 0;
}
section.hero-section .content-wrapper { .content-wrapper {
width: 100%; width: 100%;
} }
section.hero-section .title-section { .title-section {
max-width: 90%; max-width: 90%;
} }
section.hero-section .screenshot { .screenshot {
margin-top: 2em; margin-top: 2em;
} }
} }
}
@media (min-width: 720px) { @media (min-width: 720px) {
section.hero-section > .content-wrapper { section.hero-section > .content-wrapper {
@ -152,93 +138,96 @@ section:not(.accented) + section:not(.accented) {
section.final-cta { section.final-cta {
text-align: center; text-align: center;
padding: 6em 0; padding: 6em 0;
}
section.final-cta h2 { h2 {
margin-bottom: 0; margin-bottom: 0;
} }
section.final-cta p { p {
color: var(--muted-color); color: var(--muted-color);
} }
section.final-cta .buttons { .buttons {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1em; gap: 1em;
justify-content: center; justify-content: center;
margin-top: 2em; margin-top: 2em;
.button {
padding: 0.75em 2em;
}
}
} }
section.final-cta .buttons .button { section.final-cta .buttons {
padding: 0.75em 2em; display: flex;
gap: 2em;
} }
.list-with-screenshot { .list-with-screenshot {
display: flex; display: flex;
gap: 2em; gap: 2em;
}
.list-with-screenshot ul { ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
}
.list-with-screenshot ul li { li {
margin-bottom: 1em; margin-bottom: 1em;
}
.list-with-screenshot ul li .card { &:last-of-type {
border: 1px solid transparent;
}
.list-with-screenshot ul li.selected .card {
border: 1px solid var(--brand-1);
}
.list-with-screenshot ul li:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
.list-with-screenshot .details { .card {
border: 1px solid transparent;
}
&.selected .card {
border: 1px solid var(--brand-1);
}
}
}
.details {
flex-basis: 50%; flex-basis: 50%;
flex-shrink: 0; flex-shrink: 0;
} }
.list-with-screenshot.horizontal { &.horizontal {
flex-direction: column-reverse; flex-direction: column-reverse;
}
.list-with-screenshot.horizontal ul { ul {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap: 1em; gap: 1em;
} }
.list-with-screenshot.horizontal li { li {
margin: 0; margin: 0;
} }
.list-with-screenshot.horizontal .card { .card {
height: 100%; height: 100%;
} }
h3 {
.list-with-screenshot.horizontal h3 {
color: var(--brand-1); color: var(--brand-1);
} }
.details {
.list-with-screenshot.horizontal .details {
max-height: 35vh; max-height: 35vh;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.list-with-screenshot.horizontal .details img { img {
height: 100%; height: 100%;
width: auto; width: auto;
object-fit: contain; object-fit: contain;
} }
}
}
}

16
apps/website/src/pages/SupportUs/SupportUs.css
View File

@ -1,23 +1,21 @@
section.donate { section.donate {
background: var(--background-color); background: var(--background-color);
}
section.donate ul.donate-buttons { ul.donate-buttons {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
gap: 1em; gap: 1em;
padding: 0; padding: 0;
flex-direction: column; flex-direction: column;
}
section.donate h3 {
font-size: 1.5em;
color: var(--brand-1);
}
@media (min-width: 720px) { @media (min-width: 720px) {
section.donate ul {
gap: 0 1em; gap: 0 1em;
flex-direction: row; flex-direction: row;
} }
} }
h3 {
font-size: 1.5em;
color: var(--brand-1);
}
}

4
apps/website/src/pages/_404.css
View File

@ -1,9 +1,9 @@
section.section-404 { section.section-404 {
text-align: center; text-align: center;
background: var(--background-color); background: var(--background-color);
}
section.section-404 h2 { h2 {
color: var(--brand-3); color: var(--brand-3);
margin: 1em; margin: 1em;
} }
}

54
apps/website/src/style.css
View File

@ -45,11 +45,11 @@ body {
a { a {
color: var(--brand-3); color: var(--brand-3);
text-decoration: none; text-decoration: none;
}
a:not(.button):hover { &:not(.button):hover {
text-decoration: underline; text-decoration: underline;
} }
}
.content-wrapper { .content-wrapper {
max-width: 1200px; max-width: 1200px;
@ -61,19 +61,19 @@ section {
padding: 1em 0; padding: 1em 0;
justify-content: center; justify-content: center;
align-items: stretch; align-items: stretch;
}
section.fill { &.fill {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
} }
section h2 { h2 {
text-align: center; text-align: center;
font-weight: 100; font-weight: 100;
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
} }
}
img { img {
width: 100%; width: 100%;
@ -88,6 +88,22 @@ img {
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
h3 {
font-size: 1.1rem;
font-weight: 300;
margin: 0;
color: var(--brand-1);
margin-bottom: 0.5em;
&> span {
vertical-align: middle;
}
}
&> .image {
height: 200px;
object-fit: cover;
} }
.card-content { .card-content {
@ -97,35 +113,19 @@ img {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
}
.card-content .more-info-container { .more-info-container {
margin-top: 0.5em; margin-top: 0.5em;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
}
.card-content .more-info { .more-info {
font-size: 0.9em; font-size: 0.9em;
} }
.card h3 {
font-size: 1.1rem;
font-weight: 300;
margin: 0;
color: var(--brand-1);
margin-bottom: 0.5em;
} }
.card-content h3 > span {
vertical-align: middle;
} }
.card > .image {
height: 200px;
object-fit: cover;
} }
.bx { .bx {
@ -133,11 +133,11 @@ img {
width: 24px; width: 24px;
height: 24px; height: 24px;
vertical-align: middle; vertical-align: middle;
}
.bx svg { svg {
fill: currentColor; fill: currentColor;
} }
}
@media (max-width: 719px) { @media (max-width: 719px) {
.grid-3-cols > *, .grid-3-cols > *,
@ -153,11 +153,11 @@ img {
@media (min-width: 720px) { @media (min-width: 720px) {
section { section {
padding: 3em 0; padding: 3em 0;
}
section h2 { h2 {
margin-bottom: 2em; margin-bottom: 2em;
} }
}
.grid-4-cols { .grid-4-cols {
display: grid; display: grid;