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

Update showcase links and nav #161

Merged
merged 63 commits into from
Aug 6, 2019
Merged

Update showcase links and nav #161

merged 63 commits into from
Aug 6, 2019

Conversation

shawnbot
Copy link
Contributor

@shawnbot shawnbot commented Jul 30, 2019 •
edited
Loading

Closes #152:

  • Update nav links #162 Update main nav to say "about" instead of team
  • Update nav links #162 Redirect team to About page (anchored to point in page)
  • Update nav links #162 Update header content to include "made by GitHub" para
  • Add new docs showcase section using current social thumbnails. This reflects the order and content I think we should use in the first ship.

Note that I've also removed the draggable SVG elements in this PR. 😢

New issues:

  • Nav wraps weirdly at smaller screen widths. Should we wait on @colebemis's new nav, or revert back to the Blueprints nav for now??

    Note: in de70b4f I made the global nav responsive-ish. This might be good enough for now? 🤷‍♂

@vercel
Copy link

vercel bot commented Jul 30, 2019 •
edited
Loading

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://primer-style-git-homepage-layout.primer.now.sh

@vercel vercel bot temporarily deployed to staging July 30, 2019 22:26 Inactive
@broccolini broccolini mentioned this pull request Jul 30, 2019
Closed
4 tasks
@shawnbot shawnbot changed the title Implement new homepage layout Implement showcase section layout Jul 30, 2019
@shawnbot shawnbot mentioned this pull request Aug 5, 2019
Merged
@shawnbot
Copy link
Contributor Author

shawnbot commented Aug 6, 2019 •
edited
Loading

Remaining TODOs after talking with @broccolini:

  • Ask Ash about color of "Design, build..." heading text (blue.1?)

  • Fix left padding on responsive nav

  • Have nav scroll

  • Fix brush in interface guidelines SVG:

  • cursor: pointer on nav dropdowns

  • Figma link: /design/tools/figma

@vercel vercel bot temporarily deployed to staging August 6, 2019 21:45 Inactive
@shawnbot shawnbot requested review from emplums and ashygee August 6, 2019 21:48
@shawnbot
Copy link
Contributor Author

shawnbot commented Aug 6, 2019

Okay, I think that's it for the fixes above! @ashygee do you mind looking at the deployed site once a05f7ae finishes and let me know if you see anything wonky?

And @emplums, could I get your eyes on the code, too? 🙏

ashygee
ashygee approved these changes Aug 6, 2019
View reviewed changes
Copy link
Contributor

@ashygee ashygee left a comment

Choose a reason for hiding this comment

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

🚀 it!

@shawnbot shawnbot merged commit ba77f9e into master Aug 6, 2019
@shawnbot shawnbot deleted the homepage-layout branch August 6, 2019 22:07
emplums
emplums approved these changes Aug 6, 2019
View reviewed changes
Copy link
Contributor

@emplums emplums left a comment

Choose a reason for hiding this comment

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

Just left a few questions and comments, but feel free to merge!

src/components/Hero.js
import LinkLight from './LinkLight'
import IndexGrid from './IndexGrid'
import {ReactComponent as HeroImage} from '../svg/Hero.svg'
import {ReactComponent as HeroOverlay} from '../svg/HeroOverlay.svg'

const DOT = '・'
Copy link
Contributor

Choose a reason for hiding this comment

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

😂

src/components/Hero.js
</Relative>
</Flex.Item>
<Flex.Item as={Box} px={5} my={[4, 3, 0]} width={[1, 1, 1, 7 / 12]}>
<Heading color="blue.4" mb={2} fontSize={[48, 56, 84]} fontWeight="bold">
Primer
</Heading>
<Text color="blue.2" fontSize={[4, 5, 5, 7]} lineHeight={1.25}>
Resources, tooling, and design guidelines for building interfaces with GitHub’s design system
<Text as="div" color="blue.1" fontSize={[4, 5, 5, 6]} lineHeight={1.25} mb={3}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Is div used here to create a block level element? If so, could we change this to a p for semantic's sake?

src/components/NavDropdown.js
<Box {...rest}>
<Details
overlay
render={({toggle}) => (
Copy link
Contributor

Choose a reason for hiding this comment

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

Just a heads up this pattern will go away as of the 14.0.0 release

src/pages/index.js
<Text as="p" textAlign="center" mb={8}>
Check out our most popular tools to use in your next project:
</Text>
<Flex flexWrap="wrap" mr={[0, 0, -gutter]}>
Copy link
Contributor

Choose a reason for hiding this comment

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

I've never seen -gutter before, how does that work?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@emplums emplums emplums approved these changes

@ashygee ashygee ashygee approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Primer.style homepage update: Release 1
3 participants
@shawnbot @emplums @ashygee