style.scss

/*-- scss:defaults --*/

$font-size-root: 16px !default;

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;800&display=swap');

/*-- scss:rules --*/

/* Override font color in Sandstone theme */
.theme-sandstone {
  color: #A51C30; /* Set font color to #A51C30 */
}

/*-- scss:defaults --*/
:root {
  --link-color: #A51C30; /* Define the CSS variable for link color */

  --mermaid-bg-color: #f9fafb; /* Light neutral background */
  --mermaid-edge-color: #4b5563; /* Muted dark gray for edges */
  --mermaid-node-fg-color: #1f2937; /* Dark gray for node text */
  --mermaid-fg-color: #2563eb; /* Primary blue for accents */
  --mermaid-fg-color--lighter: #60a5fa; /* Lighter blue for highlights */
  --mermaid-fg-color--lightest: #93c5fd; /* Lightest blue for secondary highlights */
  --mermaid-font-family: 'Roboto', sans-serif; /* Modern, clean font */
  --mermaid-label-bg-color: #e5e7eb; /* Soft gray for label backgrounds */
  --mermaid-label-fg-color: #1f2937; /* Dark gray for label text */
  --mermaid-node-bg-color: #ffffff; /* White for node backgrounds */
  --mermaid-node-fg-color: #1f2937; /* Dark gray for node text */
}

div.sidebar-item-container .active {
  font-weight: bold;
}

.sidebar nav[role=doc-toc] ul>li>a.active, .sidebar nav[role=doc-toc] ul>li>ul>li>a.active{
  font-weight: bold;
}

.sidebar nav[role="doc-toc"] ul > li > a.active {
  color: #A51C30 !important;
  background-color: snow;
  font-weight: bold;
}

/*-- scss:defaults --*/

/*-- scss:rules --*/

/* Headings ------------------------------------------------------ */

#title-block-header.quarto-title-block.default .quarto-title h1.title {
  margin-bottom: 0.5rem;
}

h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
}
h3 { margin-top: 1.5em; font-size: 1.2rem; font-weight: 500; }
h4 { margin-top: 1.5em; font-size: 1.1rem; }
h5 { margin-top: 1.5em; font-size: 1rem; }

/* Code ------------------------------------------------ */

code a:any-link {
  text-decoration: underline;
}

/*-- scss:defaults --*/

.figure {
  margin: auto;
  text-align: left;
}

/* Aligns the caption in margin to the left */
.csl-entry {
  display: block;
  margin-left: 0;
  text-align: left;
}

/* Mixin for callout styling */
@mixin base-callout {
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: .25rem;

  border-left: solid #acacac .3rem; /* Establishes base left border */
  border-right: solid 0.5px silver;
  border-top: solid 0.5px silver;
  border-bottom: solid 0.5px silver;
}

/* Styling for answer callout body */
.callout-body-container.callout-body {
  padding: 0px 0px 0px 23.04px; /* Top Right Bottom Left */
}

/* Slide callout styling */
div.callout-slide.callout {
  @include base-callout;
  border-left-color: #8f00ff !important; /* Overrides left border color */
}

div.callout-slide.callout > .callout-header::before {
  font-family: "Font Awesome 5 Free";
  content: "🎫";
  margin-right: 10px;
}

/* Video callout styling */
div.callout-video.callout {
  @include base-callout;
  border-left-color: #8ccd00 !important; /* Overrides left border color */
}

div.callout-video.callout > .callout-header::before {
  font-family: "Font Awesome 5 Free";
  content: "📺";
  margin-right: 10px;
}

div.callout-lab.callout > .callout-header::before {
  font-family: "Font Awesome 5 Free";
  content: "🧪";
  margin-right: 10px;
}

/* Question callout styling */
div.callout-question.callout {
  @include base-callout;
  border-left-color: #ff7d00  !important; /* Overrides left border color */
}

div.callout-question.callout > .callout-header::before {
  font-family: "Font Awesome 5 Free";
  content: "❓";
  margin-right: 10px;
}

