Expand custom css variables and functionality

Squashed commit of the following:

commit 37e22d2945
Author: Ben Busby <benbusby@protonmail.com>
Date:   Mon Apr 5 10:27:05 2021 -0400

    Pass user config to logo template

commit 2406fee05c
Author: Ben Busby <benbusby@protonmail.com>
Date:   Mon Apr 5 10:24:54 2021 -0400

    Fix incorrect contrast text in dark theme

commit 91dd677e22
Author: Ben Busby <benbusby@protonmail.com>
Date:   Fri Apr 2 17:21:38 2021 -0400

    Remove inline onclicks, fix svg sizing

commit 91bbf9c0fa
Merge: 72637df b1227bd
Author: Ben Busby <benbusby@protonmail.com>
Date:   Fri Apr 2 15:35:37 2021 -0400

    Merge remote-tracking branch 'origin/develop' into custom-css-tweaks

commit 72637df213
Author: Ben Busby <benbusby@protonmail.com>
Date:   Fri Apr 2 11:38:38 2021 -0400

    Use svg logo w/ custom styling on results pages

commit 666a7ceac4
Author: Ben Busby <benbusby@protonmail.com>
Date:   Fri Apr 2 11:10:37 2021 -0400

    Split whoogle-accent into whoogle-element-bg and whoogle-logo

    See discussion on #247

app/filter.py

@@ -3,6 +3,7 @@ from app.utils.results import *
 from bs4 import BeautifulSoup
 from bs4.element import ResultSet, Tag
 from cryptography.fernet import Fernet
+from flask import render_template
 import re
 import urllib.parse as urlparse
 from urllib.parse import parse_qs
@@ -152,8 +153,7 @@ class Filter:
 
         if src.startswith(LOGO_URL):
             # Re-brand with Whoogle logo
-            element['src'] = 'static/img/logo.png'
-            element['style'] = 'height:40px;width:162px'
+            element.replace_with(BeautifulSoup(render_template('logo.html')))
             return
         elif src.startswith(GOOG_IMG) or GOOG_STATIC in src:
             element['src'] = BLANK_B64

app/routes.py

@@ -126,6 +126,9 @@ def index():
     return render_template('index.html',
                            languages=app.config['LANGUAGES'],
                            countries=app.config['COUNTRIES'],
+                           logo=render_template(
+                               'logo.html',
+                               config=g.user_config),
                            config=g.user_config,
                            tor_available=int(os.environ.get('TOR_AVAILABLE')),
                            version_number=app.config['VERSION_NUMBER'])
