Wider text area in the blog posts/pages

[frosenberg]

Great theme!! Is there an easy way to make the text area in the blog posts a litt wider and reduce the "white borders". I'm not a CSS expert and my attempts failed so far ;). Any hint appreciated.

[mmistakes]

Take a look at the width styles applied to #main article. It's declared a few times at various break points to resize depending on screen width, so you'll want to keep that in mind if you make it wider.

[frosenberg]

Is main.css auto-generated or can I modify this? I'm looking here in the main.scss file

#main {
    counter-reset: captions;
    @include container;
    @include clearfix;
    clear: both;
    margin-top: 1em;
    article {
        @include container;
        @include grid(12,10);
        @include prefix(12,1);
        @include suffix(12,1);
        margin-bottom: 2em;
        @media #{$small} {
            @include grid(12,6);
            @include prefix(12,0);
            @include suffix(12,0);
        }
        @media #{$x-large} {
            @include grid(12,4.5);
        }
    }
}

I'm not sure I get what grid etc is doing and how it affects the width. Please elaborate.

On Fri, Aug 15, 2014 at 2:24 AM, Michael Rose [email protected]
wrote:

Take a look at the width styles applied to #main article. It's declared a
few times at various break points to resize depending on screen width, so
you'll want to keep that in mind if you make it wider.

—
Reply to this email directly or view it on GitHub
#74 (comment)
.

-Florian Rosenberg

[mmistakes]

No you can't edit main.css directly, it's generated by main.scss and all the partials in _sass by Jekyll. Above I'm assigning a bunch of mixins from the grid partial. If you browse through grid.scss it's commented out and explains the mixins.

Basically I'm using a 12 column grid. @include grid(12,10) means make article 10 columns wide out of 12. The prefix mixin adds columns before and suffix adds them after. To modify the width of article you'll need to adjust those numbers making sure everything adds up to 12 or else the layout will break.

The @media #{$small} lines are media query mixins to declare properties (mostly container widths) for the various screen sizes. Small is roughly mobile screens, medium = tablets, large = desktop, etc etc.

[frosenberg]

Cool thanks. I got it now.

On Fri, Aug 15, 2014 at 1:00 PM, Michael Rose [email protected]
wrote:

No you can't edit main.css directly, it's generated by main.scss and all
the partials in _sass by Jekyll. Above I'm assigning a bunch of mixins
from the grid partial. If you browse through grid.scss
https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/grid.scss
it's commented out and explains the mixins.

Basically I'm using a 12 column grid. @include grid(12,10) means make
article 10 columns wide out of 12. The prefix mixin adds columns before
and suffix adds them after. To modify the width of article you'll need to
adjust those numbers making sure everything adds up to 12 or else the
layout will break.

The @media #{$small} lines are media query mixins to declare properties
(mostly container widths) for the various screen sizes. Small is roughly
mobile screens, medium = tablets, large = desktop, etc etc.

—
Reply to this email directly or view it on GitHub
#74 (comment)
.

-Florian Rosenberg

[dantonnoriega]

Sorry to zombie an old post, but I wanted to clarify something. (I'm also a Jekyll and css noob, sorry :(.)

Is changing variable $def_grid: 12 to something like $def_grid: 16 in the file grid.scss the only thing that is required to make the text wider?

Or do we also need to update all the grid(12,10) values in page.scss to match?

If I just change $def_grid, nothing seems to happen. But if I try to change the values in pages.scss to match $def_grid---say, grid(16,14) prefix(16,1) and suffix(16,1) to match $def_grid: 16---I get a "page failed" error from GitHub.

I sort of just gave up and reverted everything back. Would be great to fully understand how to shift the width.

Thanks!

[mmistakes]

Changing $def_grid probably won't help. All it's going to do is change the math slightly.

You need to play with the grid mixins found in grid.scss. They're all documented if you look at the comments for some guidance. Basically what's going on is with the grid(x, x) mixin it's saying make the element you apply it to x amount of columns wide.

grid(12,10) means 10 columns of 12 (12 being the same amount of columns as $def_grid) which is a width of about 83.33333%. 12,12 would be 100%. The mixin isn't doing much other than to do some quick math to output the widths in percentages.

There's also some media queries mixed in there to change the amount of columns #main .post and #main .page span depending on the screen sizes. I'm guessing you want to make it wider on desktop screens. So you'll need to play with the grid mixin values at the large and x-large breakpoints.

You'll see below it goes from 10 columns on mobile to 6 columns, to 5 columns at the largest screen size. I did this to make the typographic measure shorter since long lines of text are harder for the eye to track and read.

#main {
    counter-reset: captions;
    @include container;
    @include clearfix;
    clear: both;
    margin-top: 2em;
    h1 {
        margin-top: 0;
    }
    .post,
    .page {
        @include container;
        @include grid(12,10);
        @include prefix(12,1);
        @include suffix(12,1);
        margin-bottom: 2em;
        @media #{$small} {
            @include grid(12,8);
            @include prefix(12,0);
            @include suffix(12,0);
        }
        @media #{$large} {
        @include grid(12,6); // increase 6 if you want to make it wider
        }
        @media #{$x-large} {
            @include grid(12,5); // increase 5 if you want to make it wider
        }
    }
}

