TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 03:53:37 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

style(website): improve card title / content contrast

Browse Source
This commit is contained in:
Elian Doran 2025-09-26 23:52:58 +03:00
parent 5f884c4440
commit ec8d719d41
No known key found for this signature in database
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/website2/src/components/Card.tsx
View File

@ -10,10 +10,11 @@ export default function Card({ title, children, imageUrl }: CardProps) {
return (
<div className="card">
{imageUrl && <img class="image" src={imageUrl} />}
<p>
<span class="text-big">{title}</span><br />
<div className="card-content">
<h3>{title}</h3>
{children}
</p>
</div>
</div>
)
}

17
apps/website2/src/style.css
View File

@ -1,6 +1,7 @@
:root {
--background-color: #fff;
--foreground-color: black;
--muted-color: #353535;
--card-background-color: white;
--card-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
--header-background-color: rgba(255, 255, 255, 0.75);
@ -13,6 +14,7 @@
:root {
--foreground-color: #fff;
--background-color: #0a0e14;
--muted-color: #cacaca;
--header-background-color: rgba(0, 0, 0, 0.75);
--card-background-color: #ffffff12;
--card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
@ -71,11 +73,20 @@ footer {
overflow: hidden;
}
.card p {
.card-content {
margin: 0;
padding: 1em;
color: var(--muted-color);
}
span.text-big {
font-size: 1.25em;
.card h3 {
font-size: 1.1rem;
font-weight: 300;
margin: 0;
color: var(--foreground-color);
}
.card > .image {
height: 200px;
object-fit: cover;
}