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

Add wide variant to single layout #1516

Merged
merged 2 commits into from
Feb 5, 2018
Merged

Add wide variant to single layout #1516

merged 2 commits into from
Feb 5, 2018

Conversation

willow-ahrens
Copy link
Contributor

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.

the "single" layout that puts the right sidebar on top.
@willow-ahrens
Copy link
Contributor Author

willow-ahrens commented Feb 2, 2018

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

@mmistakes
Copy link
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
Copy link
Owner

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

@willow-ahrens willow-ahrens reopened this Feb 2, 2018
@willow-ahrens willow-ahrens changed the title Giving the people what they want: A new, wider layout called "queen." Giving the people what they want: A new, wider "wide" class for the "single" layout. Feb 2, 2018
@mmistakes
Copy link
Owner

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

@mmistakes mmistakes changed the title Giving the people what they want: A new, wider "wide" class for the "single" layout. Add wide variant to single layout Feb 5, 2018
@mmistakes mmistakes merged commit ba4a07d into mmistakes:master Feb 5, 2018
@willow-ahrens
Copy link
Contributor Author

Thanks for the tips @mmistakes!

@willow-ahrens
Copy link
Contributor Author

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

@ohadschn
Copy link
Contributor

ohadschn commented Feb 14, 2018

Do you guys have a live demo for this?

@mmistakes
Copy link
Owner

https://mmistakes.github.io/minimal-mistakes/markup-text-readability-wide-page/

@ohadschn
Copy link
Contributor

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

kkunapuli pushed a commit to kkunapuli/kkunapuli.github.io that referenced this pull request May 30, 2019
sumeetmondal pushed a commit to sumeetmondal/sumeetmondal.github.io that referenced this pull request Sep 10, 2019
jchwenger pushed a commit to jchwenger/jchwenger.github.io that referenced this pull request May 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants