big gap on left side when filetree is off.

[anantshri]

Can we have a CSS fix when filetree is off the content starts from a bit more left right now the sidebar if it doesn't exists is just left as a empty space with content stuck in middle of a page.
Not very good with CSS hence asking here.

[wiverson]

FWIW I was able to fix this on my site. The changes:

In digital-garden-base.scss there were two spots with 1400px hard-coded:

digitalgarden/src/site/styles/digital-garden-base.scss

Line 259 in 69f20fa

@media (max-width: 1400px) {

digitalgarden/src/site/styles/digital-garden-base.scss

Line 352 in 69f20fa

@media (max-width: 1400px) {

I changed both of these to 800px instead of 1400px.

I also changed the 1400 to 800 on this line:

digitalgarden/src/site/_includes/components/filetree.njk

Line 25 in 69f20fa

<div x-init="isDesktop = (window.innerWidth>=1400) ? true: false;"

And then I put the following into my custom-style.scss file:

body {
  @media(min-width: 800px) {
    .content {
      margin-left: 250px;
    }
  }
}

This is giving me a reasonable result.

Unfortunately these changes or similar will need to be reapplied as these changes require updates to both the digital garden base scss and JS. I'm not an expert in scss so it's possible (probable?) that the changes I'm making to the base scss could be done via the custom scss file instead.

The more interesting one is the change to the JavaScript in the .njk files. I am not particularly familiar with .njk files (I think they are Nunjucks) and I'm not sure why this is being done with JS and not CSS media queries.