starlight-theme-nova 0.7.0 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/markdown.css +0 -1
  2. package/lib/styles.css +6 -6
  3. package/package.json +1 -1
  4. package/src/components/CodeTabs.astro +41 -39
  5. package/src/components/Hero.astro +68 -66
  6. package/src/components/MarkdownContent.astro +4 -2
  7. package/src/components/PageFrame.astro +35 -33
  8. package/src/components/Search.astro +90 -88
  9. package/src/components/TwoColumnContent.astro +25 -23
package/lib/markdown.css CHANGED
@@ -14,7 +14,6 @@
14
14
  border-style: solid;
15
15
  border-width: 1px;
16
16
  border-color: var(--sl-color-border-inline-code);
17
- background-color: var(--sl-color-bg-inline-code);
18
17
  padding: 0.125rem 0.25rem;
19
18
  }
20
19
 
package/lib/styles.css CHANGED
@@ -1,8 +1,8 @@
1
1
  @layer starlight, nova;
2
2
 
3
- @import './styles.gen.css' layer(nova.gen);
4
- @import './markdown.css' layer(nova.markdown);
5
- @import './shiki.css' layer(nova.shiki);
6
- @import './aside.css' layer(nova.aside);
7
- @import './badge.css' layer(nova.badge);
8
- @import './card.css' layer(nova.card);
3
+ @import './styles.gen.css' layer(nova);
4
+ @import './markdown.css' layer(nova);
5
+ @import './shiki.css' layer(nova);
6
+ @import './aside.css' layer(nova);
7
+ @import './badge.css' layer(nova);
8
+ @import './card.css' layer(nova);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "starlight-theme-nova",
3
3
  "type": "module",
4
- "version": "0.7.0",
4
+ "version": "0.7.2",
5
5
  "description": "",
6
6
  "author": "ocavue <ocavue@gmail.com>",
7
7
  "license": "MIT",
package/src/components/CodeTabs.astro CHANGED
@@ -20,57 +20,59 @@ const processedHtml = processCodeTabs(originalHtml)
20
20
  </div>
21
21
 
22
22
  <style is:global>
