Update theme

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/js/main.js

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

assets/sass/code.scss

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

assets/sass/colors.scss

@@ -1,143 +1,71 @@
-:root {
+// https://www.realtimecolors.com/
-  --text: #050c0e;
-  --background: #f1f8fa;
-  --primary: #51a9c3;
-  --secondary: #d88fb9;
-  --accent: #ce7f71;
-}
 
-@media (prefers-color-scheme: dark) {
+:root {
-  :root {
+  --text: #060208;
-    --text: #f0f8fa;
+  --background: #fefdff;
-    --background: #050d0f;
+  --primary: #41255f;
-    --primary: #3c94af;
+  --secondary: #d086bb;
-    --secondary: #712853;
+  --accent: #963c64;
-    --accent: #8d3e30;
-  }
 }
 
 :root {
-  --text-50: #ecf6f8;
+  --text-50: #f5ebfa;
-  --text-100: #daecf1;
+  --text-100: #ebd6f5;
-  --text-200: #b4dae4;
+  --text-200: #d6adeb;
-  --text-300: #8fc7d6;
+  --text-300: #c285e0;
-  --text-400: #69b4c9;
+  --text-400: #ad5cd6;
-  --text-500: #44a1bb;
+  --text-500: #9933cc;
-  --text-600: #368196;
+  --text-600: #7a29a3;
-  --text-700: #296170;
+  --text-700: #5c1f7a;
-  --text-800: #1b414b;
+  --text-800: #3d1452;
-  --text-900: #0e2025;
+  --text-900: #1f0a29;
-  --text-950: #071013;
+  --text-950: #0f0514;
 
-  --background-50: #ecf6f8;
+  --background-50: #f2e5ff;
-  --background-100: #daecf1;
+  --background-100: #e5ccff;
-  --background-200: #b4dae4;
+  --background-200: #cc99ff;
-  --background-300: #8fc7d6;
+  --background-300: #b266ff;
-  --background-400: #69b4c9;
+  --background-400: #9933ff;
-  --background-500: #44a1bb;
+  --background-500: #7f00ff;
-  --background-600: #368196;
+  --background-600: #6600cc;
-  --background-700: #296170;
+  --background-700: #4c0099;
-  --background-800: #1b414b;
+  --background-800: #330066;
-  --background-900: #0e2025;
+  --background-900: #190033;
-  --background-950: #071013;
+  --background-950: #0d001a;
 
-  --primary-50: #ecf6f8;
+  --primary-50: #f2edf8;
-  --primary-100: #d9ecf2;
+  --primary-100: #e5daf1;
-  --primary-200: #b3d9e5;
+  --primary-200: #cbb6e2;
-  --primary-300: #8dc6d8;
+  --primary-300: #b191d4;
-  --primary-400: #67b4cb;
+  --primary-400: #986cc6;
-  --primary-500: #41a1be;
+  --primary-500: #7e47b8;
-  --primary-600: #348198;
+  --primary-600: #653993;
-  --primary-700: #276072;
+  --primary-700: #4b2b6e;
-  --primary-800: #1a404c;
+  --primary-800: #321d49;
-  --primary-900: #0d2026;
+  --primary-900: #190e25;
-  --primary-950: #071013;
+  --primary-950: #0d0712;
 
-  --secondary-50: #f8ecf3;
+  --secondary-50: #f8edf5;
-  --secondary-100: #f2d9e8;
+  --secondary-100: #f1daea;
-  --secondary-200: #e4b4d0;
+  --secondary-200: #e2b6d6;
-  --secondary-300: #d78eb9;
+  --secondary-300: #d491c1;
-  --secondary-400: #ca68a1;
+  --secondary-400: #c66cac;
-  --secondary-500: #bd428a;
+  --secondary-500: #b84798;
-  --secondary-600: #97356e;
+  --secondary-600: #933979;
-  --secondary-700: #712853;
+  --secondary-700: #6e2b5b;
-  --secondary-800: #4b1b37;
+  --secondary-800: #491d3d;
-  --secondary-900: #260d1c;
+  --secondary-900: #250e1e;
-  --secondary-950: #13070e;
+  --secondary-950: #12070f;
 
-  --accent-50: #f8eeec;
+  --accent-50: #f8edf2;
-  --accent-100: #f2ddd9;
+  --accent-100: #f0dbe4;
-  --accent-200: #e5bbb3;
+  --accent-200: #e2b6ca;
-  --accent-300: #d8988d;
+  --accent-300: #d392af;
-  --accent-400: #cb7667;
+  --accent-400: #c56d95;
-  --accent-500: #be5441;
+  --accent-500: #b6497a;
-  --accent-600: #984334;
+  --accent-600: #923a62;
-  --accent-700: #723227;
+  --accent-700: #6d2c49;
-  --accent-800: #4c221a;
+  --accent-800: #491d31;
-  --accent-900: #26110d;
+  --accent-900: #240f18;
-  --accent-950: #130807;
+  --accent-950: #12070c;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text-50: #061113;
-    --text-100: #0d2126;
-    --text-200: #19424d;
-    --text-300: #266373;
-    --text-400: #338599;
-    --text-500: #40a6bf;
-    --text-600: #66b8cc;
-    --text-700: #8cc9d9;
-    --text-800: #b3dbe6;
-    --text-900: #d9edf2;
-    --text-950: #ecf6f9;
-
-    --background-50: #061113;
-    --background-100: #0d2126;
-    --background-200: #19424d;
-    --background-300: #266373;
-    --background-400: #338599;
-    --background-500: #40a6bf;
-    --background-600: #66b8cc;
-    --background-700: #8cc9d9;
-    --background-800: #b3dbe6;
-    --background-900: #d9edf2;
-    --background-950: #ecf6f9;
-
-    --primary-50: #071013;
-    --primary-100: #0d2026;
-    --primary-200: #1a404c;
-    --primary-300: #276072;
-    --primary-400: #348198;
-    --primary-500: #41a1be;
-    --primary-600: #67b4cb;
-    --primary-700: #8dc6d8;
-    --primary-800: #b3d9e5;
-    --primary-900: #d9ecf2;
-    --primary-950: #ecf6f8;
-
-    --secondary-50: #13070e;
-    --secondary-100: #260d1c;
-    --secondary-200: #4b1b37;
-    --secondary-300: #712853;
-    --secondary-400: #97356e;
-    --secondary-500: #bd428a;
-    --secondary-600: #ca68a1;
-    --secondary-700: #d78eb9;
-    --secondary-800: #e4b4d0;
-    --secondary-900: #f2d9e8;
-    --secondary-950: #f8ecf3;
-
-    --accent-50: #130807;
-    --accent-100: #26110d;
-    --accent-200: #4c221a;
-    --accent-300: #723227;
-    --accent-400: #984334;
-    --accent-500: #be5441;
-    --accent-600: #cb7667;
-    --accent-700: #d8988d;
-    --accent-800: #e5bbb3;
-    --accent-900: #f2ddd9;
-    --accent-950: #f8eeec;
-  }
 }

assets/sass/common.scss

@@ -64,7 +64,7 @@ li {
 }
 
 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;
   border-radius: 0.5rem;
 

assets/sass/details.scss

@@ -19,7 +19,7 @@ main.with-details {
   }
 
   .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;
     font-size: 0.8rem;
   }

assets/sass/footer.scss

@@ -13,7 +13,7 @@
 
     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 {
       color: inherit;

assets/sass/image.scss

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

assets/sass/meta.scss

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