Quartz는 기본적으로 사이드바 스크롤이 막혀있다. 사이드바에 recents도 넣고, 메뉴도 넣어서 블로그 형태로 만들고 싶은 입장에서는 사이드바 스크롤이 막혀서 페이지 뷰에서 아예 나가버리는 현상을 해결하고 싶다.

방법은 간단한데, 문제가 있다. 사이드바에 스크롤이 생기면, 사이드바에서 작동하는 popup 기능들(커다란 그래프 뷰, 혹은 게시글 미리보기 등)이 사이드바 공간에 갇힌다.

custom.scss 수정

custom.scss를 수정해서 사이드바 높이를 지정하고, overflow를 지정하면 된다.

@use "./base.scss";

// put your custom CSS here!

@use "./variables.scss" as vars;
@use "./syntax.scss";
@use "./callouts.scss";

// 미리 계산된 변수
$fullPageWidthPlus: vars.$fullPageWidth + 1;

// 1. flex-wrap을 특정 너비 이하에서만 활성화하고 그 이상에서는 비활성화
.page>#quartz-body .sidebar.right {
  @media all and (max-width: vars.$fullPageWidth) {
    flex-wrap: wrap;
  }
  @media all and (min-width: $fullPageWidthPlus) {
    flex-wrap: nowrap; // 기준 너비 이상에서는 flex-wrap 비활성화
  }
  right: calc(50vw - 755px);
}

// 2. 사이드바의 높이와 스크롤 설정 (모든 뷰포트에서 적용)
.page>#quartz-body .sidebar {
    height: 100vh;
    overflow-y: auto;
  }

// 3. 검색 영역의 flex-grow를 특정 너비 이하에서만 활성화하고 그 이상에서는 비활성화
.search {
  @media all and (max-width: vars.$fullPageWidth) {
    flex-grow: 0.3;
  }
  @media all and (min-width: $fullPageWidthPlus) {
    flex-grow: 0; // 기준 너비 이상에서는 flex-grow 비활성화
  }
}
  1. 사이드바의 flex-wrap은 사이드바가 상단이나 하단으로 옮겨졌을 때, 레이아웃을 위한 것이므로, 데스크탑 화면에서는 해제해야 한다.
  2. 검색 창의 사이즈도 모바일 상태에서 검색 창이 너무 작게 보이는 것을 방지하기 위함으로, 데스크탑 환경에서는 해제해야 한다.

오류

overflow 때문에 그래프 뷰 등이 사이드바에 갇히는 현상이 있는데, 해결 방법을 알면 공유좀 ㅠ