💄 Improved visual fidelity for the simple theme (#426)

* 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 <mustafadhuleb53@gmail.com>

* [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 <mustafadhuleb53@gmail.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
Co-authored-by: alamin655 <mdalamin655@outlook.com>
Co-authored-by: codefactor-io <support@codefactor.io>

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;