fix(docs): make layout more consistent #2168

hasparus · 2022-03-19T00:00:55Z

I gave the docs layout some more attention. We have a search input, so the sticky header is convenient, and as a side effect, it solves the visual glitch of too short sidebar.

What's changed

The header is now sticky and it casts a shadow when window.scrollY is greater than 0.

📦 Published PR as canary version: 0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/color@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/components@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/core@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/css@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/custom-properties@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/editor@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install gatsby-plugin-theme-ui@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install gatsby-theme-style-guide@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install gatsby-theme-ui-layout@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/match-media@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/mdx@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/parse-props@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-base@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-bootstrap@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-bulma@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-dark@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-deep@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-funk@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-future@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-polaris@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-roboto@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-sketchy@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-swiss@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-system@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-tailwind@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-tosh@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/presets@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/prism@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/sidenav@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/style-guide@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/tailwind@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/theme-provider@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install theme-ui@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/typography@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
# or 
yarn add @theme-ui/color-modes@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/color@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/components@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/core@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/css@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/custom-properties@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/editor@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add gatsby-plugin-theme-ui@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add gatsby-theme-style-guide@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add gatsby-theme-ui-layout@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/match-media@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/mdx@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/parse-props@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-base@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-bootstrap@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-bulma@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-dark@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-deep@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-funk@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-future@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-polaris@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-roboto@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-sketchy@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-swiss@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-system@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-tailwind@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-tosh@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/presets@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/prism@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/sidenav@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/style-guide@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/tailwind@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/theme-provider@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add theme-ui@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/typography@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0

Version

Published prerelease version: v0.14.0-develop.22

Changelog

🎉 This release contains work from new contributors! 🎉

Thanks for all your work!

❤️ Brage (@braaar)

❤️ peterlits zo (@PeterlitsZo)

❤️ Ryan Turner (@rtturner)

❤️ Cannon Lock (@CannonLock)

🚀 Enhancement

feat(examples/next): Add new deps, fully use TSX, rebuild #2068 (@lachlanjc)
@theme-ui/tailwind
- feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082 (@lachlanjc)
@theme-ui/custom-properties
- feat(custom-properties): Warn in development on invalid theme keys #2080 (@lachlanjc)
@theme-ui/color-modes
- feat(color-modes): Warn when theme color keys have leading/trailing whitespace #2099 (@lachlanjc)
theme-ui
- feat(theme-ui): Add sx prop to BaseStyles component #2081 (@lachlanjc)

🐛 Bug Fix

fix(docs): make layout more consistent #2168 (@hasparus)
feat(docs): Add custom content for sketchy preset demo #1236 (@atanasster @hasparus @lachlanjc)
fix(docs): Update recommendations in Keyframes doc #2079 (@lachlanjc)
Release v0.13.2 #2075 (@lachlanjc @hasparus @braaar @dependabot[bot])
gatsby-plugin-theme-ui
- fix(gatsby-plugin-theme-ui,docs): Dependency Updates #2138 (@LekoArts)
@theme-ui/style-guide
- fix(style-guide): use inherited fontSize for ColorPalette color labels #2135 (@braaar)
@theme-ui/components
- fix(components): Update IconButton type definition to include size prop #2121 (@rtturner)
- components: Fix visual collapsing bug with Switch component #2067 (@lachlanjc)
@theme-ui/sidenav
- fix(sidenav): Build with latest theme-ui version #2084 (@lachlanjc)

👨‍💻 Minor changes

Update jsx-pragma.mdx (@hasparus)
docs(examples/next): fix case insensitive import (@hasparus)

🏠 Internal

docs(sx-prop): add more detail for responsive values. #2116 (@PeterlitsZo @lachlanjc)
docs(jsx-pragma): Add section on using with vite #2119 (@PeterlitsZo @lachlanjc)
docs: Clarify usage of theme prop in MDX Layout docs #2100 (@CannonLock)
docs(jsx): add some more detail to #with-swc section in jsx-pragma docs #2094 (@hasparus @lachlanjc)
e2e: Upgrade dependencies #2098 (@lachlanjc)
Set up CodeSandbox CI #2085 (@lachlanjc)
examples: Remove CodeSandbox starter example #2086 (@lachlanjc)
docs: Document default theme values #2087 (@lachlanjc)
@theme-ui/sidenav
- sidenav: Fix props leaking to DOM on Pagination component #2057 (@lachlanjc)

