Add XL-friendly layout. #624
Conversation
keeping the footer always at least at the bottom of the page.
There was a problem hiding this comment.
Thanks for the submission @Sesamestrong!
This looks great except for the sidebar on various pages, e.g:
As mentioned in the issue, we want all content to be constrained within this max-width container. Please make the necessary updates to gain approval. You'll likely want to change the sidebar styles from the fixed positioning.
|
Will do! |
|
I have added a change. Here is the new behavior (only changed on XL screens):
|
|
Hey @Sesamestrong thanks for continuing work on this. I'm seeing this on the preview homepage on my laptop (1440px width):
Looks like one of your changes is now forcing this content to align left. Same with the /build page. Please resolve that. |
|
I actually have a question about this. The reason I aligned it left was so that there could be space-efficient division between content and the sidebar. Should I keep it left-aligned when a sidebar is present, or should I center the main content in all cases and just limit the max-width in order to make it not overlap with the sidebar? |
|
Option 1: Maintain centering, reduce width when sidebar is present
|
|
I went with option 2. |
|
I believe that it has all features that you want now. |
| @@ -154,4 +154,8 @@ function resolveOpenGroupIndex (route, items) { | |||
| .sidebar | |||
| display block !important | |||
| transform translateX(0) | |||
|
|
|||
| @media only screen and (min-width:1280px) | |||
There was a problem hiding this comment.
We should add this width as a variable in config.styl
| max-width 1140px | ||
| #wrapper.has-sidebar main | ||
| margin-left 10px | ||
| max-width "calc(1140px - %s - 10em)" % $sidebarWidth |
There was a problem hiding this comment.
We should add this width as a variable in config.styl
|
@samajammin I have made a commit on my repo with the changes that you have requested. Should I make a new PR or is it possible to re-merge this one? |
|
Thanks, @Sesamestrong. I've reverted this PR in #634 - go ahead & make a new PR with all your changes (and please make the PR against the |
Description
This includes centering content Medium-style and keeping the footer always at least at the bottom of the page. See #207 for information on exactly what this implements.
Uses flexbox and
margin:0px auto;to center things. Usesmax-widthto set the maximum width of the main content. This creates an effect similar to what Medium uses. The main content is set to bemin-height:100vh;, and is structured with Flexbox around a) adivholding the main content and b) thefooter. Thedivhas propertyflex-grow:1;, allowing it to grow to satisfy themin-height:100vh;requirement. This places the footer aligned at the bottom.I used
@mediaqueries to limit width of items only when the viewport width is greater than1280px. The max content width limit under XL circumstances is1140px.Related Issue
#207
Screenshots (if appropriate):
1244pxviewport width (Original site, my changes):>1280pxviewport width (Original site, my changes):