23
- .sl-markdown-content .code-tabs {
24
- overflow: hidden;
23
+ @layer nova {
24
+ .sl-markdown-content .code-tabs {
25
+ overflow: hidden;
25
26
 
26
- &.code-tabs-border {
27
- border-color: var(--sl-color-gray-5);
28
- border-width: 1px;
29
- border-style: solid;
30
- border-radius: 0.5rem;
31
- }
27
+ &.code-tabs-border {
28
+ border-color: var(--sl-color-gray-5);
29
+ border-width: 1px;
30
+ border-style: solid;
31
+ border-radius: 0.5rem;
32
+ }
32
33
 
33
- starlight-tabs {
34
- margin-top: 0;
35
- }
34
+ starlight-tabs {
35
+ margin-top: 0;
36
+ }
36
37
 
37
- .tablist-wrapper {
38
- scrollbar-width: none;
38
+ .tablist-wrapper {
39
+ scrollbar-width: none;
39
40
 
40
- [role='tablist'] {
41
- border-bottom-width: 1px;
42
- }
41
+ [role='tablist'] {
42
+ border-bottom-width: 1px;
43
+ }
43
44
 
44
- [role='tab'] {
45
- font-family: var(--sl-font-system-mono);
46
- padding-top: 0.5rem;
47
- padding-bottom: 0.25rem;
48
- padding-left: 0.75rem;
49
- padding-right: 0.75rem;
50
- font-size: 0.875rem;
51
- white-space: nowrap;
45
+ [role='tab'] {
46
+ font-family: var(--sl-font-system-mono);
47
+ padding-top: 0.5rem;
48
+ padding-bottom: 0.25rem;
49
+ padding-left: 0.75rem;
50
+ padding-right: 0.75rem;
51
+ font-size: 0.875rem;
52
+ white-space: nowrap;
52
53
 
53
- border-bottom-style: solid;
54
- border-bottom-width: 0px;
54
+ border-bottom-style: solid;
55
+ border-bottom-width: 0px;
55
56
 
56
- &[aria-selected='true'] {
57
- border-bottom-width: 3px;
57
+ &[aria-selected='true'] {
58
+ border-bottom-width: 3px;
59
+ }
58
60
  }
59
61
  }
60
- }
61
62
 
62
- div[role='tabpanel'] {
63
- margin: 0;
64
- }
63
+ div[role='tabpanel'] {
64
+ margin: 0;
65
+ }
65
66
 
66
- .astro-code {
67
- border-radius: 0;
68
- }
67
+ .astro-code {
68
+ border-radius: 0;
69
+ }
69
70
 
70
- .nova-code-container {
71
- border-radius: 0;
72
- border-width: 0;
73
- border-color: transparent;
71
+ .nova-code-container {
72
+ border-radius: 0;
73
+ border-width: 0;
74
+ border-color: transparent;
75
+ }
74
76
  }
75
77
  }
76
78
  </style>
package/src/components/Hero.astro CHANGED
@@ -80,86 +80,88 @@ if (image) {
80
80
  </div>
81
81
 
82
82
  <style>
83
- .hero {
84
- display: grid;
85
- align-items: center;
86
- gap: 1rem;
87
- padding-bottom: 1rem;
88
- }
89
-
90
- .hero > img,
91
- .hero > .hero-html {
92
- object-fit: contain;
93
- width: min(70%, 20rem);
94
- height: auto;
95
- margin-inline: auto;
96
- }
97
-
98
- .stack {
99
- flex-direction: column;
100
- gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
101
- text-align: center;
102
- }
103
-
104
- .copy {
105
- flex-direction: column;
106
- gap: 1rem;
107
- align-items: center;
108
- }
109
-
110
- .copy > * {
111
- max-width: 50ch;
112
- }
113
-
114
- h1 {
115
- font-size: clamp(
116
- var(--sl-text-3xl),
117
- calc(0.25rem + 5vw),
118
- var(--sl-text-6xl)
119
- );
120
- line-height: var(--sl-line-height-headings);
121
- font-weight: 600;
122
- color: var(--sl-color-white);
123
- }
124
-
125
- .tagline {
126
- font-size: clamp(
127
- var(--sl-text-base),
128
- calc(0.0625rem + 2vw),
129
- var(--sl-text-xl)
130
- );
131
- color: var(--sl-color-gray-2);
132
- }
133
-
134
- .actions {
135
- gap: 1rem 2rem;
136
- flex-wrap: wrap;
137
- justify-content: center;
138
- }
139
-
140
- @media (min-width: 50rem) {
83
+ @layer nova {
141
84
  .hero {
142
- grid-template-columns: 7fr 4fr;
143
- gap: 3%;
144
- padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
85
+ display: grid;
86
+ align-items: center;
87
+ gap: 1rem;
88
+ padding-bottom: 1rem;
145
89
  }
146
90
 
147
91
  .hero > img,
148
92
  .hero > .hero-html {
149
- order: 2;
150
- width: min(100%, 25rem);
93
+ object-fit: contain;
94
+ width: min(70%, 20rem);
95
+ height: auto;
96
+ margin-inline: auto;
151
97
  }
152
98
 
153
99
  .stack {
154
- text-align: start;
100
+ flex-direction: column;
101
+ gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
102
+ text-align: center;
155
103
  }
156
104
 
157
105
  .copy {
158
- align-items: flex-start;
106
+ flex-direction: column;
107
+ gap: 1rem;
108
+ align-items: center;
109
+ }
110
+
111
+ .copy > * {
112
+ max-width: 50ch;
113
+ }
114
+
115
+ h1 {
116
+ font-size: clamp(
117
+ var(--sl-text-3xl),
118
+ calc(0.25rem + 5vw),
119
+ var(--sl-text-6xl)
120
+ );
121
+ line-height: var(--sl-line-height-headings);
122
+ font-weight: 600;
123
+ color: var(--sl-color-white);
124
+ }
125
+
126
+ .tagline {
127
+ font-size: clamp(
128
+ var(--sl-text-base),
129
+ calc(0.0625rem + 2vw),
130
+ var(--sl-text-xl)
131
+ );
132
+ color: var(--sl-color-gray-2);
159
133
  }
160
134
 
161
135
  .actions {
162
- justify-content: flex-start;
136
+ gap: 1rem 2rem;
137
+ flex-wrap: wrap;
138
+ justify-content: center;
139
+ }
140
+
141
+ @media (min-width: 50rem) {
142
+ .hero {
143
+ grid-template-columns: 7fr 4fr;
144
+ gap: 3%;
145
+ padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
146
+ }
147
+
148
+ .hero > img,
149
+ .hero > .hero-html {
150
+ order: 2;
151
+ width: min(100%, 25rem);
152
+ }
153
+
154
+ .stack {
155
+ text-align: start;
156
+ }
157
+
158
+ .copy {
159
+ align-items: flex-start;
160
+ }
161
+
162
+ .actions {
163
+ justify-content: flex-start;
164
+ }
163
165
  }
164
166
  }
165
167
  </style>
package/src/components/MarkdownContent.astro CHANGED
@@ -8,8 +8,10 @@ import CodeCopy from './CodeCopy.astro'
8
8
  </Default>
9
9
 
10
10
  <style is:global>
11
- :root .sl-markdown-content dd:not(:where(.not-content *)) {
12
- padding-inline-start: 2rem;
11
+ @layer nova {
12
+ :root .sl-markdown-content dd:not(:where(.not-content *)) {
13
+ padding-inline-start: 2rem;
14
+ }
13
15
  }
14
16
  </style>
15
17
 
package/src/components/PageFrame.astro CHANGED
@@ -30,45 +30,47 @@ const { hasSidebar } = Astro.locals.starlightRoute
30
30
  </div>
31
31
 
32
32
  <style>
33
- .sidebar-pane {
34
- visibility: var(--sl-sidebar-visibility, hidden);
35
- position: fixed;
36
- z-index: var(--sl-z-index-menu);
37
- inset-block: var(--sl-nav-height) 0;
38
- inset-inline-start: 0;
39
- width: 100%;
40
- background-color: var(--sl-color-black);
41
- overflow-y: auto;
42
- }
33
+ @layer nova {
34
+ .sidebar-pane {
35
+ visibility: var(--sl-sidebar-visibility, hidden);
36
+ position: fixed;
37
+ z-index: var(--sl-z-index-menu);
38
+ inset-block: var(--sl-nav-height) 0;
39
+ inset-inline-start: 0;
40
+ width: 100%;
41
+ background-color: var(--sl-color-black);
42
+ overflow-y: auto;
43
+ }
43
44
 
44
- :global([aria-expanded='true']) ~ .sidebar-pane {
45
- --sl-sidebar-visibility: visible;
46
- }
45
+ :global([aria-expanded='true']) ~ .sidebar-pane {
46
+ --sl-sidebar-visibility: visible;
47
+ }
47
48
 
48
- .sidebar-content {
49
- height: 100%;
50
- min-height: max-content;
51
- padding: 1rem var(--sl-sidebar-pad-x) 0;
52
- flex-direction: column;
53
- gap: 1rem;
54
- }
49
+ .sidebar-content {
50
+ height: 100%;
51
+ min-height: max-content;
52
+ padding: 1rem var(--sl-sidebar-pad-x) 0;
53
+ flex-direction: column;
54
+ gap: 1rem;
55
+ }
55
56
 
56
- @media (min-width: 50rem) {
57
- .sidebar-content::after {
58
- content: '';
59
- padding-bottom: 1px;
57
+ @media (min-width: 50rem) {
58
+ .sidebar-content::after {
59
+ content: '';
60
+ padding-bottom: 1px;
61
+ }
60
62
  }
61
- }
62
63
 
63
- .main-frame {
64
- padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
65
- padding-inline-start: var(--sl-content-inline-start);
66
- }
64
+ .main-frame {
65
+ padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
66
+ padding-inline-start: var(--sl-content-inline-start);
67
+ }
67
68
 
68
- @media (min-width: 50rem) {
69
- .sidebar-pane {
70
- --sl-sidebar-visibility: visible;
71
- width: var(--sl-sidebar-width);
69
+ @media (min-width: 50rem) {
70
+ .sidebar-pane {
71
+ --sl-sidebar-visibility: visible;
72
+ width: var(--sl-sidebar-width);
73
+ }
72
74
  }
73
75
  }
74
76
  </style>
package/src/components/Search.astro CHANGED
@@ -5,115 +5,117 @@ import Default from '@astrojs/starlight/components/Search.astro'
5
5
  <Default />
6
6
 
7
7
  <style is:global>
8
- site-search {
9
- & dialog {
10
- background-color: var(--sl-color-bg);
11
- }
12
-
13
- & input:focus-visible {
14
- outline-style: solid;
15
- outline-width: 1px;
16
- outline-color: var(--sl-color-accent);
17
- }
18
- }
19
-
20
- ::backdrop {
21
- --sl-color-backdrop-overlay: hsl(0 0 0% / 0.9);
22
- }
23
-
24
- [data-theme='light'] ::backdrop {
25
- --sl-color-backdrop-overlay: hsl(0 0 100% / 0.9);
26
- }
27
-
28
- @media (prefers-reduced-motion: no-preference) {
8
+ @layer nova {
29
9
  site-search {
30
- & dialog,
31
- & dialog::backdrop {
32
- transition:
33
- display 300ms allow-discrete,
34
- overlay 300ms allow-discrete;
35
- animation-timing-function: ease-out;
36
- animation-fill-mode: forwards;
37
- will-change: transform, opacity, backdrop-filter, background-color;
38
- }
39
-
40
10
  & dialog {
41
- animation-name: nova-search-dialog-zoom-out;
42
- animation-duration: 150ms;
43
- transform: translateZ(0);
11
+ background-color: var(--sl-color-bg);
44
12
  }
45
13
 
46
- & dialog[open] {
47
- animation-duration: 75ms;
48
- animation-name: nova-search-dialog-zoom-in;
14
+ & input:focus-visible {
15
+ outline-style: solid;
16
+ outline-width: 1px;
17
+ outline-color: var(--sl-color-accent);
49
18
  }
19
+ }
50
20
 
51
- & dialog::backdrop {
52
- -webkit-backdrop-filter: none;
53
- backdrop-filter: none;
21
+ ::backdrop {
22
+ --sl-color-backdrop-overlay: hsl(0 0 0% / 0.9);
23
+ }
54
24
 
55
- animation-duration: 150ms;
56
- animation-name: nova-search-backdrop-fade-out;
57
- }
25
+ [data-theme='light'] ::backdrop {
26
+ --sl-color-backdrop-overlay: hsl(0 0 100% / 0.9);
27
+ }
58
28
 
59
- & dialog[open]::backdrop {
60
- animation-duration: 75ms;
61
- animation-name: nova-search-backdrop-fade-in;
29
+ @media (prefers-reduced-motion: no-preference) {
30
+ site-search {
31
+ & dialog,
32
+ & dialog::backdrop {
33
+ transition:
34
+ display 300ms allow-discrete,
35
+ overlay 300ms allow-discrete;
36
+ animation-timing-function: ease-out;
37
+ animation-fill-mode: forwards;
38
+ will-change: transform, opacity, backdrop-filter, background-color;
39
+ }
40
+
41
+ & dialog {
42
+ animation-name: nova-search-dialog-zoom-out;
43
+ animation-duration: 150ms;
44
+ transform: translateZ(0);
45
+ }
46
+
47
+ & dialog[open] {
48
+ animation-duration: 75ms;
49
+ animation-name: nova-search-dialog-zoom-in;
50
+ }
51
+
52
+ & dialog::backdrop {
53
+ -webkit-backdrop-filter: none;
54
+ backdrop-filter: none;
55
+
56
+ animation-duration: 150ms;
57
+ animation-name: nova-search-backdrop-fade-out;
58
+ }
59
+
60
+ & dialog[open]::backdrop {
61
+ animation-duration: 75ms;
62
+ animation-name: nova-search-backdrop-fade-in;
63
+ }
62
64
  }
63
65
  }
64
- }
65
66
 
66
- @keyframes nova-search-backdrop-fade-in {
67
- from {
68
- background-color: transparent;
69
- }
70
- to {
71
- background-color: var(--sl-color-backdrop-overlay);
67
+ @keyframes nova-search-backdrop-fade-in {
68
+ from {
69
+ background-color: transparent;
70
+ }
71
+ to {
72
+ background-color: var(--sl-color-backdrop-overlay);
73
+ }
72
74
  }
73
- }
74
75
 
75
- @keyframes nova-search-backdrop-fade-out {
76
- from {
77
- background-color: var(--sl-color-backdrop-overlay);
78
- }
79
- to {
80
- background-color: transparent;
76
+ @keyframes nova-search-backdrop-fade-out {
77
+ from {
78
+ background-color: var(--sl-color-backdrop-overlay);
79
+ }
80
+ to {
81
+ background-color: transparent;
82
+ }
81
83
  }
82
- }
83
-
84
- site-search {
85
- --nova-search-dialog-zoom-scale: 1;
86
- --nova-search-dialog-zoom-translate-y: 0;
87
- }
88
84
 
89
- @media (min-width: 72rem) {
90
85
  site-search {
91
- --nova-search-dialog-zoom-scale: 0.95;
92
- --nova-search-dialog-zoom-translate-y: -1rem;
86
+ --nova-search-dialog-zoom-scale: 1;
87
+ --nova-search-dialog-zoom-translate-y: 0;
93
88
  }
94
- }
95
89
 
96
- @keyframes nova-search-dialog-zoom-in {
97
- from {
98
- opacity: 0;
99
- transform: scale(var(--nova-search-dialog-zoom-scale))
100
- translateY(var(--nova-search-dialog-zoom-translate-y));
101
- }
102
- to {
103
- opacity: 1;
104
- transform: scale(1) translateY(0);
90
+ @media (min-width: 72rem) {
91
+ site-search {
92
+ --nova-search-dialog-zoom-scale: 0.95;
93
+ --nova-search-dialog-zoom-translate-y: -1rem;
94
+ }
105
95
  }
106
- }
107
96
 
108
- @keyframes nova-search-dialog-zoom-out {
109
- from {
110
- opacity: 1;
111
- transform: scale(1) translateY(0);
97
+ @keyframes nova-search-dialog-zoom-in {
98
+ from {
99
+ opacity: 0;
100
+ transform: scale(var(--nova-search-dialog-zoom-scale))
101
+ translateY(var(--nova-search-dialog-zoom-translate-y));
102
+ }
103
+ to {
104
+ opacity: 1;
105
+ transform: scale(1) translateY(0);
106
+ }
112
107
  }
113
- to {
114
- opacity: 0;
115
- transform: scale(var(--nova-search-dialog-zoom-scale))
116
- translateY(var(--nova-search-dialog-zoom-translate-y));
108
+
109
+ @keyframes nova-search-dialog-zoom-out {
110
+ from {
111
+ opacity: 1;
112
+ transform: scale(1) translateY(0);
113
+ }
114
+ to {
115
+ opacity: 0;
116
+ transform: scale(var(--nova-search-dialog-zoom-scale))
117
+ translateY(var(--nova-search-dialog-zoom-translate-y));
118
+ }
117
119
  }
118
120
  }
119
121
  </style>
package/src/components/TwoColumnContent.astro CHANGED
@@ -12,32 +12,34 @@
12
12
  </div>
13
13
 
14
14
  <style>
15
- .main-pane {
16
- isolation: isolate;
17
- overflow-x: hidden;
18
- }
19
-
20
- @media (min-width: 72rem) {
21
- .right-sidebar-container {
22
- order: 2;
23
- position: relative;
24
- width: var(--sl-sidebar-width);
15
+ @layer nova {
16
+ .main-pane {
17
+ isolation: isolate;
18
+ overflow-x: hidden;
25
19
  }
26
20
 
27
- .right-sidebar {
28
- position: fixed;
29
- top: 0;
30
- right: 0;
31
- border-inline-start: 1px solid var(--sl-color-hairline);
32
- padding-top: var(--sl-nav-height);
33
- height: 100vh;
34
- width: var(--sl-sidebar-width);
35
- overflow-y: auto;
36
- scrollbar-width: none;
37
- }
21
+ @media (min-width: 72rem) {
22
+ .right-sidebar-container {
23
+ order: 2;
24
+ position: relative;
25
+ width: var(--sl-sidebar-width);
26
+ }
38
27
 
39
- .main-pane {
40
- flex: 1;
28
+ .right-sidebar {
29
+ position: fixed;
30
+ top: 0;
31
+ right: 0;
32
+ border-inline-start: 1px solid var(--sl-color-hairline);
33
+ padding-top: var(--sl-nav-height);
34
+ height: 100vh;
35
+ width: var(--sl-sidebar-width);
36
+ overflow-y: auto;
37
+ scrollbar-width: none;
38
+ }
39
+
40
+ .main-pane {
41
+ flex: 1;
42
+ }
41
43
  }
42
44
  }
43
45
  </style>