marcel/linkding
1
0
Fork 0
mirror of https://github.com/sissbruecker/linkding.git synced 2025-08-09 03:37:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve docs

Browse Source
This commit is contained in:
Sascha Ißbrücker
2024-09-19 10:27:53 +02:00
parent ceceb56164
commit f3c1101746
9 changed files with 225 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
docs/src/styles/custom.css
View File

@@ -1,9 +1,29 @@
:root {
--sl-nav-gap: 0.8rem;
--sl-text-xs: var(--sl-text-sm);
}
:root,
::backdrop {
/* Colors (dark mode) */
--sl-color-white: hsl(0, 0%, 97%); /* “white” */
--sl-color-gray-1: hsl(224, 20%, 94%);
--sl-color-gray-2: hsl(224, 6%, 85%);
--sl-color-gray-3: hsl(224, 6%, 70%);
--sl-color-gray-4: hsl(224, 7%, 36%);
--sl-color-gray-5: hsl(224, 10%, 23%);
--sl-color-gray-6: hsl(224, 14%, 16%);
--sl-color-black: hsl(224, 10%, 10%);
--sl-color-accent: hsl(241, 75%, 64%);
--sl-color-text-accent: hsl(241, 90%, 82%);
}
:root[data-theme='light'],
[data-theme='light'] ::backdrop {
--sl-color-accent: hsl(241, 63%, 59%);
--sl-color-text-accent: hsl(241, 63%, 55%);
--sl-nav-gap: 0.8rem;
}
/* Align site search */
@@ -11,6 +31,80 @@
justify-content: flex-end;
}
/* Site title */
.site-title img {
height: 36px;
}
/* Social icon size */
.social-icons svg {
width: 20px;
height: 20px;
}
/* Index page */
[data-has-hero] header {
background: transparent;
border-bottom: solid 1px transparent;
backdrop-filter: blur(10px);
}
[data-has-hero] .page {
--hero-gradient: hsla(241, 63%, 59%, 0.2);
background: linear-gradient(205deg, var(--hero-gradient), transparent 30%);
}
[data-has-hero][data-theme="dark"] .page {
--hero-gradient: hsla(241, 63%, 59%, 0.25);
}
[data-has-hero] .hero {
padding-bottom: 1rem;
}
[data-has-hero] .hero-image img {
width: 100%;
border: solid 1px var(--sl-color-gray-5);
border-radius: .4rem;
box-shadow: var(--sl-shadow-lg);
}
[data-has-hero] .hero-image.dark img {
box-shadow: none;
}
[data-has-hero][data-theme="dark"] .hero-image.light {
display: none;
}
[data-has-hero][data-theme="light"] .hero-image.dark {
display: none;
}
[data-has-hero] h2 {
margin-top: 3rem;
}
[data-has-hero] .card-grid {
margin-top: 2rem !important;
}
@media (min-width: 50rem) {
[data-has-hero] .page {
--hero-gradient: hsla(241, 63%, 59%, 0.2);
background: linear-gradient(205deg, var(--hero-gradient), transparent 50%);
}
[data-has-hero] .hero {
padding-bottom: 4rem;
}
[data-has-hero] h2 {
margin-top: 6rem !important;
}
[data-has-hero] .card-grid {
margin-top: 3rem !important;
gap: 3rem;
}
}