Sidebar and content CSS help

[zanodor]

For the last hour I've been trying with robot help to resolve the issue in various ways, to no avail.

I have Blue Topaz theme activated. My theme with sidebars showing works well at browser zoom at 90 percent but not at 100 percent. I tried to play with content and sidebar percentages, with body zoom set at 90 percent, but did not succeed with the sidebars showing at 100 percent in browser.

I am now in the midst of overriding relevant snippets from digital-garden-base.scss in my custom-style.scss but it's all becoming a big mess.

I tried the default theme with the same results. Were the sidebars not intended to be visible at default 100 percent zoom at all? Strange. Even the Docs site behaves the same...

Thanks

[oleeskild]

There's a width breakpoint at 1400px. This means that any window smaller than 1400px will see the "mobile" version of the site. This is because it starts to get crammed and there is not enough space on the screen to show everything when getting this small.

Given this I assume your your screen is smaller than 1400px in width, meaning you will see the mobile version on all sites made with the plugin. When you zoom out, you essentially tell you browser that your screen is wider than it actually is.

I have a feature I intend to implement, #481, which will allow you to modify these things with the style settings plugin. Until then you will need to modify the css of the garden itself to make changes. I would recommend waiting for the style settings feature though 😄

[zanodor]

Yes, that makes sense.
I was just about to link this to the issues now because it has been maddening me. I feel foolish telling my prospective readers -- if any -- to have better effects with zoom set to 90%.

I will wait then, because frankly, I tried every way possible now (can't believe a simple zoom or transform is not enough to replicate the behavior of the user's interaction, though -- would have been all too easy), but when I saw the graph, I didn't see the toc and the backlinks or the file tree on the other side.

Thanks, Ole

[zanodor]

I went ahead and modified the filetree.njk file's following lines:

<div x-init="isDesktop = (window.innerWidth>=1350) ? true: false;" 
            x-on:resize.window="isDesktop = (window.innerWidth>=1350) ? true : false;" 
            x-data="{isDesktop: true, showFilesMobile: false}">

It didn't quite achive what I wanted though, as the right-hand sidebar didn't come into view, only the left one.
An exercise, anyway...