style(api): refine code samples, schema examples, and layout width
- Move Ask AI link to header bar alongside Example request title - Use theme-aware variables for code block backgrounds and colors - Fix schema example blocks: separate header bar from code content - Normalize description font sizes to inherit page base size - Keep inline code font-size proportional with font-size: inherit - Widen API content wrapper to match regular article width (~850px) - Remove TOC border-left at compressed viewport widths (1281-1535px)feat-api-uplift
Jason Stirnaman
parent
f061004c50
commit
313fca7294
|
|
@ -13,10 +13,11 @@
|
|||
}
|
||||
|
||||
.api-code-sample-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
padding: $api-spacing-sm $api-spacing-md;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
|
||||
|
|
@ -24,14 +25,19 @@
|
|||
background: rgba(255, 255, 255, 0.03);
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.api-code-sample-title {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
pre.api-code-block {
|
||||
margin: 0;
|
||||
padding: $api-spacing-md;
|
||||
overflow-x: auto;
|
||||
background: #1e1e2e;
|
||||
color: #cdd6f4;
|
||||
background: $article-code-bg;
|
||||
color: $article-code;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0;
|
||||
|
|
@ -46,25 +52,14 @@ 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 {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
color: $article-link;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -9,11 +9,14 @@
|
|||
|
||||
// Content wrapper becomes flex container when used with API content
|
||||
// Override overflow:hidden from _content-wrapper.scss to enable sticky positioning
|
||||
// Widen to compensate for the API TOC so article content matches regular pages
|
||||
.content-wrapper.api-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
overflow: visible; // Required for sticky TOC to work
|
||||
width: calc(75% + 200px);
|
||||
max-width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
// Main API content area (center column)
|
||||
|
|
@ -727,6 +730,7 @@
|
|||
@include media(large) {
|
||||
.content-wrapper.api-content {
|
||||
flex-direction: column;
|
||||
width: 75%; // Reset to default when TOC is hidden
|
||||
}
|
||||
|
||||
.api-toc {
|
||||
|
|
@ -770,9 +774,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Match sidebar responsive widths
|
||||
@media (min-width: 801px) and (max-width: 1200px) {
|
||||
// Compressed layout: narrower TOC, drop border to reduce visual clutter
|
||||
// TOC is hidden at ≤1280px (large breakpoint), so this targets the
|
||||
// narrow window where the TOC is visible but space is tight.
|
||||
@media (min-width: 1281px) and (max-width: 1535px) {
|
||||
.api-toc {
|
||||
width: 180px;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,11 @@ $status-server-error: #9b2aff;
|
|||
padding-top: $api-spacing-xl;
|
||||
border-top: 2px solid $nav-border;
|
||||
|
||||
// Keep inline code proportional to surrounding text
|
||||
code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
|
|
@ -183,7 +188,6 @@ $status-server-error: #9b2aff;
|
|||
|
||||
.api-param-description {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
color: $article-text;
|
||||
line-height: 1.5;
|
||||
|
||||
|
|
@ -323,7 +327,6 @@ $status-server-error: #9b2aff;
|
|||
|
||||
.api-schema-property-description {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
color: $article-text;
|
||||
line-height: 1.5;
|
||||
|
||||
|
|
@ -358,22 +361,34 @@ $status-server-error: #9b2aff;
|
|||
// Schema Example Block
|
||||
.api-schema-example {
|
||||
margin-top: $api-spacing-md;
|
||||
padding: $api-spacing-md;
|
||||
background: $article-code-bg;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: $api-border-radius;
|
||||
overflow: hidden;
|
||||
|
||||
.dark-theme & {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.api-schema-example-title {
|
||||
margin: 0 0 $api-spacing-sm;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: $api-spacing-sm $api-spacing-md;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: rgba($article-text, 0.6);
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
|
||||
.dark-theme & {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.api-schema-example-code {
|
||||
pre.api-schema-example-code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
padding: $api-spacing-sm $api-spacing-md;
|
||||
background: $article-code-bg;
|
||||
overflow-x: auto;
|
||||
|
||||
code {
|
||||
|
|
@ -425,7 +440,6 @@ $status-server-error: #9b2aff;
|
|||
}
|
||||
|
||||
.api-response-description {
|
||||
font-size: 0.9rem;
|
||||
color: $article-text;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -222,14 +222,14 @@
|
|||
|
||||
{{/* --- Render --- */}}
|
||||
<div class="api-code-sample">
|
||||
<h5 class="api-code-sample-header">Example request</h5>
|
||||
<div class="api-code-sample-header">
|
||||
<span class="api-code-sample-title">Example request</span>
|
||||
<a href="#" class="ask-ai-open api-code-ask-ai"
|
||||
data-query="{{ $aiQuery }}">
|
||||
Ask AI about this
|
||||
</a>
|
||||
</div>
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
{{/* Show example at schema level */}}
|
||||
{{ if and $example (eq $level 0) }}
|
||||
<div class="api-schema-example">
|
||||
<h5 class="api-schema-example-title">Example</h5>
|
||||
<span class="api-schema-example-title">Example request body</span>
|
||||
<pre class="api-schema-example-code"><code class="language-json">{{ jsonify (dict "indent" " ") $example }}</code></pre>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue