create & use logo

src/assets.rs

@@ -67,6 +67,10 @@ pub static STORE: LazyLock<StaticAssetStore> = LazyLock::new(|| {
         "password-toggle.js" => "../static/password-toggle.js",
         "htmx.min.js" => "../static/htmx.min.js",
         "htmx-ws.min.js" => "../static/htmx-ws.min.js",
+        "favicon.ico" => "../static/favicon.ico",
+        "favicon-32x32.png" => "../static/favicon-32x32.png",
+        "apple-touch-icon.png" => "../static/apple-touch-icon.png",
+        "logo.svg" => "../static/logo.svg",
     }
 });
 

src/http.rs

@@ -342,8 +342,11 @@ async fn static_asset(Path(path): Path<String>) -> Response {
     let Some(asset) = assets::STORE.get(&path) else {
         return StatusCode::NOT_FOUND.into_response();
     };
-    let mime = match path.as_str() {
+    let mime = match path.rsplit('.').next() {
-        "style.css" => "text/css",
+        Some("css") => "text/css",
+        Some("ico") => "image/x-icon",
+        Some("png") => "image/png",
+        Some("svg") => "image/svg+xml",
         _ => "application/javascript",
     };
     let mut response = ([(header::CONTENT_TYPE, mime)], asset.data).into_response();

src/views.rs

@@ -1308,13 +1308,16 @@ fn page(title: &str, user: Option<&User>, content: Markup) -> Markup {
                 meta charset="utf-8";
                 meta name="viewport" content="width=device-width, initial-scale=1";
                 title { (title) " · Sustenance" }
+                link rel="icon" href=(crate::assets::url("favicon.ico")) sizes="any";
+                link rel="icon" type="image/png" href=(crate::assets::url("favicon-32x32.png")) sizes="32x32";
+                link rel="apple-touch-icon" href=(crate::assets::url("apple-touch-icon.png"));
                 link rel="stylesheet" href=(crate::assets::url("style.css"));
                 script src=(crate::assets::url("htmx.min.js")) {}
                 script src=(crate::assets::url("htmx-ws.min.js")) {}
             }
             body hx-boost="true" {
                 header class="site-header" {
-                    a class="brand" href="/lists" { span class="brand-mark" { "S" } "Sustenance" }
+                    a class="brand" href="/lists" { img class="brand-mark" src=(crate::assets::url("logo.svg")) alt="Sustenance logo"; "Sustenance" }
                     @if let Some(user) = user {
                         nav class="site-nav" {
                             a href="/lists" { "Lists" }

static/logo.svg

@@ -0,0 +1,143 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 64 64"
+  role="img"
+  aria-labelledby="title"
+>
+  <title id="title">Sustenance grocery bag with produce</title>
+
+  <!-- Background -->
+  <rect width="64" height="64" rx="12" fill="#286247"/>
+
+  <!-- Back of the paper bag -->
+  <path
+    d="
+      M7 27
+      L16 22
+      L24 26
+      L32 22
+      L40 25
+      L49 21
+      L57 25
+      L47 31
+      L39 28
+      L31 32
+      L23 27
+      L16 31
+      Z
+    "
+    fill="#F2D39B"
+  />
+
+  <!-- Back rim -->
+  <path
+    d="M7 27 16 22 24 26 32 22 40 25 49 21 57 25"
+    fill="none"
+    stroke="#1F4938"
+    stroke-width="2.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+
+  <!-- Leafy greens -->
+  <path
+    d="M42 28C39 21 42 12 49 7c2 3 2 6 1 9 3-2 6-2 8 0-1 5-5 9-12 13Z"
+    fill="#8EC866"
+    stroke="#1F4938"
+    stroke-width="2.5"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M45 27 53 15M47 22l7-1M49 18l-1-5"
+    fill="none"
+    stroke="#1F4938"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+
+  <!-- Carrot leaves -->
+  <path
+    d="
+      M17 14c-2-4-1-7 0-10 3 3 4 6 3 10
+      m0 0c0-5 2-8 5-10 1 5-1 8-5 11
+    "
+    fill="#8EC866"
+    stroke="#1F4938"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+
+  <!-- Carrot -->
+  <path
+    d="M13 18c3-4 9-5 13-2l-3 20-5 2Z"
+    fill="#F29A3F"
+    stroke="#1F4938"
+    stroke-width="2.5"
+    stroke-linejoin="round"
+  />
+  <path
+    d="m16 24 7-2m-6 7 5-2"
+    fill="none"
+    stroke="#1F4938"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+
+  <!-- Tomato -->
+  <path
+    d="M27 25c0-6 4-10 10-10s10 4 10 10c0 7-4 12-10 12S27 32 27 25Z"
+    fill="#E65A46"
+    stroke="#1F4938"
+    stroke-width="2.5"
+  />
+  <path
+    d="m37 15-4 5 4-1 4 2-1-5"
+    fill="#78B75B"
+    stroke="#1F4938"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+
+  <!-- Front and sides of the paper bag -->
+  <path
+    d="
+      M7 27
+      L16 31
+      L23 27
+      L31 32
+      L39 28
+      L47 31
+      L57 25
+      L55 51
+      L45 59
+      L11 51
+      Z
+    "
+    fill="#F2D39B"
+    stroke="#1F4938"
+    stroke-width="2.75"
+    stroke-linejoin="round"
+  />
+
+  <!-- Front opening edge -->
+  <path
+    d="M7 27 16 31 23 27 31 32 39 28 47 31 57 25"
+    fill="none"
+    stroke="#1F4938"
+    stroke-width="2.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+
+  <!-- Side-panel seam and paper creases -->
+  <path
+    d="M47 31 45 59M45 59l10-8M15 36l1 9"
+    fill="none"
+    stroke="#1F4938"
+    stroke-width="2.25"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

static/style.css

@@ -38,7 +38,7 @@ a { color: inherit; }
 }
 
 .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -.03em; }
-.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px 11px 11px 3px; background: var(--deep-sage); color: white; transform: rotate(-6deg); }
+.brand-mark { display: block; width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
 .site-nav { display: flex; align-items: center; gap: 6px; }
 .site-nav a {
   padding: 8px 14px;