[블로그]minimal-mistakes 색상 커스터마이징

Skin 선택 및 색상

• 스킨 위치: ./_sass/minimal-mistakes/skins
  • background-color: 블로그 배경화면 색
  • primary-color: 카테고리의 글씨 색
  • border-color: 본문의 밑줄 색 ()
  • code-background-color: 본문에서 작은 코드 라인 색(e.g., This Code line)

$background-color: #f7fbfc !default;
$text-color: #030303 !default;
$primary-color: #00408f !default;
$border-color: mix(#fff, $background-color, 20%) !default;
$code-background-color: #d1e5eb !default;
$code-background-color-dark: #d1e5eb !default;
$form-background-color: #c7c7c7 !default;
$footer-background-color: mix(#000, $background-color, 20%) !default;
$link-color: mix(#00adb5, $text-color, 40%) !default;
$link-color-hover: mix(#fff, $link-color, 25%) !default;
$link-color-visited: mix(#00adb5, $text-color, 40%) !default;
$masthead-link-color: $text-color !default;
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
$navicon-link-color-hover: #a2cfe8 !default;

만약 카테고리 하위 목록의 색이 연하다면?

• 위치: ./_sass/minimal-mistakes/_navigation.scss

.nav__list .nav__items {
  margin: 0;
  font-size: 1.25rem;
  font-family: $sans-serif;

  img { // 방문자수 이미지 크기 맞추느라 추가했던 것
    width: auto; height: auto;
    max-width: 140px;
    max-height: 38px;
    margin-bottom: 1em;
  }

  a {
    color: inherit;
    font-size: $type-size-3;
    font-family: $cute;
    color: mix(#fff,$primary-color, 30%);

    &:hover {
      text-decoration: underline;
    }
  }

  .active {
    margin-left: -0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-weight: bold;
  }

• color: mix(#fff,$primary-color, 30%);는 #fff 색과 primary-color가 섞인 것이다. 이 때, #fff는 #ffffff와 동일한 하양색이다.

• 따라서 저 부분의 %이지를 줄이면 된다. 나의 경우 원랴 80%로 되어있었다.

• test
  • color: red
  • color: blue
    • color: blue
    • color: blue
      • color: navy
      • color: navy
        • color: coral
        • color: coral
          • color: green
          • color: green

Etc 카테고리 내 다른 글 보러가기