7. Custom Style

Width

/_sass → /_minimal-mistakes → _variables.scss

/*
   Grid
   ========================================================================== */
$right-sidebar-width-narrow: 180px !default;  /* default: 200px */
$right-sidebar-width: 220px !default;         /* default: 300px */
$right-sidebar-width-wide: 250px !default;    /* default: 400px */

• single 레이아웃에서는 게시물의 가로 너비가 너무 좁아서 더 넓게 조정했다.
• 양 옆의 사이드를 줄이는 방식으로 넓혔다.

Font Size

/_sass → /_minimal-mistakes → _reset.scss

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 15px;      /* Default: $doc-font-size; */

  @include breakpoint($medium) {
    font-size: 16px;    /* Default: $doc-font-size-medium; */
  }

  @include breakpoint($large) {
    font-size: 16px;    /* Default: $doc-font-size-large; */
  }

  @include breakpoint($x-large) {
    font-size: 17px;    /* Default: $doc-font-size-x-large; */
  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

• 전체적으로 폰트 사이즈를 축소시켰다.
• 화면 크기를 여러가지로 조정하며 각 화면에 맞는 사이즈를 테스트해야 한다.

Colors

Background

/_sass → /_minimal-mistakes → _variables.scss

$background-color: #F5F5F5 !default;                    /* 배경색 */
$code-background-color: #fff !default;                    /* 인라인 코드 배경색 */
$code-background-color-dark: $light-gray !default;
$text-color: #616161 !default;                          /* 글자색 */
$muted-text-color: mix(#fff, $text-color, 10%) !default;
$border-color: #BDBDBD !default;                        /* 블로그의 경계선 색 */
$form-background-color: #fff !default;                    /* form 양식 배경색 */
$footer-background-color: #9E9E9E !default;             /* footer 배경색 */

Footer

/_sass → /_minimal-mistakes → _footer.scss

.page__footer {
  @include clearfix;
  float: inline-start;
  margin-inline: 0;
  width: 100%;
  margin-top: 3em;
  color: $lighter-gray;                         /* footer 글자색 변경 */
  -webkit-animation: $intro-transition;
  animation: $intro-transition;
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
  background-color: $footer-background-color;   /* footer 배경색 변경 */

  ...

}

Hyperlink

/_sass → /_minimal-mistakes → _variables.scss

/* links */
$link-color: mix(#000, #03A9F4, 0%) !default;
$link-color-hover: mix(#000, $link-color, 25%) !default;
$link-color-visited: mix(#fff, $link-color, 15%) !default;
...

• link-color: 하이퍼링크 기본 색상 (예시에서는 두 번째 색에 첫 번째 색을 n% 섞은 색상으로 설정)
• link-color-hover: 마우스를 링크에 올렸을 때 색상
• link-color-visited: 사용자가 이미 방문한 링크의 색상

Syntax highlighting

1. /_sass → 'custom' 폴더 생성 → '_파일이름.scss' 파일 생성

   /* solarized light syntax highlighting (base16) */
   $base00: #fafafa !default;
   $base01: #073642 !default;
   $base02: #586e75 !default;
   $base03: #657b83 !default;
   $base04: #839496 !default;
   $base05: #586e75 !default;
   $base06: #eee8d5 !default;
   $base07: #fdf6e3 !default;
   $base08: #dc322f !default;
   $base09: #cb4b16 !default;
   $base0a: #b58900 !default;
   $base0b: #859900 !default;
   $base0c: #2aa198 !default;
   $base0d: #268bd2 !default;
   $base0e: #6c71c4 !default;
   $base0f: #d33682 !default;
   

2. /assets → /css → main.scss

   ---
   # Only the main Sass file needs front matter (the dashes are enough)
   search: false
   ---
      
   @charset "utf-8";
      
   ////////////// 커스텀 파일 import 하는 부분 //////////////
   @import "custom/파일이름";
   /////////////////////////////////////////////////////
      
   @import "minimal-mistakes/skins/default"; // skin
   @import "minimal-mistakes"; // main partials
   

• 코드 블록 색상 변수를 오버라이딩하여 커스텀할 수 있다.
• _\sass 안의 원본과 구분하기 위해 커스텀 파일용 폴더를 새로 생성하는 것을 추천한다.
• 기본 설정(다크모드)에서 Solarized Light로 변경했다.
• 커스텀 파일을 main.scss 파일에서 import(skin, main partials 앞에 정의)해야 적용된다.

Hyperlink Underline

/_sass → /_minimal-mistakes → _base.scss

/* links */

a {
  text-decoration: none;  /* remove hyperlink underline */

  &:focus {
    @extend %tab-focus;
  }

  &:visited {
    color: $link-color-visited;
  }

  &:hover {
    color: $link-color-hover;
    outline: 0;
  }
}

• 기본 설정은 하이퍼링크된 텍스트 밑에 밑줄이 그어진다.
• 깔끔한 디자인을 위해 밑줄을 제거했다.

Icon Colors

Social Icons

/_sass → /_minimal-mistakes → _utilities.scss

/* social icons*/

.social-icons {
  .fas,
  .fab,
  .far,
  .fal {
    color: $text-color;
  }

  @each $color, $icons in (
    $behance-color: ".fa-behance, .fa-behance-square",
    
    ...

    $youtube-color: ".fa-youtube",
    /* Author 아이콘 색 추가 */
    #26C18F: ".fa-pen",
    #CEB180: ".fa-envelope",
  )
  ...
}

• 왼쪽 사이드 프로필의 소셜 아이콘 색상도 바꿀 수 있다.
• 아이콘도 변경하려면 Font awesome 코드의 맨 뒷부분만 복사해서 @each $color, $icons in 안에 원하는 색상과 함께 추가한다.
  

Social sharing links

/_sass → /minimal-mistakes → _buttons.scss

  $buttoncolors:
  (primary, $primary-color),
  (inverse, #fff),
  (light-outline, transparent),
  (success, $success-color),
  (warning, $warning-color),
  (danger, $danger-color),
  (info, $info-color),
  (facebook, $facebook-color),
  (twitter, $twitter-color),
  (linkedin, $linkedin-color),
  /* Add reddit-color */
  (reddit, $reddit-color);

• 소셜 공유 버튼의 색상을 설정할 수 있다.
• 예시에서 _variables.scss에 기본 셋팅되어 있는 reddit-color를 사용했으나, 직접 코드로 지정해도 된다.

Back to top

1. /_sass → /_minimal-mistakes → _sidebar.scss

   /* Add a new custom class for 'Back to top' button */
   .sidebar__top {
     position: fixed;
     bottom: 1.5em;
     right: 2em;
     z-index: 10;
   }
      
   .sidebar__right {
     ...
   }
   

2. /_layouts → default.html

       <div id="footer" class="page__footer">
         ...
       </div>
      
       <!-- include the custom class for 'Back to top' button -->
       <aside class="sidebar__top">
         <a href="#site-nav"><i class="fa-regular fa-circle-up fa-3x"></i>
       </aside>
   

• 글 어느 부분에서든 한 번에 맨 위로 올라가는 버튼을 추가했다(출처).
• 화면 오른쪽 하단에 고정된 버튼이 나타난다.
• Font awesome에서 원하는 아이콘의 HTML 코드를 첨부하고 fa-(숫자)x 옵션으로 크기를 조절했다.

Number of Posts

/_includes → nav_list

{% assign navigation = site.data.navigation[include.nav] %}

{% assign categories_max = 0 %}
{% for category in site.categories %}
  {% if category[1].size > categories_max %}
    {% assign categories_max = category[1].size %}
  {% endif %}
{% endfor %}

{% assign tags_max = 0 %}
{% for tag in site.tags %}
  {% if tag[1].size > tags_max %}
    {% assign tags_max = tag[1].size %}
  {% endif %}
{% endfor %}

<nav class="nav__list">
  {% if page.sidebar.title %}<h3 class="nav__title" style="padding-left: 0;">{{ page.sidebar.title }}</h3>{% endif %}
  <input id="ac-toc" name="accordion-toc" type="checkbox" />
  <label for="ac-toc">Toggle menu</label>
  <ul class="nav__items">
    {% for nav in navigation %}
      <li>
        {% if nav.url %}
          <a href="{{ nav.url | relative_url }}"><span class="nav__sub-title">{{ nav.title }}</span></a>
        {% else %}
          <span class="nav__sub-title">{{ nav.title }}</span>
        {% endif %}

        {% if nav.children != null %}
        <ul>
          {% for child in nav.children %}
          {% assign category = site.categories[child.category] | where_exp: "item", "item.hidden != true" %}
            <li><a href="{{ child.url | relative_url }}"{% if child.url == page.url %} class="active"{% endif %}>{{ child.title }} ({{ category.size }})</a></li>
          {% endfor %}
        </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</nav>

• 해당 파일 전체를 위의 코드로 덮어씌운다.
• 사이드바에서 각 카테고리별 아카이브 페이지 링크 옆에 포스트 개수가 표시된다.