Help With Tweaking The Default Minimal Mistakes Layout

[nsubordin81]

goal: I want to be able to override layout factors in my page. Example: I could create more space between the sticky sidebar element and the article element on both articles and the about page.

tools:

Chrome Version 113.0.5672.93 (Official Build) (64-bit)
VS Code
blog-in-a-box based project with no significant changes, only typical customization of _config.yaml and the below added files for stylesheets

existing:

desired:

I was able to achieve the above using the modification to the css pictured in the 'desired' image. the new portion added to the .archive class was padding 0 3rem !important;

what I've tried so far:

reading through this guide https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/ and attempting to follow the instructions under "Customizing" section. I tried creating a copy of main.scss first and then saw this note:

*Note*: To make more extensive changes and customize the Sass partials bundled in the gem. You will need to copy the complete contents of the _sass directory to <your_project> due to the way Jekyll currently reads those files.

since for this particular change I want to be modifying the .archive class and that has its own partial, I expect I needed to copy over the whole _sass/ directory. Here is a screenshot of my vscode project explorer, to show what I have done to structure the directories within my project:

So I'm doing this now. in the _sass/_archive.scss partial, I have added that padding line:

.archive {
  margin-top: 1em;
  margin-bottom: 2em;
  padding 0 3rem !important;

  @include breakpoint($large) {
    float: right;
    width: calc(100% - #{$right-sidebar-width-narrow});
    padding-right: $right-sidebar-width-narrow;
  }

  @include breakpoint($x-large) {
    width: calc(100% - #{$right-sidebar-width});
    padding-right: $right-sidebar-width;
  }
}

but when I am doing localdev I am not seeing this style show up when I inspect the page with chrome dev tools.

[SeanKilleen]

I figured it out.

Minimal mistakes is assuming you're operating from the root of the repository. But one trade-off we had to make for GitHub pages is that everything in blog-in-the-box is in the docs subfolder.

So, your overrides weren't overriding because the file wasn't in the right spot.

Submitted nsubordin81/blog.synapseflux.com#3, which should fix the problem. We can close this once that's confirmed (though my local preview showed the change as expected)

[nsubordin81]

Oh that makes total sense! Wow good catch, thank you thank you thank you! That not only solves this particular change but now I can override anything in the way the theme describes. Sa-weet. Going to approve and merge the pr before closing this out, probably tomorrow or Monday, doing all this typing on my 🤳