Pq234/robot-learning-tutorial

1/* ============================================================================ */2/* Layout – 3-column grid (Table of Contents / Article / Aside) */3/* ============================================================================ */4 5.content-grid {6  max-width: 1280px;7  margin: 0 auto;8  padding: 0 var(--content-padding-x);9  margin-top: 40px;10  display: grid;11  grid-template-columns: 260px minmax(0, 680px) 260px;12  gap: 32px;13  align-items: start;14}15 16.content-grid>main {17  max-width: 100%;18  margin: 0;19  padding: 0;20}21 22.content-grid>main>*:first-child {23  margin-top: 0;24}25 26@media (--bp-content-collapse) {27  .content-grid {28    overflow: hidden;29    display: block;30    margin-top: var(--spacing-2);31  }32 33  .content-grid {34    grid-template-columns: 1fr;35  }36 37  .table-of-contents {38    position: static;39    display: none;40  }41 42  .table-of-contents-mobile {43    display: block;44  }45 46  .footer-inner {47    grid-template-columns: 1fr;48    gap: 16px;49  }50 51  .footer-inner>h3 {52    grid-column: auto;53    margin-top: 16px;54  }55 56  .footer-inner {57    display: block;58    padding: 40px 16px;59  }60}61 62 63 64/* ============================================================================ */65/* Width helpers – slightly wider than main column, and full-width to viewport */66/* ---------------------------------------------------------------------------- */67 68.wide,69.full-width {70  box-sizing: border-box;71  position: relative;72  z-index: var(--z-elevated);73  background-color: var(--background-color);74}75 76.wide {77  /* Target up to ~1100px while staying within viewport minus page gutters */78  width: min(1100px, 100vw - var(--content-padding-x) * 2);79  margin-left: 50%;80  transform: translateX(-50%);81  padding: var(--content-padding-x);82  border-radius: var(--button-radius);83  background-color: var(--page-bg);84}85 86.full-width {87  /* Span the full viewport width and center relative to viewport */88  width: 100vw;89  margin-left: calc(50% - 50vw);90  margin-right: calc(50% - 50vw);91}92 93@media (--bp-content-collapse) {94 95  .wide,96  .full-width {97    width: 100%;98    margin-left: 0;99    margin-right: 0;100    padding: 0;101    transform: none;102  }103}104 105/* ============================================================================ */106/* Theme toggle placement                                                       */107/* ============================================================================ */108 109#theme-toggle {110  position: fixed;111  top: calc(var(--spacing-4) + var(--hf-spaces-topbar, 0px));112  right: var(--spacing-3);113  margin: 0;114  z-index: var(--z-overlay);115}116 117/* ------------------------------------------------------------------------- */118/* Hero meta bar responsiveness                                               */119/* Two columns at collapse breakpoint, then one column below small screens    */120/* ------------------------------------------------------------------------- */121@media (--bp-sm) {122  header.meta .meta-container {123    display: flex;124    flex-wrap: wrap;125    row-gap: 12px;126    column-gap: 8px;127    max-width: 100%;128    padding: 0 var(--spacing-4);129  }130 131  header.meta .meta-container .meta-container-cell {132    flex: 1 1 calc(50% - 8px);133    min-width: 0;134  }135}136 137@media (--bp-xxs) {138  header.meta .meta-container .meta-container-cell {139    flex-basis: 100%;140    text-align: center;141  }142 143  /* Center ordered list numbers within meta (e.g., affiliations) */144  header.meta .affiliations {145    list-style-position: inside;146    padding-left: 0;147    margin-left: 0;148  }149 150  header.meta .affiliations li {151    text-align: center;152  }153}154 155 156/* ------------------------------------------------------------------------- */157/* D3 neural embed responsiveness                                            */158/* Stack canvas (left) over network (right) on small screens                 */159/* ------------------------------------------------------------------------- */160@media (--bp-md) {161  .d3-neural .panel {162    flex-direction: column;163  }164 165  .d3-neural .panel .left {166    flex: 0 0 auto;167    width: 100%;168  }169 170  .d3-neural .panel .right {171    flex: 0 0 auto;172    width: 100%;173    min-width: 0;174  }175}