style(api): move Ask AI link below code block with theme-aware styling

Position the Ask AI link in a footer bar below the code sample instead
of overlaying it on the code block. Use site theme colors instead of
hardcoded values.
feat-api-uplift
Jason Stirnaman 2026-03-09 22:12:53 -05:00
parent 32b64f3d7d
commit f061004c50
2 changed files with 17 additions and 10 deletions

View File

@ -26,14 +26,9 @@
}
}
.api-code-sample-body {
position: relative;
}
pre.api-code-block {
margin: 0;
padding: $api-spacing-md;
padding-bottom: $api-spacing-lg + 0.5rem;
overflow-x: auto;
background: #1e1e2e;
color: #cdd6f4;
@ -51,13 +46,23 @@ pre.api-code-block {
}
}
.api-code-sample-footer {
display: flex;
justify-content: flex-end;
padding: $api-spacing-sm $api-spacing-md;
background: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0, 0, 0, 0.1);
.dark-theme & {
background: rgba(255, 255, 255, 0.03);
border-top-color: rgba(255, 255, 255, 0.1);
}
}
.api-code-ask-ai {
position: absolute;
right: $api-spacing-md;
bottom: $api-spacing-sm;
font-size: 0.8rem;
color: #89b4fa;
font-size: 0.9rem;
text-decoration: none;
color: $article-link;
opacity: 0.7;
transition: opacity 0.2s;

View File

@ -225,6 +225,8 @@
<h5 class="api-code-sample-header">Example request</h5>
<div class="api-code-sample-body">
<pre class="api-code-block"><code class="language-sh">{{ $curlCommand }}</code></pre>
</div>
<div class="api-code-sample-footer">
<a href="#" class="ask-ai-open api-code-ask-ai"
data-query="{{ $aiQuery }}">
Ask AI about this example