728x90
1. 맥북 코드 블럭 스타일로 변경하기
블로그 테마 업데이트를 했다!!
기존에 코드블럭을 맥북 스타일로 바꿔놨는데
테마를 업데이트하면서 다시 맥북 스타일로 바꿔줘야한다!
code.hljs부분을 찾아서 드래그한 부분을 "기존 코드"로 주석 처리 해준다.
/* 기존 코드 블록 */
/* #content .contents_style pre code.hljs {
--tw-bg-opacity: 1;
background-color: rgb(244 244 246 / var(--tw-bg-opacity))
}
.dark #content .contents_style pre code.hljs {
--tw-bg-opacity: 1;
background-color: rgb(41 42 45 / var(--tw-bg-opacity))
} */
/* 새롭게 추가한 코드 블록 시작 */
/* 코드 블록 스타일 */
/* 코드 블록 스타일 */
pre {
position: relative;
}
pre::after {
content: attr(data-ke-language);
position: absolute;
bottom: 8px;
right: 12px;
font-size: 12px;
color: #6b7280; /* 라이트 모드에서 언어 표시 색상 */
}
.dark pre::after {
color: #fff; /* 다크 모드에서 언어 표시 색상 */
}
/* 기본 스타일 (라이트 모드) */
.hljs {
display: flex !important;
flex-direction: column;
padding: 0 !important;
font-size: 14px;
border-radius: 8px;
background-color: #b4b4b4; /* 기존보다 조금 더 어두운 배경 */
font-family: "Fira Code", monospace;
font-optical-sizing: auto;
font-weight: 400;
}
/* 다크 모드 스타일 */
.dark .hljs {
background-color: #2d2d2d; /* 다크 모드에서 어두운 배경색 */
color: #d1d5db; /* 다크 모드 텍스트 색상 */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}
.hljs .line {
counter-increment: line-idx;
line-height: 1.5;
}
/* 라인 hover 스타일 */
.hljs .line:hover {
background-color: #e5e7eb; /* 라이트 모드 hover 배경색 */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* hover 시 내부 그림자 추가 */
}
.dark .hljs .line:hover {
background-color: #4b4b4b; /* 다크 모드 hover 배경색 */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); /* 다크 모드 hover 내부 그림자 */
}
.hljs .line:hover::before {
color: #1f2937; /* 라이트 모드 hover 라인 번호 색상 */
}
.dark .hljs .line:hover::before {
color: #d1d5db; /* 다크 모드 hover 라인 번호 색상 */
}
.hljs .line::before {
content: counter(line-idx);
width: 24px;
display: inline-block;
text-align: right;
margin-right: 16px;
font-size: 0.8rem;
color: #6b7280; /* 라이트 모드 라인 번호 색상 */
}
.dark .hljs .line::before {
color: #9ca3af; /* 다크 모드 라인 번호 색상 */
}
.hljs .code-header {
display: flex;
align-items: center;
padding: 14px;
background-color: #e5e7eb; /* 라이트 모드 헤더 배경색 */
border-radius: 8px 8px 0 0;
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
}
.dark .hljs .code-header {
background-color: #4b4b4b; /* 다크 모드 헤더 배경색 */
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
}
.hljs .code-header .btn {
border-radius: 50%;
width: 15px;
height: 15px;
margin: 0 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 버튼에 작은 그림자 추가 */
}
.hljs .code-header .btn.red {
background-color: #f5655b;
}
.hljs .code-header .btn.yellow {
background-color: #f6bd3b;
}
.hljs .code-header .btn.green {
background-color: #43c645;
}
.hljs .code-body {
max-height: 600px;
margin: 32px 8px;
overflow: auto;
}
.hljs .code-body::-webkit-scrollbar {
width: 12px;
}
.hljs .code-body::-webkit-scrollbar-thumb {
background-color: #d1d5db; /* 라이트 모드 스크롤바 색상 */
border-radius: 10px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* 스크롤바에 그림자 추가 */
}
.dark .hljs .code-body::-webkit-scrollbar-thumb {
background-color: #6b7280; /* 다크 모드 스크롤바 색상 */
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); /* 다크 모드 스크롤바 그림자 */
}
.hljs .code-body::-webkit-scrollbar-corner {
display: none;
}
.hljs .copy-btn {
background-color: transparent;
border: none;
cursor: pointer;
color: #1f2937; /* 라이트 모드 복사 버튼 색상 */
font-size: 0.75rem;
padding: 6px 0;
width: 64px;
border-radius: 4px;
margin-left: auto;
transition: 0.2s background-color, 0.2s box-shadow;
}
.dark .hljs .copy-btn {
color: #d1d5db; /* 다크 모드 복사 버튼 색상 */
}
.hljs .copy-btn:hover {
background-color: #d1d5db; /* 라이트 모드 복사 버튼 hover 배경색 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* hover 시 그림자 추가 */
}
.dark .hljs .copy-btn:hover {
background-color: #6b7280; /* 다크 모드 복사 버튼 hover 배경색 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 다크 모드 hover 그림자 */
}
/* 새롭게 추가한 코드 블록 끝 */
이렇게 추가 입력을 해주면 된다. 그리고 codeblock.js파일 역시 추가해주면 된다.
저번에 다운받고 파일을 .js을 수정했던거같은데.. 정확한 기억은 안난다..
⬇️ 맥북 코드 블럭 출처
https://guiyomi.tistory.com/132
[티스토리 블로그 테마] - 1. 코드 블록 디자인을 mac 코드 스타일로 바꾸기
글을 읽기 전 미리 보는 완성본은 다음과 같다. 어떻게 만들었고 적용했는지 궁금하신 분들은 아래로 스크롤! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. 발단여느 날과 다름없이
guiyomi.tistory.com
2. indicator 색상 변경
화면을 스크롤하면 검은 색 바가 채워지는 걸 볼 수 있다.
검정 스크롤 바의 색상을 바꿔보려고 한다.
다크 모드일때는 #C5E99B 이 컬러로 스크롤 바를 채우려고 한다.
4.2.2?버전일때
<div class="w-0 h-0.5 bg-h-900 rounded bg-h-800 dark:bg-h-200" x-ref="indicator"></div>⬇️
<div class="w-0 h-0.5 rounded bg-custom-light" x-ref="indicator"></div>4.10.3버전 (최근 버전)
<aside class="fixed top-0 w-full z-[100]" id="indicator" @scroll.window="$store.indicator.indicate">
<div class="bar w-0 h-0.5 rounded bg-h-800 dark:bg-h-200" :style='{ width: $store.indicator.scrolled + "%" }'></div>
</aside>위에랑 같이 고쳐주면 된돠..
/* diy style */
.bg-custom-light {
background-color: #C5E99B;
}
.dark .bg-custom-light {
background-color: #8FBC94;
}
스크롤도 두껍게 하고 싶었다.
<div class="bar w-0 rounded bg-custom-light" :style='{ width: $store.indicator.scrolled + "%", height: "5px" }'></div>inline스타일을 지정해 height:5px을 주었다!
3. 검색창 모서리 라운드
4.2.2?버전일때
검색 부분을 찾아서 둥글게 바꾸려고 한다.
<div class="flex items-center gap-x-3 border-box px-4 py-3 bg-h-300 text-h-600 dark:bg-h-600 dark:text-h-300 rounded-full">
4.10.2버전
테마를 바꾸니 여기 태그들도 업데이트 되었다.
여기 부분를 찾아서 search class = wrap 다음에 있있는 rounded-sm에서 이제 원하는 값으로 바꿔주면 된다.
난 rounded-full로 했다.
- rounded → 기본 둥글기
- rounded-md → 중간
- rounded-lg, rounded-xl 등 점점 더 둥글게 가능
- rounded-full → 완전 원형
상단 블러 밑으로 갈수록 연하게 → 실패
여기 상단에 뜨는 부분 블러되어 있는 부분을 밑으로 갈 수록 연하게 주고 싶다.
<aside class="w-full box-border px-4 h-14 top-0 fixed flex justify-between items-center z-[90] xl:w-c backdrop-blur bg-h-100/50 dark:bg-h-800/80" id="top" x-data="top" @scroll.window="toggle" :class="open ? "backdrop-blur bg-h-100/50 dark:bg-h-800/80" : "bg-transparent"">
<div class="img"><img class="thumb rounded-full w-9 h-9 cursor-pointer object-cover xl:invisible lazyautosizes ls-is-cached lazyloaded" @click="sidebar = ! sidebar" data-src="https://tistory1.daumcdn.net/tistory/5161452/attach/afad8208ee0a41f69bf382631d74d492" data-sizes="auto" alt="코딩하세현" width="36" height="36" sizes="1381px" src="https://tistory1.daumcdn.net/tistory/5161452/attach/afad8208ee0a41f69bf382631d74d492"></div>
<div class="tit max-w-[calc(80vw-152px)] h-5" x-show="open" x-transition:enter="transition ease-linear duration-100" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<div class="txt m-0 text-overflow-hidden text-sm font-bold text-h-800 dark:text-h-200">오늘도 한줄</div>
</div>
<div class="menu_toolbar" id="menu-toolbar" x-ref="toolbar"><template x-if="canSubscribe"><button class="subscribe btn_subscription" :data-blog-id="T.config.BLOG.id" :data-url="TistoryBlog.tistoryUrl"><span class="txt text-hidden">구독하기</span><i class="ico fa-solid fa-star"></i></button></template></div>
</aside>
이 부분을 찾으면 된다.
-> 실패.. 좀 더 시간적 여유있을때 시도하기
4. PopUp창 디자인
border-radious를 주고 싶다. 근데 이건 taildwind로 쓰였으니까 아까처럼
popup을 찾아서 수정하면 된다.
<aside id="popup">
<s_article_prev>
<div class="popup fixed bottom-3 flex z-[100] h-[calc(theme(spacing.24))] max-lg:hidden ml-4 rounded-lg overflow-hidden" x-data="{ open: true }" ... >
<a class="link absolute top-0 left-0 w-full h-full z-10" href=""></a>
<s_article_prev_thumbnail>
<div class="img">
<img class="thumb w-24 h-24 object-cover" src="" alt="" width="96" height="96">
</div>
</s_article_prev_thumbnail>
<div class="content relative w-64 p-4 border-box flex flex-col gap-y-2 bg-h-200 dark:text-h-200 dark:bg-h-700">
<button class="close absolute text-base top-3 right-4 text-h-400 dark:hover:text-h-200 z-20" @click="open = ! open">
<span class="txt text-hidden">닫기</span>
<i class="ico fa-solid fa-xmark"></i>
</button>
<div class="tit text-xs text-h-400">이전 글</div>
<div class="info text-h-500 dark:text-h-200">
<div class="tit text-sm font-semibold text-overflow-hidden max-w-[calc(theme(spacing.56))]"></div>
<div class="desc text-2xs">
<time class="date"></time>
</div>
</div>
</div>
</div>
</s_article_prev>
</aside>
몇번의 시도끝에 성공! 이번에는 그림자를 넣겠다. 위의 코드에선는 다음 글이 없다.
밑에 코드가 전체 코드이다!
<aside id="popup">
<s_article_prev>
<div class="popup fixed bottom-3 flex z-[100] h-[calc(theme(spacing.24))] max-lg:hidden ml-4 rounded-lg overflow-hidden" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;" x-data="{ open: true }" x-transition:enter="transition ease-linear duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-show="open && $store.indicator.scrolled > 50" id="prev">
<a class="link absolute top-0 left-0 w-full h-full z-10" href=""></a>
<s_article_prev_thumbnail>
<div class="img">
<img class="thumb w-24 h-24 object-cover" src="" alt="" width="96" height="96">
</div>
</s_article_prev_thumbnail>
<div class="content relative w-64 p-4 border-box flex flex-col gap-y-2 bg-h-200 dark:text-h-200 dark:bg-h-700">
<button class="close absolute text-base top-3 right-4 text-h-400 dark:hover:text-h-200 z-20" @click="open = ! open">
<span class="txt text-hidden">닫기</span>
<i class="ico fa-solid fa-xmark"></i>
</button>
<div class="tit text-xs text-h-400">이전 글</div>
<div class="info text-h-500 dark:text-h-200">
<div class="tit text-sm font-semibold text-overflow-hidden max-w-[calc(theme(spacing.56))]"></div>
<div class="desc text-2xs">
<time class="date"></time>
</div>
</div>
</div>
</div>
</s_article_prev>
<s_article_next>
<div class="popup fixed bottom-3 flex z-[100] h-[calc(theme(spacing.24))] max-lg:hidden right-0 mr-4 rounded-lg overflow-hidden" style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;" x-data="{ open: true }" x-transition:enter="transition ease-linear duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-show="open && $store.indicator.scrolled > 50" id="next">
<a class="link absolute top-0 left-0 w-full h-full z-10" href=""></a>
<s_article_next_thumbnail>
<div class="img">
<img class="thumb w-24 h-24 object-cover" src="" alt="" width="96" height="96">
</div>
</s_article_next_thumbnail>
<div class="content relative w-64 p-4 border-box flex flex-col gap-y-2 bg-h-200 dark:text-h-200 dark:bg-h-700">
<button class="close absolute text-base top-3 right-4 text-h-400 dark:hover:text-h-200 z-20" @click="open = ! open">
<span class="txt text-hidden">닫기</span>
<i class="ico fa-solid fa-xmark"></i>
</button>
<div class="tit text-xs text-h-400">다음 글</div>
<div class="info text-h-500 dark:text-h-200">
<div class="tit text-sm font-semibold text-overflow-hidden max-w-[calc(theme(spacing.56))]"></div>
<div class="desc text-2xs">
<time class="date"></time>
</div>
</div>
</div>
</div>
</s_article_next>
</aside>
성공!
근데 전체카테고리에서 다음글이 존재하는데도 같은 카테고리에 있지 않는한.. 다음글을 조회하는경우 다음글은 안뜬다.
그것은 티스토리 치환자 동작 한계 때문이라고한다. (모서리 라운드를 넣고 그림자를 넣는 과정에서 시간이 오래 걸렸다..다행히 해결!)
5. 마우스 모양 꾸미기
Free Cursor Downloads - Cursors-4U.com
Date: 16 Jan 2024, 22:00 By Tor With 14 Comments All commenting and comments have been removed from the cursor pages. Too many negative comments that got out of hand. Date: 28 Dec 2023, 00:37 By Tor With 1 Comments Haven't work on this site in years. But I
www.cursors-4u.com
이거 역시 블로그 버전이 업뎃되면서 초기화되었기에 추가해준다.
</html> 위에 넣어주면 된다.
6. 마우스 커서 따라오는 효과 주기
https://www.mf2fm.com/rv/dhtmltinkerbell.php
Tinkerbell Magic Sparkle Fairy Dust Mouse :: RV's free DHTML and JavaScript effects
STEP 1: Copy and paste the code below so that it sits between the and tags at the top of your web-page: // <
티머니 둥근바람 폰트를 입력해주겠다!
웹폰트로 사용하기에 복사 버튼을 눌러서
CSS 상단에 붙여넣기해주기!
바로 복붙한 단일 font-weight만 제공하기 때문에
css의 font-weight를 지원하는 weight인 400과 800을 각각 입력해준다음
html 태그안에 font-family안에 @font-family 작성한 이름을 저장했다.
728x90