Skip to content

Instantly share code, notes, and snippets.

@LesleyLai
Created March 31, 2024 13:52
Show Gist options
  • Save LesleyLai/239c8f586fb79806713dd65419759bb2 to your computer and use it in GitHub Desktop.
Save LesleyLai/239c8f586fb79806713dd65419759bb2 to your computer and use it in GitHub Desktop.
Modified version of the Obsidian Cornell note template

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.

/** 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment