mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-04-30 09:38:38 -05:00
634 lines
13 KiB
SCSS
634 lines
13 KiB
SCSS
/*-- scss:defaults --*/
|
|
|
|
// Dark mode color overrides for Hardware Kits Theme
|
|
// This file is applied when users toggle dark mode on the website
|
|
|
|
// Redefine teal accent to be brighter for dark mode
|
|
$kits-accent: #1ABC9C; // Brighter teal for dark backgrounds
|
|
$kits-accent-dark: $kits-accent; // Alias for clarity
|
|
|
|
// Dark mode specific colors
|
|
$body-bg-dark: #1a1a1a;
|
|
$body-color-dark: #e6e6e6;
|
|
$link-color-dark: $kits-accent;
|
|
$link-hover-color-dark: lighten($kits-accent, 10%);
|
|
|
|
// Sidebar and navigation
|
|
$sidebar-bg-dark: #212529;
|
|
$navbar-bg-dark: #212529;
|
|
$border-color-dark: #454d55;
|
|
|
|
/*-- scss:rules --*/
|
|
|
|
// Main body styling
|
|
body {
|
|
background-color: $body-bg-dark;
|
|
color: $body-color-dark;
|
|
}
|
|
|
|
// Links in dark mode - brighter teal with better contrast
|
|
a {
|
|
color: lighten($kits-accent, 10%) !important;
|
|
|
|
&:hover {
|
|
color: lighten($kits-accent, 25%) !important;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:visited {
|
|
color: lighten($kits-accent, 8%) !important;
|
|
}
|
|
}
|
|
|
|
// Content area
|
|
.content,
|
|
main,
|
|
article,
|
|
#quarto-content {
|
|
background-color: $body-bg-dark;
|
|
color: $body-color-dark;
|
|
}
|
|
|
|
// Sidebar - match TOC styling with muted colors
|
|
.sidebar,
|
|
.sidebar-navigation,
|
|
#quarto-sidebar,
|
|
.sidebar.sidebar-navigation {
|
|
background-color: $sidebar-bg-dark;
|
|
border-color: $border-color-dark;
|
|
|
|
// Section headers - keep teal accent
|
|
.sidebar-item.sidebar-item-section > .sidebar-item-toggle,
|
|
.sidebar-item.sidebar-item-section .sidebar-item-toggle {
|
|
color: $kits-accent-dark !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
// ALL navigation links - muted gray
|
|
a,
|
|
.sidebar-link,
|
|
.sidebar-item a,
|
|
.sidebar-item-text,
|
|
.menu-text,
|
|
.chapter-number {
|
|
color: #888888 !important;
|
|
font-weight: 400 !important;
|
|
|
|
&:hover {
|
|
color: $kits-accent-dark !important;
|
|
background-color: rgba($kits-accent-dark, 0.15) !important;
|
|
}
|
|
|
|
&.active,
|
|
&[aria-current="page"] {
|
|
color: $kits-accent-dark !important;
|
|
background-color: rgba($kits-accent-dark, 0.2) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
}
|
|
|
|
// Section containers
|
|
.sidebar-item-container,
|
|
.sidebar-item,
|
|
.sidebar-item-text {
|
|
color: #888888 !important;
|
|
}
|
|
}
|
|
|
|
// Additional high-specificity rules for stubborn elements
|
|
#quarto-sidebar .sidebar-menu a:not(.active),
|
|
#quarto-sidebar .sidebar-menu .sidebar-link:not(.active),
|
|
#quarto-sidebar .menu-text {
|
|
color: #888888 !important;
|
|
}
|
|
|
|
// Ensure active/hover states work
|
|
#quarto-sidebar a.active,
|
|
#quarto-sidebar a[aria-current="page"],
|
|
#quarto-sidebar .sidebar-link.active {
|
|
color: $kits-accent-dark !important;
|
|
}
|
|
|
|
// TOC (table of contents) - Right sidebar "On this page"
|
|
.table-of-contents,
|
|
#TOC,
|
|
.quarto-toc,
|
|
nav[role="doc-toc"],
|
|
.sidebar.toc-left,
|
|
div[role="doc-toc"] {
|
|
background-color: transparent;
|
|
border-left-color: $kits-accent-dark;
|
|
|
|
// TOC title
|
|
.toc-title,
|
|
.sidebar-title,
|
|
h2 {
|
|
color: #e6e6e6 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
// All links in TOC
|
|
a,
|
|
.nav-link {
|
|
color: #888888 !important;
|
|
|
|
&:hover {
|
|
color: $kits-accent-dark !important;
|
|
}
|
|
}
|
|
|
|
.active,
|
|
.nav-link.active {
|
|
color: $kits-accent-dark !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
// Nested lists
|
|
ul, ol {
|
|
li {
|
|
color: #888888;
|
|
|
|
a {
|
|
color: #888888 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Headers - adjust border colors for dark mode
|
|
.content h2,
|
|
main h2,
|
|
article h2,
|
|
#quarto-content h2 {
|
|
border-left-color: $kits-accent-dark;
|
|
border-bottom-color: rgba($kits-accent-dark, 0.4);
|
|
color: #e6e6e6;
|
|
}
|
|
|
|
.content h3,
|
|
main h3,
|
|
article h3,
|
|
#quarto-content h3 {
|
|
border-left-color: $kits-accent-dark;
|
|
border-bottom-color: rgba($kits-accent-dark, 0.35);
|
|
color: #d0d0d0;
|
|
}
|
|
|
|
.content h4,
|
|
main h4,
|
|
article h4,
|
|
#quarto-content h4 {
|
|
border-left-color: $kits-accent-dark;
|
|
border-bottom-color: rgba($kits-accent-dark, 0.3);
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
.content h5,
|
|
main h5,
|
|
article h5,
|
|
#quarto-content h5 {
|
|
border-left-color: $kits-accent-dark;
|
|
border-bottom-color: rgba($kits-accent-dark, 0.25);
|
|
color: #b0b0b0;
|
|
}
|
|
|
|
.content h6,
|
|
main h6,
|
|
article h6,
|
|
#quarto-content h6 {
|
|
border-left-color: $kits-accent-dark;
|
|
border-bottom-color: rgba($kits-accent-dark, 0.2);
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
// Tables - improved contrast for dark mode
|
|
table {
|
|
background-color: #1a1a1a;
|
|
|
|
th {
|
|
background-color: #2c2c2c !important;
|
|
border-bottom: 2px solid $kits-accent-dark !important;
|
|
color: #f0f0f0 !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
td {
|
|
background-color: #242424 !important;
|
|
border-bottom-color: #454d55 !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
tbody tr:nth-child(even) {
|
|
background-color: #1e1e1e;
|
|
|
|
td {
|
|
background-color: #1e1e1e !important;
|
|
}
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background-color: #2a2a2a !important;
|
|
|
|
td {
|
|
background-color: #2a2a2a !important;
|
|
}
|
|
}
|
|
|
|
td:first-child,
|
|
th:first-child {
|
|
background-color: #323232 !important;
|
|
border-right-color: #454d55;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
// Table container
|
|
.table-container,
|
|
.cell-output-display {
|
|
table {
|
|
th {
|
|
background-color: #2c2c2c !important;
|
|
color: #f0f0f0 !important;
|
|
}
|
|
|
|
td {
|
|
background-color: #242424 !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Code blocks
|
|
pre {
|
|
background-color: #2c2c2c;
|
|
color: #e6e6e6;
|
|
border: 1px solid #454d55;
|
|
}
|
|
|
|
// Inline code
|
|
code {
|
|
background-color: #2c2c2c;
|
|
color: #1ABC9C; // Teal for visibility
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
// Code blocks inside pre (override inline styling)
|
|
pre code {
|
|
color: #e6e6e6;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
// Figures and captions
|
|
.figure-caption,
|
|
.caption,
|
|
figure figcaption,
|
|
.quarto-figure figcaption {
|
|
color: #c0c0c0 !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
// Images - add white background for visibility in dark mode
|
|
figure img,
|
|
.quarto-figure img {
|
|
background-color: white !important;
|
|
padding: 1rem !important;
|
|
border-radius: 8px !important;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
|
|
// Footnotes and margin notes
|
|
.sidenote,
|
|
.marginnote,
|
|
.margin-note,
|
|
aside,
|
|
.aside,
|
|
.column-margin,
|
|
.column-margin p,
|
|
.margin-caption,
|
|
div[class*="margin"] {
|
|
color: #c0c0c0 !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
// Footnote references and content
|
|
.footnote-ref,
|
|
.footnotes,
|
|
.footnotes p,
|
|
.footnotes li,
|
|
#footnotes {
|
|
color: #c0c0c0 !important;
|
|
}
|
|
|
|
// Navbar
|
|
.navbar {
|
|
background-color: $navbar-bg-dark !important;
|
|
border-bottom: 1px solid $border-color-dark;
|
|
}
|
|
|
|
.navbar-nav .nav-link {
|
|
color: #adb5bd !important;
|
|
|
|
&:hover {
|
|
color: $link-color-dark !important;
|
|
}
|
|
|
|
&.active {
|
|
color: $link-color-dark !important;
|
|
}
|
|
|
|
.bi {
|
|
color: inherit !important;
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
svg {
|
|
fill: currentColor !important;
|
|
}
|
|
}
|
|
|
|
// Dark mode toggle
|
|
.quarto-color-scheme-toggle {
|
|
color: #adb5bd !important;
|
|
|
|
&:hover {
|
|
color: $link-color-dark !important;
|
|
}
|
|
}
|
|
|
|
// Sun icon in dark mode (indicates "switch to light mode")
|
|
.quarto-color-scheme-toggle.alternate .bi::before,
|
|
body.quarto-dark .quarto-color-scheme-toggle .bi::before,
|
|
html[data-bs-theme="dark"] .quarto-color-scheme-toggle .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23d1d5db" class="bi bi-sun-fill" viewBox="0 0 16 16"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707z"/></svg>') !important;
|
|
background-size: contain !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: center !important;
|
|
content: "" !important;
|
|
display: inline-block !important;
|
|
width: 1em !important;
|
|
height: 1em !important;
|
|
}
|
|
|
|
// Footer
|
|
.page-footer,
|
|
.footer,
|
|
.nav-footer,
|
|
footer {
|
|
background-color: $navbar-bg-dark !important;
|
|
border-top-color: $border-color-dark !important;
|
|
color: #adb5bd !important;
|
|
|
|
p, span, div {
|
|
color: #adb5bd !important;
|
|
}
|
|
|
|
a {
|
|
color: lighten($kits-accent, 10%) !important;
|
|
|
|
&:hover {
|
|
color: lighten($kits-accent, 25%) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Blockquotes
|
|
blockquote {
|
|
border-left-color: #8a93a0 !important;
|
|
background-color: #2a2a2a !important;
|
|
color: #e0e0e0 !important;
|
|
|
|
p, cite, em, strong {
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
cite {
|
|
color: #c0c0c0 !important;
|
|
}
|
|
}
|
|
|
|
// Standard Quarto callouts - dark mode support
|
|
.callout,
|
|
.callout-note,
|
|
.callout-tip,
|
|
.callout-important,
|
|
.callout-caution,
|
|
.callout-warning,
|
|
.callout-example,
|
|
.callout-danger {
|
|
background-color: #212529 !important;
|
|
border-color: #454d55 !important;
|
|
color: #e6e6e6 !important;
|
|
|
|
.callout-header,
|
|
.callout-title,
|
|
.callout-title-container {
|
|
color: #f0f0f0 !important;
|
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
}
|
|
|
|
.callout-body,
|
|
.callout-content {
|
|
color: #e6e6e6 !important;
|
|
|
|
p, li, span, div {
|
|
color: #e6e6e6 !important;
|
|
}
|
|
}
|
|
|
|
.callout-icon {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
a {
|
|
color: lighten($kits-accent, 10%) !important;
|
|
|
|
&:hover {
|
|
color: lighten($kits-accent, 25%) !important;
|
|
}
|
|
}
|
|
|
|
code {
|
|
background-color: #2c2c2c !important;
|
|
color: #1ABC9C !important;
|
|
}
|
|
|
|
pre code {
|
|
color: #e6e6e6 !important;
|
|
}
|
|
}
|
|
|
|
// Specific callout type adjustments for dark mode
|
|
.callout-note {
|
|
border-left-color: #6b8cae !important;
|
|
|
|
.callout-header {
|
|
background-color: rgba(107, 140, 174, 0.12) !important;
|
|
}
|
|
}
|
|
|
|
.callout-tip {
|
|
border-left-color: $kits-accent-dark !important;
|
|
|
|
.callout-header {
|
|
background-color: rgba($kits-accent, 0.12) !important;
|
|
}
|
|
}
|
|
|
|
.callout-important {
|
|
border-left-color: #e85d75 !important;
|
|
|
|
.callout-header {
|
|
background-color: rgba(232, 93, 117, 0.15) !important;
|
|
}
|
|
}
|
|
|
|
.callout-caution,
|
|
.callout-warning {
|
|
border-left-color: #d4a017 !important;
|
|
|
|
.callout-header {
|
|
background-color: rgba(212, 160, 23, 0.12) !important;
|
|
}
|
|
}
|
|
|
|
// Button styling
|
|
.btn-primary {
|
|
background-color: $kits-accent-dark;
|
|
border-color: $kits-accent-dark;
|
|
color: #1a1a1a;
|
|
font-weight: 500;
|
|
|
|
&:hover {
|
|
background-color: lighten($kits-accent-dark, 10%);
|
|
border-color: lighten($kits-accent-dark, 10%);
|
|
}
|
|
}
|
|
|
|
// Back to top button
|
|
.back-to-top,
|
|
#quarto-back-to-top {
|
|
background-color: $kits-accent-dark !important;
|
|
color: #1a1a1a !important;
|
|
border: 1px solid lighten($kits-accent-dark, 10%);
|
|
|
|
&:hover {
|
|
background-color: lighten($kits-accent-dark, 15%) !important;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// LANDING PAGE COMPONENTS - DARK MODE
|
|
// =============================================================================
|
|
|
|
// Carousel
|
|
#hardwareCarousel {
|
|
.carousel-inner {
|
|
background: #2a2a2a;
|
|
border-color: #454d55;
|
|
}
|
|
|
|
.carousel-control-prev-icon,
|
|
.carousel-control-next-icon {
|
|
background-color: rgba($kits-accent-dark, 0.85);
|
|
}
|
|
|
|
.carousel-indicators button {
|
|
background-color: $kits-accent-dark;
|
|
}
|
|
}
|
|
|
|
// Caption bar
|
|
.carousel-caption-bar {
|
|
background: $kits-accent-dark;
|
|
|
|
p {
|
|
color: white !important;
|
|
}
|
|
}
|
|
|
|
// Platform cards
|
|
.platform-card {
|
|
background-color: #2a2a2a;
|
|
border-color: #454d55;
|
|
|
|
&:hover {
|
|
border-color: $kits-accent-dark;
|
|
box-shadow: 0 4px 12px rgba($kits-accent-dark, 0.25);
|
|
}
|
|
|
|
h4 {
|
|
color: $kits-accent-dark;
|
|
}
|
|
|
|
.price {
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #888888 !important;
|
|
}
|
|
|
|
img {
|
|
background-color: white !important;
|
|
padding: 0.5rem !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
}
|
|
|
|
// Capability items
|
|
.capability-item {
|
|
background: linear-gradient(135deg, rgba($kits-accent-dark, 0.1) 0%, rgba($kits-accent-dark, 0.05) 100%);
|
|
border-left-color: $kits-accent-dark;
|
|
|
|
h4 {
|
|
color: $kits-accent-dark;
|
|
}
|
|
|
|
p {
|
|
color: #c0c0c0;
|
|
}
|
|
}
|
|
|
|
// Ecosystem links
|
|
.ecosystem-link {
|
|
background-color: #2a2a2a;
|
|
border-color: $kits-accent-dark !important;
|
|
|
|
h5 a {
|
|
color: $kits-accent-dark;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #888888 !important;
|
|
}
|
|
}
|
|
|
|
.ecosystem-current {
|
|
background-color: #323232 !important;
|
|
|
|
h5 {
|
|
color: $kits-accent-dark;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #888888 !important;
|
|
}
|
|
}
|
|
|
|
// Border utility overrides
|
|
.border {
|
|
border-color: #454d55 !important;
|
|
}
|
|
|
|
.rounded {
|
|
background-color: #2a2a2a;
|
|
}
|
|
|
|
// Small text
|
|
.small,
|
|
small {
|
|
color: #888888 !important;
|
|
}
|