From 04e272ac617f75468d313e499c6a559230d7af4b Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Mon, 3 Feb 2025 00:08:54 +0500 Subject: [PATCH] light theme fixes --- src/icons.css | 12 ++++ src/static/github-mark.png | Bin 0 -> 6393 bytes src/static/imagePageUtils.js | 18 +++--- src/static/tailwind.css | 54 +++++++++++++++--- src/static/utils.js | 6 +- src/templates/Components/Footer.tsx | 15 ++--- .../Components/ImagePageNavigation.tsx | 16 +++--- src/templates/Components/PageNavigation.tsx | 12 ++-- src/templates/index.tsx | 4 +- 9 files changed, 94 insertions(+), 43 deletions(-) create mode 100644 src/static/github-mark.png diff --git a/src/icons.css b/src/icons.css index 42d7cd3..20f035e 100644 --- a/src/icons.css +++ b/src/icons.css @@ -119,4 +119,16 @@ mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; +} + +.material-symbols--globe { + display: inline-block; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-.175-.012-.363t-.013-.312q-.125.725-.675 1.2T18 13h-2q-.825 0-1.412-.587T14 11v-1h-4V8q0-.825.588-1.412T12 6h1q0-.575.313-1.012t.762-.713q-.5-.125-1.012-.2T12 4Q8.65 4 6.325 6.325T4 12h5q1.65 0 2.825 1.175T13 16v1h-3v2.75q.5.125.988.188T12 20'/%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; } \ No newline at end of file diff --git a/src/static/github-mark.png b/src/static/github-mark.png new file mode 100644 index 0000000000000000000000000000000000000000..6cb3b705d018006a2bd4200ea94c9d5fb98b6f76 GIT binary patch literal 6393 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 Hu0mjfZ$b4` literal 0 HcmV?d00001 diff --git a/src/static/imagePageUtils.js b/src/static/imagePageUtils.js index db7639b..650c2a7 100644 --- a/src/static/imagePageUtils.js +++ b/src/static/imagePageUtils.js @@ -101,37 +101,37 @@ function getFit() { switch (fit) { case "contain": { FitContain.forEach((item) => - item.classList.add("text-orange-500", "font-bold") + item.classList.add("text-orange-400", "font-bold") ); FitCover.forEach((item) => - item.classList.remove("text-orange-500", "font-bold") + item.classList.remove("text-orange-400", "font-bold") ); FitFull.forEach((item) => - item.classList.remove("text-orange-500", "font-bold") + item.classList.remove("text-orange-400", "font-bold") ); break; } case "cover": { FitContain.forEach((item) => - item.classList.remove("text-orange-500", "font-bold") + item.classList.remove("text-orange-400", "font-bold") ); FitCover.forEach((item) => - item.classList.add("text-orange-500", "font-bold") + item.classList.add("text-orange-400", "font-bold") ); FitFull.forEach((item) => - item.classList.remove("text-orange-500", "font-bold") + item.classList.remove("text-orange-400", "font-bold") ); break; } case "full": { FitContain.forEach((item) => - item.classList.remove("text-orange-500", "font-bold") + item.classList.remove("text-orange-400", "font-bold") ); FitCover.forEach((item) => - item.classList.remove("text-orange-500", "font-bold") + item.classList.remove("text-orange-400", "font-bold") ); FitFull.forEach((item) => - item.classList.add("text-orange-500", "font-bold") + item.classList.add("text-orange-400", "font-bold") ); break; } diff --git a/src/static/tailwind.css b/src/static/tailwind.css index 89e688e..1a193c1 100644 --- a/src/static/tailwind.css +++ b/src/static/tailwind.css @@ -527,9 +527,6 @@ .invisible { visibility: hidden; } - .visible { - visibility: visible; - } .absolute { position: absolute; } @@ -754,9 +751,6 @@ .bg-orange-800 { background-color: var(--color-orange-800); } - .bg-orange-800\/50 { - background-color: color-mix(in oklab, var(--color-orange-800) 50%, transparent); - } .bg-orange-950 { background-color: var(--color-orange-950); } @@ -806,8 +800,14 @@ .text-gray-200 { color: var(--color-gray-200); } - .text-orange-500 { - color: var(--color-orange-500); + .text-gray-200\/75 { + color: color-mix(in oklab, var(--color-gray-200) 75%, transparent); + } + .text-orange-400 { + color: var(--color-orange-400); + } + .text-slate-700 { + color: var(--color-slate-700); } .text-white { color: var(--color-white); @@ -837,6 +837,13 @@ } } } + .hover\:text-orange-500 { + &:hover { + @media (hover: hover) { + color: var(--color-orange-500); + } + } + } .sm\:grid { @media (width >= 40rem) { display: grid; @@ -939,16 +946,36 @@ grid-template-columns: repeat(auto-fill,minmax(20%,1fr)); } } + .dark\:block { + @media (prefers-color-scheme: dark) { + display: block; + } + } + .dark\:hidden { + @media (prefers-color-scheme: dark) { + display: none; + } + } .dark\:bg-\[\#160606\] { @media (prefers-color-scheme: dark) { background-color: #160606; } } + .dark\:bg-orange-800\/50 { + @media (prefers-color-scheme: dark) { + background-color: color-mix(in oklab, var(--color-orange-800) 50%, transparent); + } + } .dark\:text-\[\#f9ebeb\] { @media (prefers-color-scheme: dark) { color: #f9ebeb; } } + .dark\:text-white { + @media (prefers-color-scheme: dark) { + color: var(--color-white); + } + } .\[\&\:not\(\:fullscreen\)\]\:object-cover { &:not(:fullscreen) { object-fit: cover; @@ -1070,6 +1097,17 @@ -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } +.material-symbols--globe { + display: inline-block; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-.175-.012-.363t-.013-.312q-.125.725-.675 1.2T18 13h-2q-.825 0-1.412-.587T14 11v-1h-4V8q0-.825.588-1.412T12 6h1q0-.575.313-1.012t.762-.713q-.5-.125-1.012-.2T12 4Q8.65 4 6.325 6.325T4 12h5q1.65 0 2.825 1.175T13 16v1h-3v2.75q.5.125.988.188T12 20'/%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} @keyframes spin { to { transform: rotate(360deg); diff --git a/src/static/utils.js b/src/static/utils.js index 0db4318..400e224 100644 --- a/src/static/utils.js +++ b/src/static/utils.js @@ -146,7 +146,7 @@ function getView() { const active = document.querySelectorAll(`[data-view="${view}"]`); if (active.length > 0) { active.forEach((item) => { - item.classList.add("text-orange-500"); + item.classList.add("text-orange-400"); }); } return view; @@ -182,7 +182,7 @@ function getImagesPerPage() { if (active.length > 0) { active.forEach((item) => { item.classList.add("underline"); - item.classList.add("text-orange-500"); + item.classList.add("text-orange-400"); item.classList.add("font-bold"); }); } @@ -219,7 +219,7 @@ function getVideosPerPage() { if (active.length > 0) { active.forEach((item) => { item.classList.add("underline"); - item.classList.add("text-orange-500"); + item.classList.add("text-orange-400"); item.classList.add("font-bold"); }); } diff --git a/src/templates/Components/Footer.tsx b/src/templates/Components/Footer.tsx index 818a0d6..c52ad4a 100644 --- a/src/templates/Components/Footer.tsx +++ b/src/templates/Components/Footer.tsx @@ -17,17 +17,18 @@ export default function Footer() {

Find us on:

github + github - - website + +
diff --git a/src/templates/Components/ImagePageNavigation.tsx b/src/templates/Components/ImagePageNavigation.tsx index bfe5cdf..d7cfbbd 100644 --- a/src/templates/Components/ImagePageNavigation.tsx +++ b/src/templates/Components/ImagePageNavigation.tsx @@ -1,9 +1,9 @@ export default function ImagePageNav() { return ( -
+