블로그 업데이트

기존 linux에서 돌렸던 wordpress 블로그가 마음에 들지 않아서 github 블로그로 바꿧다. Web과 관련해서는 모르는 것이 많지만 구글링하니 생각보다 쉽게 블로그가 만들어졌다. Jekyll minimal-mistakes 테마를 기본으로 사용하고 앞으로 수정해가면서 사용할 예정이다.

수정사항은 다음과 같다.

---

# Navigation

우측 상단의 헤더부분에 카테고리, 태그, 검색을 추가함.

• /_data/navigation.yml

# main links
main:
    - title: "Category"
      url: /categories/
    - title: "Tag"
      url: /tags/

---

# 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: 16px;

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

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

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

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

참조링크1 참조링크2

---

# Post-time

글 목록이나 글에서 제목아래에 “최대 n분 소요”만 있는 것보다 글을 작성한 날짜와 함께 있는것이 좋을 것 같아서 다음 파일들을 수정하였다.

• /_includes/archive-single.html
• /_includes/page__hero.html
• /_layouts/single.html

<p class="page__meta">
    {{ page.date | date: "%B %d, %Y" }} &nbsp;&nbsp;
    <i class="far fa-clock" aria-hidden="true"></i>
    {% include read-time.html %}
</p>

{{ page.date | date: "%B %d, %Y" }}    을 추가해주어 날짜와 소요시간이 나오도록 하였음. archive-single에서는 page.date가 아닌 post.date로 하였음.
참조링크

---

# Code Background Color

Markdown에서 inline code의 색상이 맘에 들지 않아서 바꾸려고 시도하였음. 글자색은 text-color에서 상속받는 것 같아서 실패하고 배경색만 바꿈. 바꾼김에 배너색상도 같이 바꿧다.

• /_sass/minimal-mistakes/skins/_dark.scss

$code-background-color: mix(#000, #e75480, 15%) !default;
$masthead-link-color: #e75480 !default;
$masthead-link-color-hover: mix(#000, $masthead-link-color, 20%) !default;

참조링크

---

# Font

한글폰트가 마음에 들지 않아서 D2Coding으로 바꿈.

• /_assets/css/main.scss
• /_sass/minimal-mistakes/_variables.scss

// main.scss
@font-face {
    font-family: D2Coding;
    src: url("/assets/fonts/D2Coding.ttc") format('truetype');
    font-weight: bold;
    font-style: normal;
}

이후, _variables.scss에 D2Coding을 추가해 주었다.
참조링크

---

# Title size

제목이 너무 작아서 키움

• _sass/minimal-mistakes/_masthead.scss

.site-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
  align-self: center;
  font-weight: bold;
  font-size: $type-size-3;
  z-index: 20;
}

---

# Hyperlink underline

하이퍼링크의 밑줄을 제거함. 참조한 링크에서 알게 되었는데 훨씬 깔끔해 보이는 것 같다.

• _sass/minimal-mistakes/_base.scss

/* links */

a {
  text-decoration: none;
  &:focus {
    @extend %tab-focus;
  }

참조링크

---

# Custom Sidebar

왼쪽에 카테고리가 국룰이라 추가하려고 노력했다. 그냥 아무거나 만져보면서 해서 맞게 한지 잘 모르겠다. 꽤 많은 파일들을 변경해서 github commit 페이지로 대체.

Git_Commit_1 Git_Commit_2

참조링크1 참조링크2

---

# Table of Contents (TOC)

긴 글을 작성할 때에 TOC가 있는 것이 좋은 것 같아서 default 옵션에 추가해주었다.

• _config.yml

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      sidebar:
        nav: "categories"
      layout: single
      toc: true
      toc_sticky: true
      author_profile: true
      read_time: true
      comments: # true
      share: true
      related: true

---

# Header Color Change

헤더 색상 관련해서 하늘색으로 바꾸고 싶었음. GPT통해서 한거라 효율적으로 관리가 편한대로 바꾸는 방법은 모르겠고, 일단 되긴함

/assets/css/main.scss에 추가

// GPT가 알려준 색상 바꾸는 방법..
h1,
h2,
h3 {
  color: #87CEEB; /* SkyBlue */
}

h4,
h5,
h6 {
  color: #000; /* 기본 색상 */
}

---