가독성 향상을 위한 Obsidian Minimall Theme CSS

Intro. CSS 왜 건드는가? 정보는 어디에서 얻었는가

난 주로 Youtube에 Obsidian template을 키워드로 검색해서 구현했다. 주로 옵시디언 사용자 분들이 공유해주신 것을 수정해서 사용한다
수정 할 때 모르는 것들은 Reddit이나 Obsidian forum에 가면 커뮤니티가 형성이 잘 되어있어서 왠만하면 금방 해결 할 수 있다.

수정하는 방법이라 함은 옵시디언 내부에서 개발자 도구를 켤 수 있기 때문에, 개발자 도구를 켜서 바꾸고 싶은 컴포넌트를 클릭해서 CSS 속성을 확인하고 바꾼다
CSS 기본적인 사용법만 알면 금방 사용하니까 도전해보자

Dash board

• 대시 보드는 옵시디언 접속 했을 때 Home 화면이다. 주로 데일리 노트와 Home 화면을 자주 보는 듯하다
• Home을 대시 보드 형태로 구성하면, 직관적으로 카테고리를 파악 할 수 있는 것이 장점이다.
• Homepage 플러그인과 함께 쓰면 유용하다
  

/* Updated 2022-02-28 */
.dashboard {
  padding-left: 25px !important;
  padding-right: 25px !important;
  padding-top: 20px !important;
}
.dashboard .markdown-preview-section {
  max-width: 100%;
}
/* Title at top of the document */
.dashboard .markdown-preview-section .title {
  top: 60px;
  position: absolute;
  font-size: 26pt !important;
  font-weight: bolder;
  letter-spacing: 8px;
}
.dashboard h1 {
  border-bottom-style: dotted !important;
  border-width: 1px !important;
  padding-bottom: 3px !important;
}
.dashboard div > ul {
  list-style: none;
  display: flex;
  column-gap: 50px;
  flex-flow: row wrap;
}

.dashboard div > ul > li {
  min-width: 250px;
  width: 15%;
}

remove_underline

옵시디언에서 파일 링크를 걸면, 밑줄이 생긴다. 근데 이게 글자랑 살짝 겹쳐서 글을 읽을 때 불편함이 느껴졌다
해당 CSS에서는 preview와 live preview의 밑줄 설정을 할 수 있으니 자신에게 맞게 변경하도록 하자

/* this sets underline, we over-ride to NONE as needed for internal links */
body:not(.links-ext-on) .cm-link .cm-underline, body:not(.links-ext-on) .cm-s-obsidian span.cm-url, body:not(.links-ext-on) .external-link, body:not(.links-int-on) .cm-hmd-internal-link .cm-underline, body:not(.links-int-on) .cm-s-obsidian span.cm-hmd-internal-link:hover, body:not(.links-int-on) .markdown-preview-view .internal-link, body:not(.links-int-on) a.internal-link, body:not(.links-int-on) a[href*="obsidian://"]
{
  text-decoration: underline;
}
/* preview */
.markdown-preview-view .internal-link {
  /* text-decoration: none !important; */
  text-decoration-style: dashed;
  text-decoration-thickness: 0.5px;
}
/* live preview */
.cm-hmd-internal-link .cm-underline {
  /* text-decoration: none !important; */
  text-decoration-style: dashed;
  text-decoration-thickness: 0.5px;
}
/* remove the icon from external links */
body .external-link {
  background-image: none;
  padding-right: 0px;
}

header_underline

옵시디언은 마크다운 문법을 따르기 때문에 # 을 쓰면 HTML의 헤더로 렌더링 되서 우리에게 보인다.
header 아래에 밑줄이 있으면 단락 별로 딱딱 분리 되어 읽기 편해서, 난 헤더 아래에 밑줄을 그어서 사용한다

• 예시는 아래와 같다. header_underline 아래에 밑줄이 쳐졌음을 확인 할 수 있다
  • 

/* Underline H1 heading in Edit mode */
.cm-s-obsidian .HyperMD-header-1{
  border-bottom: 0.5px solid var(--text-faint) !important;
}
.cm-s-obsidian .HyperMD-header-2{
  border-bottom: 0.5px solid var(--text-faint) !important;
}
/* ==========headings======= */
/* Underline = border-bottom */
.markdown-preview-view h1 {
  border-bottom: 0.5px solid var(--text-faint);
}
.markdown-preview-view h2 {
  border-bottom: 0.5px solid var(--text-faint);
}

readingLineLength

• reading Line Length는 preview 모드에서 넓이를 좌우로 조금 더 넓혀 준다.
• 가끔 너무 폭이 좁다는 생각이 들어 조금 더 넓게 글을 읽고 싶어 적용하였다

/* 
Optional css that can be added to make dashboards use wide margin 
if "Readable line length" is enabled in Editor
 
Updated 2022-02-28
*/
.dashboard .markdown-preview-section {
  width: 100% !important;
  max-width: 100% !important;
}