docs: align SQLBuild logos with approved branding

README.md

@@ -1,5 +1,8 @@
 <p align="center">
-  <img src="https://raw.githubusercontent.com/sqlstack-io/sqlbuild/main/.github/sqlbuild-logo-clean.png" alt="SQLBuild" width="100%">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/sqlstack-io/sqlbuild/main/website/public/assets/logo-dark.png">
+    <img src="https://raw.githubusercontent.com/sqlstack-io/sqlbuild/main/website/public/assets/logo-light.png" alt="SQLBuild" width="600">
+  </picture>
 </p>
 
 <p align="center">

website/public/index.html

@@ -36,8 +36,8 @@
 		<header class="site-header">
 			<div class="wrap">
 				<a class="brand" href="/" aria-label="SQLBuild home">
-					<img class="logo-for-light" src="assets/logo-light.png" alt="SQLBuild" width="111" height="30" />
-					<img class="logo-for-dark" src="assets/logo-dark.png" alt="SQLBuild" width="111" height="30" />
+					<img class="logo-for-light" src="assets/logo-light.png" alt="SQLBuild" width="116" height="30" />
+					<img class="logo-for-dark" src="assets/logo-dark.png" alt="SQLBuild" width="116" height="30" />
 				</a>
 				<nav class="nav" aria-label="Main">
 					<a class="hide-sm" href="#how">How it works</a>

website/src/components/SiteTitle.astro

@@ -5,8 +5,8 @@ import logoLight from '../assets/logo-light.png';
 
 <div class="site-title">
 	<a class="logo" href="/" aria-label="SQLBuild home">
-		<img class="logo-for-light" src={logoLight.src} alt="SQLBuild" width={111} height={30} />
-		<img class="logo-for-dark" src={logoDark.src} alt="SQLBuild" width={111} height={30} />
+		<img class="logo-for-light" src={logoLight.src} alt="SQLBuild" width={116} height={30} />
+		<img class="logo-for-dark" src={logoDark.src} alt="SQLBuild" width={116} height={30} />
 	</a>
 	<a class="docs" href="/docs/">Docs</a>
 </div>