From 8c81d9a5b901f0b7d9986ae42a530433e1b02ad5 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Sat, 23 May 2026 19:24:11 -0700 Subject: init theming adjustments --- Makefile | 2 +- static/main.css | 117 +++++++++++++++++++++++++++++++++++++++-------- static/theme-dark.css | 48 +++++++++++++++---- templates/home.html | 12 ++--- templates/images.html | 8 ++-- templates/opensearch.xml | 2 +- templates/results.html | 14 +++--- templates/settings.html | 8 ++-- 8 files changed, 160 insertions(+), 51 deletions(-) diff --git a/Makefile b/Makefile index e57c991..e1cd3a7 100644 --- a/Makefile +++ b/Makefile @@ -6,7 +6,7 @@ PKG_DEPS := libxml-2.0 libcurl openssl GIT_HASH := $(shell git rev-parse --short HEAD) GIT_DATE := $(shell git log -1 --format='%ad' --date='format:%y.%m.%d') GIT_BRANCH := $(shell git rev-parse --abbrev-ref HEAD) -GIT_REMOTE := $(shell git remote get-url origin) +GIT_REMOTE := https://git.moekyun.me/omnisearch VERSION := $(GIT_DATE)+$(GIT_HASH)_$(GIT_BRANCH) diff --git a/static/main.css b/static/main.css index d07ecfa..18b0f14 100644 --- a/static/main.css +++ b/static/main.css @@ -1,29 +1,62 @@ :root { - --bg-main: #ffffff; - --bg-card: #f8f9fa; - --border: #e0e0e0; - --text-primary: #1a1a1a; - --text-secondary: #5f6368; - --text-muted: #757575; - --accent: #202124; - --accent-glow: rgba(0,0,0,0.05); + --cl-black: hsl(140, 1%, 6%); + --cl-gray-0: hsl(140, 2%, 8%); + --cl-gray-1: hsl(140, 2%, 12%); + --cl-gray-2: hsl(140, 4%, 16%); + --cl-gray-3: hsl(140, 4%, 24%); + --cl-gray-4: hsl(140, 4%, 36%); + --cl-gray-5: hsl(140, 4%, 44%); + --cl-gray-6: hsl(80, 8%, 52%); + --cl-gray-7: hsl(70, 8%, 58%); + --cl-gray-8: hsl(60, 16%, 66%); + --cl-gray-9: hsl(40, 32%, 78%); + --cl-gray-10: hsl(30, 32%, 84%); + --cl-white: hsl(26, 64%, 88%); + --cl-red-6: hsl(4, 83%, 67%); + --cl-red-7: hsl(4, 75%, 75%); + --cl-orange-6: hsl(26, 84%, 62%); + --cl-orange-7: hsl(26, 84%, 74%); + --cl-yellow: hsl(37, 80%, 69%); + --cl-green-6: hsl(120, 41%, 64%); + --cl-green-7: hsl(120, 42%, 75%); + --cl-cyan-6: hsl(160, 41%, 64%); + --cl-cyan-7: hsl(160, 32%, 75%); + --cl-blue-6: hsl(200, 55%, 64%); + --cl-blue-8: hsl(201, 55%, 80%); + --cl-magenta-7: hsl(320, 59%, 72%); + --cl-magenta-8: hsl(320, 61%, 80%); + + --bg-main: var(--cl-gray-0); + --bg-card: var(--cl-gray-1); + --border: var(--cl-gray-3); + --text-primary: var(--cl-white); + --text-secondary: var(--cl-gray-7); + --text-muted: var(--cl-gray-6); + --accent: var(--cl-blue-6); + --accent-glow: rgba(107, 180, 211, 0.15); + + --link-color: var(--cl-orange-6); + --link-visited: var(--cl-green-6); + --link-hover: var(--cl-magenta-7); + --link-active: var(--cl-green-6); } @media (prefers-color-scheme: dark) { :root { - --bg-main: #121212; - --bg-card: #1e1e1e; - --border: #333333; - --text-primary: #ffffff; - --text-secondary: #a0a0a0; - --text-muted: #d1d1d1; - --accent: #e2e2e2; - --accent-glow: rgba(255,255,255,0.1); + --bg-main: var(--cl-gray-0); + --bg-card: var(--cl-gray-1); + --border: var(--cl-gray-3); + --text-primary: var(--cl-white); + --text-secondary: var(--cl-gray-7); + --text-muted: var(--cl-gray-6); + --accent: var(--cl-blue-6); + --accent-glow: rgba(107, 180, 211, 0.15); } } *, *::before, *::after { box-sizing: border-box; - font-family: sans-serif; + font-family: "Roboto Mono", monospace, sans-serif; + border-radius: 0px !important; } html { @@ -32,7 +65,7 @@ html { body { background-color:var(--bg-main); - background-image:radial-gradient(circle at top end, var(--bg-card) 0%, var(--bg-main) 100%); + background-image:none; background-attachment:fixed; color:var(--text-primary); margin:0; @@ -41,6 +74,23 @@ body { -webkit-tap-highlight-color: transparent; } +/* Link styling */ +a:link { + color: var(--link-color); +} + +a:visited { + color: var(--link-visited); +} + +a:active { + color: var(--link-active); +} + +a:hover { + color: var(--link-hover); +} + img[src=""] { display: none; } @@ -196,6 +246,35 @@ h1 { h1 span { color:var(--accent); } + +/* Colored header utility classes */ +.h1Blue, h1.h1Blue, h1 .h1Blue { + color: var(--cl-blue-6); +} + +.h1Green, h1.h1Green, h1 .h1Green { + color: var(--cl-green-6); +} + +.h1Red, h1.h1Red, h1 .h1Red { + color: var(--cl-red-6); +} + +.h1Cyan, h1.h1Cyan, h1 .h1Cyan { + color: var(--cl-cyan-6); +} + +.h1Magenta, h1.h1Magenta, h1 .h1Magenta { + color: var(--cl-magenta-7); +} + +.h1Yellow, h1.h1Yellow, h1 .h1Yellow { + color: var(--cl-yellow); +} + +.h1Orange, h1.h1Orange, h1 .h1Orange { + color: var(--cl-orange-6); +} .logo-link { text-decoration:none; color:inherit; @@ -959,5 +1038,3 @@ header .logo-link:hover { flex-direction: column; } } - - diff --git a/static/theme-dark.css b/static/theme-dark.css index 246aabe..aad59fa 100644 --- a/static/theme-dark.css +++ b/static/theme-dark.css @@ -1,10 +1,42 @@ :root { - --bg-main: #121212; - --bg-card: #1e1e1e; - --border: #333333; - --text-primary: #ffffff; - --text-secondary: #a0a0a0; - --text-muted: #d1d1d1; - --accent: #e2e2e2; - --accent-glow: rgba(255,255,255,0.1); + --cl-black: hsl(140, 1%, 6%); + --cl-gray-0: hsl(140, 2%, 8%); + --cl-gray-1: hsl(140, 2%, 12%); + --cl-gray-2: hsl(140, 4%, 16%); + --cl-gray-3: hsl(140, 4%, 24%); + --cl-gray-4: hsl(140, 4%, 36%); + --cl-gray-5: hsl(140, 4%, 44%); + --cl-gray-6: hsl(80, 8%, 52%); + --cl-gray-7: hsl(70, 8%, 58%); + --cl-gray-8: hsl(60, 16%, 66%); + --cl-gray-9: hsl(40, 32%, 78%); + --cl-gray-10: hsl(30, 32%, 84%); + --cl-white: hsl(26, 64%, 88%); + --cl-red-6: hsl(4, 83%, 67%); + --cl-red-7: hsl(4, 75%, 75%); + --cl-orange-6: hsl(26, 84%, 62%); + --cl-orange-7: hsl(26, 84%, 74%); + --cl-yellow: hsl(37, 80%, 69%); + --cl-green-6: hsl(120, 41%, 64%); + --cl-green-7: hsl(120, 42%, 75%); + --cl-cyan-6: hsl(160, 41%, 64%); + --cl-cyan-7: hsl(160, 32%, 75%); + --cl-blue-6: hsl(200, 55%, 64%); + --cl-blue-8: hsl(201, 55%, 80%); + --cl-magenta-7: hsl(320, 59%, 72%); + --cl-magenta-8: hsl(320, 61%, 80%); + + --bg-main: var(--cl-gray-0); + --bg-card: var(--cl-gray-1); + --border: var(--cl-gray-3); + --text-primary: var(--cl-white); + --text-secondary: var(--cl-gray-7); + --text-muted: var(--cl-gray-6); + --accent: var(--cl-blue-6); + --accent-glow: rgba(107, 180, 211, 0.15); + + --link-color: var(--cl-orange-6); + --link-visited: var(--cl-green-6); + --link-hover: var(--cl-magenta-7); + --link-active: var(--cl-green-6); } diff --git a/templates/home.html b/templates/home.html index 65280cf..2dc4944 100644 --- a/templates/home.html +++ b/templates/home.html @@ -1,26 +1,26 @@ - + - OmniSearch + Moekyun Search {{if theme == "light"}}{{endif}} {{if theme == "dark"}}{{endif}} - - +

