mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-07 18:18:42 -05:00
9681cc1f4b
The landing site's announcement bar was using raw Bootstrap `.alert-primary`, which auto-tints to a light pink. That reads as an "alert" when the content is actually promotional (Vol II, TinyTorch, Kits launches). Replace with a soft off-white surface plus a thin crimson left border so the banner sits in the navbar chrome family while still carrying brand signal. Scoped to style-site.scss only — the book's pink announcement (book-only.scss) is unchanged.
86 lines
2.7 KiB
SCSS
86 lines
2.7 KiB
SCSS
// =============================================================================
|
|
// SITE PAGES STYLESHEET — Lean base for website pages
|
|
// =============================================================================
|
|
// Entry point for: community, about, newsletter, landing
|
|
// Uses Harvard Crimson accent but skips textbook-only styles (foldbox,
|
|
// margin notes, listings, sidebar, TOC).
|
|
// =============================================================================
|
|
|
|
/*-- scss:defaults --*/
|
|
|
|
// Theme: Harvard Crimson for site pages
|
|
@import 'themes/theme-harvard';
|
|
|
|
// Design tokens (typography, callout palette, link colors)
|
|
@import 'partials/tokens';
|
|
|
|
/*-- scss:rules --*/
|
|
|
|
// Universal UI components (subset — no sidebar, callouts, or book-only for site pages)
|
|
@import 'partials/links';
|
|
@import 'partials/navbar';
|
|
@import 'partials/buttons';
|
|
@import 'partials/headers';
|
|
@import 'partials/figures';
|
|
@import 'partials/toc';
|
|
@import 'partials/tables';
|
|
@import 'partials/blockquotes';
|
|
@import 'partials/mobile';
|
|
|
|
// NOTE: No _callouts, _sidebar, or _book-only imported.
|
|
// Site pages use plain CSS for their page-specific layouts.
|
|
|
|
// =============================================================================
|
|
// Site announcement bar — muted neutral with crimson accent
|
|
// =============================================================================
|
|
// The book (_book-only.scss) gives `.alert-primary` a pink gradient that reads
|
|
// as an "alert". On promotional site pages we want chrome, not alarm: a soft
|
|
// off-white surface (same family as the white navbar) with a thin crimson
|
|
// left border so the brand still signals importance without screaming.
|
|
.alert-primary,
|
|
.quarto-announcement,
|
|
.announcement {
|
|
background: #f8f9fa !important;
|
|
border: 1px solid #e9ecef !important;
|
|
border-left: 4px solid $accent !important;
|
|
color: #495057 !important;
|
|
|
|
// Break out of parent container to span full viewport width
|
|
position: relative !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
box-sizing: border-box !important;
|
|
border-radius: 0 !important;
|
|
|
|
// Bold headings (product names) keep brand weight but stay dark for contrast
|
|
strong,
|
|
b {
|
|
color: #212529 !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
// Links use the crimson accent for scan-ability
|
|
a {
|
|
color: $accent !important;
|
|
font-weight: 500;
|
|
|
|
&:hover {
|
|
color: darken($accent, 12%) !important;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
// Dismiss button — subtle by default, visible on hover
|
|
.btn-close {
|
|
opacity: 0.5 !important;
|
|
|
|
&:hover {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
}
|