layoutz

[susanev]

Description

this is only in docs right now not registry

also, @anita-trimbur how would you feel about saving the hamburger menu for another pr? and leaving the little left-nav tab on mobile until then?

• fix toc location on smaller screens
• fix content responsiveness
• i seem to. have broken responsiveness on code blocks
• comments from Anita in figma
• left nav scrolling does not yet account for search movement on mobile screens
• left nav scrolling on smaller screens its not possible to get to the bottom entries because of magic numbers, i need to fix this
• i broke the tweets on the home page
• still having left nav scrolling issues
• left nav scrolling on larger screens needs more space at bottom of nav
• hide toc when open left nav, if table of contents is on screen
• extra space added below h1 for pages without tocs
• empty tocs are still showing up
• add missing breakpoints
• i need variables for my magic numbers
• clean up css
• clean up ts
• confirm no impact to marketing pages

id like to save these items for other prs..

• registry work
• hamburger menu on mobile
• save left-nav open state in local storage? maybe?
• the left-nav html really really needs to be re-done

this makes it seem like layout issues but its really content issues, well and @anita-trimbur we need designs for a responsive table in docs

fixes some of pulumi/docs#8988

what this pr does...

• fixes docs type nav +search to pin to sides
• hides left nav, and introduces left nav toggle on smaller screens
• moves table of contents below h1 on smaller screens
• redesigns docs page layouts
• adds a file for icons
• updates colors css file
• removes unused docs templates
• updates names of things to be more descriptive
• updates some things to use css instead of tailwind
• build out accordion functionality of table of contents on smaller screens
• collapses some css into the main file
• reduces left-nav font-size to 15px

Checklist:

• I have reviewed the style guide.
• If blogging, I have reviewed the blogging guide.
• I have manually confirmed that all new links work.
• I added aliases (i.e., redirects) for all filename changes.
• If making css changes, I rebuilt the bundle.

[pulumi-bot]

Your site preview for commit cb45167 is ready! 🎉

http://pulumi-hugo-origin-pr-2944-cb451675.s3-website.us-west-2.amazonaws.com.

[sean1588]

overall this looks great! just a couple of comments on some of the JS, but great job with all of this!!

[sean1588]

do these screen size related changes need to be done using javascript? We typically don't do this using javascript and this can make it difficult to reason about when some of the responsive related styling is handled in css and some in javascript. Also, don't need to block on this, we can update this after. Though, if there is a reason this needs to be done this way ignore me.

[susanev]

i think the answer is yes, it needs to be done this way. but half way through building this i realized i could do the open and close nav in css only. but i think that will require more work so id rather do this in another pr though. but id love to zoom and talk it through.

[pulumi-bot]

Your site preview for commit a7dd2a2 is ready! 🎉

http://pulumi-hugo-origin-pr-2944-a7dd2a2f.s3-website.us-west-2.amazonaws.com.

[anita-trimbur]

🚀 🚀 🚀 🚀