[Jekyll]사이드바 간격조정

1. 기존 사이드바의 모습

기존 사이드바는 다른 영역과 경계가 모호하고, 각 주제간의 분리도 잘 되어있지 않은 느낌이었다. 따라서 처음보는 입장에서는 상당히 가독성이 떨어질 것 같았다. 사이드바 영역과 그 위 설명 영역이 제대로 분리가 되어있지 않아, 이를 제대로 분리시켜주고 카테고리 묶음 제목의 폰트 크기를 더 키우도록 해보자

2. 내부 코드 수정

2-1. html 수정

우선, nav_list_main 내용을 수정해주었다. 위 영역과의 제대로 된 분리를 위해 사이드바 최상단에 개행문자를 삽입해주었다.

  <ul class="nav__items" id="category_tag_menu">
      <!--전체 글 수-->
      <li>
 
            <br> <!--추가된 부분-->
 
            📂 <span style="">전체 글 수</style> <span style=""></style> <span style="">개</style> 
      </li>
      <li>

그 이후에 카테고리 묶음 제목의 폰트를 수정해주려고 하였는데, 해당 부분은 span 태그로 생성되고 있었다.

        <!--span 태그로 카테고리들을 크게 분류-->
        <span class="nav__sub-title">Python</span>
            <!--ul 태그로 같은 카테고리들 모아둔 페이지들 나열-->
            <ul>
                <!--ML 카테고리 글들을 모아둔 페이지인 /categories/ML 주소의 글로 링크 연결-->
                <!--category[1].size 로 해당 카테고리를 가진 글의 개수 표시--> 

2-2. css 수정

네비게이션 바를 담당하는 css 파일에서 nav__sub-title 클래스의 속성을 제어하고 있을 것 같아서 해당 css파일을 찾아 수정해주었다. 해당 파일은 navigation.scss이며 폰트 사이즈 외에도 margin값과 pading값 및 text-transform 등 유용한 옵션을 많이 가지고있었다. 일단은 폰트 사이즈만 기존 $font-size-6에서 수정하기 편하도록 12px로 변경하였다. 픽셀 단위로 수정하는 것이 직접 수정하기에는 더 간편할 것 같았다.

.nav__sub-title {
  display: block;
  margin: 0.5rem 0;
  padding: 0.25rem 0;
  font-family: $sans-serif-narrow;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid $border-color;
}

3. 결과

[Before]

[After]