Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Adds print styles for Starlight docs pages #157

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

feat: Adds print styles for Starlight docs pages #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
662ecd5
initial pass at print styles
Jun 5, 2023
b78fe96
refactor: using modifiers for display util classes
Jun 5, 2023
fc17193
make sure the header tools group is hidden
Jun 5, 2023
55eed5c
avoid page breaks in code blocks
Jun 5, 2023
5a8e7a1
a few layout fixes for Safari printing viewport
Jun 5, 2023
819ea02
fixed header was hiding print content
Jun 9, 2023
47b116c
Merge branch 'main' into feat/print-stylesheet
tony-sull Jun 20, 2023
9c46292
refactor: moving all print style selectors to the global CSS sheet
Jun 20, 2023
a302379
nit: @media print isn't needed in the global sheet
Jun 20, 2023
bc290f6
Merge branch 'main' into feat/print-stylesheet
tony-sull Jun 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/starlight/components/EditLink.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const url =

{
editUrl !== false && url && (
<a href={url} class="flex">
<a href={url} class="flex print:hidden">
<Icon name="pencil" size="1.2em" />
{t('page.editLink')}
</a>
Expand Down
2 changes: 1 addition & 1 deletion packages/starlight/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const { locale } = Astro.props;
<div class="header flex">
<SiteTitle {locale} />
<Search {locale} />
<div class="hidden md:flex right-group">
<div class="hidden md:flex print:hidden right-group">
<SocialIcons />
<ThemeSelect {locale} />
<LanguageSelect {locale} />
Expand Down
2 changes: 1 addition & 1 deletion packages/starlight/components/MobileMenuToggle.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface Props {
const t = useTranslations(Astro.props.locale);
---

<starlight-menu-button>
<starlight-menu-button class="print:hidden">
<button
aria-expanded="false"
aria-label={t('menuButton.accessibleLabel')}
Expand Down
2 changes: 1 addition & 1 deletion packages/starlight/components/PrevNextLinks.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const isRtl = dir === 'rtl';
const t = useTranslations(locale);
---

<div class="pagination-links flex" dir={dir}>
<div class="pagination-links flex print:hidden" dir={dir}>
{
prev && (
<a href={prev.href} rel="prev">
Expand Down
2 changes: 1 addition & 1 deletion packages/starlight/components/Search.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const pagefindTranslations = {
};
---

<site-search data-translations={JSON.stringify(pagefindTranslations)}>
<site-search data-translations={JSON.stringify(pagefindTranslations)} class="print:hidden">
<button data-open-modal disabled>
{
/* The span is `aria-hidden` because it is not shown on small screens. Instead, the icon label is used for accessibility purposes. */
Expand Down
2 changes: 1 addition & 1 deletion packages/starlight/components/Sidebar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface Props {
const { sidebar, locale } = Astro.props;
---

<div class="sidebar flex">
<div class="sidebar flex print:hidden">
<SidebarSublist sublist={sidebar} />
<div class="mobile-preferences flex md:hidden">
<ThemeSelect {locale} />
Expand Down
4 changes: 2 additions & 2 deletions packages/starlight/components/SiteTitle.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const href = pathWithBase(Astro.props.locale || '/');
config.logo && logos.dark && (
<>
<img
class:list={{ 'dark-only': !('src' in config.logo) }}
class:list={{ 'dark-only print:hidden': !('src' in config.logo) }}
alt={config.logo.alt}
src={logos.dark.src}
width={logos.dark.width}
Expand All @@ -40,7 +40,7 @@ const href = pathWithBase(Astro.props.locale || '/');
{/* Show light alternate if a user configure both light and dark logos. */}
{!('src' in config.logo) && (
<img
class="light-only"
class="light-only print:block"
alt={config.logo.alt}
src={logos.light?.src}
width={logos.light?.width}
Expand Down
2 changes: 1 addition & 1 deletion packages/starlight/components/TableOfContents/MobileTableOfContents.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const t = useTranslations(locale);
---

<mobile-starlight-toc data-min-h={minHeadingLevel} data-max-h={maxHeadingLevel}>
<nav aria-labelledby="starlight__on-this-page--mobile" class="lg:hidden">
<nav aria-labelledby="starlight__on-this-page--mobile" class="lg:hidden print:hidden">
<details id="starlight__mobile-toc">
<summary id="starlight__on-this-page--mobile" class="flex">
<div class="toggle flex">
Expand Down
3 changes: 3 additions & 0 deletions packages/starlight/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ import './style/asides.css';
// Important that this is the last import so it can override built-in styles.
import 'virtual:starlight/user-css';

import printHref from './style/print.css?url';
Copy link
Member

@delucis delucis Jun 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hah, looks like this is under Vite’s inline assets limit, so is getting inlined as a data URI in the build output 😅

<link rel="stylesheet" href="[data:text/css;base64,OnJvb3QsCjo6YmFja2Ryb3AgewogIC8qIENvbG91cnMgKGxpZ2h0IG1vZGUpICovCiAgLS1zbC1jb2xvci13aGl0ZTogaHNsKDIyMywgMTMlLCAxMCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmF5LTE6IGhzbCgyMjIsIDEzJSwgMTYlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItZ3JheS0yOiBoc2woMjIyLCAxMSUsIDIzJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktMzogaHNsKDIyNSwgOSUsIDM2JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNDogaHNsKDIyMSwgOCUsIDU2JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNTogaHNsKDIyOCwgOCUsIDc3JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNjogaHNsKDIzMSwgMjMlLCA5NCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmF5LTc6IGhzbCgyNDAsIDIwJSwgOTclKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmxhY2s6IGhzbCgwLCAwJSwgMTAwJSkgIWltcG9ydGFudDsKCiAgLS1zbC1jb2xvci1vcmFuZ2UtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1vcmFuZ2UpLCA4MCUsIDI1JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLW9yYW5nZTogaHNsKHZhcigtLXNsLWh1ZS1vcmFuZ2UpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLW9yYW5nZS1sb3c6IGhzbCh2YXIoLS1zbC1odWUtb3JhbmdlKSwgOTAlLCA4OCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmVlbi1oaWdoOiBoc2wodmFyKC0tc2wtaHVlLWdyZWVuKSwgODAlLCAyMiUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmVlbjogaHNsKHZhcigtLXNsLWh1ZS1ncmVlbiksIDkwJSwgNDYlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItZ3JlZW4tbG93OiBoc2wodmFyKC0tc2wtaHVlLWdyZWVuKSwgODUlLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ibHVlLWhpZ2g6IGhzbCh2YXIoLS1zbC1odWUtYmx1ZSksIDgwJSwgMzAlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmx1ZTogaHNsKHZhcigtLXNsLWh1ZS1ibHVlKSwgOTAlLCA2MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ibHVlLWxvdzogaHNsKHZhcigtLXNsLWh1ZS1ibHVlKSwgODglLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1wdXJwbGUtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1wdXJwbGUpLCAzOSUsIDMwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXB1cnBsZTogaHNsKHZhcigtLXNsLWh1ZS1wdXJwbGUpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXB1cnBsZS1sb3c6IGhzbCh2YXIoLS1zbC1odWUtcHVycGxlKSwgODAlLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1yZWQtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1yZWQpLCA4MCUsIDMwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXJlZDogaHNsKHZhcigtLXNsLWh1ZS1yZWQpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXJlZC1sb3c6IGhzbCh2YXIoLS1zbC1odWUtcmVkKSwgODAlLCA5MCUpICFpbXBvcnRhbnQ7CgogIC0tc2wtY29sb3ItYWNjZW50LWhpZ2g6IGhzbCh2YXIoLS1zbC1odWUtYWNjZW50KSwgODAlLCAzMCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1hY2NlbnQ6IGhzbCh2YXIoLS1zbC1odWUtYWNjZW50KSwgOTAlLCA2MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1hY2NlbnQtbG93OiBoc2wodmFyKC0tc2wtaHVlLWFjY2VudCksIDg4JSwgOTAlKSAhaW1wb3J0YW50OwoKICAtLXNsLWNvbG9yLXRleHQtYWNjZW50OiB2YXIoLS1zbC1jb2xvci1hY2NlbnQpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci10ZXh0LWludmVydDogdmFyKC0tc2wtY29sb3ItYmxhY2spICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1iZy1uYXY6IHZhcigtLXNsLWNvbG9yLWdyYXktNykgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWJnLXNpZGViYXI6IHZhcigtLXNsLWNvbG9yLWJnKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmctaW5saW5lLWNvZGU6IHZhcigtLXNsLWNvbG9yLWdyYXktNikgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWhhaXJsaW5lLXNoYWRlOiB2YXIoLS1zbC1jb2xvci1ncmF5LTYpICFpbXBvcnRhbnQ7CgogIC0tc2wtY29sb3ItYmFja2Ryb3Atb3ZlcmxheTogaHNsYSgyMjUsIDklLCAzNiUsIDAuNjYpICFpbXBvcnRhbnQ7CgogIC8qIFNoYWRvd3MgKGxpZ2h0IG1vZGUpICovCiAgLS1zbC1zaGFkb3ctc206IDBweCAxcHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSwKICAgIDBweCAycHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSAhaW1wb3J0YW50OwogIC0tc2wtc2hhZG93LW1kOiAwcHggOHB4IDRweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksCiAgICAwcHggNXB4IDJweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksIDBweCAzcHggMnB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSwKICAgIDBweCAxcHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSAhaW1wb3J0YW50OwogIC0tc2wtc2hhZG93LWxnOiAwcHggMjVweCA3cHggcmdiYSgwLCAwLCAwLCAwLjAxKSwKICAgIDBweCAxNnB4IDZweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksIDBweCA5cHggNXB4IGhzbGEoMjIzLCAxMyUsIDEwJSwgMC4wOCksCiAgICAwcHggNHB4IDRweCBoc2xhKDAsIDAlLCAwJSwgMC4xNiksIDBweCA0cHggMnB4IGhzbGEoMCwgMCUsIDAlLCAwLjA0KSAhaW1wb3J0YW50Owp9CgoucHJpbnRcOmhpZGRlbiB7CiAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Owp9Ci5wcmludFw6ZmxleCB7CiAgZGlzcGxheTogZmxleCAhaW1wb3J0YW50Owp9Ci5wcmludFw6YmxvY2sgewogIGRpc3BsYXk6IGJsb2NrICFpbXBvcnRhbnQ7Cn0KCi8qIGluZGV4LmFzdHJvICovCm1haW4gewogIHBhZGRpbmctYm90dG9tOiAwICFpbXBvcnRhbnQ7Cn0KbWFpbiA+IC5jb250ZW50LXBhbmVsIHsKICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiAwICFpbXBvcnRhbnQ7Cn0KCi8qIGNvbXBvbmVudHMvTWFya2Rvd25Db250ZW50LmFzdHJvICovCi5jb250ZW50IHByZSB7CiAgb3ZlcmZsb3cteDogaGlkZGVuICFpbXBvcnRhbnQ7CiAgd2hpdGUtc3BhY2U6IHByZS13cmFwICFpbXBvcnRhbnQ7CiAgcGFnZS1icmVhay1pbnNpZGU6IGF2b2lkOwp9CgovKiBsYXlvdXQvUGFnZUZyYW1lLmFzdHJvICovCi5wYWdlID4gaGVhZGVyIHsKICBwb3NpdGlvbjogcmVsYXRpdmUgIWltcG9ydGFudDsKfQoucGFnZSA+IC5tYWluLWZyYW1lIHsKICBwYWRkaW5nLWlubGluZS1zdGFydDogMCAhaW1wb3J0YW50Owp9CgovKiBsYXlvdXQvVHdvQ29sdW1uQ29udGVudC5hc3RybyAqLwoubWFpbi1wYW5lIHsKICAtLXNsLXNpZGViYXItd2lkdGg6IDBweCAhaW1wb3J0YW50OwogIC0tc2wtY29udGVudC13aWR0aDogMTAwJSAhaW1wb3J0YW50Owp9Cg==](view-source:data:text/css;base64,OnJvb3QsCjo6YmFja2Ryb3AgewogIC8qIENvbG91cnMgKGxpZ2h0IG1vZGUpICovCiAgLS1zbC1jb2xvci13aGl0ZTogaHNsKDIyMywgMTMlLCAxMCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmF5LTE6IGhzbCgyMjIsIDEzJSwgMTYlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItZ3JheS0yOiBoc2woMjIyLCAxMSUsIDIzJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktMzogaHNsKDIyNSwgOSUsIDM2JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNDogaHNsKDIyMSwgOCUsIDU2JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNTogaHNsKDIyOCwgOCUsIDc3JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWdyYXktNjogaHNsKDIzMSwgMjMlLCA5NCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmF5LTc6IGhzbCgyNDAsIDIwJSwgOTclKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmxhY2s6IGhzbCgwLCAwJSwgMTAwJSkgIWltcG9ydGFudDsKCiAgLS1zbC1jb2xvci1vcmFuZ2UtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1vcmFuZ2UpLCA4MCUsIDI1JSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLW9yYW5nZTogaHNsKHZhcigtLXNsLWh1ZS1vcmFuZ2UpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLW9yYW5nZS1sb3c6IGhzbCh2YXIoLS1zbC1odWUtb3JhbmdlKSwgOTAlLCA4OCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmVlbi1oaWdoOiBoc2wodmFyKC0tc2wtaHVlLWdyZWVuKSwgODAlLCAyMiUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ncmVlbjogaHNsKHZhcigtLXNsLWh1ZS1ncmVlbiksIDkwJSwgNDYlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItZ3JlZW4tbG93OiBoc2wodmFyKC0tc2wtaHVlLWdyZWVuKSwgODUlLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ibHVlLWhpZ2g6IGhzbCh2YXIoLS1zbC1odWUtYmx1ZSksIDgwJSwgMzAlKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmx1ZTogaHNsKHZhcigtLXNsLWh1ZS1ibHVlKSwgOTAlLCA2MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1ibHVlLWxvdzogaHNsKHZhcigtLXNsLWh1ZS1ibHVlKSwgODglLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1wdXJwbGUtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1wdXJwbGUpLCAzOSUsIDMwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXB1cnBsZTogaHNsKHZhcigtLXNsLWh1ZS1wdXJwbGUpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXB1cnBsZS1sb3c6IGhzbCh2YXIoLS1zbC1odWUtcHVycGxlKSwgODAlLCA5MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1yZWQtaGlnaDogaHNsKHZhcigtLXNsLWh1ZS1yZWQpLCA4MCUsIDMwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXJlZDogaHNsKHZhcigtLXNsLWh1ZS1yZWQpLCA5MCUsIDYwJSkgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLXJlZC1sb3c6IGhzbCh2YXIoLS1zbC1odWUtcmVkKSwgODAlLCA5MCUpICFpbXBvcnRhbnQ7CgogIC0tc2wtY29sb3ItYWNjZW50LWhpZ2g6IGhzbCh2YXIoLS1zbC1odWUtYWNjZW50KSwgODAlLCAzMCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1hY2NlbnQ6IGhzbCh2YXIoLS1zbC1odWUtYWNjZW50KSwgOTAlLCA2MCUpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1hY2NlbnQtbG93OiBoc2wodmFyKC0tc2wtaHVlLWFjY2VudCksIDg4JSwgOTAlKSAhaW1wb3J0YW50OwoKICAtLXNsLWNvbG9yLXRleHQtYWNjZW50OiB2YXIoLS1zbC1jb2xvci1hY2NlbnQpICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci10ZXh0LWludmVydDogdmFyKC0tc2wtY29sb3ItYmxhY2spICFpbXBvcnRhbnQ7CiAgLS1zbC1jb2xvci1iZy1uYXY6IHZhcigtLXNsLWNvbG9yLWdyYXktNykgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWJnLXNpZGViYXI6IHZhcigtLXNsLWNvbG9yLWJnKSAhaW1wb3J0YW50OwogIC0tc2wtY29sb3ItYmctaW5saW5lLWNvZGU6IHZhcigtLXNsLWNvbG9yLWdyYXktNikgIWltcG9ydGFudDsKICAtLXNsLWNvbG9yLWhhaXJsaW5lLXNoYWRlOiB2YXIoLS1zbC1jb2xvci1ncmF5LTYpICFpbXBvcnRhbnQ7CgogIC0tc2wtY29sb3ItYmFja2Ryb3Atb3ZlcmxheTogaHNsYSgyMjUsIDklLCAzNiUsIDAuNjYpICFpbXBvcnRhbnQ7CgogIC8qIFNoYWRvd3MgKGxpZ2h0IG1vZGUpICovCiAgLS1zbC1zaGFkb3ctc206IDBweCAxcHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSwKICAgIDBweCAycHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSAhaW1wb3J0YW50OwogIC0tc2wtc2hhZG93LW1kOiAwcHggOHB4IDRweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksCiAgICAwcHggNXB4IDJweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksIDBweCAzcHggMnB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSwKICAgIDBweCAxcHggMXB4IGhzbGEoMCwgMCUsIDAlLCAwLjA2KSAhaW1wb3J0YW50OwogIC0tc2wtc2hhZG93LWxnOiAwcHggMjVweCA3cHggcmdiYSgwLCAwLCAwLCAwLjAxKSwKICAgIDBweCAxNnB4IDZweCBoc2xhKDAsIDAlLCAwJSwgMC4wMyksIDBweCA5cHggNXB4IGhzbGEoMjIzLCAxMyUsIDEwJSwgMC4wOCksCiAgICAwcHggNHB4IDRweCBoc2xhKDAsIDAlLCAwJSwgMC4xNiksIDBweCA0cHggMnB4IGhzbGEoMCwgMCUsIDAlLCAwLjA0KSAhaW1wb3J0YW50Owp9CgoucHJpbnRcOmhpZGRlbiB7CiAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Owp9Ci5wcmludFw6ZmxleCB7CiAgZGlzcGxheTogZmxleCAhaW1wb3J0YW50Owp9Ci5wcmludFw6YmxvY2sgewogIGRpc3BsYXk6IGJsb2NrICFpbXBvcnRhbnQ7Cn0KCi8qIGluZGV4LmFzdHJvICovCm1haW4gewogIHBhZGRpbmctYm90dG9tOiAwICFpbXBvcnRhbnQ7Cn0KbWFpbiA+IC5jb250ZW50LXBhbmVsIHsKICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiAwICFpbXBvcnRhbnQ7Cn0KCi8qIGNvbXBvbmVudHMvTWFya2Rvd25Db250ZW50LmFzdHJvICovCi5jb250ZW50IHByZSB7CiAgb3ZlcmZsb3cteDogaGlkZGVuICFpbXBvcnRhbnQ7CiAgd2hpdGUtc3BhY2U6IHByZS13cmFwICFpbXBvcnRhbnQ7CiAgcGFnZS1icmVhay1pbnNpZGU6IGF2b2lkOwp9CgovKiBsYXlvdXQvUGFnZUZyYW1lLmFzdHJvICovCi5wYWdlID4gaGVhZGVyIHsKICBwb3NpdGlvbjogcmVsYXRpdmUgIWltcG9ydGFudDsKfQoucGFnZSA+IC5tYWluLWZyYW1lIHsKICBwYWRkaW5nLWlubGluZS1zdGFydDogMCAhaW1wb3J0YW50Owp9CgovKiBsYXlvdXQvVHdvQ29sdW1uQ29udGVudC5hc3RybyAqLwoubWFpbi1wYW5lIHsKICAtLXNsLXNpZGViYXItd2lkdGg6IDBweCAhaW1wb3J0YW50OwogIC0tc2wtY29udGVudC13aWR0aDogMTAwJSAhaW1wb3J0YW50Owp9Cg==)" media="print">

That’s why we’re seeing the increase in HTML size, but no change in bundled CSS.

Let me check if there’s a workaround for that.

Copy link
Member

@delucis delucis Nov 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A feature to fix this just merged in Vite!

vitejs/vite#15454

Looks like this might work once that is released in Vite 6/Astro 5:

Suggested change
import printHref from './style/print.css?url';
import printHref from './style/print.css?url&no-inline';

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be ?url&no-inline to mark the CSS as an asset URL first, and then force not inline it as a data URL.

Copy link
Member

@delucis delucis Nov 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah thank you, Bjorn! I wasn’t 100% sure from the docs added in the Vite PR. I edited my suggestion to track that.


export async function getStaticPaths() {
return paths;
}
Expand All @@ -54,6 +56,7 @@ const hasHero = Boolean(entry.data.hero);

<html lang={lang} dir={dir} data-has-toc={hasToC} data-has-sidebar={hasSidebar} data-has-hero={hasHero}>
<head>
<link rel="stylesheet" href={printHref} media="print">
<HeadSEO data={entry.data} lang={lang} />
<style>
html:not([data-has-toc]) {
Expand Down
2 changes: 1 addition & 1 deletion packages/starlight/layout/PageFrame.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const t = useTranslations(locale);
<header class="header"><slot name="header" /></header>
{
hasSidebar && (
<nav class="sidebar" aria-label={t('sidebarNav.accessibleLabel')}>
<nav class="sidebar print:hidden" aria-label={t('sidebarNav.accessibleLabel')}>
<MobileMenuToggle {locale} />
<div id="starlight__sidebar" class="sidebar-pane">
<div class="sidebar-content">
Expand Down
2 changes: 1 addition & 1 deletion packages/starlight/layout/TwoColumnContent.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ interface Props {
<div class="lg:flex">
{
Astro.props.hasToC && (
<aside class="right-sidebar-container">
<aside class="right-sidebar-container print:hidden">
<div class="right-sidebar">
<slot name="right-sidebar" />
</div>
Expand Down
91 changes: 91 additions & 0 deletions packages/starlight/style/print.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
:root,
::backdrop {
/* Colours (light mode) */
--sl-color-white: hsl(223, 13%, 10%) !important;
--sl-color-gray-1: hsl(222, 13%, 16%) !important;
--sl-color-gray-2: hsl(222, 11%, 23%) !important;
--sl-color-gray-3: hsl(225, 9%, 36%) !important;
--sl-color-gray-4: hsl(221, 8%, 56%) !important;
--sl-color-gray-5: hsl(228, 8%, 77%) !important;
--sl-color-gray-6: hsl(231, 23%, 94%) !important;
--sl-color-gray-7: hsl(240, 20%, 97%) !important;
--sl-color-black: hsl(0, 0%, 100%) !important;

--sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%) !important;
--sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%) !important;
--sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%) !important;
--sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%) !important;
--sl-color-green: hsl(var(--sl-hue-green), 90%, 46%) !important;
--sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%) !important;
--sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%) !important;
--sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%) !important;
--sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%) !important;
--sl-color-purple-high: hsl(var(--sl-hue-purple), 39%, 30%) !important;
--sl-color-purple: hsl(var(--sl-hue-purple), 90%, 60%) !important;
--sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 90%) !important;
--sl-color-red-high: hsl(var(--sl-hue-red), 80%, 30%) !important;
--sl-color-red: hsl(var(--sl-hue-red), 90%, 60%) !important;
--sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%) !important;

--sl-color-accent-high: hsl(var(--sl-hue-accent), 80%, 30%) !important;
--sl-color-accent: hsl(var(--sl-hue-accent), 90%, 60%) !important;
--sl-color-accent-low: hsl(var(--sl-hue-accent), 88%, 90%) !important;

--sl-color-text-accent: var(--sl-color-accent) !important;
--sl-color-text-invert: var(--sl-color-black) !important;
--sl-color-bg-nav: var(--sl-color-gray-7) !important;
--sl-color-bg-sidebar: var(--sl-color-bg) !important;
--sl-color-bg-inline-code: var(--sl-color-gray-6) !important;
--sl-color-hairline-shade: var(--sl-color-gray-6) !important;

--sl-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66) !important;

/* Shadows (light mode) */
--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06),
0px 2px 1px hsla(0, 0%, 0%, 0.06) !important;
--sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.03),
0px 5px 2px hsla(0, 0%, 0%, 0.03), 0px 3px 2px hsla(0, 0%, 0%, 0.06),
0px 1px 1px hsla(0, 0%, 0%, 0.06) !important;
--sl-shadow-lg: 0px 25px 7px rgba(0, 0, 0, 0.01),
0px 16px 6px hsla(0, 0%, 0%, 0.03), 0px 9px 5px hsla(223, 13%, 10%, 0.08),
0px 4px 4px hsla(0, 0%, 0%, 0.16), 0px 4px 2px hsla(0, 0%, 0%, 0.04) !important;
}

.print\:hidden {
display: none !important;
}
.print\:flex {
display: flex !important;
}
.print\:block {
display: block !important;
}

/* index.astro */
main {
padding-bottom: 0 !important;
}
main > .content-panel {
padding-block-start: 0 !important;
}

/* components/MarkdownContent.astro */
.content pre {
overflow-x: hidden !important;
white-space: pre-wrap !important;
page-break-inside: avoid;
}

/* layout/PageFrame.astro */
.page > header {
position: relative !important;
}
.page > .main-frame {
padding-inline-start: 0 !important;
}

/* layout/TwoColumnContent.astro */
.main-pane {
--sl-sidebar-width: 0px !important;
--sl-content-width: 100% !important;
}
Loading