From 397a805ffddf6bb847edce824209b540b55ab0ec Mon Sep 17 00:00:00 2001 From: aocosmic <51456343+cybrejon@users.noreply.github.com> Date: Sat, 9 Dec 2023 22:34:17 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Improved=20visual=20fidelity=20f?= =?UTF-8?q?or=20the=20`simple`=20theme=20(#426)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * lazyload search result text with css content-visibility * typo, lightning-fast is grammatically correct * revamped logo to look more modern * added class to control how new logo looks and behaves * added class to control how new logo looks and behaves * Replace old websurfx logo in readme file * major visual revamp * removed logo files and switched to inline svg * added `--logo-color` to make svg logo colorscheme adaptive * Update public/static/themes/simple.css Co-authored-by: neon_arch * [CodeFactor] Apply fixes * chores: fix duplicate footer selector and remove unknown pseudo-class * chores: remove missed duplicate footer selector * chores: pass formatter check by deleting empty line at 18 --------- Co-authored-by: neon_arch Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com> Co-authored-by: alamin655 Co-authored-by: codefactor-io --- public/images/websurfx_logo.png | Bin 8501 -> 0 bytes public/images/websurfx_logo.svg | 7 - .../static/colorschemes/catppuccin-mocha.css | 1 + public/static/colorschemes/dark-chocolate.css | 1 + public/static/colorschemes/dracula.css | 1 + public/static/colorschemes/gruvbox-dark.css | 1 + public/static/colorschemes/monokai.css | 1 + public/static/colorschemes/nord.css | 1 + public/static/colorschemes/oceanic-next.css | 1 + public/static/colorschemes/one-dark.css | 1 + public/static/colorschemes/solarized-dark.css | 1 + .../static/colorschemes/solarized-light.css | 1 + public/static/colorschemes/tokyo-night.css | 1 + public/static/colorschemes/tomorrow-night.css | 1 + public/static/themes/simple.css | 157 +++++++++++++----- src/templates/views/index.rs | 12 +- 16 files changed, 140 insertions(+), 48 deletions(-) delete mode 100644 public/images/websurfx_logo.png delete mode 100644 public/images/websurfx_logo.svg diff --git a/public/images/websurfx_logo.png b/public/images/websurfx_logo.png deleted file mode 100644 index 24d39e15326b389340444fefc230fa2ab8373791..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8501 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 diff --git a/public/images/websurfx_logo.svg b/public/images/websurfx_logo.svg deleted file mode 100644 index 2574345..0000000 --- a/public/images/websurfx_logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/public/static/colorschemes/catppuccin-mocha.css b/public/static/colorschemes/catppuccin-mocha.css index 41cc9e0..2394f0a 100644 --- a/public/static/colorschemes/catppuccin-mocha.css +++ b/public/static/colorschemes/catppuccin-mocha.css @@ -1,6 +1,7 @@ :root { --background-color: #1e1e2e; --foreground-color: #cdd6f4; + --logo-color: #f5c2e7; --color-one: #45475a; --color-two: #f38ba8; --color-three: #a6e3a1; diff --git a/public/static/colorschemes/dark-chocolate.css b/public/static/colorschemes/dark-chocolate.css index 32f1f0b..5dacf88 100644 --- a/public/static/colorschemes/dark-chocolate.css +++ b/public/static/colorschemes/dark-chocolate.css @@ -1,6 +1,7 @@ :root { --background-color: #000; --foreground-color: #fff; + --logo-color: #e0e0e0; --color-one: #121212; --color-two: #808080; --color-three: #999; diff --git a/public/static/colorschemes/dracula.css b/public/static/colorschemes/dracula.css index bb15d4c..5933506 100644 --- a/public/static/colorschemes/dracula.css +++ b/public/static/colorschemes/dracula.css @@ -1,6 +1,7 @@ :root { --background-color: #44475a; --foreground-color: #8be9fd; + --logo-color: #ffb86c; --color-one: #f55; --color-two: #50fa7b; --color-three: #ffb86c; diff --git a/public/static/colorschemes/gruvbox-dark.css b/public/static/colorschemes/gruvbox-dark.css index ca89eb2..8120bdb 100644 --- a/public/static/colorschemes/gruvbox-dark.css +++ b/public/static/colorschemes/gruvbox-dark.css @@ -1,6 +1,7 @@ :root { --background-color: #1d2021; --foreground-color: #ebdbb2; + --logo-color: #ebdbb2; --color-one: #282828; --color-two: #98971a; --color-three: #d79921; diff --git a/public/static/colorschemes/monokai.css b/public/static/colorschemes/monokai.css index ea1b58e..c89e570 100644 --- a/public/static/colorschemes/monokai.css +++ b/public/static/colorschemes/monokai.css @@ -1,6 +1,7 @@ :root { --background-color: #49483Eff; --foreground-color: #FFB269; + --logo-color: #ffd866; --color-one: #272822ff; --color-two: #61AFEF; --color-three: #ffd866; diff --git a/public/static/colorschemes/nord.css b/public/static/colorschemes/nord.css index 234b57b..dde536b 100644 --- a/public/static/colorschemes/nord.css +++ b/public/static/colorschemes/nord.css @@ -1,6 +1,7 @@ :root { --background-color: #122736ff; --foreground-color: #a2e2a9; + --logo-color: #e2ecd6; --color-one: #121B2Cff; --color-two: #f08282; --color-three: #ABC5AAff; diff --git a/public/static/colorschemes/oceanic-next.css b/public/static/colorschemes/oceanic-next.css index 896bae1..e7753ae 100644 --- a/public/static/colorschemes/oceanic-next.css +++ b/public/static/colorschemes/oceanic-next.css @@ -1,6 +1,7 @@ :root { --background-color: #1b2b34; --foreground-color: #d8dee9; + --logo-color: #d8dee9; --color-one: #343d46; --color-two: #5FB3B3ff; --color-three: #69Cf; diff --git a/public/static/colorschemes/one-dark.css b/public/static/colorschemes/one-dark.css index 30f858e..5a0a3e8 100644 --- a/public/static/colorschemes/one-dark.css +++ b/public/static/colorschemes/one-dark.css @@ -1,6 +1,7 @@ :root { --background-color: #282c34; --foreground-color: #abb2bf; + --logo-color: #c8ccd4; --color-one: #3b4048; --color-two: #a3be8c; --color-three: #b48ead; diff --git a/public/static/colorschemes/solarized-dark.css b/public/static/colorschemes/solarized-dark.css index 44494f9..842b254 100644 --- a/public/static/colorschemes/solarized-dark.css +++ b/public/static/colorschemes/solarized-dark.css @@ -1,6 +1,7 @@ :root { --background-color: #002b36; --foreground-color: #c9e0e6; + --logo-color: #EEE8D5ff; --color-one: #073642; --color-two: #2AA198ff; --color-three: #2AA198ff; diff --git a/public/static/colorschemes/solarized-light.css b/public/static/colorschemes/solarized-light.css index 7434b37..7a8f67a 100644 --- a/public/static/colorschemes/solarized-light.css +++ b/public/static/colorschemes/solarized-light.css @@ -1,6 +1,7 @@ :root { --background-color: #EEE8D5ff; --foreground-color: #b1ab97; + --logo-color: #586E75; --color-one: #fdf6e3; --color-two: #DC322Fff; --color-three: #586E75ff; diff --git a/public/static/colorschemes/tokyo-night.css b/public/static/colorschemes/tokyo-night.css index 16c54bd..66ad547 100644 --- a/public/static/colorschemes/tokyo-night.css +++ b/public/static/colorschemes/tokyo-night.css @@ -1,6 +1,7 @@ :root { --background-color: #1a1b26; --foreground-color: #c0caf5; + --logo-color: #e2afff; --color-one: #32364a; --color-two: #a9b1d6; --color-three: #5a5bb8; diff --git a/public/static/colorschemes/tomorrow-night.css b/public/static/colorschemes/tomorrow-night.css index 2f2c29c..8b462a0 100644 --- a/public/static/colorschemes/tomorrow-night.css +++ b/public/static/colorschemes/tomorrow-night.css @@ -1,6 +1,7 @@ :root { --background-color: #35383Cff; --foreground-color: #D7DAD8ff; + --logo-color: #D7DAD8ff; --color-one: #1d1f21; --color-two: #D77C79ff; --color-three: #f0c674; diff --git a/public/static/themes/simple.css b/public/static/themes/simple.css index 5388161..9aa1ef7 100644 --- a/public/static/themes/simple.css +++ b/public/static/themes/simple.css @@ -1,4 +1,9 @@ /* @import url('./catppuccin-mocha.css'); */ +@font-face { + font-family: Rubik; + src: url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap'); + fallback: sans-serif; +} * { padding: 0; @@ -16,7 +21,13 @@ body { justify-content: space-between; align-items: center; height: 100vh; - background: var(--color-one); + font-family: Rubik, sans-serif; + background-color: var(--background-color); +} + +/* enforce font for buttons */ +button { + font-family: Rubik, sans-serif; } /* styles for the index page */ @@ -29,46 +40,67 @@ body { align-items: center; } -.search-container div { - display: flex; +.search-container svg { + color: var(--logo-color); } -.websurfx-logo { - width: clamp(12rem, 40rem, 48rem); +.search-container div { + display: flex; } /* styles for the search box and search button */ .search_bar { display: flex; + gap: 10px; + align-items: center; } .search_bar input { - padding: 1rem; + border-radius: 6px; + padding: 2.6rem 2.2rem; width: 50rem; height: 3rem; outline: none; border: none; box-shadow: rgb(0 0 0 / 1); - background: var(--foreground-color); + background-color: var(--color-one); + color: var(--foreground-color); + outline-offset: 3px; + font-size: 1.6rem; +} + +.search_bar input:focus { + outline: 2px solid var(--foreground-color); +} + +.search_bar input::placeholder { + color: var(--foreground-color); + opacity: 1; } .search_bar button { - padding: 1rem; - border-radius: 0; + padding: 2.6rem 3.2rem; + border-radius: 6px; height: 3rem; display: flex; justify-content: center; align-items: center; - outline: none; + outline-offset: 3px; + outline: 2px solid transparent; border: none; + transition: .1s; gap: 0; - background: var(--background-color); - color: var(--color-three); + background-color: var(--color-six); + color: var(--background-color); font-weight: 600; letter-spacing: 0.1rem; } +.search_bar button:active { + outline: 2px solid var(--color-three); +} + .search_bar button:active, .search_bar button:hover { filter: brightness(1.2); @@ -85,13 +117,19 @@ body { width: 20rem; background-color: var(--color-one); color: var(--foreground-color); - padding: 1rem 2rem; + padding: 1.2rem 2rem; border-radius: 0.5rem; - outline: none; + outline-offset: 3px; + outline: 2px solid transparent; border: none; text-transform: capitalize; } +.search_area .search_options select:active, +.search_area .search_options select:hover { + outline: 2px solid var(--color-three); +} + .search_area .search_options option:hover { background-color: var(--color-one); } @@ -199,17 +237,25 @@ body { /* styles for the footer and header */ -header, + +header { + width: 100%; + background: var(--background-color); + display: flex; + align-items: center; + justify-content: space-between; + padding: 2rem 3rem; +} + footer { width: 100%; background: var(--background-color); display: flex; - padding: 1rem; align-items: center; -} - -header { - justify-content: space-between; + padding: 1.7rem 1.7rem 4rem; + gap: 1.8rem; + flex-direction: column; + justify-content: center; } header h1 a { @@ -217,7 +263,6 @@ header h1 a { text-decoration: none; color: var(--foreground-color); letter-spacing: 0.1rem; - margin-left: 1rem; } header ul, @@ -259,11 +304,6 @@ footer div { gap: 1rem; } -footer { - flex-direction: column; - justify-content: center; -} - /* Styles for the search page */ .results { @@ -271,6 +311,11 @@ footer { display: flex; flex-direction: column; justify-content: space-around; + gap: 1rem; +} + +.result { + gap: 1rem; } .results .search_bar { @@ -280,7 +325,7 @@ footer { .results_aggregated { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: space-between; margin: 2rem 0; content-visibility: auto; } @@ -292,10 +337,10 @@ footer { } .results_aggregated .result h1 a { - font-size: 1.5rem; + font-size: 1.7rem; + font-weight: normal; color: var(--color-two); text-decoration: none; - letter-spacing: 0.1rem; } .results_aggregated .result h1 a:hover { @@ -308,14 +353,15 @@ footer { .results_aggregated .result small { color: var(--color-three); - font-size: 1.1rem; + font-size: 1.3rem; word-wrap: break-word; line-break: anywhere; } .results_aggregated .result p { color: var(--foreground-color); - font-size: 1.2rem; + font-size: 1.4rem; + line-height: 2.4rem; margin-top: 0.3rem; word-wrap: break-word; line-break: anywhere; @@ -445,6 +491,7 @@ footer { display: flex; justify-content: space-around; width: 80dvw; + margin: 5rem 0; } .settings h1 { @@ -452,11 +499,20 @@ footer { font-size: 2.5rem; } +.settings > h1 { + margin-bottom: 4rem; + margin-left: 2rem; +} + .settings hr { border-color: var(--color-three); margin: 0.3rem 0 1rem; } +.settings > hr { + margin-left: 2rem; +} + .settings_container .sidebar { width: 30%; cursor: pointer; @@ -467,7 +523,6 @@ footer { margin-left: -0.7rem; padding: 0.7rem; border-radius: 5px; - font-weight: bold; margin-bottom: 0.5rem; color: var(--foreground-color); text-transform: capitalize; @@ -475,18 +530,30 @@ footer { } .settings_container .sidebar .btn { - padding: 0.5rem; + padding: 2rem; border-radius: 0.5rem; + outline-offset: 3px; + outline: 2px solid transparent; +} + +.settings_container .sidebar .btn:active { + outline: 2px solid var(--color-two); +} + +.settings_container .sidebar .btn:not(.active):hover { + color: var(--color-two); } .settings_container .sidebar .btn.active { background-color: var(--color-two); + color: var(--background-color); } .settings_container .main_container { width: 70%; border-left: 1.5px solid var(--color-three); padding-left: 3rem; + border: none; } .settings_container .tab { @@ -495,6 +562,7 @@ footer { .settings_container .tab.active { display: flex; + gap: 1.2rem; flex-direction: column; justify-content: space-around; } @@ -542,7 +610,7 @@ footer { .settings_container .general select { margin: 0.7rem 0; width: 20rem; - background-color: var(--background-color); + background-color: var(--color-one); color: var(--foreground-color); padding: 1rem 2rem; border-radius: 0.5rem; @@ -560,16 +628,19 @@ footer { display: flex; flex-direction: column; justify-content: center; - gap: 1rem; padding: 1rem 0; + margin-bottom: 2rem; + gap: 2rem; } .settings_container .engines .toggle_btn { color: var(--foreground-color); font-size: 1.5rem; display: flex; - gap: 0.5rem; align-items: center; + border-radius: 100px; + gap: 1.5rem; + letter-spacing: 1px; } .settings_container .engines hr { @@ -602,8 +673,14 @@ footer { position: absolute; cursor: pointer; inset: 0; - background-color: var(--background-color); - transition: 0.4s; + background-color: var(--foreground-color); + transition: 0.2s; + outline-offset: 3px; + outline: 2px solid transparent; +} + +.slider:active { + outline: 2px solid var(--foreground-color); } .slider::before { @@ -613,8 +690,8 @@ footer { width: 2.6rem; left: 0.4rem; bottom: 0.4rem; - background-color: var(--foreground-color); - transition: 0.4s; + background-color: var(--background-color); + transition: .2s; } input:checked + .slider { diff --git a/src/templates/views/index.rs b/src/templates/views/index.rs index cfa1eb6..d55ef7d 100644 --- a/src/templates/views/index.rs +++ b/src/templates/views/index.rs @@ -15,10 +15,20 @@ use crate::templates::partials::{bar::bar, footer::footer, header::header}; /// /// It returns the compiled html markup code as a result. pub fn index(colorscheme: &str, theme: &str) -> Markup { + let logo_svg = r#" + + + + + + + + "#; + html!( (header(colorscheme, theme)) main class="search-container"{ - img class="websurfx-logo" src="../images/websurfx_logo.svg" alt="Websurfx meta-search engine logo"; + (PreEscaped(logo_svg)) (bar(&String::default())) (PreEscaped("")) }