The prefix and suffix mixins apply margin before and after to simulate a gutter. They work similar to the other mixin. The first value is the base grid (eg. 12 columns), the second is how many columns.

prefix(12,0) would remove any margin to the left, prefix(12,1) would add a column of margin before, 12,2 would add 2 columns, etc. etc. etc.

[dantonnoriega]

Pretty sure I understand.

I decided to try running my site locally (following your amazing instructions) since I had not done so upgrading to OS X 10.11.

But what is frustrating is that, while I feel like I understand, I still find that, while running the server locally and making the following changes to #main.page...

        ...
        @media #{$large} {
        @include grid(12,10); // increased to 10
        }
        @media #{$x-large} {
            @include grid(12,9); // increase to 9
        }

...I see no noticeable changes to a post even though I can see the changes being regenerated in terminal.

But the more odd thing I noticed is that the text DOES get wider as I make my browser screen thinner. It only shrinks when I get to a certain browser window width. You can see a video of here.

So I'm at a loss. I've fiddled with the variables but have seen no significant changes. I also noticed, as seen in the video, that the width of a post is wider at thinner browser widths but then breaks as I take the browser with to full screen. My guess is that it has something to do with the @media variables in variables.scss

$micro            : "only screen and (min-width: 30em)";
$small            : "only screen and (min-width: 37.5em)";
$medium           : "only screen and (min-width: 48em)";
$large            : "only screen and (min-width: 62em)";
$x-large          : "only screen and (min-width: 86.375em)";

But, when I fiddled with this, I just got errors. So I left them alone.

Anyway, sorry to take your time. I just got that itch where I'm obsessed with why the hell something doesn't seem to be working and can figure it out (I need to stop and move on---my site looks more than great thanks to your work!).

[mmistakes]

I just did a quick test with the grid changes you made and it sort of works, but is 1 column too wide so things stack weird.

If you decrease by one like so:

...
        @media #{$large} {
        @include grid(12,9);
        }
        @media #{$x-large} {
            @include grid(12,8);
        }

You'll get this. I would probably knock it down another value and add @include suffix(12,1); to apply some white space on the right so the text isn't hitting the scrollbar.

The fact that your CSS isn't changing tells me you probably have url: in your _config.yml set to your production site. When working locally you'll need to leave that blank or change to url: http:localhost:4000 to use the local CSS. All asset links in the theme are absolute and it's likely pulling the one from your prod site instead... which is why you're not seeing any changes.

Be sure to restart the Jekyll server after making any _config.yml changes since those aren't watched automatically.

Another thing I'd suggest is firing up your browser's web developer tools. Once enabled you'll be able to right click any element and inspect it's CSS properties. You can also tinker with the declarations in real time to figure out what changes you might want to make.

The line numbers won't match up exactly but should give you a good idea on what classes or elements you need to target to get things laid out how you'd like.

PS: I'm working on a complete rewrite of the theme which should make customizing things a bit easier. I was never happy with the column placement on the current version. You're not the first person to run into problems trying to widen the main content container or shift things around. Probably won't launch for a bit but I'm getting closer as I build out the documentation.

[dantonnoriega]

Sweet. Got it to work. And you were correct, I didn't change the url. While I was looking at the correct html file, my guess is that, since I wasn't using the local port, things just weren't update correctly.

Thanks so much. That one failure (not changing the url) was really the biggest issue. Now that I can play around and see things in real time, I should be in much better shape!

[aditya4d]

How should I change with latest code?

[mmistakes]

@adityaatluri #1373

[aditya4d]

I was playing with

$right-sidebar-width-narrow: 150px !default;
$right-sidebar-width: 200px !default;
$right-sidebar-width-wide: 250px !default;

But the problem is, it scales the same for left and right. When I make everything 0px, I see the text on full page. Is there a way to enable just for right?

[mmistakes]

No, it can't be done by just altering those variables. You need to remove the right margin just how I have it in that other issue linked above.

Overriding the CSS is the only way to widen the page how you want.

[aditya4d]

So, here is what I did, I removed the padding variable in the file you mentioned. And it worked. Quick question, how to make dark theme more darker?

[mmistakes]

Override these colors.

[aditya4d]

Thank you!