@@ -224,6 +227,7 @@ def search():
         search_header=(render_template(
             'header.html',
             config=g.user_config,
+            logo=render_template('logo.html'),
             query=urlparse.unquote(query),
             search_type=search_util.search_type,
             mobile=g.user_request.mobile)

app/static/css/dark-theme.css

@@ -1,9 +1,9 @@
 html {
-    background: var(--whoogle-dark-background) !important;
+    background: var(--whoogle-dark-page-bg) !important;
 }
 
 body {
-    background: var(--whoogle-dark-background) !important;
+    background: var(--whoogle-dark-page-bg) !important;
 }
 
 div {
@@ -23,7 +23,7 @@ li {
 }
 
 textarea {
-    background: var(--whoogle-dark-background) !important;
+    background: var(--whoogle-dark-page-bg) !important;
     color: var(--whoogle-dark-text) !important;
 }
 
@@ -44,17 +44,17 @@ div span {
 }
 
 input {
-    background-color: var(--whoogle-dark-background) !important;
+    background-color: var(--whoogle-dark-page-bg) !important;
     color: var(--whoogle-dark-text) !important;
 }
 
 select {
-    background: var(--whoogle-dark-background) !important;
+    background: var(--whoogle-dark-page-bg) !important;
     color: var(--whoogle-dark-text) !important;
 }
 
 .search-container {
-    background-color: var(--whoogle-dark-background) !important;
+    background-color: var(--whoogle-dark-page-bg) !important;
 }
 
 .ZINbbc {
@@ -66,7 +66,7 @@ select {
 }
 
 #search-bar {
-    border: 2px solid var(--whoogle-dark-accent) !important;
+    border: 2px solid var(--whoogle-dark-element-bg) !important;
     color: var(--whoogle-dark-text) !important;
 }
 
@@ -75,9 +75,9 @@ select {
 }
 
 #search-submit {
-    border: 1px solid var(--whoogle-dark-accent) !important;
-    background: var(--whoogle-dark-accent) !important;
-    color: var(--whoogle-dark-background) !important;
+    border: 1px solid var(--whoogle-dark-element-bg) !important;
+    background: var(--whoogle-dark-element-bg) !important;
+    color: var(--whoogle-dark-contrast-text) !important;
 }
 
 .info-text {
@@ -86,20 +86,20 @@ select {
 }
 
 .collapsible {
-    color: var(--whoogle-dark-accent) !important;
+    color: var(--whoogle-dark-element-bg) !important;
 }
 
 .collapsible:after {
-    color: var(--whoogle-dark-accent) !important;
+    color: var(--whoogle-dark-element-bg) !important;
 }
 
 .active {
-    background-color: var(--whoogle-dark-accent) !important;
+    background-color: var(--whoogle-dark-element-bg) !important;
     color: var(--whoogle-dark-contrast-text) !important;
 }
 
 .content {
-    background-color: var(--whoogle-dark-accent) !important;
+    background-color: var(--whoogle-dark-element-bg) !important;
     color: var(--whoogle-contrast-text) !important;
 }
 
@@ -108,7 +108,7 @@ select {
 }
 
 #gh-link {
-    color: var(--whoogle-dark-accent);
+    color: var(--whoogle-dark-element-bg);
 }
 
 .autocomplete-items {
@@ -126,6 +126,6 @@ select {
 }
 
 .autocomplete-active {
-    background-color: var(--whoogle-dark-accent) !important;
-    color: var(--whoogle-dark-background) !important;
+    background-color: var(--whoogle-dark-element-bg) !important;
+    color: var(--whoogle-dark-contrast-text) !important;
 }

app/static/css/light-theme.css

@@ -1,9 +1,9 @@
 html {
-    background: var(--whoogle-background) !important;
+    background: var(--whoogle-page-bg) !important;
 }
 
 body {
-    background: var(--whoogle-background) !important;
+    background: var(--whoogle-page-bg) !important;
 }
 
 div {
@@ -23,12 +23,12 @@ li {
 }
 
 textarea {
-    background: var(--whoogle-background) !important;
+    background: var(--whoogle-page-bg) !important;
     color: var(--whoogle-text) !important;
 }
 
 select {
-    background: var(--whoogle-background) !important;
+    background: var(--whoogle-page-bg) !important;
     color: var(--whoogle-text) !important;
 }
 
@@ -57,27 +57,27 @@ div span {
 }
 
 input {
-    background-color: var(--whoogle-background) !important;
+    background-color: var(--whoogle-page-bg) !important;
     color: var(--whoogle-text) !important;
 }
 
 #search-bar {
     color: var(--whoogle-text) !important;
-    background-color: var(--whoogle-background);
+    background-color: var(--whoogle-page-bg);
 }
 
 .home-search {
-    border: 3px solid var(--whoogle-accent) !important;
+    border: 3px solid var(--whoogle-element-bg) !important;
 }
 
 .search-container {
-    background-color: var(--whoogle-background) !important;
+    background-color: var(--whoogle-page-bg) !important;
 }
 
 #search-submit {
-    border: 1px solid var(--whoogle-accent) !important;
-    background: var(--whoogle-accent) !important;
-    color: var(--whoogle-background) !important;
+    border: 1px solid var(--whoogle-element-bg) !important;
+    background: var(--whoogle-element-bg) !important;
+    color: var(--whoogle-contrast-text) !important;
 }
 
 .info-text {
@@ -86,20 +86,20 @@ input {
 }
 
 .collapsible {
-    color: var(--whoogle-accent) !important;
+    color: var(--whoogle-element-bg) !important;
 }
 
 .collapsible:after {
-    color: var(--whoogle-accent) !important;
+    color: var(--whoogle-element-bg) !important;
 }
 
 .active {
-    background-color: var(--whoogle-accent) !important;
+    background-color: var(--whoogle-element-bg) !important;
     color: var(--whoogle-contrast-text) !important;
 }
 
 .content {
-    background-color: var(--whoogle-accent) !important;
+    background-color: var(--whoogle-element-bg) !important;
     color: var(--whoogle-contrast-text) !important;
 }
 
@@ -108,7 +108,7 @@ input {
 }
 
 #gh-link {
-    color: var(--whoogle-accent);
+    color: var(--whoogle-element-bg);
 }
 
 .autocomplete-items {
@@ -125,6 +125,6 @@ input {
 }
 
 .autocomplete-active {
-    background-color: var(--whoogle-accent) !important;
-    color: var(--whoogle-background) !important;
+    background-color: var(--whoogle-element-bg) !important;
+    color: var(--whoogle-contrast-text) !important;
 }

app/static/css/logo.css

@@ -0,0 +1,17 @@
+.cls-1 {
+    fill: transparent;
+}
+
+svg {
+    height: inherit;
+}
+
+a {
+    height: inherit;
+}
+
+@media (max-width: 1000px) {
+    svg {
+        margin-top: .7em;
+    }
+}

app/static/css/main.css

@@ -9,6 +9,10 @@ body {
     padding-bottom: 10px;
 }
 
+.logo-container {
+    max-height: 500px;
+}
+
 .search-container {
     background: transparent !important;
     width: 80%;

app/static/css/variables.css

@@ -1,23 +1,25 @@
 /* Colors */
 :root {
     /* LIGHT THEME COLORS */
-    --whoogle-background: #fff;
-    --whoogle-accent: #685e79;
-    --whoogle-text: #000;
-    --whoogle-contrast-text: #fff;
+    --whoogle-logo: #685e79;
+    --whoogle-page-bg: #ffffff;
+    --whoogle-element-bg: #685e79;
+    --whoogle-text: #000000;
+    --whoogle-contrast-text: #ffffff;
     --whoogle-secondary-text: #70757a;
-    --whoogle-result-bg: #fff;
+    --whoogle-result-bg: #ffffff;
     --whoogle-result-title: #1967d2;
     --whoogle-result-url: #0d652d;
     --whoogle-result-visited: #4b11a8;
 
     /* DARK THEME COLORS */
-    --whoogle-dark-background: #222;
-    --whoogle-dark-accent: #685e79;
-    --whoogle-dark-text: #fff;
-    --whoogle-dark-contrast-text: #000;
-    --whoogle-dark-secondary-text: #bbb;
-    --whoogle-dark-result-bg: #000;
+    --whoogle-dark-logo: #685e79;
+    --whoogle-dark-page-bg: #222222;
+    --whoogle-dark-element-bg: #685e79;
+    --whoogle-dark-text: #ffffff;
+    --whoogle-dark-contrast-text: #000000;
+    --whoogle-dark-secondary-text: #bbbbbb;
+    --whoogle-dark-result-bg: #000000;
     --whoogle-dark-result-title: #1967d2;
     --whoogle-dark-result-url: #4b11a8;
     --whoogle-dark-result-visited: #bbbbff;

app/static/js/controller.js

@@ -76,6 +76,9 @@ document.addEventListener("DOMContentLoaded", function() {
     setupSearchLayout();
     setupConfigLayout();
 
+    document.getElementById("config-load").addEventListener("click", loadConfig);
+    document.getElementById("config-save").addEventListener("click", saveConfig);
+
     // Focusing on the search input field requires a delay for elements to finish
     // loading (seemingly only on FF)
     setTimeout(function() { document.getElementById("search-bar").focus(); }, 250);

app/templates/header.html

@@ -4,15 +4,17 @@
             <form class="Pg70bf" id="search-form" method="POST">
                 <a class="logo-link mobile-logo"
                    href="/"
-                   style="display:flex; justify-content:center; align-items:center; color:#685e79; font-size:18px; ">
-                    <span style="color: {{ 'var(--whoogle-dark-accent)' if config.dark else 'var(--whoogle-accent)' }} !important">Whoogle</span>
+                   style="display:flex; justify-content:center; align-items:center;">
+                    <div style="height: 1.75em;">
+                        {{ logo|safe }}
+                    </div>
                 </a>
                 <div class="H0PQec" style="width: 100%;">
                     <div class="sbc esbc autocomplete">
                         <input id="search-bar" autocapitalize="none" autocomplete="off" class="noHIxc" name="q"
                                style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
                                        color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
-                                       border: {{ '2px solid var(--whoogle-dark-accent)' if config.dark else '' }}; border-radius: 8px;"
+                                       border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;"
                                spellcheck="false" type="text" value="{{ query }}">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <input type="submit" style="display: none;">
@@ -26,7 +28,9 @@
     <header>
         <div class="logo-div">
             <a class="logo-link" href="/">
-                <span style="color: {{ 'var(--whoogle-dark-accent)' if config.dark else 'var(--whoogle-accent)' }} !important">Whoogle</span>
+                <div style="height: 1.65em;">
+                    {{ logo|safe }}
+                </div>
             </a>
         </div>
         <div class="search-div">
@@ -37,7 +41,7 @@
                                spellcheck="false" type="text" value="{{ query }}"
                                style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important;
                                        color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }};
-                                       border: {{ '2px solid var(--whoogle-dark-accent)' if config.dark else '' }}; border-radius: 8px;">
+                                       border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
                         <input type="submit" style="display: none;">
                         <div class="sc"></div>

app/templates/index.html

@@ -36,31 +36,9 @@
     </head>
     <body id="main" style="display: none; background-color: {{ '#000' if config.dark else '#fff' }}">
         <div class="search-container">
-            <img class="whoogle-logo" src="static/img/whoogle.svg">
-            <svg id="Layer_1" class="whoogle-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1028 254">
-                <defs>
-                    <style>
-                        .cls-1 { 
-                            fill: transparent;
-                        }
-                        path {
-                            fill: {{ 'var(--whoogle-dark-accent)' if config.dark else 'var(--whoogle-accent)' }};
-                        }
-                    </style>
-                </defs>
-                <path class="cls-1" d="M1197,667H446V413H1474V667H1208a26.41,26.41,0,0,1,4.26-1.16c32.7-3.35,55.65-27.55,56.45-60.44.57-23.65.27-47.33.32-71,0-17.84-.16-35.67.11-53.5.07-4.92-1.57-6.54-6.3-6.11a74.65,74.65,0,0,1-11,0c-3.63-.2-5.18,1.13-5,4.87.22,4.22.05,8.45.05,12.68a6.16,6.16,0,0,1-3.78-2c-20-23.41-53.18-26.6-77.53-7.84-34,26.17-33.8,79.89-7.68,107.44,24.9,26.24,66,24.37,85.69-1.54a14.39,14.39,0,0,1,2.73-2c0,6.94.39,13.22-.08,19.42-1.18,15.5-7.79,28.06-22.32,34.72-15,6.85-30.27,7.21-44-2.92-5.82-4.28-10.1-10.66-15.66-16.71l-19.87,8.29c8.77,16.61,20.28,29.09,38.17,34.48C1187.28,665.12,1192.18,665.92,1197,667ZM447.16,414.27c.39,1.85.57,3,.86,4q25.22,91.07,50.4,182.12c.92,3.32,2.43,4.55,5.92,4.29a82,82,0,0,1,13.48,0c4.6.43,6.56-1.13,8-5.68,12.37-38.63,25-77.15,37.66-115.7.52-1.6,1.26-3.12,1.89-4.67l1.35.06c.81,2.26,1.68,4.51,2.42,6.79q18.62,57.13,37.12,114.31c1.13,3.5,2.61,5.23,6.58,4.89a80.69,80.69,0,0,1,14,0c4.15.37,5.75-1.19,6.79-5.11Q655,518.89,676.57,438.23c2.07-7.78,4.06-15.58,6.24-24-6.92,0-13.07.29-19.19-.11-4.21-.27-5.6,1.31-6.59,5.25q-17.61,70.1-35.6,140.11c-.42,1.61-1.07,3.17-1.62,4.75a10,10,0,0,1-3.16-4.88q-17.11-51.6-34.21-103.21c-1.72-5.19-2.29-12.33-6-14.86-3.9-2.7-10.86-.78-16.45-1.28-4.1-.37-5.73,1.25-7,5.08q-18.7,57.12-37.79,114.11c-.59,1.77-1.43,3.45-2.15,5.18a9.31,9.31,0,0,1-2.68-4.69Q500.5,522.88,490.62,486c-6-22.47-12-45-18.13-67.39-.44-1.63-2-4.13-3.12-4.19C462.13,414.08,454.86,414.27,447.16,414.27ZM1473.38,543.71c-1-8.62-1.16-16.45-2.77-24-5.08-23.65-18.41-40.82-42.31-47.12-24.75-6.52-47.33-2-65,18.14-15.82,18.09-19.77,39.44-16.45,62.6,4,27.73,26.6,52.65,58.1,54.81,21.42,1.46,39.91-3.91,54.24-20.46,3.51-4.05,6.13-8.88,9.54-13.92l-20.94-8.68c-13.71,20.22-30.84,26.7-50.55,19.53-17.08-6.21-29-23.88-27.23-40.92Zm-746-51.07-1.12-.55V414.65H703.69V604.22h23v-6.36c0-21.84-.08-43.68,0-65.52.07-11.59,3.84-21.92,11.82-30.46,9.41-10.07,21.15-11.89,34-8.78,11.13,2.72,17.67,10.23,20.26,21.14a55.72,55.72,0,0,1,1.46,12.34c.13,24,.07,48,.07,72v5.6h23.49v-4.87c0-24.84.05-49.68-.06-74.52a101.29,101.29,0,0,0-1.06-13.91c-2.8-19.45-15.29-34.48-32.34-38.55-21.17-5-39.58-.47-54.11,16.51C729.19,490.07,728.29,491.38,727.34,492.64Zm179.93-22.47c-38.65,0-66.92,28.86-67,68.47-.06,40.49,28.07,70,66.72,70,38.38,0,66.64-29.26,66.67-69C973.71,499.1,946.09,470.21,907.27,470.17Zm82.22,69.31c.57,5.12.76,10.32,1.76,15.35,10.69,53.81,69.71,66.73,104.35,41.39,20.15-14.74,27.8-35.52,27.31-60.14-.88-44.18-40.84-78.15-90-62.12C1006.24,482.67,989.72,508.59,989.49,539.48Zm333.81,64.95V414.62h-22.65V604.43Z" transform="translate(-446 -413)"/>
-                <path d="M1197,667c-4.82-1.08-9.72-1.88-14.44-3.3-17.89-5.39-29.4-17.87-38.17-34.48l19.87-8.29c5.56,6.05,9.84,12.43,15.66,16.71,13.75,10.13,29.07,9.77,44,2.92,14.53-6.66,21.14-19.22,22.32-34.72.47-6.2.08-12.48.08-19.42a14.39,14.39,0,0,0-2.73,2c-19.7,25.91-60.79,27.78-85.69,1.54-26.12-27.55-26.3-81.27,7.68-107.44,24.35-18.76,57.56-15.57,77.53,7.84a6.16,6.16,0,0,0,3.78,2c0-4.23.17-8.46-.05-12.68-.19-3.74,1.36-5.07,5-4.87a74.65,74.65,0,0,0,11,0c4.73-.43,6.37,1.19,6.3,6.11-.27,17.83-.08,35.66-.11,53.5,0,23.67.25,47.35-.32,71-.8,32.89-23.75,57.09-56.45,60.44A26.41,26.41,0,0,0,1208,667Zm50-127.58c-.58-4.61-.86-9.29-1.79-13.83a42.26,42.26,0,0,0-37.31-33.75c-16.16-1.75-33.25,8.46-40.62,24.47-5.34,11.62-5.79,23.83-3.48,36.18,5.94,31.62,42.76,45.77,66.74,25.67C1242.58,568.08,1246.76,554.62,1247,539.42Z" transform="translate(-446 -413)"/>
-                <path d="M447.16,414.27c7.7,0,15-.19,22.21.19,1.14.06,2.68,2.56,3.12,4.19,6.13,22.44,12.1,44.92,18.13,67.39q9.88,36.84,19.81,73.66a9.31,9.31,0,0,0,2.68,4.69c.72-1.73,1.56-3.41,2.15-5.18q19-57,37.79-114.11c1.25-3.83,2.88-5.45,7-5.08,5.59.5,12.55-1.42,16.45,1.28,3.67,2.53,4.24,9.67,6,14.86q17.14,51.58,34.21,103.21a10,10,0,0,0,3.16,4.88c.55-1.58,1.2-3.14,1.62-4.75q17.87-70,35.6-140.11c1-3.94,2.38-5.52,6.59-5.25,6.12.4,12.27.11,19.19.11-2.18,8.4-4.17,16.2-6.24,24q-21.5,80.68-42.93,161.39c-1,3.92-2.64,5.48-6.79,5.11a80.69,80.69,0,0,0-14,0c-4,.34-5.45-1.39-6.58-4.89q-18.43-57.2-37.12-114.31c-.74-2.28-1.61-4.53-2.42-6.79l-1.35-.06c-.63,1.55-1.37,3.07-1.89,4.67-12.61,38.55-25.29,77.07-37.66,115.7-1.46,4.55-3.42,6.11-8,5.68a82,82,0,0,0-13.48,0c-3.49.26-5-1-5.92-4.29Q473.31,509.34,448,418.3C447.73,417.23,447.55,416.12,447.16,414.27Z" transform="translate(-446 -413)"/>
-                <path d="M1473.38,543.71H1370c-1.76,17,10.15,34.71,27.23,40.92,19.71,7.17,36.84.69,50.55-19.53l20.94,8.68c-3.41,5-6,9.87-9.54,13.92-14.33,16.55-32.82,21.92-54.24,20.46-31.5-2.16-54.12-27.08-58.1-54.81-3.32-23.16.63-44.51,16.45-62.6,17.64-20.17,40.22-24.66,65-18.14,23.9,6.3,37.23,23.47,42.31,47.12C1472.22,527.26,1472.43,535.09,1473.38,543.71Zm-26.69-19.8c2.09-14-14.21-30.54-31.43-32.19-22.21-2.13-43.06,13.12-43.63,32.19Z" transform="translate(-446 -413)"/>
-                <path d="M727.34,492.64c.95-1.26,1.85-2.57,2.88-3.77,14.53-17,32.94-21.55,54.11-16.51,17,4.07,29.54,19.1,32.34,38.55a101.29,101.29,0,0,1,1.06,13.91c.11,24.84.06,49.68.06,74.52v4.87H794.3v-5.6c0-24,.06-48-.07-72a55.72,55.72,0,0,0-1.46-12.34c-2.59-10.91-9.13-18.42-20.26-21.14-12.81-3.11-24.55-1.29-34,8.78-8,8.54-11.75,18.87-11.82,30.46-.12,21.84,0,43.68,0,65.52v6.36h-23V414.65h22.53v77.44Z" transform="translate(-446 -413)"/>
-                <path d="M907.27,470.17c38.82,0,66.44,28.93,66.41,69.47,0,39.73-28.29,69-66.67,69-38.65,0-66.78-29.5-66.72-70C840.35,499,868.62,470.13,907.27,470.17Zm43.24,69.26c-.43-3.79-.72-7.61-1.31-11.37-2.94-18.67-19.1-34.56-36.86-36.35-19.93-2-37.94,8.92-45,27.58-3.74,9.85-4.19,20-2.68,30.44,4,27.42,32.55,44.52,57.87,34.41C939.6,577.32,950.2,560.25,950.51,539.43Z" transform="translate(-446 -413)"/>
-                <path d="M989.49,539.48c.23-30.89,16.75-56.81,43.45-65.52,49.13-16,89.09,17.94,90,62.12.49,24.62-7.16,45.4-27.31,60.14-34.64,25.34-93.66,12.42-104.35-41.39C990.25,549.8,990.06,544.6,989.49,539.48Zm110.22-.09c-.48-4.29-.7-8.62-1.5-12.84-3.43-18.06-19.37-33.16-36.57-34.84-20.05-2-37.75,8.9-45,27.62-3.51,9.06-3.74,18.45-3,28,2.23,27.4,30.07,46.21,55.87,37.67C1088,578.9,1099.32,561.53,1099.71,539.39Z" transform="translate(-446 -413)"/>
-                <path d="M1323.3,604.43h-22.65V414.62h22.65Z" transform="translate(-446 -413)"/>
-                <path class="cls-1" d="M1247,539.42c-.24,15.2-4.42,28.66-16.46,38.74-24,20.1-60.8,6-66.74-25.67-2.31-12.35-1.86-24.56,3.48-36.18,7.37-16,24.46-26.22,40.62-24.47a42.26,42.26,0,0,1,37.31,33.75C1246.14,530.13,1246.42,534.81,1247,539.42Z" transform="translate(-446 -413)"/>
-                <path class="cls-1" d="M1446.69,523.91h-75.06c.57-19.07,21.42-34.32,43.63-32.19C1432.48,493.37,1448.78,509.88,1446.69,523.91Z" transform="translate(-446 -413)"/>
-                <path class="cls-1" d="M950.51,539.43c-.31,20.82-10.91,37.89-28,44.71-25.32,10.11-53.89-7-57.87-34.41-1.51-10.43-1.06-20.59,2.68-30.44,7.08-18.66,25.09-29.59,45-27.58,17.76,1.79,33.92,17.68,36.86,36.35C949.79,531.82,950.08,535.64,950.51,539.43Z" transform="translate(-446 -413)"/>
-                <path class="cls-1" d="M1099.71,539.39c-.39,22.14-11.74,39.51-30.16,45.6-25.8,8.54-53.64-10.27-55.87-37.67-.78-9.54-.55-18.93,3-28,7.25-18.72,24.95-29.59,45-27.62,17.2,1.68,33.14,16.78,36.57,34.84C1099,530.77,1099.23,535.1,1099.71,539.39Z" transform="translate(-446 -413)"/>
-            </svg>
+            <div class="logo-container">
+                {{ logo|safe }}
+            </div>
             <form id="search-form" action="search" method="{{ 'get' if config.get_only else 'post' }}">
                 <div class="search-fields">
                     <div class="autocomplete">
@@ -157,9 +135,9 @@
                             <textarea name="style" id="config-style" value="">{{ config.style }}</textarea>
                         </div>
                         <div class="config-div">
-                            <input type="submit" id="config-load" onclick="loadConfig(event)" value="Load">&nbsp;
+                            <input type="submit" id="config-load" value="Load">&nbsp;
                             <input type="submit" id="config-submit" value="Apply">&nbsp;
-                            <input type="submit" id="config-submit" onclick="saveConfig(event)" value="Save As...">
+                            <input type="submit" id="config-save" value="Save As...">
                         </div>
                     </form>
                 </div>

app/templates/logo.html

@@ -0,0 +1,25 @@
+    <link rel="stylesheet" href="static/css/logo.css">
+    <svg id="Layer_1" class="whoogle-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1028 254">
+        <style>
+            path {
+                fill: {{ 'var(--whoogle-dark-logo)' if config.dark else 'var(--whoogle-logo)' }};
+            }
+        </style>
+        <defs>
+            <style>
+            </style>
+        </defs>
+        <path class="cls-1" d="M1197,667H446V413H1474V667H1208a26.41,26.41,0,0,1,4.26-1.16c32.7-3.35,55.65-27.55,56.45-60.44.57-23.65.27-47.33.32-71,0-17.84-.16-35.67.11-53.5.07-4.92-1.57-6.54-6.3-6.11a74.65,74.65,0,0,1-11,0c-3.63-.2-5.18,1.13-5,4.87.22,4.22.05,8.45.05,12.68a6.16,6.16,0,0,1-3.78-2c-20-23.41-53.18-26.6-77.53-7.84-34,26.17-33.8,79.89-7.68,107.44,24.9,26.24,66,24.37,85.69-1.54a14.39,14.39,0,0,1,2.73-2c0,6.94.39,13.22-.08,19.42-1.18,15.5-7.79,28.06-22.32,34.72-15,6.85-30.27,7.21-44-2.92-5.82-4.28-10.1-10.66-15.66-16.71l-19.87,8.29c8.77,16.61,20.28,29.09,38.17,34.48C1187.28,665.12,1192.18,665.92,1197,667ZM447.16,414.27c.39,1.85.57,3,.86,4q25.22,91.07,50.4,182.12c.92,3.32,2.43,4.55,5.92,4.29a82,82,0,0,1,13.48,0c4.6.43,6.56-1.13,8-5.68,12.37-38.63,25-77.15,37.66-115.7.52-1.6,1.26-3.12,1.89-4.67l1.35.06c.81,2.26,1.68,4.51,2.42,6.79q18.62,57.13,37.12,114.31c1.13,3.5,2.61,5.23,6.58,4.89a80.69,80.69,0,0,1,14,0c4.15.37,5.75-1.19,6.79-5.11Q655,518.89,676.57,438.23c2.07-7.78,4.06-15.58,6.24-24-6.92,0-13.07.29-19.19-.11-4.21-.27-5.6,1.31-6.59,5.25q-17.61,70.1-35.6,140.11c-.42,1.61-1.07,3.17-1.62,4.75a10,10,0,0,1-3.16-4.88q-17.11-51.6-34.21-103.21c-1.72-5.19-2.29-12.33-6-14.86-3.9-2.7-10.86-.78-16.45-1.28-4.1-.37-5.73,1.25-7,5.08q-18.7,57.12-37.79,114.11c-.59,1.77-1.43,3.45-2.15,5.18a9.31,9.31,0,0,1-2.68-4.69Q500.5,522.88,490.62,486c-6-22.47-12-45-18.13-67.39-.44-1.63-2-4.13-3.12-4.19C462.13,414.08,454.86,414.27,447.16,414.27ZM1473.38,543.71c-1-8.62-1.16-16.45-2.77-24-5.08-23.65-18.41-40.82-42.31-47.12-24.75-6.52-47.33-2-65,18.14-15.82,18.09-19.77,39.44-16.45,62.6,4,27.73,26.6,52.65,58.1,54.81,21.42,1.46,39.91-3.91,54.24-20.46,3.51-4.05,6.13-8.88,9.54-13.92l-20.94-8.68c-13.71,20.22-30.84,26.7-50.55,19.53-17.08-6.21-29-23.88-27.23-40.92Zm-746-51.07-1.12-.55V414.65H703.69V604.22h23v-6.36c0-21.84-.08-43.68,0-65.52.07-11.59,3.84-21.92,11.82-30.46,9.41-10.07,21.15-11.89,34-8.78,11.13,2.72,17.67,10.23,20.26,21.14a55.72,55.72,0,0,1,1.46,12.34c.13,24,.07,48,.07,72v5.6h23.49v-4.87c0-24.84.05-49.68-.06-74.52a101.29,101.29,0,0,0-1.06-13.91c-2.8-19.45-15.29-34.48-32.34-38.55-21.17-5-39.58-.47-54.11,16.51C729.19,490.07,728.29,491.38,727.34,492.64Zm179.93-22.47c-38.65,0-66.92,28.86-67,68.47-.06,40.49,28.07,70,66.72,70,38.38,0,66.64-29.26,66.67-69C973.71,499.1,946.09,470.21,907.27,470.17Zm82.22,69.31c.57,5.12.76,10.32,1.76,15.35,10.69,53.81,69.71,66.73,104.35,41.39,20.15-14.74,27.8-35.52,27.31-60.14-.88-44.18-40.84-78.15-90-62.12C1006.24,482.67,989.72,508.59,989.49,539.48Zm333.81,64.95V414.62h-22.65V604.43Z" transform="translate(-446 -413)"></path>
+        <path id="whoogle-g" d="M1197,667c-4.82-1.08-9.72-1.88-14.44-3.3-17.89-5.39-29.4-17.87-38.17-34.48l19.87-8.29c5.56,6.05,9.84,12.43,15.66,16.71,13.75,10.13,29.07,9.77,44,2.92,14.53-6.66,21.14-19.22,22.32-34.72.47-6.2.08-12.48.08-19.42a14.39,14.39,0,0,0-2.73,2c-19.7,25.91-60.79,27.78-85.69,1.54-26.12-27.55-26.3-81.27,7.68-107.44,24.35-18.76,57.56-15.57,77.53,7.84a6.16,6.16,0,0,0,3.78,2c0-4.23.17-8.46-.05-12.68-.19-3.74,1.36-5.07,5-4.87a74.65,74.65,0,0,0,11,0c4.73-.43,6.37,1.19,6.3,6.11-.27,17.83-.08,35.66-.11,53.5,0,23.67.25,47.35-.32,71-.8,32.89-23.75,57.09-56.45,60.44A26.41,26.41,0,0,0,1208,667Zm50-127.58c-.58-4.61-.86-9.29-1.79-13.83a42.26,42.26,0,0,0-37.31-33.75c-16.16-1.75-33.25,8.46-40.62,24.47-5.34,11.62-5.79,23.83-3.48,36.18,5.94,31.62,42.76,45.77,66.74,25.67C1242.58,568.08,1246.76,554.62,1247,539.42Z" transform="translate(-446 -413)"></path>
+        <path id="whoogle-w" d="M447.16,414.27c7.7,0,15-.19,22.21.19,1.14.06,2.68,2.56,3.12,4.19,6.13,22.44,12.1,44.92,18.13,67.39q9.88,36.84,19.81,73.66a9.31,9.31,0,0,0,2.68,4.69c.72-1.73,1.56-3.41,2.15-5.18q19-57,37.79-114.11c1.25-3.83,2.88-5.45,7-5.08,5.59.5,12.55-1.42,16.45,1.28,3.67,2.53,4.24,9.67,6,14.86q17.14,51.58,34.21,103.21a10,10,0,0,0,3.16,4.88c.55-1.58,1.2-3.14,1.62-4.75q17.87-70,35.6-140.11c1-3.94,2.38-5.52,6.59-5.25,6.12.4,12.27.11,19.19.11-2.18,8.4-4.17,16.2-6.24,24q-21.5,80.68-42.93,161.39c-1,3.92-2.64,5.48-6.79,5.11a80.69,80.69,0,0,0-14,0c-4,.34-5.45-1.39-6.58-4.89q-18.43-57.2-37.12-114.31c-.74-2.28-1.61-4.53-2.42-6.79l-1.35-.06c-.63,1.55-1.37,3.07-1.89,4.67-12.61,38.55-25.29,77.07-37.66,115.7-1.46,4.55-3.42,6.11-8,5.68a82,82,0,0,0-13.48,0c-3.49.26-5-1-5.92-4.29Q473.31,509.34,448,418.3C447.73,417.23,447.55,416.12,447.16,414.27Z" transform="translate(-446 -413)"></path>
+        <path id="whoogle-e" d="M1473.38,543.71H1370c-1.76,17,10.15,34.71,27.23,40.92,19.71,7.17,36.84.69,50.55-19.53l20.94,8.68c-3.41,5-6,9.87-9.54,13.92-14.33,16.55-32.82,21.92-54.24,20.46-31.5-2.16-54.12-27.08-58.1-54.81-3.32-23.16.63-44.51,16.45-62.6,17.64-20.17,40.22-24.66,65-18.14,23.9,6.3,37.23,23.47,42.31,47.12C1472.22,527.26,1472.43,535.09,1473.38,543.71Zm-26.69-19.8c2.09-14-14.21-30.54-31.43-32.19-22.21-2.13-43.06,13.12-43.63,32.19Z" transform="translate(-446 -413)"></path>
+        <path id="whoogle-h" d="M727.34,492.64c.95-1.26,1.85-2.57,2.88-3.77,14.53-17,32.94-21.55,54.11-16.51,17,4.07,29.54,19.1,32.34,38.55a101.29,101.29,0,0,1,1.06,13.91c.11,24.84.06,49.68.06,74.52v4.87H794.3v-5.6c0-24,.06-48-.07-72a55.72,55.72,0,0,0-1.46-12.34c-2.59-10.91-9.13-18.42-20.26-21.14-12.81-3.11-24.55-1.29-34,8.78-8,8.54-11.75,18.87-11.82,30.46-.12,21.84,0,43.68,0,65.52v6.36h-23V414.65h22.53v77.44Z" transform="translate(-446 -413)"></path>
+        <path id="whoogle-o-1" d="M907.27,470.17c38.82,0,66.44,28.93,66.41,69.47,0,39.73-28.29,69-66.67,69-38.65,0-66.78-29.5-66.72-70C840.35,499,868.62,470.13,907.27,470.17Zm43.24,69.26c-.43-3.79-.72-7.61-1.31-11.37-2.94-18.67-19.1-34.56-36.86-36.35-19.93-2-37.94,8.92-45,27.58-3.74,9.85-4.19,20-2.68,30.44,4,27.42,32.55,44.52,57.87,34.41C939.6,577.32,950.2,560.25,950.51,539.43Z" transform="translate(-446 -413)"></path>
+        <path id="whoogle-o-2" d="M989.49,539.48c.23-30.89,16.75-56.81,43.45-65.52,49.13-16,89.09,17.94,90,62.12.49,24.62-7.16,45.4-27.31,60.14-34.64,25.34-93.66,12.42-104.35-41.39C990.25,549.8,990.06,544.6,989.49,539.48Zm110.22-.09c-.48-4.29-.7-8.62-1.5-12.84-3.43-18.06-19.37-33.16-36.57-34.84-20.05-2-37.75,8.9-45,27.62-3.51,9.06-3.74,18.45-3,28,2.23,27.4,30.07,46.21,55.87,37.67C1088,578.9,1099.32,561.53,1099.71,539.39Z" transform="translate(-446 -413)"></path>
+        <path id="whoogle-l" d="M1323.3,604.43h-22.65V414.62h22.65Z" transform="translate(-446 -413)"></path>
+        <path class="cls-1" d="M1247,539.42c-.24,15.2-4.42,28.66-16.46,38.74-24,20.1-60.8,6-66.74-25.67-2.31-12.35-1.86-24.56,3.48-36.18,7.37-16,24.46-26.22,40.62-24.47a42.26,42.26,0,0,1,37.31,33.75C1246.14,530.13,1246.42,534.81,1247,539.42Z" transform="translate(-446 -413)"></path>
+        <path class="cls-1" d="M1446.69,523.91h-75.06c.57-19.07,21.42-34.32,43.63-32.19C1432.48,493.37,1448.78,509.88,1446.69,523.91Z" transform="translate(-446 -413)"></path>
+        <path class="cls-1" d="M950.51,539.43c-.31,20.82-10.91,37.89-28,44.71-25.32,10.11-53.89-7-57.87-34.41-1.51-10.43-1.06-20.59,2.68-30.44,7.08-18.66,25.09-29.59,45-27.58,17.76,1.79,33.92,17.68,36.86,36.35C949.79,531.82,950.08,535.64,950.51,539.43Z" transform="translate(-446 -413)"></path>
+        <path class="cls-1" d="M1099.71,539.39c-.39,22.14-11.74,39.51-30.16,45.6-25.8,8.54-53.64-10.27-55.87-37.67-.78-9.54-.55-18.93,3-28,7.25-18.72,24.95-29.59,45-27.62,17.2,1.68,33.14,16.78,36.57,34.84C1099,530.77,1099.23,535.1,1099.71,539.39Z" transform="translate(-446 -413)"></path>
+    </svg>
+</a>