티꾸(티스토리 꾸미기)✨
티스토리를 내 입맛대로 바꾸고 있는데.. 문제는 CSS 알못이라 어디 여러 블로그에서 열심히 복붙 하다 보니까 정리도 안되고 엉망이다.. 그래서 Book Club 테마 바꾸고 싶은데.. 바꾸지도 못하고 울며 겨자먹기로 쓰고 있음..
Book Club 테마 무조건 썸네일 있어야되서 좀 짜증난다.. 블로그 글 노션에 적어놓은 거 옮기는 경우가 많아서 마크다운으로 긁어서 가져오는데.. 그럼 대표사진 적용이 안돼.. 엉엉.. 그리고 너비도 바꾸고 싶었는데.. 바꾸니까 다 틀어지는 거 같아서 걘 롤백.. 암튼 각설하고 나중에 테마를 바꾸더라도 CSS를 적용할 수 있게 몇가지 바꾼 것들 적어놓겠다..
1. inline code
code {
padding: 0.25rem;
background-color: #F1F1F1;
border-radius: 5px;
font-family: "Consolas", "Sans Mono", "Courier", "monospace";
font-size: 1em;
}
inline code도 css를 수정해야되는 줄 몰랐다.. 에디터에 있는 inline code가 이쁘길래 css 복사.
근데 지금 보니까 밑에 code block css랑 겹쳐서 폰트가 JetBrain Mono로 나오네.
뭐가 우선순위인지는 모르겠다🤣
밑에가 우선순위니까 JetBrain Mono로 나오는 거겠지..
2. font
@font-face {
font-family: 'ChosunGu';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunGu.woff') format('woff');
font-weight: normal;
font-style: normal;
}
조선일보는 싫지만 폰트는 귀엽다.😊 가독성은 구리지만 이쁘면 됐어.
https://noonnu.cc/font_page/415
3. font-size
.entry-content p {
margin-bottom: 32px;
word-break: break-all;
/*font-size: 0.9375em;*/
font-size: 1em;
line-height: 2;
color: #555;
}
font가 너무 작아서 적용해도 깨지길래 1em으로 바꿔줌. 폰트 사이즈 변경시엔 entry-content p
검색 후 변경
4. highlight.js
<!-- syntax highlight -->
<!-- highlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- font jetbrain mono -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<style>
pre, code {
font-family: 'JetBrains Mono', monospace;
line-height: 1.5;
}
</style>
<!-- font end -->
code block 은 내가 좋아하는 Atom One Dark
테마랑 폰트는 인텔리제이 폰트인 JetBrain Mono
로 변경. 이거 좀 버그가 있는 거 같은데.. 수정이 어렵다.. 언젠가는 수정을 해야겠지..