Styling

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: 사용자가 이미 방문한 링크의 색상

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

/_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 {
  ...
}

/_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>

• 파일 전체를 위와 같이 수정
• 사이드바에서 각 카테고리별 아카이브 페이지 링크 옆에 포스트 개수가 표시된다.