Add Code Quest logo and brand header

Kyle Parker · Kyle Parker · commit d9f1af2ff1f2 · 2026-03-03T15:15:40.000-06:00
diff --git a/static/logo.svg b/static/logo.svg
@@ -0,0 +1,20 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="64" y1="48" x2="448" y2="464" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#22D3A7"/>
+      <stop offset="1" stop-color="#19A7C9"/>
+    </linearGradient>
+    <linearGradient id="stroke" x1="158" y1="165" x2="349" y2="351" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#F5FBFF"/>
+      <stop offset="1" stop-color="#D7E9FF"/>
+    </linearGradient>
+  </defs>
+
+  <rect x="48" y="48" width="416" height="416" rx="96" fill="url(#bg)"/>
+  <circle cx="256" cy="256" r="146" fill="#0E1A33" fill-opacity="0.92"/>
+  <path d="M320 176H236C210.595 176 190 196.595 190 222V290C190 315.405 210.595 336 236 336H320" stroke="url(#stroke)" stroke-width="28" stroke-linecap="round"/>
+  <path d="M286 224L338 256L286 288" stroke="url(#stroke)" stroke-width="28" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="180" cy="176" r="20" fill="#FFB347"/>
+  <circle cx="150" cy="256" r="14" fill="#7FE7CF"/>
+  <circle cx="180" cy="336" r="20" fill="#FFB347"/>
+</svg>
diff --git a/static/styles.css b/static/styles.css
@@ -67,6 +67,27 @@ body {
   padding: 2rem;
 }
 
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin-bottom: 0.4rem;
+}
+
+.brand-logo {
+  width: 62px;
+  height: 62px;
+  border-radius: 18px;
+  box-shadow: 0 10px 20px rgba(8, 16, 32, 0.35);
+}
+
+.brand-name {
+  margin: 0;
+  color: #d8ecff;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
 h1,
 h2,
 h3 {
@@ -251,4 +272,9 @@ h3 {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  .brand-logo {
+    width: 52px;
+    height: 52px;
+  }
 }
diff --git a/templates/home.html b/templates/home.html
@@ -1,7 +1,13 @@
 {% extends "base.html" %}
 {% block content %}
 <section class="hero">
-  <p class="eyebrow">Code Quest Web</p>
+  <div class="brand">
+    <img src="{{ url_for('static', filename='logo.svg') }}" alt="Code Quest logo" class="brand-logo" />
+    <div>
+      <p class="eyebrow">Code Quest Web</p>
+      <p class="brand-name">Code Quest</p>
+    </div>
+  </div>
   <h1>Learn Python Like a Game</h1>
   <p class="lead">Built for absolute beginners. Every level teaches one concept, checks your answer, and explains why it works.</p>
   <div class="stats">
