Skip to content

Commit 912e3b2

Browse files
committed
chore: explain what "Written for version" means
1 parent 479df86 commit 912e3b2

File tree

1 file changed

+51
-11
lines changed

1 file changed

+51
-11
lines changed

src/components/Version.astro

Lines changed: 51 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,31 @@ const { version, inline } = Astro.props;
1010
---
1111

1212
<div class:list={["notice", inline && "notice-inline"]}>
13-
<Icon name="information" class="icon" />
14-
<div class="notice-inner">
15-
Written for version:
16-
<span>{version}</span>
13+
<div class="notice-block">
14+
<Icon name="information" class="icon" />
15+
<div class="notice-inner">
16+
Written for version:
17+
<span class="notice-version">{version}</span>
18+
{
19+
!inline && (
20+
<span
21+
class="notice-fineprint"
22+
title="This shows the earliest version for which this page is fully accurate. Features or APIs mentioned here may be missing or incomplete in older versions."
23+
>
24+
What does this mean?
25+
</span>
26+
)
27+
}
28+
</div>
1729
</div>
30+
{
31+
inline && (
32+
<span class="notice-fineprint">
33+
This shows the earliest version for which this page is fully accurate. Features or APIs mentioned here may be
34+
missing or incomplete in older versions.
35+
</span>
36+
)
37+
}
1838
</div>
1939

2040
<style>
@@ -24,38 +44,58 @@ const { version, inline } = Astro.props;
2444

2545
.notice {
2646
display: inline-flex;
27-
flex-direction: row;
28-
gap: 1rem;
29-
align-items: center;
47+
flex-direction: column;
48+
gap: 0.5rem;
3049
font-size: var(--sl-text-xs);
3150
padding: 1rem 1.25rem;
3251
border-radius: 0.5rem;
3352
background-color: oklch(from var(--sl-color-accent) l c h / 0.125);
3453
margin-bottom: 1rem;
3554
}
3655

37-
.notice span {
56+
.notice-block {
57+
display: flex;
58+
flex-direction: row;
59+
gap: 1rem;
60+
align-items: center;
61+
}
62+
63+
.notice-version {
3864
font-weight: 600;
3965
font-size: var(--sl-text-xl);
4066
}
4167

42-
.notice .notice-inner {
68+
.notice-inner {
4369
display: flex;
4470
flex-direction: column;
4571
}
4672

73+
.notice-fineprint {
74+
cursor: pointer;
75+
font-size: var(--sl-text-2xs);
76+
text-decoration: underline dashed oklch(from var(--sl-color-gray-2) l c h / 0.5);
77+
}
78+
4779
.notice-inline {
48-
display: flex;
4980
margin: 0;
5081
border-radius: 0;
5182
padding: 1rem var(--sl-content-pad-x);
5283
font-size: var(--sl-text-sm);
5384
}
5485

55-
.notice-inline span {
86+
.notice-inline .notice-block {
87+
display: flex;
88+
}
89+
90+
.notice-inline .notice-version {
5691
font-size: var(--sl-text-sm);
5792
}
5893

94+
.notice-inline .notice-fineprint {
95+
cursor: default;
96+
text-decoration: none;
97+
}
98+
5999
.notice-inline .icon {
60100
font-size: var(--sl-text-lg);
61101
}

0 commit comments

Comments
 (0)