Pq234/robot-learning-tutorial

1/* ============================================================================ */2/* Inline code */3/* ============================================================================ */4code {5  font-size: 14px;6  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;7  background-color: var(--code-bg);8  border-radius: 0.3em;9  border: 1px solid var(--border-color);10  color: var(--text-color);11  font-weight: 400;12  line-height: 1.5;13}14 15p code, .note code {16  white-space: nowrap;17  padding: calc(var(--spacing-1)/3) calc(var(--spacing-1)/2);18}19 20 21/* ============================================================================ */22/* Shiki code blocks */23/* ============================================================================ */24.astro-code {25  position: relative;26  border: 1px solid var(--border-color);27  border-radius: 6px;28  padding: 0;29  font-size: 14px;30  --code-gutter-width: 2.5em;31}32 33/* Shared sizing & horizontal scroll for code containers */34.astro-code,35section.content-grid pre {36  width: 100%;37  max-width: 100%;38  box-sizing: border-box;39  -webkit-overflow-scrolling: touch;40  padding: 0;41  margin-bottom: var(--block-spacing-y) !important;42  overflow-x: auto;43}44 45section.content-grid pre.astro-code { margin: 0; padding: var(--spacing-1) 0; }46 47section.content-grid pre code {48  display: inline-block;49  min-width: 100%;50}51 52/* Wrap long lines only on small screens to prevent layout overflow */53@media (--bp-content-collapse) {54  .astro-code,55  section.content-grid pre {56    white-space: pre-wrap;57    overflow-wrap: anywhere;58    word-break: break-word;59  }60 61  section.content-grid pre code {62    white-space: pre-wrap;63    display: block;64    min-width: 0;65  }66}67 68/* Themes */69[data-theme='light'] .astro-code { background-color: var(--code-bg); }70 71/* Apply token color from per-span vars exposed by Shiki dual themes */72[data-theme='light'] .astro-code span { color: var(--shiki-light) !important; }73[data-theme='dark'] .astro-code span { color: var(--shiki-dark) !important; }74 75/* Optional: boost contrast for light theme */76[data-theme='light'] .astro-code {77  --shiki-foreground: #24292f;78  --shiki-background: #ffffff;79}80 81/* Line numbers for Shiki-rendered code blocks */82.astro-code code {83  counter-reset: astro-code-line;84  display: block;85  background: none;86  border: none;87}88 89.astro-code .line {90  display: inline-block;91  position: relative;92  padding-left: calc(var(--code-gutter-width) + var(--spacing-1));93  min-height: 1.25em;94}95 96.astro-code .line::before {97  counter-increment: astro-code-line;98  content: counter(astro-code-line);99  position: absolute;100  left: 0;101  top: 0;102  bottom: 0;103  width: calc(var(--code-gutter-width));104  text-align: right;105  color: var(--muted-color);106  opacity: .3;107  user-select: none;108  padding-right: var(--spacing-2);109  border-right: 1px solid var(--border-color);110}111 112.astro-code .line:empty::after { content: "\00a0"; }113 114/* Hide trailing empty line added by parsers */115.astro-code code > .line:last-child:empty { display: none; }116 117/* ============================================================================ */118/* Non-Shiki pre wrapper (rehype) */119/* ============================================================================ */120.code-card { position: relative; }121 122.code-card .code-copy {123  position: absolute;124  top: var(--spacing-2);125  right: var(--spacing-2);126  z-index: 3;127  display: none;128}129 130.code-card:hover .code-copy {131  display: block;132}133 134.code-card .code-copy svg {135  width: 16px;136  height: 16px;137  display: block;138  fill: currentColor;139}140 141.code-card pre { margin: 0 0 var(--spacing-1); }142 143/* When no copy button (single-line), keep the label in the top-right corner */144.code-card.no-copy::after { top: 8px; right: 8px; }145 146/* ============================================================================ */147/* Contextual overrides */148/* ============================================================================ */149/* Inside Accordions: remove padding and border on code containers */150.accordion .astro-code { padding: 0; border: none; }151.accordion .astro-code { margin-bottom: 0 !important; }152.accordion .code-output { border: none; border-top: 1px solid var(--border-color)!important; }153.accordion pre { margin-bottom: 0 !important; }154.accordion .code-card pre { margin: 0 !important; }155 156/* ============================================================================ */157/* Language/extension vignette (bottom-right, discreet) */158/* ============================================================================ */159/* .astro-code::after {160  content: attr(data-language);161  position: absolute;162  right: 0;163  bottom: 0;164  font-size: 10px;165  line-height: 1;166  text-transform: uppercase;167  color: var(--muted-color);168  background: var(--surface-bg);169  border-top: 1px solid var(--border-color);170  border-left: 1px solid var(--border-color);171  opacity: 1;172  border-radius: 8px 0 0 0; 173  padding: 4px 6px;174  pointer-events: none;175} */176 177/* Fallback if Shiki uses data-lang instead of data-language */178/* .astro-code[data-lang]::after { content: attr(data-lang); }179.astro-code[data-language="typescript"]::after { content: "ts"; }180.astro-code[data-language="tsx"]::after { content: "tsx"; }181.astro-code[data-language="javascript"]::after,182.astro-code[data-language="node"]::after,183.astro-code[data-language="jsx"]::after { content: "js"; }184.astro-code[data-language="python"]::after { content: "py"; }185.astro-code[data-language="bash"]::after,186.astro-code[data-language="shell"]::after,187.astro-code[data-language="sh"]::after { content: "sh"; }188.astro-code[data-language="markdown"]::after { content: "md"; }189.astro-code[data-language="yaml"]::after,190.astro-code[data-language="yml"]::after { content: "yml"; }191.astro-code[data-language="html"]::after { content: "html"; }192.astro-code[data-language="css"]::after { content: "css"; }193.astro-code[data-language="json"]::after { content: "json"; } */194 195/* In Accordions, keep same bottom-right placement */196.accordion .astro-code::after { right: 0; bottom: 0; }197 198/* ============================================================================ */199/* Results blocks glued to code blocks */200/* ============================================================================ */201.code-output {202  position: relative;203  background: oklch(from var(--code-bg) calc(l - 0.005) c h);204  border: 1px solid var(--border-color);205  border-radius: 6px;206  margin-top: 0;207  margin-bottom: var(--block-spacing-y);208  padding: 0 !important;209}210 211.code-output pre {212  padding: calc(var(--spacing-3) + 6px) var(--spacing-3) var(--spacing-3) var(--spacing-3) !important;213}214 215/* If immediately following a code container, keep tight visual connection */216.code-card + .code-output,217.astro-code + .code-output,218section.content-grid pre + .code-output {219  margin-top: 0;220  border-top: none;221  border-top-left-radius: 0;222  border-top-right-radius: 0;223  box-shadow: inset 0 8px 12px -12px rgba(0, 0, 0, 0.15);224}225 226/* Remove bottom margin on code when immediately followed by results */227.astro-code:has(+ .code-output) {228  margin-bottom: 0 !important;229}230.code-card:has(+ .code-output) .astro-code {231  margin-bottom: 0 !important;232}233section.content-grid pre:has(+ .code-output) {234  margin-bottom: 0 !important;235}236 237/* Remove bottom border radius on code when followed by results */238.astro-code:has(+ .code-output) {239  border-bottom-left-radius: 0;240  border-bottom-right-radius: 0;241}242.code-card:has(+ .code-output) .astro-code {243  border-bottom-left-radius: 0;244  border-bottom-right-radius: 0;245}246section.content-grid pre:has(+ .code-output) {247  border-bottom-left-radius: 0;248  border-bottom-right-radius: 0;249}250 251/* Small top-left label */252.code-output::before {253  content: "Output";254  position: absolute;255  top: 0;256  right: 0;257  font-size: 10px;258  line-height: 1;259  color: var(--muted-color);260  text-transform: uppercase;261  letter-spacing: 0.04em;262  border-top: none;263  border-right: none;264  border-radius: 0 0 0 6px;265  padding: 10px 10px;266}267 268/* Very subtle top shadow so results feels under the code */269.code-output {270}271 272.code-output > :where(*):first-child {273  margin-top: 0 !important;274}275 276.code-output > :where(*):last-child {277  margin-bottom: 0 !important;278}279 280/* ============================================================================ */281/* Optional filename tag above code blocks */282/* ============================================================================ */283.code-filename {284  display: inline-block;285  font-size: 12px;286  line-height: 1;287  color: var(--muted-color);288  background: var(--surface-bg);289  border: 1px solid var(--border-color);290  border-bottom: none;291  border-radius: 6px 6px 0 0;292  padding: 4px 8px;293  margin: 0;294}295 296.code-filename + .code-card .astro-code,297.code-filename + .astro-code,298.code-filename + section.content-grid pre {299  border-top-left-radius: 0;300  border-top-right-radius: 6px;301}302