github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-05-07 10:08:50 -05:00
Code Issues 85 Packages Projects Releases 24 Wiki Activity

feat(design): implement new code listing color scheme with Harvard crimson keywords and slate styling

Browse Source
This commit is contained in:
Vijay Janapa Reddi
2025-08-04 13:45:59 -04:00
parent 50297b874c
commit cbfabcea20
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
book/assets/styles/style.scss
View File

@@ -1358,11 +1358,11 @@ figcaption.quarto-float-caption-top {
/* Enhanced styling for code listings - more prominent */
.listing figure {
margin: 2.5rem 0 !important; /* Even more space around listings */
border: 2px solid #3C4858; /* Cool gray border */
border: 2px solid #D1D7E0; /* Slate border */
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(60, 72, 88, 0.1); /* Match callout subtle shadow */
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); /* Subtle gray tint */
box-shadow: 0 2px 8px rgba(209, 215, 224, 0.1); /* Match callout subtle shadow */
background: linear-gradient(135deg, #F2F4F8 0%, #ffffff 100%); /* Light blue-gray background */
position: relative;
}
@@ -1376,12 +1376,12 @@ figcaption.quarto-float-caption-top {
/* Listing captions - more prominent with stronger color specificity */
.listing figcaption,
.listing .listing-caption {
background: linear-gradient(135deg, #f0f2f4 0%, #e8eaed 100%) !important; /* Cool gray-tinted gradient */
border-bottom: 2px solid #3C4858 !important; /* Cool gray border */
background: linear-gradient(135deg, #222222 0%, #333333 100%) !important; /* Neutral title gradient */
border-bottom: 2px solid #D1D7E0 !important; /* Slate border */
padding: 1rem 1.25rem !important; /* More padding */
margin: 0 !important;
font-size: 0.95rem !important; /* Slightly larger text */
color: #2c1a1d !important; /* Dark amber-gray text */
color: white !important; /* White text on dark background */
font-family: var(--bs-body-font-family, system-ui, sans-serif) !important;
font-weight: 600 !important; /* Bolder weight */
line-height: 1.4 !important;
@@ -1430,20 +1430,20 @@ figcaption.quarto-float-caption-top {
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #3C4858 0%, #2a3238 100%); /* Cool gray gradient */
background: linear-gradient(180deg, #5C6FB2 0%, #4A5A8B 100%); /* Muted slate blue gradient */
border-radius: 0 2px 2px 0;
z-index: 1;
}
/* Ensure code syntax highlighting works well with the golden amber theme */
/* Ensure code syntax highlighting works well with the new color scheme */
.listing .sourceCode .kw,
.listing .sourceCode .keyword {
color: #3C4858 !important; /* Cool gray for keywords */
color: #A51C30 !important; /* Harvard crimson for keywords */
}
.listing .sourceCode .nb,
.listing .sourceCode .number {
color: #4f7396 !important; /* Steel blue for numbers - from callout-info */
color: #3A70B0 !important; /* Muted blue for numbers */
}
.listing .sourceCode .s1,
@@ -1459,7 +1459,7 @@ figcaption.quarto-float-caption-top {
/* Additional syntax elements using the complete callout palette */
.listing .sourceCode .o,
.listing .sourceCode .operator {
color: #b8860b !important; /* Golden amber for operators - from callout-caution */
color: #5C6FB2 !important; /* Muted slate blue for operators */
}
.listing .sourceCode .c1,