- OmniSearch + MoekyunSearch

diff --git a/templates/images.html b/templates/images.html index d7397b5..b521c6a 100644 --- a/templates/images.html +++ b/templates/images.html @@ -1,18 +1,18 @@ - + - OmniSearch Images - {{query}} + MoekyunSearch Images - {{query}} {{if theme == "light"}}{{endif}} {{if theme == "dark"}}{{endif}} - +

@@ -77,4 +77,4 @@ - \ No newline at end of file + diff --git a/templates/opensearch.xml b/templates/opensearch.xml index 8544b09..2bc823f 100644 --- a/templates/opensearch.xml +++ b/templates/opensearch.xml @@ -2,7 +2,7 @@ - OmniSearch + MoekyunSearch Lightweight metasearch engine UTF-8 diff --git a/templates/results.html b/templates/results.html index f97a096..fecbcd7 100644 --- a/templates/results.html +++ b/templates/results.html @@ -1,25 +1,25 @@ - + - OmniSearch - {{query}} + MoekyunSearch - {{query}} {{if theme == "light"}}{{endif}} {{if theme == "dark"}}{{endif}} - + - +

- OmniSearch + MoekyunSearch

diff --git a/templates/settings.html b/templates/settings.html index d353d24..2ab045d 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -5,7 +5,7 @@ - OmniSearch - {{l("settings_title")}} + MoekyunSearch - {{l("settings_title")}} {{if theme == "light"}}{{endif}} @@ -13,13 +13,13 @@ + title="MoekyunSearch" href="/opensearch.xml">

- OmniSearch + MoekyunSearch

{{if query != ""}} @@ -97,4 +97,4 @@

- \ No newline at end of file + -- cgit v1.2.3