Modified version of the Obsidian Cornell note template

README.md

Modified Version of the Cornell Note Template

Adapted from this gist, as the original one seems to have some formatting problems. All credits go to the original creator.

cornell.css

/** Place this file in your $VAULT_NAME/.obsidian/snippets/ and enable the snippet in the Appearance Settings **/

:root {
  --cue-width: 300px;
  --cue-offset: var(--cue-width);
  --cue-line: 1px solid lightgrey;
}

.markdown-preview-view.cornell-note .markdown-preview-sizer,
.markdown-source-view.cornell-note .markdown-preview-sizer {
  max-width: var(--file-line-width);
  margin-left: auto;
  margin-right: auto;
  margin-inline: calc(var(--cue-width) - 10px);
  width: 100%;
}

.markdown-preview-view.cornell-note
  .markdown-preview-sizer
  > div:has(p, ul, ol, pre),
.markdown-source-view.cornell-note
  .markdown-preview-sizer
  > div:has(p, ul, ol, pre) {
  border-left: var(--cue-line);
  padding-left: 20px;
}

.markdown-preview-view.cornell-note aside,
.markdown-source-view.cornell-note aside {
  font-style: italic;
  font-family: var(--font-text);
  font-size: var(--font-adaptive-normal);
  font-weight: var(--normal-weight);
  line-height: var(--line-height);
}

.markdown-preview-view.cornell-note aside {
  position: absolute;
  padding: 0px 8px 0px 0px;
  margin-right: 10px;
  left: 15px;
  max-width: var(--cue-width);
}

.markdown-preview-view.cornell-note div.cues-header,
.markdown-source-view.cornell-note div.cues-header {
  /* Keep sync with "h1, .markdown-rendered h1" selector */
  position: absolute;
  max-width: var(--cue-width);
  width: var(--cue-width);
  left: 15px;
  top: 20;
  padding: 0px 8px 0px 0px;
  letter-spacing: -0.015em;
  line-height: var(--h1-line-height);
  color: var(--h1-color);
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-style: var(--h1-style);
  font-variant: var(--h1-variant);
  font-weight: var(--h1-weight);
}