feat: add customized logo and apply branding colors

tech-by-design · Aug 28, 2024 · c400224 · c400224
1 parent 403b137
commit c400224
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 5 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -7,23 +7,32 @@ export default defineConfig({
 	base: 'docs.techbd.org',
 	integrations: [
 		starlight({
-			title: 'TechBD Docs',
+			title: 'Documentation',
+			logo: {
+				light: '/src/assets/tech-by-design_doc_full-color_small.png',
+				dark: '/src/assets/tech-by-design_doc_full-color_small.png',
+				replacesTitle: true,
+			},
+			customCss: [
+				// Relative path to your custom CSS file
+				'./src/styles/custom.css',
+			  ],
 			head: [{
 				tag: "script",
 				attrs: {
 					type: "module",
 					defer: true
 				},
 				content: `
-					import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; 
-					mermaid.initialize({ startOnLoad: true }); 
+					import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+					mermaid.initialize({ startOnLoad: true });
 					await mermaid.run({
 						querySelector: 'pre[data-language="mermaid"]',
 				  	});`
 			}],
 			editLink: {
 				baseUrl: 'https://github.com/tech-by-design/docs.techbd.org/edit/main/',
-			},		
+			},
 			social: {
 				github: 'https://github.com/tech-by-design/docs.techbd.org',
 			},

diff --git a/src/assets/tech-by-design_doc_full-color_small.png b/src/assets/tech-by-design_doc_full-color_small.png
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Welcome to TechBD
+title: Welcome to Technology-by-Design's Docs
 description: Get started with Technology by Design (TechBD) services
 template: splash
 hero:

diff --git a/src/styles/custom.css b/src/styles/custom.css
@@ -0,0 +1,29 @@
+/* Dark mode colors. */
+:root {
+	--sl-color-accent-low: #131e4f;
+	--sl-color-accent: #3447ff;
+	--sl-color-accent-high: #b3c7ff;
+	--sl-color-white: #ffffff;
+	--sl-color-gray-1: #eceef2;
+	--sl-color-gray-2: #c0c2c7;
+	--sl-color-gray-3: #888b96;
+	--sl-color-gray-4: #545861;
+	--sl-color-gray-5: #353841;
+	--sl-color-gray-6: #24272f;
+	--sl-color-black: #17181c;
+}
+/* Light mode colors. */
+:root[data-theme='light'] {
+	--sl-color-accent-low: #c7d6ff;
+	--sl-color-accent: #03464c;
+	--sl-color-accent-high: #182775;
+	--sl-color-white: #17181c;
+	--sl-color-gray-1: #24272f;
+	--sl-color-gray-2: #353841;
+	--sl-color-gray-3: #545861;
+	--sl-color-gray-4: #888b96;
+	--sl-color-gray-5: #c0c2c7;
+	--sl-color-gray-6: #eceef2;
+	--sl-color-gray-7: #f5f6f8;
+	--sl-color-black: #ffffff;
+}