search

mmistakes / minimal-mistakes

:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.
https://mmistakes.github.io/minimal-mistakes/
MIT License
12.42k stars 25.6k forks source link

Move "On This Page" to left "column" and let content spread further to right #1298

Closed sdruskat closed 7 years ago

sdruskat commented 7 years ago

Environment informations

I have tried figuring out flexboxes and susy, but I'm afraid I have too little knowledge about modern CSS to figure out how to achieve the following for my pages using the single layout.

Many thanks for your help, I'm at my wit's end.

mmistakes commented 7 years ago

Moving the "On this page" table of contents is really tricky. What makes it complicated is it has to reside inside the content container because it's created by Kramdown when it parses the content.

I'm using some CSS trickery (eg. negative margins) to pull it outside of that container and into the space on the right (padding). This works because there is no other content there. I can't think of any way to move it to the left and not interfere with the author sidebar.

Ideally you'd just place that content inside of the sidebar container, but that's not possible if you're using Kramdown's automatic TOC feature. Your options are to use the custom sidebar nav and manually specify the links, or use some sort of Javascript based solution to create a table of contents similar to how Kramdown does it.

And yes, if you remove the right padding on .page and strip out make the width 100% (remove the calc stuff), it'll fill the remaining space instead of centering.

Search through the closed issues as I've covered a lot of this numerous times before and you'll likely find a more detailed explanation.

sdruskat commented 7 years ago

Thanks for your very swift reply (and the great theme of course). I can see what you mean.

What about simply "disappearing" the left column altogether, letting the content start where it would have started, keep "On this page" where it is, and let the content fill the remainder of the space? I imagine this would be simpler as you'd only have to adjust the susy magic? I had looked for that already as well, but am sorry to report I couldn't find the breakpoint/susy/??? element in question.

Thanks so much!

mmistakes commented 7 years ago

It's currently been designed to have the main content centered on the page regardless if there are sidebars on the left or right. Changing that would alter the overall design of the theme so it's not something I'm going to do, but there's nothing stopping you from turning the theme into something custom to meet your needs.

I ripped out much of the Susy SCSS from the layout so that could be why you're not seeing it. For the most part I'm simply floating containers and using calc to pad out space for the sidebar instead of Susy mixins.

If you want to push the Kramdown TOC to the left instead just make sure you don't have an author sidebar on the page. Then reverse much of the logic that pads the right to pad the left, then float the .toc to the left instead.

sdruskat commented 7 years ago

Thanks. Reversing the padding is clear, but how do I float the .toc to the left? Sorry for being a nuisance.

mmistakes commented 7 years ago

My bad. Meant you'll have to float: left .page__content. There's probably a bunch more tweaks, you essentially reverse paddings, positioning, margins etc.

sidebar__right for instance will need the negative margin on the left instead of the right, and will need to be absolutely positioned to left: 0 instead of right: 0.

sdruskat commented 7 years ago

Yes, thanks, just found .page__content to work. Excellent, thanks!

chrisdaaz commented 6 years ago

@sdruskat i am trying to accomplish the same thing. can you share what you did to make it work? was it simply altering .page__content and reversing the padding, or was there a lot more involved?

chrisdaaz commented 6 years ago

OMG I MADE IT WORK. nvm @sdruskat !

Here's how:

sidebar.scss

.sidebar_right

@include breakpoint($large)

@include breakpoint($x-large)

page.scss