Update theme

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
2025-09-14 23:10:30 +01:00
parent c50910bcec
commit fe8250f182
8 changed files with 73 additions and 72 deletions

View File

@@ -4,6 +4,7 @@ import Masonry from "masonry-layout";
const lightbox = new PhotoSwipeLightbox({ const lightbox = new PhotoSwipeLightbox({
gallery: ".lightbox", gallery: ".lightbox",
children: ".pswp-image", children: ".pswp-image",
bgOpacity: 1,
showAnimationDuration: 300, showAnimationDuration: 300,
hideAnimationDuration: 300, hideAnimationDuration: 300,
initialZoomLevel: "fit", initialZoomLevel: "fit",

View File

@@ -1,6 +1,6 @@
pre { pre {
color: var(--text); color: var(--text);
background-color: var(--background-50); background-color: color-mix(in srgb, var(--background) 70%, var(--background-50));
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
overflow-x: auto; overflow-x: auto;

View File

@@ -1,71 +1,71 @@
// https://www.realtimecolors.com/ // https://www.realtimecolors.com/
:root { :root {
--text: #110807; --text: #060208;
--background: #fdfdfd; --background: #fefdff;
--primary: #ce4748; --primary: #41255f;
--secondary: #ced396; --secondary: #d086bb;
--accent: #9fc779; --accent: #963c64;
} }
:root { :root {
--text-50: #f8eeed; --text-50: #f5ebfa;
--text-100: #f0dddb; --text-100: #ebd6f5;
--text-200: #e1bbb7; --text-200: #d6adeb;
--text-300: #d39992; --text-300: #c285e0;
--text-400: #c4776e; --text-400: #ad5cd6;
--text-500: #b5554a; --text-500: #9933cc;
--text-600: #91443b; --text-600: #7a29a3;
--text-700: #6d332c; --text-700: #5c1f7a;
--text-800: #48221e; --text-800: #3d1452;
--text-900: #24110f; --text-900: #1f0a29;
--text-950: #120807; --text-950: #0f0514;
--background-50: #f2f2f2; --background-50: #f2e5ff;
--background-100: #e6e6e6; --background-100: #e5ccff;
--background-200: #cccccc; --background-200: #cc99ff;
--background-300: #b3b3b3; --background-300: #b266ff;
--background-400: #999999; --background-400: #9933ff;
--background-500: #808080; --background-500: #7f00ff;
--background-600: #666666; --background-600: #6600cc;
--background-700: #4d4d4d; --background-700: #4c0099;
--background-800: #333333; --background-800: #330066;
--background-900: #1a1a1a; --background-900: #190033;
--background-950: #0d0d0d; --background-950: #0d001a;
--primary-50: #faebeb; --primary-50: #f2edf8;
--primary-100: #f4d7d7; --primary-100: #e5daf1;
--primary-200: #eaaeae; --primary-200: #cbb6e2;
--primary-300: #df8686; --primary-300: #b191d4;
--primary-400: #d45e5e; --primary-400: #986cc6;
--primary-500: #c93636; --primary-500: #7e47b8;
--primary-600: #a12b2b; --primary-600: #653993;
--primary-700: #792020; --primary-700: #4b2b6e;
--primary-800: #511515; --primary-800: #321d49;
--primary-900: #280b0b; --primary-900: #190e25;
--primary-950: #140505; --primary-950: #0d0712;
--secondary-50: #f7f7ed; --secondary-50: #f8edf5;
--secondary-100: #eef0db; --secondary-100: #f1daea;
--secondary-200: #dde1b7; --secondary-200: #e2b6d6;
--secondary-300: #cdd293; --secondary-300: #d491c1;
--secondary-400: #bcc36f; --secondary-400: #c66cac;
--secondary-500: #abb44b; --secondary-500: #b84798;
--secondary-600: #89903c; --secondary-600: #933979;
--secondary-700: #676c2d; --secondary-700: #6e2b5b;
--secondary-800: #44481e; --secondary-800: #491d3d;
--secondary-900: #22240f; --secondary-900: #250e1e;
--secondary-950: #111208; --secondary-950: #12070f;
--accent-50: #f2f7ed; --accent-50: #f8edf2;
--accent-100: #e5f0db; --accent-100: #f0dbe4;
--accent-200: #cbe1b7; --accent-200: #e2b6ca;
--accent-300: #b1d293; --accent-300: #d392af;
--accent-400: #98c36f; --accent-400: #c56d95;
--accent-500: #7eb44b; --accent-500: #b6497a;
--accent-600: #65903c; --accent-600: #923a62;
--accent-700: #4b6c2d; --accent-700: #6d2c49;
--accent-800: #32481e; --accent-800: #491d31;
--accent-900: #19240f; --accent-900: #240f18;
--accent-950: #0d1208; --accent-950: #12070c;
} }

View File

@@ -64,7 +64,7 @@ li {
} }
details { details {
background-color: var(--background-50); background-color: color-mix(in srgb, var(--background) 70%, var(--background-50));
padding: 1rem 1.5rem 1rem 1.5rem; padding: 1rem 1.5rem 1rem 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;

View File

@@ -19,7 +19,7 @@ main.with-details {
} }
.length { .length {
color: color-mix(in srgb, var(--text) 50%, var(--background)); color: color-mix(in srgb, var(--text) 70%, var(--background));
margin: 0.5rem 0 0.5rem 0; margin: 0.5rem 0 0.5rem 0;
font-size: 0.8rem; font-size: 0.8rem;
} }

View File

@@ -13,7 +13,7 @@
font-size: 0.85rem; font-size: 0.85rem;
color: color-mix(in srgb, var(--text) 30%, var(--background)); color: color-mix(in srgb, var(--text) 50%, var(--background));
a { a {
color: inherit; color: inherit;

View File

@@ -11,6 +11,6 @@ img {
figcaption { figcaption {
text-align: center; text-align: center;
padding-top: 1rem; padding-top: 1rem;
color: color-mix(in srgb, var(--text) 50%, var(--background)); color: color-mix(in srgb, var(--text) 70%, var(--background));
} }
} }

View File

@@ -2,19 +2,19 @@
margin: 1rem 0 1rem 0; margin: 1rem 0 1rem 0;
font-size: 0.8rem; font-size: 0.8rem;
.date {
color: var(--text-800);
}
.tag { .tag {
color: var(--secondary-600); color: var(--primary-600);
} }
.tag:hover { .tag:hover {
color: var(--secondary-800); color: var(--primary-800);
}
.date {
color: var(--text-600);
} }
.duration { .duration {
color: color-mix(in srgb, var(--text) 50%, var(--background)); color: color-mix(in srgb, var(--text) 70%, var(--background));
} }
} }