feat: use the product logo for the brand mark + favicon

assets/style/_components.scss

@@ -149,7 +149,7 @@ a.card:hover {
 	display: grid; place-items: center;
 	border-radius: var(--radius-sm);
 	background: var(--color-primary-100);
-	color: var(--color-primary-600);
+	color: var(--color-icon-brand);
 	margin-bottom: 0.4rem;
 }
 .card-icon svg { width: 1.15rem; height: 1.15rem; }

assets/style/_layout.scss

@@ -26,16 +26,12 @@
 	color: var(--color-content-inv);
 	letter-spacing: -0.01em;
 }
-.navbar-brand .mark {
-	width: 1.6rem;
-	height: 1.6rem;
-	display: grid;
-	place-items: center;
-	border-radius: var(--radius-sm);
-	background: linear-gradient(150deg, var(--color-primary-500), var(--color-primary-700));
-	box-shadow: 0 0 0 1px hsla(335, 80%, 53%, 0.35), 0 4px 14px -4px hsla(335, 80%, 53%, 0.7);
+.navbar-brand picture { display: inline-flex; }
+.navbar-brand .brand-logo {
+	width: 1.75rem;
+	height: 1.75rem;
+	display: block;
 }
-.navbar-brand .mark svg { width: 1rem; height: 1rem; color: #fff; }
 .navbar-brand .tag {
 	font-family: var(--font-family-mono);
 	font-size: var(--font-size-100);

assets/style/_theme.scss

@@ -14,6 +14,11 @@
 	--color-primary-800: hsl(335, 72%, 31%);
 	--color-primary-900: hsl(335, 72%, 25%);
 
+	/* Brand-tinted icon glyph (card tiles). Points at primary-600 on Paper; dark
+	 * mode re-points it to the console's signal magenta (hsl 336 86% 60%) so the
+	 * icons read the same as the console rather than the brighter primary-600. */
+	--color-icon-brand: var(--color-primary-600);
+
 	/* Secondary — console accent cyan */
 	--color-secondary-300: hsl(190, 80%, 80%);
 	--color-secondary-400: hsl(189, 86%, 50%);
@@ -122,6 +127,9 @@ html.dark {
 	--color-primary-600: hsl(335, 85%, 72%);
 	--color-primary-700: hsl(335, 80%, 78%);
 
+	/* Match the console's dark signal magenta for brand-tinted icon glyphs. */
+	--color-icon-brand: hsl(336, 86%, 60%);
+
 	/* Shadow on Ink reads more as a glow than a drop. */
 	--color-shadow: 230 60% 2%;
 	--shadow-panel: 0 1px 2px hsl(var(--color-shadow) / 0.4), 0 8px 24px -12px hsl(var(--color-shadow) / 0.6);

layouts/_default/baseof.html

@@ -7,7 +7,8 @@
 	{{- if .IsHome }}<title>{{ .Site.Title }} — Deploy and run containers</title>
 	{{- else }}<title>{{ $title }} · {{ .Site.Title }}</title>{{ end }}
 	<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
-	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+	<link rel="icon" type="image/webp" href="/favicon.webp">
+	<link rel="icon" type="image/png" href="/favicon.png">
 	<script>
 		// Apply the persisted (or system-preferred) theme before first paint so
 		// the page never flashes the wrong colors. The "theme-ready" class is

layouts/partials/navbar.html

@@ -3,7 +3,10 @@
 	<label class="navbar-burger" for="nav-toggle" aria-label="Toggle navigation">{{ partial "icon" "menu" }}</label>
 	{{- end }}
 	<a class="navbar-brand" href="/">
-		<span class="mark">{{ partial "icon" "rocket" }}</span>
+		<picture>
+			<source srcset="/img/logo.webp" type="image/webp">
+			<img class="brand-logo" src="/img/logo.png" width="26" height="26" alt="Deploys.app" decoding="async">
+		</picture>
 		Deploys.app
 		<span class="tag">Docs</span>
 	</a>