Skip to content

Latest commit

 

History

History
61 lines (50 loc) · 1.26 KB

Sidenote callout 01.md

File metadata and controls

61 lines (50 loc) · 1.26 KB
Raw

↪Collection

Sidenote callout 01

cover:: 

/*
author: sailKite
source: https://discord.com/channels/686053708261228577/702656734631821413/1155147566615367680
*/

/* aside functionality as a custom callout */
:is(.markdown-source-view .cm-callout, div:not([class])):has(
    > .callout[data-callout-metadata*="aside"]
  ) {
  position: relative;
  overflow: visible;
  contain: none !important;
}
.callout[data-callout-metadata*="aside"] {
  --aside-width: 200px;
  --aside-offset: var(--size-4-4);
  position: absolute;
}
.callout[data-callout-metadata*="aside-l"] {
  left: calc(-1 * (var(--aside-width) + var(--aside-offset)));
  right: calc(100% + var(--aside-offset));
}
.callout[data-callout-metadata*="aside-r"] {
  left: calc(100% + var(--aside-offset));
  right: calc(-1 * (var(--aside-width) + var(--aside-offset)));
}
@media (hover: hover) {
  .markdown-source-view.mod-cm6
    .cm-embed-block:has(> div > [data-callout-metadata*="aside"]):hover {
    overflow: visible;
  }
}

How to use

> [!bug|aside-r]
> your text here
> [!bug|aside-l]
> your text here