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

Add `wide` variant to single layout #1516

Merged
merged 2 commits into from Feb 5, 2018

Conversation

Projects
None yet
3 participants
@peterahrens
Contributor

peterahrens commented Feb 2, 2018

This pull request adds a new layout called "queen." It is a wider version of "single" (yes like the mattress sizes). It puts the right sidebar on top (if you asked for a right sidebar) so that you can get that sweet sweet wide display you've been craving for your programming blog post (80 characters or bust!), without cramping your style in your more literary blog posts. I don't really know if this layout is really worth merging, but I thought I would put it here so somebody might copy what I did instead of bugging mmistakes about widening the margins again.

This commit should add a new layout called "queen," a bigger version of
the "single" layout that puts the right sidebar on top.
@peterahrens

This comment has been minimized.

Contributor

peterahrens commented Feb 2, 2018

I am just going to close this and some diligent github user might read it later.

@peterahrens peterahrens closed this Feb 2, 2018

@mmistakes

This comment has been minimized.

Owner

mmistakes commented Feb 2, 2018

The elegant approach here is to utilize the classes front matter instead of adding a new layout.

For a page you'd want the wide variant of you'd do something like:

---
layout: single
classes: wide
---

Which would put a wide class on the <body> element. You could then add similar CSS to what you did but using .wide to override the page and sidebar classes.

.wide {
  
  .page {
    // override right padding and width's to make wide
  }

  .sidebar__right {
    // override negative margin, width, positioning, etc.
  }

  // any other overrides needed for a wide `.page`
}
@mmistakes

This comment has been minimized.

Owner

mmistakes commented Feb 2, 2018

If you want to take a stab at this I'll review it and see about getting it merged in.

@peterahrens peterahrens reopened this Feb 2, 2018

@peterahrens peterahrens changed the title from Giving the people what they want: A new, wider layout called "queen." to Giving the people what they want: A new, wider "wide" class for the "single" layout. Feb 2, 2018

@mmistakes

This comment has been minimized.

Owner

mmistakes commented Feb 5, 2018

Looks good @peterahrens, thanks for making the change and resubmitting.

@mmistakes mmistakes changed the title from Giving the people what they want: A new, wider "wide" class for the "single" layout. to Add `wide` variant to single layout Feb 5, 2018

@mmistakes mmistakes merged commit ba4a07d into mmistakes:master Feb 5, 2018

@peterahrens

This comment has been minimized.

Contributor

peterahrens commented Feb 6, 2018

Thanks for the tips @mmistakes!

@peterahrens

This comment has been minimized.

Contributor

peterahrens commented Feb 6, 2018

Hopefully this helps with issues like #1480, #1373, #1265, #384, #136, and #74.

@ohadschn

This comment has been minimized.

Contributor

ohadschn commented Feb 14, 2018

Do you guys have a live demo for this?

@mmistakes

This comment has been minimized.

@ohadschn

This comment has been minimized.

Contributor

ohadschn commented Feb 14, 2018

Nice!
Apologies for my laziness, I should have checked your sample post list - comprehensive as always :)

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