feat: add tornado logo to header, switch wordmark to ink for contrast

Author: danielnaab

src/design/assets/flexion_tornado.svg

@@ -6,7 +6,14 @@ export function Header({ config }: { config: SiteConfig }) {
   return (
     <header class="site-header">
       <a href={url('/', config.basePath)} class="site-brand">
-        Flexion Labs
+        <img
+          src={url('/assets/flexion_tornado.svg', config.basePath)}
+          alt=""
+          class="site-brand__logo"
+          width="38"
+          height="38"
+        />
+        <span>Flexion Labs</span>
       </a>
       <nav aria-label="Primary">
         <ul>

src/design/components/header/index.tsx

@@ -0,0 +1,14 @@
+.site-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-weight: 700;
+  font-size: var(--step-1);
+  text-decoration: none;
+  color: var(--color-ink);
+}
+.site-brand__logo {
+  block-size: 1.8em;
+  inline-size: auto;
+  display: block;
+}

src/design/components/header/styles.css

@@ -32,12 +32,6 @@
     display: flex;
     gap: var(--space-5);
   }
-  .site-brand {
-    font-weight: 700;
-    font-size: var(--step-1);
-    text-decoration: none;
-    color: var(--color-accent);
-  }
   .site-footer {
     inline-size: 100%;
     max-inline-size: none;