danielandClaude Sonnet 5
ec9cba0555
- lead: wraps content in a Bootstrap .lead paragraph (moved from the
ctsmockup site, where {.lead} could not target a paragraph).
- banner: resolves src as a page/global resource or base-URL-aware
link, and spans the full viewport width via symmetric
calc(50% - 50vw) margins while page content stays in .container.
Optional height crops via object-fit: cover. A banner that starts a
page's content is pulled flush against the navbar.
- html { overflow-x: hidden } to absorb the 100vw scrollbar overhang.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
90 lines
2.0 KiB
SCSS
90 lines
2.0 KiB
SCSS
@import "bootstrap/bootstrap";
|
|
|
|
:root {
|
|
--bs-primary: #004a6f;
|
|
--bs-secondary: #009ee3;
|
|
--bs-success: #198754;
|
|
--bs-danger: #dc3545;
|
|
--bs-warning: #ffc107;
|
|
--bs-info: #00a194;
|
|
--bs-light: #eff0f1;
|
|
--bs-dark: #535455;
|
|
|
|
//--bs-font-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
--bs-body-font-size: 1.1rem;
|
|
--bs-body-line-height: 1.5;
|
|
}
|
|
|
|
// Keep the full-bleed `.banner` from adding a horizontal scrollbar
|
|
// (100vw is wider than the viewport when a vertical scrollbar is shown).
|
|
html {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--bs-font-sans-serif);
|
|
line-height: var(--bs-body-line-height);
|
|
color: var(--bs-dark);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
// Navigation customization
|
|
.navbar {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
&-brand {
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
|
|
// Card customization
|
|
.card {
|
|
border: none;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
// Footer customization
|
|
.footer {
|
|
background-color: var(--bs-dark);
|
|
color: var(--bs-dark);
|
|
padding: 40px 20px 20px;
|
|
margin-top: 60px;
|
|
border-top: 1px solid #dee2e6;
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// Full-bleed banner / hero image: spans the viewport width while the
|
|
// surrounding page content stays within `.container`. Works from inside
|
|
// any centred `.container` because the horizontal margins cancel out the
|
|
// container offset (50% of the parent - 50% of the viewport).
|
|
.banner {
|
|
display: block;
|
|
width: 100vw;
|
|
max-width: 100vw;
|
|
margin-left: calc(50% - 50vw);
|
|
margin-right: calc(50% - 50vw);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
// When the banner is the first thing in the page body, pull it flush
|
|
// against the navbar by cancelling the layout's top padding (`py-5`).
|
|
.content-body > .banner:first-child,
|
|
.content-body > p:first-child > .banner:only-child {
|
|
margin-top: -3rem;
|
|
}
|
|
|