WIP revamp primer.github.io

[broccolini]

This is very very WIP! Don't review the code at this point, lots of placeholder styles and svgs so I could prototype out a new design. Pushing this up so I can get design and content feedback.

A bunch of stuff needs more work, such as:

• responsive is a bit wonky in places
• octicons illo needs to adapt for mobile
• need illos for open-source section
• add icons for social media
• finish footer
• not all links are correct or linked yet
• not sure what to do with primer packages icons
• match up package icons for octicons (figma may not be allowed & is bigger than the others)
• is it too monotone? Try other colors or light version?
• add some animations

➡️ current design
➡️ pages preview or new design

[simurai]

This looks slick. 😍

Also showing the example how one would author the markup is helpful. 👍 People can quickly see: "Ohh.. some BEM + atomic mix, great!"

Maybe something to consider adding: A section with a couple components. Just so people can see the "look and feel" without going to the docs/storyboard. Probably hard to decide which ones, but maybe buttons (can't miss them), form inputs, navigation controls or so. Although "Primer product" kinda needs to be on a white background, so not sure how that would feel in the middle of all the dark. Ohh.. maybe this: At the top or under "Packages" there is a [ product | marketing ] switch, choosing product would make the whole page white and would only show "Primer product" components on the page. That would also show people when you wanna use what. Definitely a "nice to have" that could be added at a later point.

[broccolini]

Closing this as this got shipped in primer/primer.style#2