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.

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

Site header redesign #6567

Merged
merged 6 commits into from
Nov 19, 2017
Merged

Site header redesign #6567

merged 6 commits into from
Nov 19, 2017

Conversation

ashmaroli
Copy link
Member

  • render site header at full-width using Flexbox
  • use site color scheme for search input

Desktop resolution sample

localhost_4000_docs_home_

Sample at 800px viewport-width

localhost_4000_docs_home_800px

Sample at 480px viewport-width

localhost_4000_docs_home_ 480px

  - render site header at full-width using Flexbox
  - use site color scheme for search input
@ashmaroli ashmaroli added the site label Nov 19, 2017
@ashmaroli ashmaroli requested a review from DirtyF November 19, 2017 01:59
@DirtyF
Copy link
Member

DirtyF commented Nov 19, 2017

Nicely done. 👏

On full width on desktop we could:

  • add jekyll latest version and get GitHub link out of the main navigation (it's an external link).
  • increase search font-size a bit so that input height equals current navigation item.

jekyll-header

Now that we use flexbox, I'd like to also display search for lower resolutions and get a full width search on mobile.

@ashmaroli
Copy link
Member Author

ashmaroli commented Nov 19, 2017

Regarding the version, would it be static or dynamic via {{ jekyll.version }}? And if its dynamic, would the site show the version on master or the one on github-pages?

with this, search has been opened up for 800px wide and above.. was planning to raise the accessibility in future PRs..

@DirtyF
Copy link
Member

DirtyF commented Nov 19, 2017

For now I guess we could go the easy way with {{ jekyll.version }} as GitHub Pages usually updates quickly.

We would link to GitHub release or Rubygems:

  - move link to GitHub repo out of primary nav but remain as is on mobile-devices
  - add a slot that displays current Jekyll version on large-screens
@DirtyF
Copy link
Member

DirtyF commented Nov 19, 2017

Looks like the search needs a bit of margin to be perfectly vertically aligned.

If I get .metaout of the search, navigation, search and meta are more equally distributed:

header-nav

@ashmaroli
Copy link
Member Author

If I get .metaout of the search, navigation, search and meta are more equally distributed:

True. I had modeled it based on your earlier suggestion. But the current suggestion will allow us little more freedom with the search input.. so 👍

The search looks aligned properly to me.. 🤓 🔍

  - props @DirtyF
  - render search input from 700px and above
@DirtyF
Copy link
Member

DirtyF commented Nov 19, 2017

Thanks @ashmaroli, looks great 🙌

Maybe we should move away from gridism at one point if we want more control over the grid?

@DirtyF
Copy link
Member

DirtyF commented Nov 19, 2017

@jekyllbot: merge +site

@jekyllbot jekyllbot merged commit b59078e into jekyll:master Nov 19, 2017
jekyllbot added a commit that referenced this pull request Nov 19, 2017
@ashmaroli
Copy link
Member Author

Maybe we should move away from gridism at one point if we want more control over the grid?

Yes, like you said a few days ago, it was designed 5 years ago.
Browsers have improved quite a lot in the interim.

@ashmaroli ashmaroli deleted the docs-header branch November 20, 2017 01:45
DirtyF pushed a commit that referenced this pull request Dec 7, 2017
Merge pull request 6567
DirtyF pushed a commit that referenced this pull request Dec 7, 2017
@jekyll jekyll locked and limited conversation to collaborators Jul 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants