Skip to content

Commit 57eee63

Browse files
whoabuddyclaude
whoabuddy
and
claude
authored
Complete brand guidelines and force dark mode (#6)
* chore: complete brand guidelines and force dark mode Force dark mode by overriding ThemeProvider and ThemeSelect components, removing the theme toggle and fixing light-mode text visibility (#5). Add remaining brand elements from #3: secondary/tertiary color variables, orange focus ring styling, background pattern overlay, and Roc Grotesk font-face declarations (commented out pending licensed font files). Closes #5 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * chore: load Roc Grotesk from aibtc.com CDN Enable @font-face declarations using the aibtc.com font CDN (same pattern as x402-api, x402-sponsor-relay, and worker-logs). Override --sl-font and --sl-font-heading with Roc Grotesk family. Remove unused src/fonts/ directory. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 927e006 commit 57eee63

5 files changed

Lines changed: 100 additions & 12 deletions

File tree

‎astro.config.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ export default defineConfig({
1717
},
1818
favicon: '/favicon.png',
1919
customCss: ['./src/styles/custom.css'],
20+
components: {
21+
ThemeProvider: './src/components/ThemeProvider.astro',
22+
ThemeSelect: './src/components/ThemeSelect.astro',
23+
},
2024
social: [
2125
{ icon: 'github', label: 'GitHub', href: 'https://github.com/aibtcdev' },
2226
{ icon: 'x.com', label: 'X', href: 'https://x.com/aibtcdev' },

‎src/assets/aibtcdev-pattern-3-640px.png‎

195 KB
Loading

‎src/components/ThemeProvider.astro‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
// Force dark mode — no theme switching.
3+
// Overrides the default Starlight ThemeProvider.
4+
---
5+
6+
<script is:inline>
7+
document.documentElement.dataset.theme = 'dark';
8+
</script>

‎src/components/ThemeSelect.astro‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
// Empty override: removes the theme toggle from the header.
3+
// The site is forced to dark mode via ThemeProvider override.
4+
---

‎src/styles/custom.css‎

Lines changed: 84 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,46 @@
1-
/* AIBTC Color Palette — see aibtcdev/branding for official values */
1+
/* AIBTC Brand Styles — see aibtcdev/branding for official values */
2+
3+
/* ----------------------------------------------------------------
4+
Typography — Roc Grotesk (served from aibtc.com CDN)
5+
---------------------------------------------------------------- */
6+
@font-face {
7+
font-family: 'Roc Grotesk';
8+
src: url('https://aibtc.com/fonts/RocGrotesk-Regular.woff2') format('woff2');
9+
font-weight: 400;
10+
font-style: normal;
11+
font-display: swap;
12+
}
13+
14+
@font-face {
15+
font-family: 'Roc Grotesk';
16+
src: url('https://aibtc.com/fonts/RocGrotesk-WideMedium.woff2') format('woff2');
17+
font-weight: 500;
18+
font-style: normal;
19+
font-display: swap;
20+
}
21+
22+
@font-face {
23+
font-family: 'Roc Grotesk Wide';
24+
src: url('https://aibtc.com/fonts/RocGrotesk-ExtraWideMedium.woff2') format('woff2');
25+
font-weight: 500;
26+
font-style: normal;
27+
font-display: swap;
28+
}
29+
30+
/* ----------------------------------------------------------------
31+
Color Palette
32+
---------------------------------------------------------------- */
233
:root {
34+
/* Accent (orange) */
335
--sl-color-accent-low: #1a0800;
436
--sl-color-accent: #FF4F03;
537
--sl-color-accent-high: #FF9B6B;
38+
39+
/* Brand secondary / tertiary */
40+
--aibtc-blue: #0634D0;
41+
--aibtc-purple: #A855F7;
42+
43+
/* Neutrals */
644
--sl-color-white: #ffffff;
745
--sl-color-gray-1: #eeeeee;
846
--sl-color-gray-2: #c2c2c2;
@@ -11,9 +49,15 @@
1149
--sl-color-gray-5: #383838;
1250
--sl-color-gray-6: #1a1a1a;
1351
--sl-color-black: #000000;
52+
53+
/* Typography */
54+
--sl-font: 'Roc Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
55+
--sl-font-heading: 'Roc Grotesk Wide', 'Roc Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
1456
}
1557

16-
/* Dark mode (default) */
58+
/* ----------------------------------------------------------------
59+
Dark mode (forced — only mode)
60+
---------------------------------------------------------------- */
1761
:root[data-theme='dark'] {
1862
--sl-color-bg: #000000;
1963
--sl-color-bg-nav: #0a0a0a;
@@ -22,14 +66,9 @@
2266
--sl-color-hairline: #2a2a2a;
2367
}
2468

25-
/* Light mode */
26-
:root[data-theme='light'] {
27-
--sl-color-bg: #ffffff;
28-
--sl-color-bg-nav: #f5f5f5;
29-
--sl-color-bg-sidebar: #f5f5f5;
30-
}
31-
32-
/* Link styling */
69+
/* ----------------------------------------------------------------
70+
Links
71+
---------------------------------------------------------------- */
3372
a {
3473
color: var(--sl-color-accent);
3574
}
@@ -38,12 +77,24 @@ a:hover {
3877
color: var(--sl-color-accent-high);
3978
}
4079

41-
/* Site title styling */
80+
/* ----------------------------------------------------------------
81+
Focus ring — AIBTC orange
82+
---------------------------------------------------------------- */
83+
:focus-visible {
84+
outline: 2px solid var(--sl-color-accent);
85+
outline-offset: 2px;
86+
}
87+
88+
/* ----------------------------------------------------------------
89+
Site title
90+
---------------------------------------------------------------- */
4291
.site-title {
4392
font-weight: 700;
4493
}
4594

46-
/* Hero button styling - dark text on orange buttons */
95+
/* ----------------------------------------------------------------
96+
Hero buttons — dark text on orange
97+
---------------------------------------------------------------- */
4798
.hero a.primary {
4899
background-color: var(--sl-color-accent);
49100
color: var(--sl-color-black);
@@ -53,3 +104,24 @@ a:hover {
53104
background-color: var(--sl-color-accent-high);
54105
color: var(--sl-color-black);
55106
}
107+
108+
/* ----------------------------------------------------------------
109+
Background pattern overlay
110+
Uses the brand pattern at very low opacity so content remains
111+
readable. Applied only to the main content area.
112+
---------------------------------------------------------------- */
113+
.main-pane {
114+
position: relative;
115+
}
116+
117+
.main-pane::before {
118+
content: '';
119+
position: absolute;
120+
inset: 0;
121+
background-image: url('../assets/aibtcdev-pattern-3-640px.png');
122+
background-repeat: repeat;
123+
background-size: 640px;
124+
opacity: 0.03;
125+
pointer-events: none;
126+
z-index: 0;
127+
}

0 commit comments

Comments
 (0)