Authors: 9

@dependabot[bot]
Atanas Stoyanov (@atanasster)
Brage (@braaar)
Cannon Lock (@CannonLock)
Lachlan Campbell (@lachlanjc)
Lennart (@LekoArts)
peterlits zo (@PeterlitsZo)
Piotr Monwid-Olechnowicz (@hasparus)
Ryan Turner (@rtturner)

vercel · 2022-03-19T00:00:57Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/Q8Co8Yei1MwVEADDKnQVy3jmUyfY
✅ Preview: https://theme-ui-git-docs-header-scroll-shadow-systemui.vercel.app

codesandbox-ci · 2022-03-19T00:01:43Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 84b424d:

Sandbox	Source
next-theme-ui-example	Configuration
gatsby-plugin-theme-ui-example	Configuration

Zolwiastyl

Tested, works.
Niptick: sticky topbar shadow for darker themes should have higher opacity

lachlanjc · 2022-03-20T19:02:35Z

Lovely work!!

hasparus · 2022-03-21T12:54:06Z

🚀 PR was released in v0.14.0 🚀

hasparus requested a review from lachlanjc as a code owner March 19, 2022 00:00

hasparus added the documentation Changes only affect the documentation label Mar 19, 2022

hasparus force-pushed the docs-header-scroll-shadow branch from a508ea0 to 1933f4e Compare March 20, 2022 13:37

vercel bot deployed to Preview March 20, 2022 13:37 View deployment

hasparus force-pushed the docs-header-scroll-shadow branch from 1933f4e to 8d9cb0b Compare March 20, 2022 14:04

vercel bot deployed to Preview March 20, 2022 14:04 View deployment

fix(docs): make layout more consistent

ac00496

hasparus force-pushed the docs-header-scroll-shadow branch from 8d9cb0b to ac00496 Compare March 20, 2022 14:22

vercel bot deployed to Preview March 20, 2022 14:26 View deployment

hasparus added 2 commits March 20, 2022 16:01

test(docs): test docs navigation

e513c17

test(docs): test 404 page

84b424d

vercel bot deployed to Preview March 20, 2022 15:07 View deployment

Zolwiastyl approved these changes Mar 20, 2022

View reviewed changes

hasparus merged commit baec10c into develop Mar 20, 2022

hasparus deleted the docs-header-scroll-shadow branch March 20, 2022 17:30

hasparus added the prerelease This change is available in a prerelease. label Mar 20, 2022

hasparus mentioned this pull request Mar 21, 2022

fix(color-modes): properly use print mode even if its name is initialColorModeName #2090

Merged

hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(docs): make layout more consistent #2168

fix(docs): make layout more consistent #2168

hasparus commented Mar 19, 2022 •

edited

vercel bot commented Mar 19, 2022 •

edited

codesandbox-ci bot commented Mar 19, 2022 •

edited

Zolwiastyl left a comment

lachlanjc commented Mar 20, 2022

hasparus commented Mar 21, 2022

fix(docs): make layout more consistent #2168

fix(docs): make layout more consistent #2168

Conversation

hasparus commented Mar 19, 2022 • edited

What's changed

Version

🚀 Enhancement

🐛 Bug Fix

👨‍💻 Minor changes

🏠 Internal

Authors: 9

vercel bot commented Mar 19, 2022 • edited

codesandbox-ci bot commented Mar 19, 2022 • edited

Zolwiastyl left a comment

Choose a reason for hiding this comment

lachlanjc commented Mar 20, 2022

hasparus commented Mar 21, 2022

hasparus commented Mar 19, 2022 •

edited

vercel bot commented Mar 19, 2022 •

edited

codesandbox-ci bot commented Mar 19, 2022 •

edited