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

@death.au Fantastic. I started using your proto version (V1), and now just installed V2. With V1 you also wrote code to delete the note title in the transclusion. I added it to my version of V2. For others who might be interested, here it is:

/* Delete title in transclusion */
.markdown-embed-title { display:none; }
.markdown-preview-view .markdown-embed { border:none; 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; }

Many thanks !!

3 Likes

Great work @death.au, really wonderful stuff. I have the same ‘popover’ issue as @lizardmenfromspace. I also have a mildly irritating issue with the ‘three little dot’ menu item. The active hover-area fir it seem very small now (maybe because it is vertical now?), making it quite difficult to click it. Can that active area be made bigger at all? I also get some stuttering or vibrating when hovering over it. Sorry to be a demanding, whingeing snowflake.

2 Likes

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);
}
11 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.