Skip to content

Commit c141eed

Browse files
ashmodanother-rex
andauthored
fix(docs): restore callout styling and improve highlight block visibility (#4956)
A recent just-the-docs update [broke callout block styling](https://google.github.io/osv.dev/post-v1-query/#:~:text=dev/v1/query%22-,The%20API,-has%20a%20response) on the docs pages. This PR adds a custom override to restore callouts to their original styles. Also improved highlight block readability to match [the one applied in osv-scanner docs](google/osv-scanner#2106) a while back. (Warning and Highlight blocks are not used anywhere in the osv.dev docs yet, but this should help ensure the styles are ready for future updates.) --------- Co-authored-by: Rex P <106129829+another-rex@users.noreply.github.com>
1 parent 3c28bd6 commit c141eed

4 files changed

Lines changed: 19 additions & 5 deletions

File tree

docs/_sass/color_schemes/_variables.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ $green-000: #41d693 !default;
2121
$green-100: #11b584 !default;
2222
$green-200: #009c7b !default;
2323
$green-300: #026e57 !default;
24-
$yellow-000: #ffeb82 !default;
24+
// Override the default yellow 000 for better visibility
25+
$yellow-000: #5f4f00;
2526
$yellow-100: #fadf50 !default;
2627
$yellow-200: #f7d12e !default;
2728
$yellow-300: #e7af06 !default;

docs/_sass/color_schemes/custom_dark.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ $sidebar-color: $new-body-background-color; //Replacing default $grey-dk-300
1515
$base-button-color: $grey-dk-250;
1616
$btn-primary-color: $blue-200;
1717
$code-background-color:#202020; // Important to match with .highlight background and .highlight.err background-color
18-
$code-linenumber-color: #447fcf; // Important to match with .highlight.nf color
18+
$code-linenumber-color: #f5f6fa; // Important to match with .highlight.nf color
1919
$feedback-color: darken($sidebar-color, 3%);
2020
$table-background-color: lighten($new-body-background-color, 5%); // Replacing default $grey-dk-250
2121
$search-background-color: $new-body-background-color; // Replacing default $grey-dk-250

docs/_sass/custom/custom.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Fixes callout styling regression introduced in just-the-docs v0.11.0 which
2+
// replaced the colored background fill with an all-sides border outline.
3+
// These overrides restore the left-border + colored-background style.
4+
5+
@mixin callout-fix($bg-color, $border-color) {
6+
border: none;
7+
border-left: $border-radius solid $border-color;
8+
background: rgba($bg-color, 0.2);
9+
}
10+
11+
p.note, blockquote.note { @include callout-fix($purple-000, $purple-300); }
12+
p.warning, blockquote.warning { @include callout-fix($red-000, $red-300); }
13+
p.highlight, blockquote.highlight { @include callout-fix($yellow-000, $yellow-300); }

docs/_sass/highlight/native.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@
131131
}
132132

133133
.nc {
134-
color: #447fcf;
134+
color: #f5f6fa;
135135
text-decoration: underline;
136136
}
137137

@@ -152,15 +152,15 @@
152152
}
153153

154154
.nf {
155-
color: #447fcf;
155+
color: #f5f6fa;
156156
}
157157

158158
.nl {
159159
color: #d0d0d0;
160160
}
161161

162162
.nn {
163-
color: #447fcf;
163+
color: #f5f6fa;
164164
text-decoration: underline;
165165
}
166166

0 commit comments

Comments
 (0)