/* Exercise callout styling */
div.callout-colab.callout {
  @include base-callout;
  border-left-color: #ff7d00  !important; /* Overrides left border color */
}

div.callout-colab.callout > .callout-header::before {
  font-family: "Font Awesome 5 Free";
  content: "👩‍💻";
  margin-right: 10px;
}

/* Answer callout styling */
div.callout-answer.callout {
  @include base-callout;
  border-left-color: #ffdd00 !important; /* Overrides left border color */
}

div.callout-answer.callout > .callout-header::before {
  font-family: "Font Awesome 5 Free";
  content: "✅";
  margin-right: 10px;
}

/* Hint callout styling */
div.callout-hint.callout {
  @include base-callout;
  border-left-color: #01befe !important; /* Overrides left border color for hint */
}

div.callout-hint.callout > .callout-header::before {
  font-family: "Font Awesome 5 Free";
  content: "🤔";
  margin-right: 10px;
}

.callout-toggle::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(52, 58, 64)" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
}

/* styling for giscuss comments */
.giscus{
  padding-left: 1em;
  padding-right: 1em;
}

/* scrolling windows for long Python scripts in the HTML e-book version */
.scroll-code-block {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  background-color: #f8f8f8;
}

.scroll-code-block pre {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}

.scroll-code-block code {
  display: block;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}

/* Sidebar customization */

/* Sidebar Container */
.sidebar {
  background-color: #F9F9F9; /* Neutral light background */
  padding: 20px;
  border-right: 1px solid #E0E0E0; /* Light border to define the sidebar */
  margin-right: 30px; /* Ensures sidebar has space from the main content */
}

/* Section Headers (PART titles) */
.part {
  background-color: #D8C3A5; /* Muted beige-grey */
  color: #3B2E2A; /* Rich dark brown */
  padding: 4px 6px;
  border-radius: 6px;
  font-weight: oblique;
  margin-bottom: 10px;
}

/* Highlighted PART header (active section) */
.part.active {
  background-color: #C4B295; /* Slightly darker beige */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* List Items */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li {
  margin: 8px 0;
  color: #555555; /* Neutral dark gray */
  font-size: 14px;
}

.sidebar ul li a {
  text-decoration: none;
  color: inherit;
}

.sidebar ul li a:hover {
  color: #A51C30; /* Hover effect with the blue tone */
}

/* Active Item Highlight */
.sidebar ul li.active a,
.sidebar ul li a.highlight {
  color: #9D3E3E; /* Muted red */
  font-weight: bold;
}

/* General right margin for the document */
body {
  margin-right: 20px; /* Slightly reduce the general margin for the right */
}

/* Responsive Design */
@media (max-width: 768px) {
  .sidebar {
    display: none; /* Hide sidebar on smaller screens */
  }

  .sidebar.collapsed {
    display: block;
    width: 100%;
  }

  body {
    margin-right: 10px; /* Adjust margin on smaller screens */
  }
}


/* Ensure margin-aligned content stays within bounds and add padding */
*[class*="margin"], .footnote, .note, .annotation {
  margin-right: 10px; /* Margin space on the right */
  max-width: calc(100% - 40px); /* Prevent overflow */
  padding: 5px 10px; /* Top/Bottom and Left/Right padding for clarity */
  background-color: #f9f9f9; /* Optional: Add background for contrast */
  border-radius: 4px; /* Optional: Rounded corners */
}

/* Keep floating notes or annotations aligned */
.footnote, .note {
  position: relative; /* Ensure alignment stays consistent */
  font-size: 0.9rem; /* Adjust font size for clarity */
  color: #555555; /* Neutral color for visibility */
}

/* Ensure consistent alignment of footnote numbers */
.footnote-ref {
  vertical-align: super; /* Keep superscript alignment */
  font-size: 0.8rem;
  margin-right: 4px;
  color: #A51C30; /* Match link color for consistency */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    margin-right: 10px; /* Reduce margin for smaller screens */
  }

  .footnote, .note, .annotation {
    max-width: 100%; /* Allow full width on smaller devices */
    margin-right: 5px;
    padding-right: 5px;
  }
}