minimal mistakes - 본문 영역, 글자 크기 조절, 하이퍼링크 밑줄 제거

현재는 설정해둔 상태라 본문의 영역이 내가 편하게 읽을 수 있을만큼 넓지만, 기본의 minimal-mistakes는 아래와 같이 굉장히 짧다.

글자의 크기, 본문의 영역을 조절하고 싶다면

본문 크기 조절

_variables.scss

• 자신의 로컬 블로그 폴더(minimal-mistakes가 설치되어있는) > _sass > _minimal-mistakes > _variable.scss

• _variable.scss 에서 “Grid” 찾기

/*
   Grid
   ========================================================================== */

$right-sidebar-width-narrow: 100px !default;
$right-sidebar-width: 210px !default;
$right-sidebar-width-wide: 260px !default;

본문의 너비가 아닌, 양쪽의 sidebar를 조절하는 구문이다. 직접적으로 아닌 간접적으로 본문의 크기를 넓혀준다.

글자 크기 조절

_reset.scss

• 자신의 로컬 블로그 폴더(minimal-mistakes가 설치되어있는) > _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: 18px;

  @include breakpoint($medium) {
    font-size: 18px;
  }

  @include breakpoint($large) {
    font-size: 18px;
  }

  @include breakpoint($x-large) {
    font-size: 18px;
  }

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

2023-08-22 기준으로 위쪽에서 7번째 줄에 위치한 html {} 코드에서 font-size의 크기를 조절해주면 된다.

하이퍼링크 밑줄 제거

_base.scss

• 자신의 로컬 블로그 폴더(minimal-mistakes가 설치되어있는) > _sass > _minimal-mistakes > _base.scss

a {
  text-decoration: none; // <-- 추가한 코드

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

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

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

a {} 코드에서 text-decoration: none;을 추가해준다.