custom.css

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #e76f00; /* Dark Orange for text and interactive elements */
  --ifm-color-primary-dark: #cc6400; /* Darker Shade of Orange for headlines or strong emphasis */
  --ifm-color-primary-darker: #b35900; /* Even Darker Orange for very important callouts or warnings */
  --ifm-color-primary-darkest: #994c00; /* Brownish Orange for the most critical warnings or strong accents */
  --ifm-color-primary-light: #fce4d6; /* Very Pale Orange for background highlights or selected items */
  --ifm-color-primary-lighter: #fdfaf5; /* Near White with a hint of orange for background areas */
  --ifm-color-primary-lightest: #ffffff; /* Pure White for main content background to ensure maximum readability */
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(231, 111, 0, 0.1); /* Soft Orange for code block highlights */
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #f8a949; /* Soft Orange for buttons and icons */
  --ifm-color-primary-dark: #c96f2a; /* Darker Orange for headings and important elements */
  --ifm-color-primary-darker: #b26425; /* Even Darker Orange for emphasized text or active states */
  --ifm-color-primary-darkest: #a2571e; /* Nearly Brown Orange for critical warnings or strong emphasis */
  --ifm-color-primary-light: #4d3c30; /* Dark Brownish Gray for less prominent elements to ensure legibility */
  --ifm-color-primary-lighter: #3a2e24; /* Darker Brownish Gray for secondary backgrounds, enhancing contrast */
  --ifm-color-primary-lightest: #2c221b; /* Even Darker Brownish Gray for main backgrounds, maximizing contrast */
  --docusaurus-highlighted-code-line-bg: rgba(231, 111, 0, 0.2); /* Slightly more visible Orange for code highlights */
}

/* ========================================
   Blog Reading Experience Optimizations
   ======================================== */

/* Optimize blog typography for better reading experience
   Line height of 1.75 provides better readability for long-form content.
   Increased spacing between sections helps with scanability.
   Content width is naturally constrained by the sidebar, providing optimal
   readability without excessive whitespace. */
.markdown > p {
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.markdown > h2,
.markdown > h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

/* ========================================
   Dynamic Responsive Blog Layout
   ======================================== */

/* Increase container width for better space utilization on larger screens */
:root {
  --ifm-container-width: 1200px;  /* Increase from default 1140px */
}

@media (min-width: 1400px) {
  :root {
    --ifm-container-width: 1320px;  /* Even wider on very large screens */
  }
}

/* Make blog content columns responsive to screen size */
@media (min-width: 997px) {
  /* Sidebar: reduce from 25% to ~18% */
  .container .row > aside.col.col--3 {
    --ifm-col-width: 18% !important;
    flex: 0 0 18% !important;
    max-width: 18% !important;
  }

  /* Main content: expand to fill remaining space (~82%) */
  .container .row > main.col.col--7 {
    --ifm-col-width: 82% !important;
    flex: 0 0 82% !important;
    max-width: 82% !important;
  }

  /* Hide TOC column - give all space to content */
  .container .row > .col.col--2 {
    display: none !important;
  }
}

/* Ensure sidebar properly hides on mobile/tablet */
@media (max-width: 996px) {
  .container .row > aside.col.col--3 {
    display: none !important;
  }

  .container .row > main.col.col--7 {
    --ifm-col-width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}