테마 파헤치기 1

서론

내가 사용중인 블로그 테마는 minimal mistakes 라는 테마이고 앞으로 개인 블로그 테마로 적절하게 사용하기 위해서 우선 테마를 샅샅히 파헤쳐 코드에 주석을 달아보려고 한다.

오늘의 코드 : _sass\minimal-mistakes_variables.scss

/* ==========================================================================
   Variables
   ========================================================================== */

/*
   Typography
   ========================================================================== */

// 기본 문서 폰트 크기
$doc-font-size: 16 !default;

// 문단 들여쓰기
$paragraph-indent: false !default; // true, false (기본값)
$indent-var: 1.3em !default; // 인덴트 크기

// 시스템 글꼴
$serif: Georgia, Times, serif !default;
$sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: Monaco, Consolas, "Lucida Console", monospace !default;

// 산세리프 글꼴
$sans-serif-narrow: $sans-serif !default;
$helvetica: Helvetica, "Helvetica Neue", Arial, sans-serif !default;

// 세리프 글꼴
$georgia: Georgia, serif !default;
$times: Times, serif !default;
$bodoni: "Bodoni MT", serif !default;
$calisto: "Calisto MT", serif !default;
$garamond: Garamond, serif !default;

// 전역 폰트 패밀리
$global-font-family: $sans-serif !default;
$header-font-family: $sans-serif !default;
$caption-font-family: $serif !default;

// 글꼴 크기
$type-size-1: 2.441em !default; // ~39.056px
$type-size-2: 1.953em !default; // ~31.248px
$type-size-3: 1.563em !default; // ~25.008px
$type-size-4: 1.25em !default; // ~20px
$type-size-5: 1em !default; // ~16px
$type-size-6: 0.75em !default; // ~12px
$type-size-7: 0.6875em !default; // ~11px
$type-size-8: 0.625em !default; // ~10px

// 헤드라인 크기
$h-size-1: 1.563em !default; // ~25.008px
$h-size-2: 1.25em !default; // ~20px
$h-size-3: 1.125em !default; // ~18px
$h-size-4: 1.0625em !default; // ~17px
$h-size-5: 1.03125em !default; // ~16.5px
$h-size-6: 1em !default; // ~16px

/*
   Colors
   ========================================================================== */

// 그레이 스케일
$gray: #7a8288 !default;
$dark-gray: mix(#000, $gray, 50%) !default;
$darker-gray: mix(#000, $gray, 60%) !default;
$light-gray: mix(#fff, $gray, 50%) !default;
$lighter-gray: mix(#fff, $gray, 90%) !default;

// 배경 색상
$background-color: #fff !default;
$code-background-color: #fafafa !default;
$code-background-color-dark: $light-gray !default;
$text-color: $dark-gray !default;
$muted-text-color: mix(#fff, $text-color, 20%) !default;
$border-color: $lighter-gray !default;
$form-background-color: $lighter-gray !default;
$footer-background-color: $lighter-gray !default;

// 주요 색상
$primary-color: #6f777d !default;
$success-color: #3fa63f !default;
$warning-color: #d67f05 !default;
$danger-color: #ee5f5b !default;
$info-color: #3b9cba !default;
$focus-color: $primary-color !default;
$active-color: mix(#fff, $primary-color, 80%) !default;

// YIQ 색 대비
$yiq-contrasted-dark-default: $dark-gray !default;
$yiq-contrasted-light-default: #fff !default;
$yiq-contrasted-threshold: 175 !default;
$yiq-debug: false !default;

// 브랜드 색상
$behance-color: #1769ff !default;
$bitbucket-color: #205081 !default;
$dribbble-color: #ea4c89 !default;
$facebook-color: #3b5998 !default;
$flickr-color: #ff0084 !default;
$foursquare-color: #0072b1 !default;
$github-color: #171516 !default;
$gitlab-color: #e24329 !default;
$instagram-color: #517fa4 !default;
$keybase-color: #ef7639 !default;
$lastfm-color: #d51007 !default;
$linkedin-color: #007bb6 !default;
$mastodon-color: #2b90d9 !default;
$pinterest-color: #cb2027 !default;
$reddit-color: #ff4500 !default;
$rss-color: #fa9b39 !default;
$soundcloud-color: #ff3300 !default;
$stackoverflow-color: #fe7a15 !default;
$tumblr-color: #32506d !default;
$twitter-color: #55acee !default;
$vimeo-color: #1ab7ea !default;
$vine-color: #00bf8f !default;
$youtube-color: #bb0000 !default;
$xing-color: #006567 !default;

// 링크 색상
$link-color: mix(#000, $info-color, 20%) !default;
$link-color-hover: mix(#000, $link-color, 25%) !default;
$link-color-visited: mix(#fff, $link-color, 15%) !default;
$masthead-link-color: $primary-color !default;
$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;

// 공지사항
$notice-background-mix: 80% !default;
$code-notice-background-mix: 90% !default;

// 구문 강조 색상 (Base16)
$base00: #263238 !default;
$base01: #2e3c43 !default;
$base02: #314549 !default;
$base03: #546e7a !default;
$base04: #b2ccd6 !default;
$base05: #eeffff !default;
$base06: #eeffff !default;
$base07: #ffffff !default;
$base08: #f07178 !default;
$base09: #f78c

6c !default;
$base0a: #ffcb6b !default;
$base0b: #c3e88d !default;
$base0c: #89ddff !default;
$base0d: #82aaff !default;
$base0e: #c792ea !default;
$base0f: #ff5370 !default;

/*
   Breakpoints
   ========================================================================== */

// 미디어 쿼리를 위한 화면 폭
$small: 600px !default;
$medium: 768px !default;
$medium-wide: 900px !default;
$large: 1024px !default;
$x-large: 1280px !default;
$max-width: $x-large !default;

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

// 오른쪽 사이드바 폭 (좁은, 기본, 넓은)
$right-sidebar-width-narrow: 100px !default;    // default 200px
$right-sidebar-width: 200px !default;           // default 300px
$right-sidebar-width-wide: 250px !default;      // default 400px

/*
   Other
   ========================================================================== */

// 요소의 모서리 반경
$border-radius: 4px !default;
// 그림자
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
// 네비게이션 높이
$nav-height: 2em !default;
// 네비게이션 토글 높이
$nav-toggle-height: 2rem !default;
// 네비게이션 아이콘 너비
$navicon-width: 1.5rem !default;
// 네비게이션 아이콘 높이
$navicon-height: 0.25rem !default;
// 전역 전환
$global-transition: all 0.2s ease-in-out !default;
// 이론 속성 전환
$intro-transition: intro 0.3s both !default;