From fe8250f18225e406d38256c878a310883719d35a Mon Sep 17 00:00:00 2001 From: Nikolaos Karaolidis Date: Sun, 14 Sep 2025 23:10:30 +0100 Subject: [PATCH] Update theme Signed-off-by: Nikolaos Karaolidis --- assets/js/main.js | 1 + assets/sass/code.scss | 2 +- assets/sass/colors.scss | 120 +++++++++++++++++++-------------------- assets/sass/common.scss | 2 +- assets/sass/details.scss | 2 +- assets/sass/footer.scss | 2 +- assets/sass/image.scss | 2 +- assets/sass/meta.scss | 14 ++--- 8 files changed, 73 insertions(+), 72 deletions(-) diff --git a/assets/js/main.js b/assets/js/main.js index 76b09d1..fa723f1 100644 --- a/assets/js/main.js +++ b/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", diff --git a/assets/sass/code.scss b/assets/sass/code.scss index 5fca685..5059760 100644 --- a/assets/sass/code.scss +++ b/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; diff --git a/assets/sass/colors.scss b/assets/sass/colors.scss index 53a06d8..fff34d5 100644 --- a/assets/sass/colors.scss +++ b/assets/sass/colors.scss @@ -1,71 +1,71 @@ // https://www.realtimecolors.com/ :root { - --text: #110807; - --background: #fdfdfd; - --primary: #ce4748; - --secondary: #ced396; - --accent: #9fc779; + --text: #060208; + --background: #fefdff; + --primary: #41255f; + --secondary: #d086bb; + --accent: #963c64; } :root { - --text-50: #f8eeed; - --text-100: #f0dddb; - --text-200: #e1bbb7; - --text-300: #d39992; - --text-400: #c4776e; - --text-500: #b5554a; - --text-600: #91443b; - --text-700: #6d332c; - --text-800: #48221e; - --text-900: #24110f; - --text-950: #120807; + --text-50: #f5ebfa; + --text-100: #ebd6f5; + --text-200: #d6adeb; + --text-300: #c285e0; + --text-400: #ad5cd6; + --text-500: #9933cc; + --text-600: #7a29a3; + --text-700: #5c1f7a; + --text-800: #3d1452; + --text-900: #1f0a29; + --text-950: #0f0514; - --background-50: #f2f2f2; - --background-100: #e6e6e6; - --background-200: #cccccc; - --background-300: #b3b3b3; - --background-400: #999999; - --background-500: #808080; - --background-600: #666666; - --background-700: #4d4d4d; - --background-800: #333333; - --background-900: #1a1a1a; - --background-950: #0d0d0d; + --background-50: #f2e5ff; + --background-100: #e5ccff; + --background-200: #cc99ff; + --background-300: #b266ff; + --background-400: #9933ff; + --background-500: #7f00ff; + --background-600: #6600cc; + --background-700: #4c0099; + --background-800: #330066; + --background-900: #190033; + --background-950: #0d001a; - --primary-50: #faebeb; - --primary-100: #f4d7d7; - --primary-200: #eaaeae; - --primary-300: #df8686; - --primary-400: #d45e5e; - --primary-500: #c93636; - --primary-600: #a12b2b; - --primary-700: #792020; - --primary-800: #511515; - --primary-900: #280b0b; - --primary-950: #140505; + --primary-50: #f2edf8; + --primary-100: #e5daf1; + --primary-200: #cbb6e2; + --primary-300: #b191d4; + --primary-400: #986cc6; + --primary-500: #7e47b8; + --primary-600: #653993; + --primary-700: #4b2b6e; + --primary-800: #321d49; + --primary-900: #190e25; + --primary-950: #0d0712; - --secondary-50: #f7f7ed; - --secondary-100: #eef0db; - --secondary-200: #dde1b7; - --secondary-300: #cdd293; - --secondary-400: #bcc36f; - --secondary-500: #abb44b; - --secondary-600: #89903c; - --secondary-700: #676c2d; - --secondary-800: #44481e; - --secondary-900: #22240f; - --secondary-950: #111208; + --secondary-50: #f8edf5; + --secondary-100: #f1daea; + --secondary-200: #e2b6d6; + --secondary-300: #d491c1; + --secondary-400: #c66cac; + --secondary-500: #b84798; + --secondary-600: #933979; + --secondary-700: #6e2b5b; + --secondary-800: #491d3d; + --secondary-900: #250e1e; + --secondary-950: #12070f; - --accent-50: #f2f7ed; - --accent-100: #e5f0db; - --accent-200: #cbe1b7; - --accent-300: #b1d293; - --accent-400: #98c36f; - --accent-500: #7eb44b; - --accent-600: #65903c; - --accent-700: #4b6c2d; - --accent-800: #32481e; - --accent-900: #19240f; - --accent-950: #0d1208; + --accent-50: #f8edf2; + --accent-100: #f0dbe4; + --accent-200: #e2b6ca; + --accent-300: #d392af; + --accent-400: #c56d95; + --accent-500: #b6497a; + --accent-600: #923a62; + --accent-700: #6d2c49; + --accent-800: #491d31; + --accent-900: #240f18; + --accent-950: #12070c; } diff --git a/assets/sass/common.scss b/assets/sass/common.scss index e41f5f3..ee5b8b3 100644 --- a/assets/sass/common.scss +++ b/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; diff --git a/assets/sass/details.scss b/assets/sass/details.scss index 84082c2..ef1b14b 100644 --- a/assets/sass/details.scss +++ b/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; } diff --git a/assets/sass/footer.scss b/assets/sass/footer.scss index f5956e3..b11078e 100644 --- a/assets/sass/footer.scss +++ b/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; diff --git a/assets/sass/image.scss b/assets/sass/image.scss index ab7b0d5..53dd5ca 100644 --- a/assets/sass/image.scss +++ b/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)); } } diff --git a/assets/sass/meta.scss b/assets/sass/meta.scss index 1173ea7..2389eaf 100644 --- a/assets/sass/meta.scss +++ b/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); - } - - .date { - color: var(--text-600); + color: var(--primary-800); } .duration { - color: color-mix(in srgb, var(--text) 50%, var(--background)); + color: color-mix(in srgb, var(--text) 70%, var(--background)); } }