Skip to content

fix: move BMB announcement to custom Banner component #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bmadcode merged 1 commit into from
Apr 4, 2026
Merged

fix: move BMB announcement to custom Banner component #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions website/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,6 @@ export default defineConfig({
title: 'BMad Game Dev Studio',
tagline: 'Game development (Unity, Unreal, Godot) module for the BMad Method.',

banner: {
content: 'Build your own BMad modules and share them with the community! <a href="https://bmad-builder-docs.bmad-method.org/tutorials/build-your-first-module/">Get started</a> or <a href="https://bmad-builder-docs.bmad-method.org/how-to/distribute-your-module/">submit to the marketplace</a>.',
},

favicon: '/favicon.ico',

// Social links
Expand Down
26 changes: 20 additions & 6 deletions website/src/components/Banner.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,13 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
<div class="ai-banner">
<span>🤖 AI-optimized docs: <a href={llmsFullUrl}>llms-full.txt</a></span>
</div>
<div class="announce-banner">
<span>🚀 Build your own BMad modules and share them with the community! <a href="https://bmad-builder-docs.bmad-method.org/tutorials/build-your-first-module/">Get started</a> or <a href="https://bmad-builder-docs.bmad-method.org/how-to/distribute-your-module/">submit to the marketplace</a>.</span>
</div>

<style>
.ai-banner {
.ai-banner,
.announce-banner {
width: 100vw;
margin-left: calc(-50vw + 50%);
height: var(--ai-banner-height, 2.75rem);
Copy link
Copy Markdown

@augmentcode augmentcode bot Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

website/src/components/Banner.astro:19 Adding a second banner row means the header’s total banner height is now 2× --ai-banner-height, but website/src/styles/custom.css still computes --sl-nav-height and header.header .header.sl-flex assuming only one banner; this can cause the header/banners to overflow or get clipped.

Severity: medium

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

Expand All @@ -25,31 +29,41 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
font-family: 'Inter', system-ui, sans-serif;
}

.ai-banner span {
.ai-banner span,
.announce-banner span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.ai-banner a {
.ai-banner a,
.announce-banner a {
color: #3b82f6;
text-decoration: none;
font-weight: 600;
}
.ai-banner a:hover {
.ai-banner a:hover,
.announce-banner a:hover {
color: #fafafa;
text-decoration: underline;
}

.announce-banner {
background: #1a2332;
border-bottom: 1px solid #1e3a5f;
}

@media (min-width: 50rem) {
.ai-banner {
.ai-banner,
.announce-banner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}

@media (min-width: 72rem) {
.ai-banner {
.ai-banner,
.announce-banner {
padding-left: 3rem;
padding-right: 3rem;
}
Expand Down
Loading