continuwuity/theme/index.css
2025-11-22 20:58:18 +00:00

71 lines
2.3 KiB
CSS

:root {
--rp-c-brand: #8a5cd0;
--rp-c-brand-light: oklch(from var(--rp-c-brand) 0.7197 c h);
--rp-c-brand-lighter: oklch(from var(--rp-c-brand) 0.7818 c h);
--rp-c-brand-dark: oklch(from var(--rp-c-brand) 0.5967 c h);
--rp-c-brand-darker: oklch(from var(--rp-c-brand) 0.5069 c h);
--rp-c-brand-tint: oklch(from var(--rp-c-brand) 0.4 c h / 0.16);
--name-lightness: 0.45;
--c1: oklch(0.44 0.177 353.06);
--c2: oklch(0.59 0.158 150.88);
--rp-home-hero-name-background: linear-gradient(
130deg,
oklch(from var(--c1) var(--name-lightness) c h),
oklch(from var(--c2) var(--name-lightness) c h)
);
--rp-home-mask-background-image: conic-gradient(from 180deg at 50% 50%, var(--c1) 0deg, 180deg, var(--c2) 1turn);
/*--rp-c-bg: #ffffff;
--rp-c-bg-soft: oklch(0.91 0.042 317.27);
--rp-c-bg-mute: oklch(0.88 0.035 317.27);
--rp-c-bg-alt: #fff;*/
--rp-c-divider: rgba(0, 0, 0, 0.2);
--rp-c-divider-light: rgba(0, 0, 0, 0.1);
--rp-c-text-0: #000000;
--rp-c-text-1: #242424;
--rp-c-text-2: rgba(0, 0, 0, 0.7);
--rp-c-text-3: rgba(60, 60, 60, 0.33);
--rp-c-text-4: rgba(60, 60, 60, 0.18);
--rp-c-text-code: oklch(0.49 0.158 150.88);
--rp-c-text-code-bg: oklch(0.85 0.08 150.88 / 0.15);
--rp-c-link: oklch(0.49 0.158 150.88);
}
.dark {
--name-lightness: 0.8;
--rp-c-bg: oklch(0.15 0.042 317.27);
--rp-c-bg-soft: oklch(0.24 0.03 317.27);
--rp-c-bg-mute: oklch(0.28 0.035 317.27);
--rp-c-bg-alt: #000;
--rp-c-divider: rgba(84, 84, 84, 0.65);
--rp-c-divider-light: rgba(84, 84, 84, 0.48);
--rp-c-text-0: #ffffff;
--rp-c-text-1: rgba(255, 255, 245, 0.93);
--rp-c-text-2: rgba(255, 255, 245, 0.65);
--rp-c-text-3: rgba(235, 235, 235, 0.38);
--rp-c-text-4: rgba(235, 235, 235, 0.18);
--rp-c-text-code: oklch(0.8 0.158 150.88);
--rp-c-text-code-bg: oklch(0.59 0.158 150.88 / 0.15);
--rp-c-link: oklch(0.69 0.158 150.88);
}
img {
display: inline-block
}
/* Override silly colours on code links */
.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(a > code), .rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(a > code), .rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(a:hover > code) {
color: var(--rp-c-link);
}