Skip to content

Commit f66754e

Browse files
JohnWeidnerJohnWeidner
committed
misc changes
1 parent 5b1544f commit f66754e

5 files changed

Lines changed: 99 additions & 53 deletions

File tree

‎site_jaspr/lib/components/collapsible_sidebar.dart‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ class CollapsibleSidebar extends StatelessComponent {
305305
// ── Sidebar link group ───────────────────────────────────────────────
306306
css('.sidebar-group', [
307307
css('&').styles(
308-
padding: Padding.only(top: 1.5.rem, right: 0.75.rem),
308+
padding: Padding.only(top: 1.5.rem, right: 0.75.rem, left: 8.px),
309309
),
310310
css('ul').styles(
311311
padding: Padding.zero,
@@ -323,6 +323,7 @@ class CollapsibleSidebar extends StatelessComponent {
323323
radius: BorderRadius.circular(0.25.rem),
324324
alignItems: AlignItems.center,
325325
color: Color.inherit,
326+
fontSize: 1.rem,
326327
fontWeight: FontWeight.w400,
327328
textDecoration: TextDecoration.none,
328329
raw: {

‎site_jaspr/lib/components/homepage_layout.dart‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ class HomepageLayout extends PageLayoutBase {
124124
zIndex: ZIndex(10),
125125
raw: {
126126
'backdrop-filter': 'blur(8px)',
127-
'background-color': 'rgba(251, 252, 255, 0.7)',
127+
'background-color': 'rgba(255, 255, 255, 0.7)',
128128
},
129129
),
130130
]),
@@ -156,9 +156,9 @@ class HomepageLayout extends PageLayoutBase {
156156
css('.hero-logo-dark').styles(display: Display.none),
157157
css('.hero-subtitle', [
158158
css('&').styles(
159-
margin: Margin.only(bottom: 1.rem),
160-
color: Color('#606770'),
161-
fontSize: 1.25.rem,
159+
margin: Margin.only(bottom: 1.25.rem),
160+
color: Color('#444950'),
161+
fontSize: 1.5.rem,
162162
),
163163
]),
164164
css('.hero-image', [
@@ -181,11 +181,11 @@ class HomepageLayout extends PageLayoutBase {
181181
css('.cta-button', [
182182
css('&').styles(
183183
display: Display.inlineBlock,
184-
padding: Padding.symmetric(horizontal: 1.5.rem, vertical: 0.75.rem),
185-
radius: BorderRadius.circular(8.px),
184+
padding: Padding.symmetric(horizontal: 2.rem, vertical: 0.5.rem),
185+
radius: BorderRadius.circular(0.4.rem),
186186
color: Colors.white,
187-
fontSize: 1.125.rem,
188-
fontWeight: FontWeight.w600,
187+
fontSize: 1.2.rem,
188+
fontWeight: FontWeight.w700,
189189
textDecoration: TextDecoration.none,
190190
backgroundColor: Color('#2a48df'),
191191
),
@@ -198,7 +198,7 @@ class HomepageLayout extends PageLayoutBase {
198198
padding: Padding.symmetric(horizontal: 3.rem, vertical: 4.rem),
199199
flexDirection: FlexDirection.column,
200200
alignItems: AlignItems.center,
201-
gap: Gap(column: 0.5.rem),
201+
gap: Gap(row: 0.5.rem),
202202
),
203203
css.media(MediaQuery.all(maxWidth: 996.px), [
204204
css('&').styles(padding: Padding.symmetric(horizontal: 1.rem, vertical: 2.rem)),
@@ -210,10 +210,10 @@ class HomepageLayout extends PageLayoutBase {
210210
flexDirection: FlexDirection.row,
211211
justifyContent: JustifyContent.center,
212212
alignItems: AlignItems.center,
213-
gap: Gap(column: 2.rem),
213+
gap: Gap(column: 2.rem, row: 2.rem),
214214
),
215215
css.media(MediaQuery.all(maxWidth: 996.px), [
216-
css('&').styles(flexDirection: FlexDirection.column, gap: Gap(column: 1.rem)),
216+
css('&').styles(flexDirection: FlexDirection.column, gap: Gap(column: 1.rem, row: 1.rem)),
217217
]),
218218
]),
219219
css('.blog-column', [
@@ -222,7 +222,7 @@ class HomepageLayout extends PageLayoutBase {
222222
maxWidth: 452.px,
223223
flexDirection: FlexDirection.column,
224224
alignItems: AlignItems.center,
225-
gap: Gap(column: 1.rem),
225+
gap: Gap(row: 1.rem),
226226
),
227227
css('img').styles(height: Unit.auto, maxWidth: 100.percent, radius: BorderRadius.circular(8.px)),
228228
]),
@@ -231,7 +231,7 @@ class HomepageLayout extends PageLayoutBase {
231231
display: Display.flex,
232232
flexDirection: FlexDirection.column,
233233
alignItems: AlignItems.start,
234-
gap: Gap(column: 0.25.rem),
234+
gap: Gap(row: 0.75.rem),
235235
lineHeight: 1.5.rem,
236236
),
237237
css('h2').styles(
@@ -273,6 +273,6 @@ class HomepageLayout extends PageLayoutBase {
273273
css('[data-theme="dark"] .blog-content h2').styles(color: Color('#e3e3e3')),
274274
css('[data-theme="dark"] .blog-content p').styles(color: Color('#e3e3e3')),
275275
css('[data-theme="dark"] .blog-link').styles(color: Color('#66fbd1')),
276-
css('[data-theme="dark"] .hero-subtitle').styles(color: Color('#a0a0a0')),
276+
css('[data-theme="dark"] .hero-subtitle').styles(color: Colors.white),
277277
];
278278
}

‎site_jaspr/lib/components/nav_link.dart‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,11 @@ class NavLink extends StatelessComponent {
3838
css('.nav-button', [
3939
css('&').styles(
4040
padding: Padding.symmetric(horizontal: 1.rem, vertical: 0.5.rem),
41-
radius: BorderRadius.circular(6.px),
41+
radius: BorderRadius.circular(0.4.rem),
4242
color: Colors.white,
4343
fontWeight: FontWeight.w600,
4444
backgroundColor: Color('#2a48df'),
45+
raw: {'line-height': '1.25'},
4546
),
4647
css('&:hover').styles(backgroundColor: Color('#1e38b0')),
4748
css.media(MediaQuery.all(maxWidth: 996.px), [

‎site_jaspr/lib/components/site_footer.dart‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@ class SiteFooter extends StatelessComponent {
5656
if (t && t.getBoundingClientRect().top <= 100) active = i;
5757
}
5858
links.forEach(function(a) { a.classList.remove('toc-active'); });
59-
if (active !== null) ids[active].el.classList.add('toc-active');
59+
if (active === null) active = 0;
60+
ids[active].el.classList.add('toc-active');
6061
}
6162
window.addEventListener('scroll', update, {passive:true});
6263
update();
@@ -114,7 +115,7 @@ class SiteFooter extends StatelessComponent {
114115
padding: Padding.all(2.rem),
115116
color: Color('#606770'),
116117
textAlign: TextAlign.center,
117-
fontSize: 1.rem,
118+
fontSize: 0.75.rem,
118119
backgroundColor: Colors.white,
119120
),
120121
css('a').styles(

‎site_jaspr/lib/styles/site_styles.dart‎

Lines changed: 78 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -121,10 +121,10 @@ List<StyleRule> get siteStyles => [
121121
},
122122
),
123123
// Content links: primary color, no underline by default (matching original)
124-
css('.content a:not(.workflow-card)').styles(
124+
css('.content a:not(.workflow-card):not(.page-nav-prev):not(.page-nav-next)').styles(
125125
textDecoration: TextDecoration.none,
126126
),
127-
css('.content a:not(.workflow-card):hover').styles(
127+
css('.content a:not(.workflow-card):not(.page-nav-prev):not(.page-nav-next):hover').styles(
128128
textDecoration: TextDecoration(line: TextDecorationLine.underline),
129129
),
130130
// Blockquote: no italic, normal weight (matching Infima defaults)
@@ -138,7 +138,7 @@ List<StyleRule> get siteStyles => [
138138
// Docusaurus navbar: 60px height (3.75rem), padding 8px 16px
139139
// ───────────────────────────────────────────────────────────────────────
140140
// Opaque header background for both modes
141-
css('.header-container').styles(backgroundColor: Color('#fbfcff')),
141+
css('.header-container').styles(backgroundColor: Colors.white),
142142
css('[data-theme="dark"] .header-container').styles(
143143
backgroundColor: Color('#081842'),
144144
),
@@ -202,19 +202,22 @@ List<StyleRule> get siteStyles => [
202202
]),
203203

204204
// ───────────────────────────────────────────────────────────────────────
205-
// 5b. DARK MODE BREADCRUMB
205+
// 5b. BREADCRUMB COLORS
206206
// ───────────────────────────────────────────────────────────────────────
207+
// Light mode: breadcrumb links match Docusaurus body text (#1c1e21)
208+
css('.breadcrumb-link').styles(color: Color('#1c1e21')),
209+
// Dark mode
207210
css('[data-theme="dark"] .breadcrumb-current').styles(
208-
color: Color('#44fac7'),
211+
color: Color('#66fbd1'),
209212
),
210213
css('[data-theme="dark"] .breadcrumb-link').styles(
211-
color: Color('#a0a0a0'),
214+
color: Color('#e3e3e3'),
212215
),
213216
css('[data-theme="dark"] .breadcrumb-link:hover').styles(
214-
color: Color('#44fac7'),
217+
color: Color('#66fbd1'),
215218
),
216219
css('[data-theme="dark"] .breadcrumb-sep').styles(
217-
color: Color('#a0a0a0'),
220+
color: Color('#e3e3e3'),
218221
),
219222

220223
// ───────────────────────────────────────────────────────────────────────
@@ -223,6 +226,25 @@ List<StyleRule> get siteStyles => [
223226
// Light mode: hide moon (first span), show sun (last span).
224227
// Dark mode: show moon (first span), hide sun (last span).
225228
// ───────────────────────────────────────────────────────────────────────
229+
css('.theme-toggle').styles(
230+
padding: Padding.all(4.px),
231+
radius: BorderRadius.circular(50.percent),
232+
raw: {
233+
'width': '32px',
234+
'height': '32px',
235+
'box-sizing': 'border-box',
236+
'cursor': 'pointer',
237+
},
238+
),
239+
css('.theme-toggle:hover').styles(
240+
backgroundColor: Color('rgba(0, 0, 0, 0.1)'),
241+
),
242+
css('[data-theme="dark"] .theme-toggle:hover').styles(
243+
backgroundColor: Color('rgba(255, 255, 255, 0.1)'),
244+
),
245+
css('.theme-toggle svg').styles(
246+
raw: {'width': '24px', 'height': '24px'},
247+
),
226248
css('[data-theme="light"] .theme-toggle > span:first-child').styles(
227249
raw: {'display': 'none !important'},
228250
),
@@ -247,8 +269,10 @@ List<StyleRule> get siteStyles => [
247269
padding: Padding.only(top: 3.75.rem),
248270
),
249271
// Reduce inner div padding to match Docusaurus 16px gap
272+
// max-width 1320px matches Docusaurus .container constraint
250273
css('.docs .main-container main > div').styles(
251274
padding: Padding.only(top: 1.rem, left: 1.rem, right: 1.rem),
275+
raw: {'max-width': '1320px', 'margin': '0 auto'},
252276
),
253277
// Breadcrumb: position above content using flexbox order
254278
css('.content-container').styles(
@@ -257,8 +281,15 @@ List<StyleRule> get siteStyles => [
257281
),
258282
css('.content-footer').styles(raw: {'display': 'contents'}),
259283
css('.breadcrumb').styles(raw: {'order': '-1'}),
260-
// Override breadcrumb font-size to 16px (matching Docusaurus)
261-
css('.docs .breadcrumb').styles(fontSize: 1.rem),
284+
// Breadcrumb: match Docusaurus sizing (12.8px font, link padding, bottom margin)
285+
css('.docs .breadcrumb').styles(
286+
padding: Padding.zero,
287+
margin: Margin.only(bottom: 12.8.px),
288+
fontSize: 12.8.px,
289+
),
290+
css('.docs .breadcrumb-link, .docs .breadcrumb-current').styles(
291+
padding: Padding.symmetric(vertical: 5.12.px, horizontal: 10.24.px),
292+
),
262293

263294
// ───────────────────────────────────────────────────────────────────────
264295
// 8. SIDEBAR — layout/sizing only.
@@ -332,11 +363,13 @@ List<StyleRule> get siteStyles => [
332363
// 9. CONTENT AREA LINKS
333364
// Primary color, no underline; underline on hover (matching original).
334365
// ───────────────────────────────────────────────────────────────────────
335-
css('.content-container a:not(.breadcrumb-link):not(.workflow-card)').styles(
366+
css('.content-container a:not(.breadcrumb-link):not(.workflow-card):not(.page-nav-prev):not(.page-nav-next)').styles(
336367
color: Color('var(--content-links)'),
337368
textDecoration: TextDecoration.none,
338369
),
339-
css('.content-container a:not(.breadcrumb-link):not(.workflow-card):hover').styles(
370+
css(
371+
'.content-container a:not(.breadcrumb-link):not(.workflow-card):not(.page-nav-prev):not(.page-nav-next):hover',
372+
).styles(
340373
textDecoration: TextDecoration(line: TextDecorationLine.underline),
341374
),
342375
// Callout links: inherit foreground color + always underlined (Infima alert behavior).
@@ -384,13 +417,13 @@ List<StyleRule> get siteStyles => [
384417
padding: Padding.zero,
385418
margin: Margin.only(top: 3.rem),
386419
),
420+
// Page nav "Previous"/"Next" label: muted gray (matching Docusaurus #525860)
421+
css('.page-nav-label').styles(color: Color('#525860')),
387422
// Dark mode: page nav prev/next blocks
388-
css('[data-theme="dark"] .page-nav-prev, [data-theme="dark"] .page-nav-next')
389-
.styles(
423+
css('[data-theme="dark"] .page-nav-prev, [data-theme="dark"] .page-nav-next').styles(
390424
border: Border.all(color: Color('#444950'), width: 1.px),
391425
),
392-
css('[data-theme="dark"] .page-nav-prev:hover, [data-theme="dark"] .page-nav-next:hover')
393-
.styles(
426+
css('[data-theme="dark"] .page-nav-prev:hover, [data-theme="dark"] .page-nav-next:hover').styles(
394427
border: Border.all(color: Color('#66fbd1'), width: 1.px),
395428
),
396429
css('[data-theme="dark"] .page-nav-label').styles(
@@ -417,7 +450,9 @@ List<StyleRule> get siteStyles => [
417450
),
418451
]),
419452
// TOC: match Docusaurus styling (left border, link colors, sub-item pills)
420-
css('.docs .main-container main > div aside.toc').styles(width: 213.px),
453+
css('.docs .main-container main > div aside.toc').styles(
454+
raw: {'min-width': '140px', 'flex': '0 1 25%'},
455+
),
421456
css('.docs .main-container main > div aside.toc > div').styles(
422457
padding: Padding.only(left: 0.5.rem),
423458
border: Border.only(
@@ -453,7 +488,7 @@ List<StyleRule> get siteStyles => [
453488
),
454489
),
455490
css('[data-theme="dark"] .toc a').styles(
456-
color: Color('#a0a0a0'),
491+
color: Colors.white,
457492
),
458493
css('[data-theme="dark"] .toc a:hover').styles(
459494
color: Color('#66fbd1'),
@@ -566,7 +601,7 @@ List<StyleRule> get siteStyles => [
566601
css('.workflow-cards', [
567602
css('&').styles(
568603
display: Display.grid,
569-
gap: Gap(column: 1.rem, row: 1.rem),
604+
gap: Gap(column: 2.rem, row: 2.rem),
570605
raw: {'grid-template-columns': '1fr', 'margin': '1.5rem 0'},
571606
),
572607
]),
@@ -578,14 +613,15 @@ List<StyleRule> get siteStyles => [
578613
css('.workflow-card', [
579614
css('&').styles(
580615
display: Display.block,
581-
padding: Padding.all(1.5.rem),
582-
radius: BorderRadius.circular(0.5.rem),
616+
padding: Padding.all(2.rem),
617+
radius: BorderRadius.circular(0.8.rem),
583618
textDecoration: TextDecoration.none,
584619
raw: {
585-
'border': '1px solid #dadde1',
586-
'background': '#ffffff',
620+
'border': '1px solid #ebedf0',
621+
'background': '#fbfcff',
587622
'color': 'inherit',
588623
'transition': 'border-color 0.2s ease',
624+
'box-shadow': 'rgba(0, 0, 0, 0.15) 0px 1.5px 3px 0px',
589625
},
590626
),
591627
css('&:hover').styles(
@@ -601,22 +637,21 @@ List<StyleRule> get siteStyles => [
601637
),
602638
css('p').styles(
603639
margin: Margin.zero,
604-
opacity: 0.6,
605640
overflow: Overflow.hidden,
606-
color: Color('#000000'),
607-
fontSize: 0.875.rem,
641+
color: Color('#444950'),
642+
fontSize: 0.8.rem,
608643
textDecoration: TextDecoration.none,
609644
raw: {
610645
'display': '-webkit-box',
611-
'-webkit-line-clamp': '2',
646+
'-webkit-line-clamp': '1',
612647
'-webkit-box-orient': 'vertical',
613648
},
614649
),
615650
]),
616651
// Dark mode workflow cards
617652
css('[data-theme="dark"] .workflow-card').styles(
618653
raw: {
619-
'background': '#1b2a4a',
654+
'background': '#314155',
620655
'border-color': '#444950',
621656
},
622657
),
@@ -627,15 +662,23 @@ List<StyleRule> get siteStyles => [
627662
raw: {'border-color': '#66fbd1'},
628663
),
629664

630-
// Remove main-container side padding at wide viewports
631-
css.media(MediaQuery.all(minWidth: 1280.px), [
665+
// Remove main-container side padding (jaspr_content adds 1.25rem at 768px+)
666+
// Docusaurus has no container-level padding — padding lives inside content column
667+
css.media(MediaQuery.all(minWidth: 768.px), [
632668
css('.docs .main-container').styles(
633669
padding: Padding.symmetric(horizontal: Unit.zero),
634670
),
635671
]),
636-
// Content-container right padding: 32px gap to TOC (matching Docusaurus)
637-
// Must use high-specificity selector to override jaspr_content's 3rem default
638-
css('.docs .main-container main > div .content-container').styles(
639-
padding: Padding.only(right: 2.rem),
640-
),
672+
// Desktop content layout: remove inner div horizontal padding and move it
673+
// to content-container, so 75% is calculated on the full available space
674+
// (matching Docusaurus where contentCol = 75% of docMainContainer width)
675+
css.media(MediaQuery.all(minWidth: 1000.px), [
676+
css('.docs .main-container main > div').styles(
677+
padding: Padding.only(top: 1.rem),
678+
),
679+
css('.docs .main-container main > div .content-container').styles(
680+
padding: Padding.symmetric(horizontal: 1.rem),
681+
raw: {'max-width': '75%'},
682+
),
683+
]),
641684
];

0 commit comments

Comments
 (0)