owned this note
owned this note
Published
Linked with GitHub
---
title: HackMD Wood Fired Theme
tags: theme
description: Use `{%hackmd @JohnsonMao/theme-Wood-Fired %}` syntax to include this theme. 請在 HackMD 內使用 `{%hackmd @JohnsonMao/theme-Wood-Fired %}` 語法,就可使用此主題
---
<style>
/* 頁面整體設定 */
html, body, .ui-content {
background: #051019;
color: #ccc993;
}
/* 設定右上角留言按鈕 */
#comment-app .open-comments {
background: transparent;
}
.btn-default {
background: transparent;
border-color: #FFF99399;
}
.btn-default:hover {
background: transparent;
-webkit-animation: discolor 5s linear infinite,
glint 2s ease infinite;
animation: discolor 5s linear infinite,
glint 2s ease infinite;
}
.ui-comment-app .open-comments .btn.ui-open-comments {
color: #fff99399;
}
.ui-comment-app .open-comments .btn.ui-open-comments:hover {
color: #fff993;
}
/* 設置愛心、收藏、小鈴鐺按鈕 */
.community-button {
color: #FFF99399;
}
.community-button:hover {
color: #FFF993;
background: transparent;
}
/* h1, h2 樣式 */
.markdown-body h1,
.markdown-body h2 {
border-bottom-color: #ffffff80;
text-shadow: 3px 3px 3px #ca252180;
}
/* h6 date 標籤 */
.markdown-body h6 em {
position: absolute;
top: 40px;
right: 20px;
}
/* 目錄 [TOC] */
.markdown-body .toc > ul {
position: relative;
padding-top: 40px;
padding-bottom: 12px;
background: #00000060;
border-radius: 4px;
}
.markdown-body .toc > ul::before {
position: absolute;
content: '——目錄——';
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
text-shadow: 3px 3px 3px #ca252180;
}
/* 設定圖檔的顯示 */
.markdown-body img {
background-color: transparent;
border-radius: 4px;
}
/* 設定小目錄的背景顏色 */
.ui-toc-dropdown {
background-color: #051019;
}
/* 設定行動裝置中,小目錄按鈕 */
.ui-toc-label.btn {
background: linear-gradient(180deg, #ca252160 0%, #eca44260 100%);
color: #ffffff90;
}
.ui-toc-label.btn:hover {
background: linear-gradient(180deg, #ca252190 0%, #eca44290 100%);
color: #ffffff;
}
/* 設定小目錄內連結 */
.ui-toc-dropdown .nav>li>a,
.toc-menu>a {
color: #FFF99380;
font-weight: bold;
}
.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover {
color: #FFF993;
border-left: 1px solid #FFF993;
}
.ui-toc-dropdown .nav>.active:focus>a,
.ui-toc-dropdown .nav>.active:hover>a,
.ui-toc-dropdown .nav>.active>a {
color: #FFF993;
border-left: 1px solid #FFF993;
-webkit-animation: discolor 5s linear infinite,
glint 2s ease infinite;
animation: discolor 5s linear infinite,
glint 2s ease infinite;
}
.toc-menu>a:focus,
.toc-menu>a:hover {
color: #FFF993;
}
/* 設定引用 */
.markdown-body blockquote {
background: #ffffff60
}
/* 設定表格 */
.markdown-body table tr {
background-color: #ffffff30;
}
.markdown-body table tr:nth-child(2n) {
background-color: #ffffff15;
}
/* 設定 mark */
.markdown-body mark {
color: #fff;
background: linear-gradient(180deg, #ca2521 0%, #eca442 100%);
border-radius: 4px;
margin: 2px;
}
/* 設定 strong 粗體 */
.markdown-body strong {
background: #eca44260;
border-radius: 4px;
padding-left: 2px;
padding-right: 2px;
}
/* 設定連結 */
a,
.open-files-container li.selected a {
color: #9399DD;
}
a:hover,
.open-files-container li.selected a:hover {
color: #9399DD;
}
/* 設定 ins */
.markdown-body ins {
text-decoration: none;
text-shadow: 3px 3px 3px #FF999380;
}
/* 設定 code 模板 */
.markdown-body code,
.markdown-body tt {
background-color: #ffffff36;
}
.markdown-body .highlight pre,
.markdown-body pre {
color: #ddd;
background-color: #00000036;
}
.hljs-tag {
color: #ddd;
}
.token.operator {
background-color: transparent;
}
/* 回到最上面的按鈕 */
.markdown-body a > .fa-chevron-up {
position: fixed;
bottom: 20px;
right: 20px;
padding: 4px;
border-radius: 4px;
color: #fff;
background: linear-gradient(180deg, #ca252160 0%, #eca44260 100%);
}
.markdown-body a:hover > .fa {
background: linear-gradient(180deg, #ca252195 0%, #eca44295 100%);
-webkit-animation: discolor 5s linear infinite,
glint 2s ease infinite;
animation: discolor 5s linear infinite,
glint 2s ease infinite;
}
/* 引用 */
.markdown-body blockquote {
background: #ffffff40;
color: #ccc993;
}
blockquote .small,
blockquote footer,
blockquote small {
color: #ccc99399;
}
/* 右邊滾動軸 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #61120160;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #ca252195 0%, #eca44295 100%);
}
/* 動畫 */
@keyframes discolor {
0%, 100% {filter: hue-rotate(0);}
50% {filter: hue-rotate(360deg);}
}
</style>
*[HTML]: Hyper Text Markup Language
*[CSS]: Cascading Style Sheets
*[SPA]: Single Page Application
*[SSR]: Server Side Render
*[AMP]: Accelerated Mobile Pages
*[PWA]: Progressive Web App
*[ES6]: ECMAScript 6
*[六角學院]: 佛心教學公司
++如果你喜歡,幫我按一下上面的愛心 🧡,讓我不再邊緣++
[<i class="fa fa-chevron-up"></i>](#)