From bafc11ee95329bd85144dd57f4db127c3c03dac6 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Mon, 31 Jul 2023 08:57:34 +0200 Subject: [PATCH 1/8] feat: add support for mobile safe areas --- .changeset/large-beans-draw.md | 5 +++++ .../starlight/components/ContentPanel.astro | 17 +++++++++++++++++ packages/starlight/components/HeadSEO.astro | 2 +- packages/starlight/components/Sidebar.astro | 13 +++++++++++++ .../TableOfContents/MobileTableOfContents.astro | 15 +++++++++++++++ .../TableOfContents/TableOfContentsList.astro | 8 ++++++++ packages/starlight/layout/PageFrame.astro | 15 +++++++++++++++ 7 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 .changeset/large-beans-draw.md diff --git a/.changeset/large-beans-draw.md b/.changeset/large-beans-draw.md new file mode 100644 index 00000000000..ad0c0c10ebe --- /dev/null +++ b/.changeset/large-beans-draw.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Add support for [mobile safe areas](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) diff --git a/packages/starlight/components/ContentPanel.astro b/packages/starlight/components/ContentPanel.astro index ca898afed5d..16045618e17 100644 --- a/packages/starlight/components/ContentPanel.astro +++ b/packages/starlight/components/ContentPanel.astro @@ -9,6 +9,23 @@ .content-panel + .content-panel { border-top: 1px solid var(--sl-color-hairline); } + @supports (padding: max(0px)) { + .content-panel { + padding-left: max(var(--sl-content-pad-x), env(safe-area-inset-left)); + padding-right: max(var(--sl-content-pad-x), env(safe-area-inset-right)); + } + @media (min-width: 50rem) { + :global([dir='ltr'][data-has-sidebar]) .content-panel { + padding-left: var(--sl-content-pad-x); + } + :global([dir='rtl'][data-has-sidebar]) .content-panel { + padding-right: var(--sl-content-pad-x); + } + } + .content-panel:last-child { + padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); + } + } .container { max-width: var(--sl-content-width); } diff --git a/packages/starlight/components/HeadSEO.astro b/packages/starlight/components/HeadSEO.astro index d187bd98241..212c69d9251 100644 --- a/packages/starlight/components/HeadSEO.astro +++ b/packages/starlight/components/HeadSEO.astro @@ -22,7 +22,7 @@ const headDefaults: z.input> = [ { tag: 'meta', attrs: { charset: 'utf-8' } }, { tag: 'meta', - attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' }, }, { tag: 'title', content: title }, { tag: 'link', attrs: { rel: 'canonical', href: canonical?.href } }, diff --git a/packages/starlight/components/Sidebar.astro b/packages/starlight/components/Sidebar.astro index a5b3216f2e8..7b613a17d52 100644 --- a/packages/starlight/components/Sidebar.astro +++ b/packages/starlight/components/Sidebar.astro @@ -27,6 +27,14 @@ const { sidebar, locale } = Astro.props; flex-direction: column; gap: 1rem; } + @supports (padding: max(0px)) { + :global([dir='ltr']) .sidebar { + padding-left: max(var(--sl-sidebar-pad-x), env(safe-area-inset-left)); + } + :global([dir='rtl']) .sidebar { + padding-right: max(var(--sl-sidebar-pad-x), env(safe-area-inset-right)); + } + } .mobile-preferences { justify-content: space-between; @@ -38,5 +46,10 @@ const { sidebar, locale } = Astro.props; .sidebar > :global(:nth-last-child(2)) { padding-bottom: 1rem; } + @supports (padding: max(0px)) { + .sidebar > :global(:nth-last-child(2)) { + padding-bottom: max(1rem, env(safe-area-inset-bottom)); + } + } } diff --git a/packages/starlight/components/TableOfContents/MobileTableOfContents.astro b/packages/starlight/components/TableOfContents/MobileTableOfContents.astro index 917db0707da..f6cdb1bc68b 100644 --- a/packages/starlight/components/TableOfContents/MobileTableOfContents.astro +++ b/packages/starlight/components/TableOfContents/MobileTableOfContents.astro @@ -59,6 +59,21 @@ const t = useTranslations(locale); summary::-webkit-details-marker { display: none; } + @supports (padding: max(0px)) { + summary { + padding-left: max(1rem, env(safe-area-inset-left)); + padding-right: max(1rem, env(safe-area-inset-right)); + } + + @media (min-width: 50rem) { + :global([dir='ltr']) summary { + padding-left: 1rem; + } + :global([dir='rtl']) summary { + padding-right: 1rem; + } + } + } .toggle { flex-shrink: 0; diff --git a/packages/starlight/components/TableOfContents/TableOfContentsList.astro b/packages/starlight/components/TableOfContents/TableOfContentsList.astro index c23e075dbda..82a990a48e7 100644 --- a/packages/starlight/components/TableOfContents/TableOfContentsList.astro +++ b/packages/starlight/components/TableOfContents/TableOfContentsList.astro @@ -58,6 +58,14 @@ const { toc, isMobile = false, depth = 0 } = Astro.props; text-decoration: none; outline-offset: var(--sl-outline-offset-inside); } + @supports (padding: max(0px)) { + :global([dir='ltr']) .isMobile a { + padding-right: env(safe-area-inset-right); + } + :global([dir='rtl']) .isMobile a { + padding-left: env(safe-area-inset-left); + } + } .isMobile:first-child > li:first-child > a { border-top: 0; } diff --git a/packages/starlight/layout/PageFrame.astro b/packages/starlight/layout/PageFrame.astro index a86d315bc74..042313c1966 100644 --- a/packages/starlight/layout/PageFrame.astro +++ b/packages/starlight/layout/PageFrame.astro @@ -46,6 +46,13 @@ const t = useTranslations(locale); padding-inline-end: var(--sl-nav-pad-x); background-color: var(--sl-color-bg-nav); } + @supports (padding: max(0px)) { + .header { + padding: max(var(--sl-nav-pad-y), env(safe-area-inset-top)) + max(var(--sl-nav-pad-x), env(safe-area-inset-right)) var(--sl-nav-pad-y) + max(var(--sl-nav-pad-x), env(safe-area-inset-left)); + } + } :global([data-has-sidebar]) .header { padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)); @@ -80,6 +87,14 @@ const t = useTranslations(locale); :global([data-has-sidebar]) .header { padding-inline-end: var(--sl-nav-pad-x); } + @supports (padding: max(0px)) { + :global([dir='ltr'][data-has-sidebar]) .header { + padding-right: max(var(--sl-nav-pad-x), env(safe-area-inset-right)); + } + :global([dir='rtl'][data-has-sidebar]) .header { + padding-left: max(var(--sl-nav-pad-x), env(safe-area-inset-left)); + } + } .sidebar-pane { --sl-sidebar-visibility: visible; width: var(--sl-sidebar-width); From 2209686c433da4692149cdd889ac6e28a62b962c Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Tue, 1 Aug 2023 14:38:16 +0200 Subject: [PATCH 2/8] feat: improve mobile safe areas support --- packages/starlight/components/Header.astro | 11 ++++++++- .../MobileTableOfContents.astro | 11 +++++---- packages/starlight/layout/PageFrame.astro | 24 +++++-------------- packages/starlight/style/props.css | 13 ++++++++++ 4 files changed, 35 insertions(+), 24 deletions(-) diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro index 6dc7c130da1..0f671ca86c9 100644 --- a/packages/starlight/components/Header.astro +++ b/packages/starlight/components/Header.astro @@ -42,8 +42,17 @@ const { locale } = Astro.props; :global(:root:not([data-has-toc])) { --__toc-width: 0rem; } + :global([dir='ltr']) .header { + --__sl-safe-nav-pad-x: var(--sl-safe-nav-pad-left); + } + :global([dir='rtl']) .header { + --__sl-safe-nav-pad-x: var(--sl-safe-nav-pad-right); + } .header { - --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x)); + --__sidebar-width: max( + 0rem, + var(--sl-content-inline-start, 0rem) - var(--__sl-safe-nav-pad-x) + ); --__main-column-fr: calc( ( 100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) - diff --git a/packages/starlight/components/TableOfContents/MobileTableOfContents.astro b/packages/starlight/components/TableOfContents/MobileTableOfContents.astro index f6cdb1bc68b..f713c857752 100644 --- a/packages/starlight/components/TableOfContents/MobileTableOfContents.astro +++ b/packages/starlight/components/TableOfContents/MobileTableOfContents.astro @@ -47,11 +47,12 @@ const t = useTranslations(locale); } summary { + --pad-x: 1rem; gap: 0.5rem; align-items: center; height: var(--sl-mobile-toc-height); border-bottom: 1px solid var(--sl-color-hairline-shade); - padding: 0.5rem 1rem; + padding: 0.5rem var(--pad-x); font-size: var(--sl-text-xs); outline-offset: var(--sl-outline-offset-inside); } @@ -61,16 +62,16 @@ const t = useTranslations(locale); } @supports (padding: max(0px)) { summary { - padding-left: max(1rem, env(safe-area-inset-left)); - padding-right: max(1rem, env(safe-area-inset-right)); + padding-left: max(var(--pad-x), env(safe-area-inset-left)); + padding-right: max(var(--pad-x), env(safe-area-inset-right)); } @media (min-width: 50rem) { :global([dir='ltr']) summary { - padding-left: 1rem; + padding-left: var(--pad-x); } :global([dir='rtl']) summary { - padding-right: 1rem; + padding-right: var(--pad-x); } } } diff --git a/packages/starlight/layout/PageFrame.astro b/packages/starlight/layout/PageFrame.astro index 042313c1966..e14b1248575 100644 --- a/packages/starlight/layout/PageFrame.astro +++ b/packages/starlight/layout/PageFrame.astro @@ -42,17 +42,10 @@ const t = useTranslations(locale); width: 100%; height: var(--sl-nav-height); border-bottom: 1px solid var(--sl-color-hairline-shade); - padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x); - padding-inline-end: var(--sl-nav-pad-x); + padding: var(--sl-safe-nav-pad-top) var(--sl-safe-nav-pad-right) var(--sl-nav-pad-y) + var(--sl-safe-nav-pad-left); background-color: var(--sl-color-bg-nav); } - @supports (padding: max(0px)) { - .header { - padding: max(var(--sl-nav-pad-y), env(safe-area-inset-top)) - max(var(--sl-nav-pad-x), env(safe-area-inset-right)) var(--sl-nav-pad-y) - max(var(--sl-nav-pad-x), env(safe-area-inset-left)); - } - } :global([data-has-sidebar]) .header { padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)); @@ -84,16 +77,11 @@ const t = useTranslations(locale); } @media (min-width: 50rem) { - :global([data-has-sidebar]) .header { - padding-inline-end: var(--sl-nav-pad-x); + :global([dir='ltr'][data-has-sidebar]) .header { + padding-right: var(--sl-safe-nav-pad-right); } - @supports (padding: max(0px)) { - :global([dir='ltr'][data-has-sidebar]) .header { - padding-right: max(var(--sl-nav-pad-x), env(safe-area-inset-right)); - } - :global([dir='rtl'][data-has-sidebar]) .header { - padding-left: max(var(--sl-nav-pad-x), env(safe-area-inset-left)); - } + :global([dir='rtl'][data-has-sidebar]) .header { + padding-left: var(--sl-safe-nav-pad-left); } .sidebar-pane { --sl-sidebar-visibility: visible; diff --git a/packages/starlight/style/props.css b/packages/starlight/style/props.css index aaba636cb15..3b08b1e5d5f 100644 --- a/packages/starlight/style/props.css +++ b/packages/starlight/style/props.css @@ -108,6 +108,11 @@ --sl-z-index-menu: 5; --sl-z-index-navbar: 10; --sl-z-index-skiplink: 20; + + /* Safe areas values */ + --sl-safe-nav-pad-left: var(--sl-nav-pad-x); + --sl-safe-nav-pad-right: var(--sl-nav-pad-x); + --sl-safe-nav-pad-top: var(--sl-nav-pad-y); } :root[data-theme='light'], @@ -179,3 +184,11 @@ --sl-mobile-toc-height: 0rem; } } + +@supports (padding: max(0px)) { + :root { + --sl-safe-nav-pad-left: max(var(--sl-nav-pad-x), env(safe-area-inset-left)); + --sl-safe-nav-pad-right: max(var(--sl-nav-pad-x), env(safe-area-inset-right)); + --sl-safe-nav-pad-top: max(var(--sl-nav-pad-y), env(safe-area-inset-top)); + } +} From f2d54c3dfe8aab0273e9ee15f535c457e46efe68 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Sat, 5 Aug 2023 13:50:40 +0200 Subject: [PATCH 3/8] feat: improve content panel mobile safe areas support --- .../starlight/components/ContentPanel.astro | 21 +++---------------- packages/starlight/style/props.css | 16 ++++++++++++++ 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/starlight/components/ContentPanel.astro b/packages/starlight/components/ContentPanel.astro index 16045618e17..d7dd10d7f9c 100644 --- a/packages/starlight/components/ContentPanel.astro +++ b/packages/starlight/components/ContentPanel.astro @@ -4,27 +4,12 @@ diff --git a/packages/starlight/style/props.css b/packages/starlight/style/props.css index 54d322be5e7..b1a55de93c7 100644 --- a/packages/starlight/style/props.css +++ b/packages/starlight/style/props.css @@ -99,6 +99,7 @@ --sl-mobile-toc-list-pad-x: 1rem; --sl-sidebar-width: 18.75rem; --sl-sidebar-pad-x: 1rem; + --sl-sidebar-pad-bottom: 1rem; --sl-content-width: 45rem; --sl-content-pad-x: 1rem; --sl-content-pad-y: 1.5rem; @@ -116,6 +117,9 @@ --sl-safe-nav-pad-left: var(--sl-nav-pad-x); --sl-safe-nav-pad-right: var(--sl-nav-pad-x); --sl-safe-nav-pad-top: var(--sl-nav-pad-y); + --sl-safe-sidebar-pad-left: var(--sl-sidebar-pad-x); + --sl-safe-sidebar-pad-right: var(--sl-sidebar-pad-x); + --sl-safe-sidebar-pad-bottom: var(--sl-sidebar-pad-bottom); --sl-safe-content-pad-left: var(--sl-content-pad-x); --sl-safe-content-pad-right: var(--sl-content-pad-x); --sl-safe-content-pad-bottom: var(--sl-content-pad-y); @@ -200,6 +204,9 @@ --sl-safe-nav-pad-left: max(var(--sl-nav-pad-x), env(safe-area-inset-left)); --sl-safe-nav-pad-right: max(var(--sl-nav-pad-x), env(safe-area-inset-right)); --sl-safe-nav-pad-top: max(var(--sl-nav-pad-y), env(safe-area-inset-top)); + --sl-safe-sidebar-pad-left: max(var(--sl-sidebar-pad-x), env(safe-area-inset-left)); + --sl-safe-sidebar-pad-right: max(var(--sl-sidebar-pad-x), env(safe-area-inset-right)); + --sl-safe-sidebar-pad-bottom: max(var(--sl-sidebar-pad-bottom), env(safe-area-inset-bottom)); --sl-safe-content-pad-left: max(var(--sl-content-pad-x), env(safe-area-inset-left)); --sl-safe-content-pad-right: max(var(--sl-content-pad-x), env(safe-area-inset-right)); --sl-safe-content-pad-bottom: max(var(--sl-content-pad-y), env(safe-area-inset-bottom)); @@ -216,11 +223,13 @@ } @media (min-width: 50rem) { - :root[dir='ltr'][data-has-sidebar] { + :root[data-has-sidebar] { + --sl-safe-sidebar-pad-right: var(--sl-sidebar-pad-x); --sl-safe-content-pad-left: var(--sl-content-pad-x); --sl-safe-mobile-toc-pad-left: var(--sl-mobile-toc-pad-x); } :root[dir='rtl'][data-has-sidebar] { + --sl-safe-sidebar-pad-left: var(--sl-sidebar-pad-x); --sl-safe-content-pad-right: var(--sl-content-pad-x); --sl-safe-mobile-toc-pad-right: var(--sl-mobile-toc-pad-x); }