Andy Matuschak mode

[death.au]

@pikacho

would there be a way to scroll horizontally using the mousewheel if you hovered it over the horizontal scroll bar? right now I can only drag it with the mouse if I want to scroll to another note.

I don’t think that’s something I can control with CSS, unfortunately
I’m lucky I have a horizontal scroll wheel on my mouse, I guess.

@pikacho

It also seems I can’t resize the notes in this mode (if I try to move the bar between the notes to make one narrower, it seems to perhaps make the other one wider, but they seem to be at a default width and can’t go smaller)

Yeah, this css sets a minimum width for the panes (which you can adjust the values of in the css if you like, just change the min-width: value). Resizing panes tries to set the width as a percentage of the container’s width. Which… well, I’m not quite sure what that’s doing in this context, but it just seems to reset to the min-width anyway.

There might be a better solution that allows for resizing panes, but I don’t know what it is yet.

[death.au]

@nickmilo

Try holding shift while scrolling with the mouse

TIL about shift-scrolling. Don’t know how I’d never come across that before…

[Klaas]

@kard32 For me too. I did not like it when I 1st saw on Andy’s website, but I love it in Obs. Prejudice? Maybe, but I don’t care.

[lizardmenfromspace]

I wouldn’t worry too much about flooding the topics with threads, it is going to happen regardless. Better to focus instead on tools that allow for increased discover-ability and organization. Like increasing the amount of tags people can use and having a pop up suggestion to add a tag when someone creates a new thread.

[pikacho]

genius! you have just made my life so much easier <3

[AnthonyH]

Hi @death.au. I have been looking for exactly this, so thanks for doing the hard yards.

However, for an absolute novice, can you explain steps I need to take to ‘copy the snippet into css vault’. Do I need to create a new vault? I have just started using Obsidian and completely unfamiliar with css
Thank you

[Klaas]

Obsidian is rendered the way it is because it has a default css sheet built in.

You can add your own css sheet to you vault and whatever is in that sheet overrides the default settings for that feature.

So, all you need to do to get Andy Mode working is:

1. close Obsidian;
2. open a plain text file, copy/paste the AM code to it;
3. save it as obsidian.css to your vault;
4. reopen Obsidian.

Tada, you will see Obsidian with the Andy Mode.
Enjoy.

[AnthonyH]

Thank you @Klaas. This is all new to me, and so unfortunately, I am still unclear regarding step 3.
If Obsidian is closed, how can I save the text to a vault?
I suspect that the vault to which you refer is different to the vault in which Obsidian notes go – the same term to describe two different things.
Can you explain how to ‘save to your vault’? Is that a system file that Obsidian reads when it opens? If so, how do i find it on a Mac, in order to save the file?
Appreciate your help

[alltagsverstand]

@AnthonyH

how can I save the text to a vault?

A “vault” in obsidian is actually nothing more than a local folder → thus save the obsidian.css file in the respective folder that is your main obsidian data directory

[AnthonyH]

Thank you @alltagsverstand. Folder makes sense. Found it and now playing in Andy mode

[jokysatria]

Could someone help me to fix the suggestion-box bug? It’s not placed properly sometimes.

Here’s the code I use

/* Andy Matuschak mode! */
/* everything under .mod-root now. Don't want Andy messing with sidebars */
/* also, Andy only makes sense for vertical splits, at the root level, right? */
.mod-root.workspace-split.mod-vertical {
  overflow-x: auto;
}

.mod-root.workspace-split.mod-vertical>div {
  min-width: 450px;
  left: 0;
}

.mod-root.workspace-split.mod-vertical .workspace-leaf.mod-active,
.mod-root.workspace-split.mod-vertical>div:first-of-type {
  z-index:1;
}

Also is it possible to enlarge the pane? It always back to min-width that I set.

[death.au]

Yeah, those two issues (plus positioning of hover popups) are my major pain points with this, and I haven’t been able to solve them with CSS alone.
Hopefully when the plugin API becomes available these are things I can address with some JavaScript…

[Piotr]

Little trick for people like me who want to hide inactive editors unless these are under the mouse cursor.

.workspace-split.mod-root {
    background: var(--background-primary-alt);
}

.mod-root .workspace-leaf:not(.mod-active) {
    opacity: .05;
    transition: .3s;
}

.mod-root .workspace-leaf:not(.mod-active):hover {
    opacity: 1;
}

[jokysatria]

Thank you so much. The transition is cool and smooth.

[RobOK]

Using this CSS, If I am in edit mode, do i have to hit Shift-Option-Command click (on a Mac) to open in a new pane? That is a bit awkward. Any easier way?

[jokysatria]

Sorry for making a request.
Could you make the pane is also visible when pinned?
Thanks before.

[Piotr]

Unfortunately in Obsidian’s html pinned pane is built exactly the same as the default one. Except pin icon in header, but in css one can’t go backwards to apply changes to “parent” when some “child” element is added or changed.

[Piotr]

There is one way to get around this limitation if in your workflow pinned pane is always either first or last in the stack.

/* first pane always visible */
.workspace-split.mod-root .workspace-leaf:nth-child(2) {
    opacity: 1;
}
/* last pane always visible */
.workspace-split.mod-root .workspace-leaf:last-child {
    opacity: 1;
}

[jokysatria]

It helps. Thank you.

[MonacledPotato]

Hi, thanks for your active-pane modification, I was trying to create something just like it myself. I adopted your edits but changed the opacity to filter: blur, as I like the look of that a bit more. But would you happen to know how to go about making it so the title of a note is never blocked/blurred out?

Thanks