feat: recoloured svg logo

Author: fizzyizzy05

sass/_header.scss

@@ -10,9 +10,9 @@
     a.header-link:hover {
         color: color.adjust(
             $apollo-theme-colour,
-            $saturation: -50%,
-            $lightness: 20%,
-        )
+            $saturation: -30%,
+            $lightness: 30%,
+        );
     }
 }
 
@@ -43,6 +43,7 @@ header {
 
             .apollo-logo {
                 max-height: 32px;
+                transition: filter 0.15s;
             }
         }
 

static/images/logo.svg

@@ -14,28 +14,27 @@
     <header class="header">
       <div class="content">
         <nav>
-          <a
-          {% if current_url | default(value="/") | trim_end_matches(pat='/') | safe == get_url(path='/') %}
-            class="header-link active"
-          {% else %}
-            class="header-link"
-          {% endif %}
-          id="header-home-link" href="/" aria-label="Go the Home Page" >
-            <picture class="apollo-logo">
-              <source srcset="/images/logo_dark.svg" media="(prefers-color-scheme: light)"/>
-              <img class="apollo-logo" src="/images/logo.svg" alt="The Apollo Logo">
-            </picture>
+          <a {% if current_url | default(value="/" ) | trim_end_matches(pat='/' ) | safe==get_url(path='/' ) %}
+            class="header-link active" {% else %} class="header-link" {% endif %} id="header-home-link" href="/"
+            aria-label="Go the Home Page">
+            <svg class="apollo-logo" width="32" height="32" viewBox="0 0 513 512" fill="none" xmlns="http://www.w3.org/2000/svg" alt="">
+              <path
+                d="M256 512C114.615 512 0 397.385 0 256C0.000130659 115.996 112.387 2.24137 251.865 0.0324797C254.593 -0.0107334 257.322 0.429396 259.917 1.27289C283.869 9.05725 283.869 42.9424 259.917 50.7267C257.322 51.5701 254.595 51.986 251.867 52.0424C143.318 54.2869 56.0001 144.742 56 256C56 368.666 145.543 460 256 460C364.952 460 453.556 371.138 455.95 260.594C456.016 257.562 456.494 254.534 457.462 251.66C465.9 226.612 501.287 226.498 510.308 251.341C511.423 254.411 512.015 257.689 511.953 260.954C509.313 400.052 395.73 512 256 512Z"
+                fill="currentColor" />
+              <path
+                d="M157.891 301.892C157.901 301.86 170.17 259.496 195.652 264.131C202.222 265.327 209.052 268.286 215.576 272.443C208.726 276.563 204.837 287.846 204.819 287.899L199.226 312.716C198.904 314.149 200.185 315.43 201.618 315.107L226.434 309.514C226.465 309.504 237.767 305.613 241.89 298.755C246.049 305.281 249.009 312.113 250.205 318.684C253.427 336.401 233.93 347.731 221.738 352.994C215.701 355.599 209.093 356.288 202.525 355.981C186.176 355.216 169.858 358.033 154.712 364.233L150.234 366.066C148.784 366.66 147.245 365.43 147.504 363.884L157.891 301.892Z"
+                fill="currentColor" />
+              <path
+                d="M472.847 0.240479C495.33 -2.37374 514.367 16.7202 511.761 39.2698C507.003 80.4283 479.811 109.144 452.491 140.225L348.786 258.209L368.04 321.81L326.56 369L280.035 323.395L278.705 286L224.98 232.332H190.178L144 186.08L191.05 144.47L254.582 164.668L372.219 59.6555C403.208 32.2552 431.81 5.01249 472.847 0.240479ZM407 77.0002C390.431 77.0002 377 90.4317 377 107C377 123.569 390.432 137 407 137C423.568 137 437 123.569 437 107C437 90.4317 423.569 77.0002 407 77.0002Z"
+                fill="currentColor" />
+            </svg>
           </a>
 
           <div class="links">
             {% for link in config.extra.links %}
-              <a
-              {% if current_url | default(value="/") | trim_end_matches(pat='/') | safe == get_url(path=link.url) %}
-                class="header-link active"
-              {% else %}
-                class="header-link"
-              {% endif %}
-              href="{{link.url}}">{{ link.label }}</a>
+            <a {% if current_url | default(value="/" ) | trim_end_matches(pat='/' ) | safe==get_url(path=link.url) %}
+              class="header-link active" {% else %} class="header-link" {% endif %} href="{{link.url}}">{{ link.label
+              }}</a>
             {% endfor %}
           </div>
         </nav>
@@ -55,33 +54,51 @@
       <div id="footer-box">
         <div id="copyright">
           <picture class="apollo-logo">
-            <source srcset="/images/logomark_dark.svg" media="(prefers-color-scheme: light)"/>
+            <source srcset="/images/logomark_dark.svg" media="(prefers-color-scheme: light)" />
             <img class="apollo-logo" src="/images/logomark.svg" alt="The Apollo Logo">
           </picture>
           <p>© 2026 Apollo Contributors</p>
-          <p>Website licensed under the <a href="https://github.com/apollo-linux/apollo-linux.github.io/blob/main/COPYING">BSD 3-Clause License</a>.</p>
+          <p>Website licensed under the <a
+              href="https://github.com/apollo-linux/apollo-linux.github.io/blob/main/COPYING">BSD 3-Clause License</a>.
+          </p>
         </div>
 
         <div id="links">
           <div>
             <h1>Apollo</h1>
-            
+
             <ul class="link-list">
-              <a href="/"><li>Homepage</li></a>
-              <a href="/downloads"><li>Downloads</li></a>
-              <a href="https://docs.getapollo.dev"><li>Documentation</li></a>
-              <a href="https://docs.getapollo.dev/posts"><li>Blog</li></a>
+              <a href="/">
+                <li>Homepage</li>
+              </a>
+              <a href="/downloads">
+                <li>Downloads</li>
+              </a>
+              <a href="https://docs.getapollo.dev">
+                <li>Documentation</li>
+              </a>
+              <a href="https://docs.getapollo.dev/posts">
+                <li>Blog</li>
+              </a>
             </ul>
           </div>
 
           <div>
             <h1>Community</h1>
 
             <ul class="link-list">
-              <a href="https://discord.gg/UkDX3kXCKf"><li>Discord</li></a>
-              <a href="https://bsky.app/profile/getapollo.dev"><li>Bluesky</li></a>
-              <a href="https://github.com/apollo-linux/"><li>GitHub</li></a>
-              <a href="https://docs.getapollo.dev/docs/about/code-of-conduct/"><li>Code of Conduct</li></a>
+              <a href="https://discord.gg/UkDX3kXCKf">
+                <li>Discord</li>
+              </a>
+              <a href="https://bsky.app/profile/getapollo.dev">
+                <li>Bluesky</li>
+              </a>
+              <a href="https://github.com/apollo-linux/">
+                <li>GitHub</li>
+              </a>
+              <a href="https://docs.getapollo.dev/docs/about/code-of-conduct/">
+                <li>Code of Conduct</li>
+              </a>
             </ul>
           </div>
         </div>