Update Alu logo colors, and fix background in macchiato and mocha themes.

public/favicon.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 	 viewBox="0 0 512 512" xml:space="preserve">
-<path style="fill:#1E0478;" d="M494.176,64.787c15.4,22.42,20.974,52.758,16.123,88.421c-4.751,34.914-19.365,74.181-42.346,113.946
+<path style="fill:#7067a1;" d="M494.176,64.787c15.4,22.42,20.974,52.758,16.123,88.421c-4.751,34.914-19.365,74.181-42.346,113.946
 	c52.234,90.354,58.519,172.178,16.073,214.624c-18.729,18.729-45.127,27.981-76.537,27.981c-39.777,0-87.598-14.839-138.087-44.017
 	c-50.489,29.178-98.309,44.017-138.087,44.017c-31.411,0-57.796-9.252-76.525-27.981c-42.458-42.434-36.186-124.245,16.036-214.611
 	c-10.287-17.806-18.904-35.525-25.724-52.858c-0.262,0-0.511,0.012-0.773,0.012C19.889,214.321,0,194.444,0,169.992
@@ -24,14 +24,14 @@
 	c-39.728,74.268-45.339,140.805-13.442,172.689C104.307,496.043,170.831,490.431,245.112,450.704z M63.719,169.992
 	c0-10.686-8.691-19.39-19.39-19.39c-10.686,0-19.39,8.704-19.39,19.39c0,10.699,8.704,19.39,19.39,19.39
 	C55.028,189.382,63.719,180.691,63.719,169.992z"/>
-<path style="fill:#9B8CCC;" d="M453.788,27.179c10.686,0,19.39,8.704,19.39,19.39s-8.704,19.39-19.39,19.39
+<path style="fill:#9e8feb;" d="M453.788,27.179c10.686,0,19.39,8.704,19.39,19.39s-8.704,19.39-19.39,19.39
 	c-10.686,0-19.39-8.704-19.39-19.39S443.101,27.179,453.788,27.179z"/>
-<path style="fill:#1E0478;" d="M269.402,201.253c36.348,0,65.913,29.565,65.913,65.913c0,36.336-29.565,65.913-65.913,65.913
+<path style="fill:#7067a1;" d="M269.402,201.253c36.348,0,65.913,29.565,65.913,65.913c0,36.336-29.565,65.913-65.913,65.913
 	c-36.336,0-65.901-29.577-65.901-65.913C203.501,230.818,233.066,201.253,269.402,201.253z M310.377,267.166
 	c0-22.595-18.38-40.975-40.975-40.975c-22.582,0-40.962,18.38-40.962,40.975s18.38,40.975,40.962,40.975
 	C291.997,308.141,310.377,289.761,310.377,267.166z"/>
-<path style="fill:#94E7EF;" d="M269.402,226.192c22.595,0,40.975,18.38,40.975,40.975s-18.38,40.975-40.975,40.975
+<path style="fill:#fbb0ff;" d="M269.402,226.192c22.595,0,40.975,18.38,40.975,40.975s-18.38,40.975-40.975,40.975
 	c-22.582,0-40.962-18.38-40.962-40.975S246.82,226.192,269.402,226.192z"/>
-<path style="fill:#9B8CCC;" d="M44.329,150.602c10.699,0,19.39,8.704,19.39,19.39c0,10.699-8.691,19.39-19.39,19.39
+<path style="fill:#9e8feb;" d="M44.329,150.602c10.699,0,19.39,8.704,19.39,19.39c0,10.699-8.691,19.39-19.39,19.39
 	c-10.686,0-19.39-8.691-19.39-19.39C24.939,159.306,33.643,150.602,44.329,150.602z"/>
 </svg>

src/components/UI/Header.astro

@@ -7,7 +7,7 @@ const t = i18n.useTranslations(lang);
 <nav class="top-header">
   <div id="title-background" class="title-background">
     <div class="left">
-      <a href={`/${lang}/`} class="header-item">{t("nav.brand")}</a>
+      <a href={`/${lang}/`} class="header-item flex-item"><img class="nav-img" src="/favicon.svg"/><span>{t("nav.brand")}</span></a>
     </div>
     <div class="right">
       <a href={`/${lang}/marketplace/`} class="header-item">Marketplace</a>
@@ -66,4 +66,15 @@ const t = i18n.useTranslations(lang);
   .header-item:hover {
     color: var(--text-color-accent);
   }
+
+  .nav-img {
+    height: 50px;
+  }
+  
+  .flex-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
 </style>

src/layouts/Layout.astro

@@ -147,6 +147,11 @@ const DESCRIPTION =
         background-size: calc(1.732 * var(--s)) var(--s);
       }
       
+      html[data-theme="macchiato"], html[data-theme="mocha"] {
+        --c2: color-mix(in srgb, var(--dropdown-background-color), black var(--darken));
+        --c3: color-mix(in srgb, var(--accent-color-brighter), black var(--darken));
+      }
+
       body {
         /* background-color: var(--background-color); */
         max-width: 100vw;

src/pages/[lang]/index.astro

@@ -23,22 +23,22 @@ export function getStaticPaths() {
       <div class="form-wrapper">
         <form class="url-input-form" id="url-input-form">
           <div id="loading-content">Loading Content...</div>
-          <Input className="url-input" inputName="url" placeholder={t("menu.search")} defaultStyles={false} transition:persist autocomplete="off" />
+          <Input className="url-input" inputName="url" placeholder={t("menu.search")} defaultStyles={false} autocomplete="off" />
           <div id="search-suggestions"></div>
         </form>
 
         <div id="top-bar">
           <div class="top-bar-left">
-            <button id="close-button">Close</button>
+            <img id="proxied-favicon" alt="favicon" />
+            <span id="url-text"></span>
+          </div>
+          <div class="top-bar-right">
             <div class="nav-container">
               <img width="32px" height="32px" id="nav-backwards" src="/img/nav/backwards.svg" alt="Backwards Arrow" />
               <img width="32px" height="32px" id="nav-forwards" src="/img/nav/forwards.svg" alt="Forwards Arrow" />
               <img width="32px" height="32px" id="nav-share" src="/img/nav/share.svg" alt="Share Page" />
             </div>
-          </div>
+            <button id="close-button">Close</button>
-          <div class="top-bar-right">
-            <img id="proxied-favicon" alt="favicon" />
-            <span id="url-text"></span>
           </div>
         </div>
         <iframe title="proxy-iframe" id="proxy-frame"></iframe>
@@ -51,10 +51,6 @@ export function getStaticPaths() {
           <h2>{t("faq.whatIsAProxy")}</h2>
           <p>{t("faq.whatIsAProxy.answer")}</p>
         </FaqCard>
-        <!-- <div class="faq-card">
-          <h2>{t("faq.whatIsAProxy")}</h2>
-          <p>{t("faq.whatIsAProxy.answer")}</p>
-        </div> -->
         <FaqCard>
           <h2>{t("faq.contributeToAlu")}</h2>
           <p>