mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-07 18:18:42 -05:00
4b840ff957
- Create shared/ directory with centralized SCSS partials and site-head.html so site subsites (about, community, newsletter) no longer duplicate inline header config or reference book-only styles - Fix subscribe modal: change script src from broken relative path (../../book/quarto/assets/scripts/subscribe-modal.js) to absolute URL (https://mlsysbook.ai/vol1/assets/scripts/subscribe-modal.js) which the rewrite-dev-urls.sh script converts for dev preview automatically
152 lines
3.9 KiB
SCSS
152 lines
3.9 KiB
SCSS
// =============================================================================
|
|
// CALLOUT STYLES — Quarto callout color and geometry overrides
|
|
// =============================================================================
|
|
// Shared across all ecosystem projects. Requires $accent and callout palette
|
|
// variables from _tokens.scss.
|
|
// =============================================================================
|
|
|
|
// Enhanced sizing for all callouts to match foldbox dimensions
|
|
.callout {
|
|
margin: 1.25rem 0 !important;
|
|
/* Matches foldbox margins */
|
|
border-radius: 0.5rem !important;
|
|
/* Increased for smoother rounding (8px) */
|
|
border-left-width: 5px !important;
|
|
/* Matches foldbox border width */
|
|
font-size: 0.9rem !important;
|
|
/* Matches foldbox font size */
|
|
box-shadow: 0 2px 8px rgba($accent, 0.1) !important;
|
|
/* Match foldbox subtle shadow */
|
|
|
|
.callout-header {
|
|
padding: 0.5rem 0.85rem !important;
|
|
/* Set for exactly 35px header height */
|
|
font-weight: 400 !important;
|
|
/* Normal weight for cleaner look */
|
|
font-size: 0.9rem !important;
|
|
/* Consistent sizing */
|
|
line-height: 1.3 !important;
|
|
/* Tight line height like foldbox */
|
|
font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
|
|
/* Exact match with foldbox */
|
|
}
|
|
|
|
/* Override foldbox.css rule for native Quarto callouts */
|
|
.callout-title-container {
|
|
font-weight: bold !important;
|
|
/* Bold titles for native Quarto callouts */
|
|
}
|
|
|
|
.callout-body {
|
|
padding: 0.75rem 0.85rem 1rem !important;
|
|
/* Extra bottom padding to prevent text overlapping the border */
|
|
line-height: 1.5 !important;
|
|
/* Better readability */
|
|
|
|
/* Ensure last element doesn't add extra margin */
|
|
> *:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Catch-all for any callout content containers */
|
|
> div:last-child {
|
|
padding-bottom: 1rem !important;
|
|
|
|
> *:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Additional override with higher specificity for native Quarto callouts */
|
|
body .callout .callout-title-container {
|
|
font-weight: bold !important;
|
|
/* Bold titles - override foldbox.css */
|
|
}
|
|
|
|
.callout-note,
|
|
.callout.callout-style-default.callout-note {
|
|
border-left-color: $callout-info !important;
|
|
|
|
// For font icons (Bootstrap icons, icon fonts) - only color, no background
|
|
.callout-icon .bi,
|
|
.callout-icon i {
|
|
color: $callout-info !important;
|
|
}
|
|
|
|
.callout-header {
|
|
background-color: $callout-info-bg !important;
|
|
}
|
|
}
|
|
|
|
.callout-tip,
|
|
.callout.callout-style-default.callout-tip {
|
|
border-left-color: $callout-success !important;
|
|
|
|
.callout-icon .bi,
|
|
.callout-icon i {
|
|
color: $callout-success !important;
|
|
}
|
|
|
|
.callout-header {
|
|
background-color: $callout-success-bg !important;
|
|
}
|
|
}
|
|
|
|
.callout-important,
|
|
.callout.callout-style-default.callout-important {
|
|
border-left-color: $callout-primary !important;
|
|
|
|
.callout-icon .bi,
|
|
.callout-icon i {
|
|
color: $callout-primary !important;
|
|
}
|
|
|
|
.callout-header {
|
|
background-color: $callout-primary-bg !important;
|
|
}
|
|
}
|
|
|
|
.callout-caution,
|
|
.callout.callout-style-default.callout-caution {
|
|
border-left-color: $callout-caution !important;
|
|
|
|
.callout-icon .bi,
|
|
.callout-icon i {
|
|
color: $callout-caution !important;
|
|
}
|
|
|
|
.callout-header {
|
|
background-color: $callout-caution-bg !important;
|
|
}
|
|
}
|
|
|
|
.callout-warning,
|
|
.callout.callout-style-default.callout-warning {
|
|
border-left-color: $callout-caution !important;
|
|
|
|
.callout-icon .bi,
|
|
.callout-icon i {
|
|
color: $callout-caution !important;
|
|
}
|
|
|
|
.callout-header {
|
|
background-color: $callout-caution-bg !important;
|
|
}
|
|
}
|
|
|
|
// Additional fallback for any other callout variations
|
|
.callout-danger {
|
|
border-left-color: $callout-primary !important;
|
|
|
|
.callout-icon .bi,
|
|
.callout-icon i {
|
|
color: $callout-primary !important;
|
|
}
|
|
|
|
.callout-header {
|
|
background-color: $callout-primary-bg !important;
|
|
}
|
|
}
|