Editing the pure layout

[namelivia]

Hello, I'm in the process of editing this theme to customize it for myself. I want to stretch the sidebar a little bit, but I can't do it.

The sidebar width is given by something called Pure, but I don't know where is it asigned. In _mediaqueries.css I see this:

    .pure-g-r>.pure-u,
    .pure-g-r>[class *="pure-u-"],
    #main-sidebar,
    #main {width:100% !important; float:left !important;}

But I can't get what is it doing. Could you help me?

Thanks in advance

[damianmuti]

Hey mate,

Pure is a UI framework; im just using the grid system. Check it out @ http://purecss.io/ You'll find the grids documentation there.

Navigate to default.hbs:

Find aside#main-sidebar and change it's class from pure-u-1-2 to pure-u-1-3. That will change sidebar's width from 50% to 33,3333%. Find section#main and change it's class from pure-u-1-2 to pure-u-2-3. That will change main section's width from 50% to 66,6666%.

Then, navigate to sass/custom/_layout.scss:

Find the line number 26, remove the margin-left:50% and replace it with @include calc("margin-left", "100% / 3");.

Recompile everything with compass watch sticko and thats it.

That should do the trick; haven't tested tho. :)

Regards, D.-

[namelivia]

I wasn't finding the pure declaration in default.hbs Thank you very much!

[damianmuti]

No prob, Nacho :)