Andy Matuschak mode - V2.7 (updated for 0.7+ new panes)

Omg this is nuts. Wrote an entire 17-page memo on V1 - gonna fire this up now

1 Like

Thanks @Klaas For those that would like a border around their transclusions, here’s a slight adjustment:

/* Delete title in transclusion */
.markdown-embed-title { display:none; }
.markdown-preview-view .markdown-embed { border:1px solid var(--blockquote-border); padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content { max-height: unset;}
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0; }
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0; }
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0; }
2 Likes

@nickmilo Thank you.

@Klaas & @nickmilo, I created a separate thread for the “Naked embeds” as I’ve come to call them here: "Naked" Embeds (CSS tweak)

2 Likes

@death.au fyi… V2 breaks the “Split Horizontally” feature, where as V1 didn’t. Just enable V2, open a file and split horizontally an empty pane will open where the horizontal split should be.

I loved it, but is there any way to slide horizontally by shortcut keys?

I love this mode <3

Sadly I just updated to the insider version (0.7.1) and the Andy mode breaks the left sidebar width adaptation (see attached) :frowning:

image

1 Like

In fact @death.au already has corrected this for v0.7.0+, shared on Discord -> I share it here if that’s OK :

/* Andy Matuschak mode! V2! for 0.7.0! (so... 2.7?) */

/* 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; 
  --header-width: 36px; /* <- 36px is the header height in the default theme */
}
.mod-root.workspace-split.mod-vertical > div { 
  min-width: calc(700px + var(--header-width)); /* <-- 700px is the default theme's "readable" max-width */
  box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25);
  position:sticky;
  left:0;
}

/* shift sticky position, so titles will stack up to the left */
/* This will currently stack to a maximum of 10 before resetting */
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) { left: calc(var(--header-width) * 0); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) { left: calc(var(--header-width) * 1); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) { left: calc(var(--header-width) * 2); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) { left: calc(var(--header-width) * 3); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) { left: calc(var(--header-width) * 4); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) { left: calc(var(--header-width) * 5); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) { left: calc(var(--header-width) * 6); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) { left: calc(var(--header-width) * 7); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n+0) { left: calc(var(--header-width) * 8); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n+1) { left: calc(var(--header-width) * 9); }

/* now it's time for the fancy vertical titles */

/* first we'll add a bit of gap for the title to sit inside of */
.workspace-leaf-content {
  padding-left: var(--header-width);
  position: relative;
}

/* this is where the magic happens */
.view-header {
  writing-mode: vertical-lr;
  border-right: 1px solid var(--background-secondary-alt);
  border-left: 2px solid var(--background-secondary-alt);
  border-top: none;
  border-bottom: none;
  height: auto;
  width: var(--header-width);
  position: absolute;
  left:0;
  top:0;
  bottom:0;
}

/* active titles have different border colours */
.workspace-leaf.mod-active .view-header {
  border-right: 2px solid var(--interactive-accent);
  border-bottom: none;
}

/* unset the title container height and swap padding */
.view-header-title-container {
  height: unset;
  padding-left: unset;
  padding-top: 5px;
}

/* fix the long-title-obscuring shadows */
.view-header-title-container:after {
  width: 100%;
  height: 30px;
  top:unset;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--background-secondary));
}
.workspace-leaf.mod-active .view-header-title-container:after {
  background: linear-gradient(to bottom, transparent, var(--background-primary-alt));
}

/* swap the padding/margin around for the header and actions icons */
.view-header-icon, .view-actions {
  padding: 10px 5px;
}
.view-action {
  margin: 8px 0;
}

/* get rid of the gap left by the now-missing horizontal title */
.view-content {
  height: 100%;
}

/* make the fake drop target overlay have a background so you can see it. */
/* TODO: figure out how the fake target overlay works so we can put the title back, too */
.workspace-fake-target-overlay {
  background-color: var(--background-primary);
}
12 Likes

Very helpful solution. Works like magic. Thank you @death.au

Presentation mode is currently (v0.7.1) a minor issue. It cannot enter a complete full-screen mode or sometime only show up in a child note container.

It should not be called V2, it should be called V3.

2 Likes

Thanks for this @Martin, I hadn’t got around to updating this post yet.

1 Like

Many thanks for this update. I love your AM css, 1st thing I always add to a new theme I try.

1 Like

Yes, many thanks as always.

TIL: I stumbled upon Federated Wiki yesterday and I think Ward Cunningham had some version of Andy mode since 2011, but I could be wrong with my date of when Ward starting using that leaf/panel style. http://fed.wiki.org/view/federated-wiki

I just feel for Ward since it appears he had several ideas before their time: crowd-based digital gardens that you could share parts of with others and apparently it had Andy-mode before Andy.

2 Likes

@death.au please see these 2 comments on the forum about a bug in the new Andy mode:

@death.au not sure what has changed, but If I change the width of the ribbons then Andy Mode (the first element) will go under the ribbon instead of stopping at the edge. This doesn’t happen with the old code, so not sure what has changed.

@lizardmenfromspace Just did some testing and it seems this is not specific to Andy’s mode (but is much more noticeable due to the title getting covered)
The thing you’ll need to fix is:

.workspace-split.mod-left-split { margin-left: 30px; }

You just have to change that 30px value to the same as the width of your ribbon.
You’ll probably have to do the same thing for .mod-right-split as well.

@jarodise, @Klaas I’m not entirely sure what you mean by this? If I change the pane width (.mod-root.workspace-split.mod-vertical > div { min-width: calc(700px + var(--header-width)); }), the text wrapping does change with it on my end.

Unless you mean when you get past 700px and the text stops getting wider, in that case, you probably just need to turn off “Readable line length” in Obsidian’s editor settings.

Hello! I’m not sure if this is a bug, but I saw this unexpected behaviour after playing around with reordering the panes.

If I had many vertical panes that I re-arrange into horizontal panes, obsidian forgets it is in Andy Mode (I’m using the Atom Theme right now). I have to get rid of all the panes and redo my setup in vertical mode in order for Andy mode to come back again.

@s-kyy So this looks like a little bug in the way the workspace is handled currently.

If you have multiple vertical splits and you drag one into another as a horizontal split, you now have a horizontal split inside one of your vertical splits. vertical -> horizontal. Makes sense so far.

If you drag all of your panes in this way, you now have a setup with one vertical pane containing multiple horizontal panes.

Then when you try to drag one of these panes back out again, you can’t really, so you end up creating a new vertical split and you now have vertical -> horizontal -> vertical.

If you drag all of your panes in this way, obsidian is smart enough to get rid of that horizontal pane altogether and move everything back up, but you still end up with vertical -> vertical.

Combining that with the fact that Andy’s mode only applies to the root level vertical panes, it means it won’t apply to the inner ones and you end up with the bug you’ve mentioned.

I have reported this to the devs, and they have confirmed that it is a bug, and will hopefully fix it in a future version by collapsing any splits of the same direction into one, so vertical -> vertical will become just vertical, hopefully solving this issue.

Sorry for the wall of text, but hopefully my explanation makes sense. Thanks for pointing this out :+1:

2 Likes

This is what I mean - see screenshot.
To see the rest of the text in the right-hand pane, I have to slide that pane to the left.