Comments (16)
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.
from minimal-mistakes.
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
from minimal-mistakes.
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.
from minimal-mistakes.
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
from minimal-mistakes.
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!
from minimal-mistakes.
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.
from minimal-mistakes.
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!).
from minimal-mistakes.
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.
from minimal-mistakes.
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!
from minimal-mistakes.
How should I change with latest code?
from minimal-mistakes.
@adityaatluri #1373
from minimal-mistakes.
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?
from minimal-mistakes.
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.
from minimal-mistakes.
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?
from minimal-mistakes.
Override these colors.
from minimal-mistakes.
Thank you!
from minimal-mistakes.
Related Issues (20)
- Removing the `sticky` tag from the sidebar has no effect
- Deprecation warnings relative to use of / outside of calc, will be removed in Dart Sass 2.0.0 HOT 1
- Breadcrumbs `Home` points to `github.com HOT 1
- Add support for child menues in matheader
- Neon Code Hightlighting Broken
- Search includes asset files HOT 1
- Iam getting this error Can you please help on this HOT 1
- greedy-navigation timeout causes inconsistent behaviour with translucency
- Google analytics update HOT 2
- Accessibility bug: the nav elements across the theme should have an aria-label
- monochrome and color (predefined) icons in author bio HOT 2
- Jekyll plugins HOT 3
- page.url variable pointing to wrong page (post) HOT 3
- Error when installing Theme HOT 1
- setup a ttc skin
- "You may also enjoy" recommends hidden posts, when it probably shouldn't HOT 1
- Intro animation completely breaks Lighthouse
- Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0
- I like what you do
- jekyll-archives not works HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from minimal-mistakes.