ui-cornell-callout,b.t.-ObsidianMD

ui-cornell-callout.css

/* ## Cornell Callout */
.markdown-source-view.mod-cm6 
.cm-contentContainer {
  container-type: inline-size;

}
:root {
  --ui-cornell-width: 20vw;
}


.markdown-reading-view
.callout[data-callout="ui-cornell"] {
  --callout-color: 222,222,222;
  background: var(--material-color-brown-900)
}

.markdown-source-view.mod-cm6 
.cm-embed-block.cm-callout:has(>
.markdown-rendered
.callout[data-callout="ui-cornell"]) 
div.markdown-embed-content 
.block-language-dataviewjs p {
  overflow-y: scroll;
  max-width: 90%;

  /* max-width: var(--ui-cornell-width) */
}
.markdown-reading-view.mod-cm6 
.cm-embed-block.cm-callout:has(>
.markdown-rendered
.callout[data-callout="ui-cornell"]) 
div.markdown-embed-content 
.block-language-dataviewjs p {
  overflow-y: scroll;
  max-width: 90%;
  /* max-width: var(--ui-cornell-width) */
}

.markdown-reading-view
.callout[data-callout="ui-cornell"]
.markdown-embed-content
.markdown-rendered
.markdown-preview-sizer.markdown-preview-section {
  margin: 0 !important;
}
.markdown-reading-view
.callout[data-callout="ui-cornell"]
.markdown-embed-content
.markdown-rendered
.markdown-preview-sizer.markdown-preview-section 
.block-language-dataviewjs p{
  width: auto !important;
}

/*  on any width greater than normal CORNELL SIDE the callout*/
@container (width > 95vw) {
  .markdown-source-view.mod-cm6 
  .cm-embed-block.cm-callout:has(>
  .markdown-rendered
  .callout[data-callout="ui-cornell"]):not(:hover) {
    --callout-color: 222,222,222;
    background: var(--material-color-brown-900);
    filter: blur(5px);
    
  }


  .markdown-source-view.mod-cm6 
  .cm-embed-block.cm-callout:has(>
  .markdown-rendered
  .callout[data-callout="ui-cornell"]) {
    
    transform:translate(-32vw,-65%);
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-height: 10vw;
    overflow-y: scroll;
    width: calc(var(--ui-cornell-width) + 3vw);
    margin-bottom: -2vw !important;
  }
  .markdown-source-view.mod-cm6 
  .cm-embed-block.cm-callout:has(>
  .markdown-rendered
  .callout[data-callout="ui-cornell"]) + .cm-line:before {
    content: "Cornell box above";
    display: block;
    background: var(--tertiary-blue-800) !important;
    width: 100%;
    padding: .5em .5em;
    border-radius: 0em 0 1em 1em;
  }
  .markdown-source-view.mod-cm6 
  .cm-embed-block.cm-callout:has(>
  .markdown-rendered
  .callout[data-callout="ui-cornell"]):before {
    content: "Click Me To Edit";
    display: block;
    background: var(--tertiary-blue-800);
    width: 100%;
    padding: .5em .5em;
    border-radius: 1em 1em 0em 0em;
  }
  .markdown-source-view.mod-cm6 
  .cm-embed-block.cm-callout:has(>
  .markdown-rendered
  .callout[data-callout="ui-cornell"]):after {
    content: "Click Me To Edit";
    display: block;
    background: var(--tertiary-blue-800);
    width: 100%;
    padding: .5em .5em;
    border-radius: 0em 0 1em 1em;
  }

  .markdown-source-view.mod-cm6 
  .cm-embed-block.cm-callout:has(>
  .markdown-rendered
  .callout[data-callout="ui-cornell"]) 
  div.markdown-embed-content 
  .block-language-dataviewjs p {
    overflow-y: scroll;
    max-width: var(--ui-cornell-width);
    height: fit-content;
  }
}


.markdown-source-view 
.markdown-rendered 
.callout[data-callout="ui-cornell"] 
.callout-title .callout-title-inner{
  /* margin-left: .5em; */
  max-width: 98% !important;
}
.markdown-reading-view 
.markdown-rendered 
.callout[data-callout="ui-cornell"] 
.callout-title .callout-title-inner{
  /* margin-left: .5em; */
  max-width: 98% !important;
}

/* ---------   -------- */

dependencies include the css vars

• --tertiary-blue-800
• --material-color-brown-900
  Replace with thy own colors.