Created
March 19, 2023 13:54
-
-
Save eoureo/b05e5f750e255d7a69ee69c73ea84969 to your computer and use it in GitHub Desktop.
Obsidian - Using "wide" and "max" cssclasses like Minimal Theme in Default Theme. 옵시디언 기본(Default) 테마에서 미니멀(Minimal) 테마처럼 wide, max 클래스 쓰기.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
1. 노트의 frontmatter에 추가 (Add to the Frontmatter of the notes you want) | |
cssclass: wide | |
cssclass: max | |
2. "Settings > Appearance > CSS Snippets"에 설정 (Set to "Settings > Appearance > CSS Snippets") | |
my_style.css에 추가 (Add to my_style.css) | |
*/ | |
.markdown-preview-view.wide, .markdown-source-view.wide, | |
.markdown-preview-view.max, .markdown-source-view.max { | |
--max-width: 88%; | |
--folding-offset: 10px; | |
--line-width: 40rem; | |
} | |
.markdown-preview-view.wide, .markdown-source-view.wide { | |
--line-width-wide: calc(var(--line-width) + 12.5%); | |
--line-width-adaptive: var(--line-width-wide); | |
} | |
.markdown-preview-view.max, .markdown-source-view.max { | |
--line-width-adaptive: 300em; | |
--line-width-wide: 300em; | |
} | |
.markdown-source-view.wide.mod-cm6.is-readable-line-width .cm-sizer, | |
.markdown-source-view.wide.mod-cm6.is-readable-line-width .cm-content, | |
.markdown-source-view.max.mod-cm6.is-readable-line-width .cm-sizer, | |
.markdown-source-view.max.mod-cm6.is-readable-line-width .cm-content { | |
max-width: 100%; | |
} | |
.markdown-source-view.wide.mod-cm6.is-readable-line-width .cm-line, | |
.markdown-source-view.max.mod-cm6.is-readable-line-width .cm-line { | |
width: calc(var(--line-width-adaptive) - var(--folding-offset)); | |
max-width: calc(var(--max-width) - var(--folding-offset)); | |
margin-right: auto; | |
margin-left: max(calc(50% + var(--folding-offset) - var(--line-width-adaptive)/ 2),calc(50% + var(--folding-offset) - var(--max-width)/ 2))!important; | |
} | |
.markdown-preview-view.wide.markdown-preview-view.is-readable-line-width .markdown-preview-sizer, | |
.markdown-preview-view.max.markdown-preview-view.is-readable-line-width .markdown-preview-sizer { | |
width: 100%; | |
max-width: 100%; | |
} | |
.markdown-preview-view.wide.is-readable-line-width .markdown-preview-sizer>div, | |
.markdown-preview-view.max.is-readable-line-width .markdown-preview-sizer>div { | |
max-width: var(--max-width); | |
width: var(--line-width-adaptive); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
옵시디언 - 기본(Default) 테마에서 미니멀(Minimal) 테마처럼 wide, max 클래스 쓰기에서 더 자세한 내용을 볼 수 있습니다.