Skip to content

doc(Home): add responsive support for logo image #6549

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
merged 5 commits into from
Aug 5, 2025
Merged

doc(Home): add responsive support for logo image #6549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
431a2c5
refactor: 精简样式
ArgoZhang Aug 3, 2025
d87aca7
refactor: 增加响应式支持
ArgoZhang Aug 3, 2025
aa1e770
Merge branch 'main' into doc-home
ArgoZhang Aug 4, 2025
313f24f
refactor: 更新样式
ArgoZhang Aug 4, 2025
903cae7
doc: 微调 OTP 样式
ArgoZhang Aug 4, 2025
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
16 changes: 7 additions & 9 deletions src/BootstrapBlazor.Server/Components/Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,20 @@
<section class="bd-masthead">
<div class="container-xxl bd-gutter">
<div class="col-md-8 mx-auto text-center">
<a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174" rel="noopener" target="_blank">
<span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 mb-lg-0 rounded-5 masthead-notice">
<a class="d-inline-flex text-dark text-decoration-none" href="https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174" rel="noopener" target="_blank">
<span class="py-2 px-3 rounded-5 masthead-notice">
@Localizer["Support"]
</span>
</a>
<img src="./favicon.png" alt="bootstrap-blazor" class="bb-logo d-none d-sm-block mx-auto my-5">
<img src="./favicon.png" alt="bootstrap-blazor" class="bb-logo d-sm-block mx-auto my-5">
<h1 class="mb-3 fw-semibold">@Localizer["Title"]</h1>
<p class="lead mb-4">
@Localizer["SubTitle"]
</p>
<div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-3 mb-4">
<a href="introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold">
<i class="fa-solid fa-book-open"></i>
<span class="ms-2">@Localizer["Docs"]</span>
</a>
</div>
<a href="introduction" class="btn btn-lg bd-btn-lg btn-bd-primary mb-4 d-inline-flex align-items-center justify-content-center fw-semibold">
<i class="fa-solid fa-book-open"></i>
<span class="ms-2">@Localizer["Docs"]</span>
</a>
<p class="text-body-secondary mb-0">
Currently <strong>@_versionString</strong>
<span class="px-1">·</span>
Expand Down
10 changes: 7 additions & 3 deletions src/BootstrapBlazor.Server/Components/Pages/Index.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
--bd-pink-rgb: 214, 51, 132;
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
--bd-accent-rgb: 255, 228, 132;
padding-top: calc(3rem + var(--bs-header-height));
padding-top: 3rem;
background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 85%), radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.5), transparent 50%), radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), 0.5), transparent 50%), radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), 0.5), transparent 50%), radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), 0.5), transparent 50%);
margin-top: calc(0px - var(--bs-header-height));
}
Expand Down Expand Up @@ -88,10 +88,14 @@
}

@media (min-width: 768px) {
.bd-masthead .lead {
font-size: calc(1.275rem + .3vw);
.bd-masthead {
padding-top: calc(3rem + var(--bs-header-height));
}

.bd-masthead .lead {
font-size: calc(1.275rem + .3vw);
}

.welcome-header {
margin-top: 0;
margin-bottom: 0;
Expand Down
2 changes: 2 additions & 0 deletions src/BootstrapBlazor.Server/Components/Samples/OtpInputs.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@
text-align: center;
}

@@media(max-width: 768px) {
.otp-input-demo .bb-otp-input {
--bb-otp-item-width: 32px;
--bb-otp-font-size: 1.2em;
}
}
Comment on lines +14 to +19
Copy link
Contributor

@sourcery-ai sourcery-ai bot Aug 5, 2025

Choose a reason for hiding this comment

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

issue (typo): There is a typo in the CSS: double '@' in '@@media'.

Replace '@@media(max-width: 768px)' with '@media(max-width: 768px)' to ensure the CSS is applied correctly.

Suggested change
@@media(max-width: 768px) {
.otp-input-demo .bb-otp-input {
--bb-otp-item-width: 32px;
--bb-otp-font-size: 1.2em;
}
}
@media(max-width: 768px) {
.otp-input-demo .bb-otp-input {
--bb-otp-item-width: 32px;
--bb-otp-font-size: 1.2em;
}
}

</style>
</HeadContent>

Expand Down
Loading