Created
May 29, 2024 17:39
-
-
Save htlin222/d8bc394b95300b243521b9ea001a741b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @theme my-theme */ | |
@charset "UTF-8"; | |
/*! | |
* | |
* @auto-scaling true | |
* @size 4:3 960px 720px | |
* @size 16:9 1280px 720px | |
*/ | |
@import url("https://unpkg.com/markdown-it-admon/styles/admonition.css"); | |
@import url("https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@400;500;600;700&display=swap"); | |
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css"); | |
/* @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&display=swap"); */ | |
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;800&display=swap"); | |
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;800&display=swap"); | |
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,700&display=swap"); | |
@import url("https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"); | |
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"); | |
:root { | |
--JAMA-foreground: #333; | |
--JAMA-current-line: #e5e5e5; | |
--JAMA-background: #ffffff; | |
/* --JAMA-background: #f8f8f2; */ | |
--JAMA-comment: #6272a4; | |
--JAMA-cyan: #192b2f; | |
--JAMA-blue: #2d696a; | |
--JAMA-green: #6c9a77; | |
--JAMA-orange: #841e2f; | |
--JAMA-pink: #9a2f6b; | |
--JAMA-purple: #4f2d7d; | |
--JAMA-red: #d71635; | |
--JAMA-yellow: #8c9434; | |
--box-shadow: 0 10px 14px rgba(0, 0, 0, 0.2); | |
--box-padding: 20px; | |
} | |
.hljs { | |
display: block; | |
overflow-x: auto; | |
padding: 0.5em; | |
background: #282a36; | |
} | |
.hljs-built_in, | |
.hljs-selector-tag, | |
.hljs-section, | |
.hljs-link { | |
color: #8be9fd; | |
} | |
.hljs-keyword { | |
color: #ff79c6; | |
} | |
.hljs, | |
.hljs-subst { | |
color: #f8f8f2; | |
} | |
.hljs-title, | |
.hljs-attr, | |
.hljs-meta-keyword { | |
color: #50fa7b; | |
} | |
.hljs-string, | |
.hljs-meta, | |
.hljs-name, | |
.hljs-type, | |
.hljs-symbol, | |
.hljs-bullet, | |
.hljs-addition, | |
.hljs-variable, | |
.hljs-template-tag, | |
.hljs-template-variable { | |
color: #f1fa8c; | |
} | |
.hljs-comment, | |
.hljs-quote, | |
.hljs-deletion { | |
color: #6272a4; | |
} | |
.hljs-keyword, | |
.hljs-selector-tag, | |
.hljs-literal, | |
.hljs-title, | |
.hljs-section, | |
.hljs-doctag, | |
.hljs-type, | |
.hljs-name, | |
.hljs-strong { | |
font-weight: bold; | |
} | |
.hljs-literal, | |
.hljs-number { | |
color: #bd93f9; | |
} | |
.hljs-emphasis { | |
font-style: italic; | |
} | |
svg[data-marp-fitting="svg"] { | |
max-height: 580px; | |
} | |
/* section > h1:hover, */ | |
/* section > h2:hover, */ | |
/* section > h3:hover, */ | |
/* section > h4:hover, */ | |
/* section > h5:hover { */ | |
/* transform: translateX(10px); */ | |
/* transition: transform 0.3s ease; */ | |
/* } */ | |
section ul strong, | |
section table strong, | |
section p strong { | |
padding: 0px 2px 0px 2px; | |
background: -webkit-linear-gradient(right, #6c9a77, #2d696a); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
section h1 { | |
font-size: 3em; | |
font-weight: 900; | |
/* font-style: italic; */ | |
/* margin-top: 100px; */ | |
margin-bottom: 20px; | |
color: var(--JAMA-foreground); | |
} | |
section h2 { | |
font-size: 1.8em; | |
font-weight: 900; | |
color: var(--JAMA-blue); | |
column-span: all; | |
} | |
section h3 { | |
font-size: 1.5em; | |
font-weight: 900; | |
color: var(--JAMA-foreground); | |
break-before: column; | |
} | |
section br { | |
break-before: column; | |
} | |
section h4 { | |
font-size: 1.2em; | |
color: var(--JAMA-blue); | |
} | |
section h5 { | |
font-size: 1.2em; | |
color: var(--JAMA-foreground); | |
} | |
section h6 { | |
font-size: 1em; | |
font-style: italic; | |
color: var(--JAMA-blue); | |
} | |
section p { | |
font-size: 1em; | |
margin: 1em 0 1em 0; | |
/* transition: 0.3s; */ | |
} | |
section blockquote { | |
font-size: 0.8em; | |
margin: 10px 0 0 0; | |
animation-name: fadeIn; | |
animation-duration: 0.5s; | |
animation-fill-mode: both; | |
animation-delay: 1s; | |
} | |
section ul > li, | |
section ol > li { | |
margin: 0.5em 0 0 0; | |
color: var(--JAMA-cyan); | |
} | |
section ul > li > p, | |
section ol > li > p { | |
margin: 0.6em 0 0 0; | |
} | |
section pre { | |
display: block; | |
min-height: 1em; | |
color: #fff; | |
overflow: visible; | |
} | |
section pre code { | |
box-sizing: border-box; | |
line-height: 1em; | |
background: #333; | |
margin: 1; | |
min-width: 100%; | |
padding: 1em; | |
font-size: 1em; | |
} | |
section pre code svg[data-marp-fitting="svg"] { | |
max-height: calc(480px - 1em); | |
} | |
section blockquote { | |
padding-top: 5px; | |
border-top: 0.1px solid #555; | |
margin-top: 10px; | |
font-size: 50%; | |
color: var(--JAMA-foreground); | |
background: var(--JAMA-background); | |
position: absolute; | |
bottom: 0px; | |
right: 100px; | |
left: 100px; | |
} | |
blockquote::before { | |
content: ""; | |
display: block; | |
font-weight: bold; | |
position: absolute; | |
color: var(--JAMA-green); | |
top: 0; | |
left: 0; | |
} | |
blockquote > *:first-child { | |
margin-top: 0; | |
} | |
blockquote > blockquote > blockquote { | |
font-size: 50%; | |
font-weight: 400; | |
padding: 0; | |
margin: 0; | |
border: 0; | |
border-top: 0.1em dashed #555; | |
position: absolute; | |
bottom: -10px; | |
left: 10px; | |
} | |
section mark { | |
background: transparent; | |
} | |
section mark { | |
display: inline-block; | |
padding-bottom: 2px; | |
background-image: linear-gradient(#3d6869 0 0); | |
background-position: 0 100%; /*OR bottom left*/ | |
background-size: 0% 2px; | |
background-repeat: no-repeat; | |
transition: | |
background-size 0.3s, | |
background-position 0s 0.3s; /*change after the size immediately*/ | |
} | |
section mark:hover { | |
background-position: 100% 100%; /*OR bottom right*/ | |
background-size: 100% 2px; | |
} | |
section ins::before { | |
content: "[ "; | |
font-size: 1.2em; | |
color: var(--JAMA-foreground); | |
} | |
section ins::after { | |
content: " ]"; | |
font-size: 1.2em; | |
color: var(--JAMA-foreground); | |
} | |
section ins { | |
/* color: white; */ | |
font-size: 1em; | |
color: var(--JAMA-blue); | |
text-decoration: none; | |
/* background-color: #3d6869; */ | |
/* padding: 7px; */ | |
/* border-radius: 5px; */ | |
} | |
section.scroll > ul { | |
/* width: 1100px; */ | |
/* height: 500px; */ | |
overflow-x: hidden; | |
overflow-y: auto; | |
/* padding: 20px; */ | |
} | |
kbd { | |
background-color: #eee; | |
border: 0; | |
border-radius: 0.125em; | |
box-shadow: | |
+0.2em +0.125em 0.125em rgba(0, 0, 0, 0.25), | |
0 0 0 0.04em rgba(0, 0, 0, 0.3), | |
0.02em 0.02em 0.02em rgba(0, 0, 0, 0.4) inset, | |
+0.05em +0.05em 0.02em rgba(255, 255, 255, 0.8) inset; | |
color: var(--JAMA-foreground); | |
display: inline-block; | |
padding: 0.2em 0.4em; | |
margin: 0 0.35em; | |
font-family: "JetBrains Mono", monospace; | |
font-size: 1em; | |
cursor: pointer; | |
user-select: none; | |
transition: all 0.2s ease; | |
} | |
kbd:hover { | |
background-color: #eee; | |
border-radius: 0.125em; | |
background-color: #f3f3f3; /* 淺色背景以突出懸停效果 */ | |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 更大的陰影以增強視覺效果 */ | |
} | |
kbd:active { | |
background-color: #e6e6e6; /* 按下時更暗的背景色 */ | |
box-shadow: | |
0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2), | |
0 0 0 0.05em rgba(0, 0, 0, 0.4), | |
-0.025em -0.05em 0.025em rgba(255, 255, 255, 0.8) inset; /* 仿照按鈕的按下效果 */ | |
transform: translateY(5px); /* 輕微下移以模擬按鍵被按下 */ | |
} | |
.outline li { | |
font-size: 1.2em; | |
font-weight: 700; | |
color: #dddddd; | |
} | |
.outline strong { | |
font-size: 1em; | |
} | |
section table { | |
border-spacing: 0; | |
border-collapse: collapse; | |
/* border: 1px solid; */ | |
/* border-color: var(--JAMA-background); */ | |
border-radius: 2px; /* sets the border radius */ | |
overflow: hidden; /* hides the overflow from the rounded corners */ | |
margin: 1em 0 0 0; | |
transition: transform 0.3s ease; | |
} | |
section { | |
font-size: 24px; | |
font-weight: 500; | |
/* font-family: "Open Sans", sans-serif; */ | |
font-family: "Inter", sans-serif; | |
/* font-family: "Fira Sans", sans-serif; */ | |
/* TODO: Change Main Font Here */ | |
line-height: 1.15; | |
/* letter-spacing: 0.4px; */ | |
padding: 50px 35px; | |
color: var(--JAMA-foreground); | |
background-color: var(--JAMA-background); | |
/* border-left: 10px solid; */ | |
border-bottom: 10px solid; | |
border-image: linear-gradient(to bottom, #6c9a77, #2d696a); | |
border-image-slice: 1; | |
} | |
section > *:first-child, | |
section > header:first-child + * { | |
margin-top: 0; | |
} | |
section code { | |
/* background: var(--JAMA-blue); */ | |
border-radius: 0.2em; | |
border: 1px solid var(--JAMA-blue); | |
color: var(--JAMA-blue); | |
display: inline-block; | |
font-family: "Open Sans", sans-serif; | |
/* font-family: "Inter", sans-serif; */ | |
/* font-family: 'JetBrains Mono', monospace; */ | |
font-weight: 700; | |
letter-spacing: 0.5; | |
margin: 0.1em; | |
padding: 0.1em 0.3em 0.1em 0.3em; | |
vertical-align: baseline; | |
animation-name: fadeIn; | |
animation-duration: 0.3s; | |
animation-fill-mode: both; | |
animation-delay: 0.2s; | |
} | |
section h2, | |
section h3, | |
section h4, | |
section h5, | |
section h6 { | |
margin: 0.2em 0 0 0; | |
max-width: 90%; | |
} | |
section h1 strong, | |
section h2 strong, | |
section h3 strong, | |
section h4 strong, | |
section h5 strong, | |
section h6 strong { | |
font-weight: inherit; | |
background: -webkit-linear-gradient(right, #6c9a77, #2d696a); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
section > p { | |
transition: transform 0.2s ease; | |
} | |
section a { | |
text-decoration: none; | |
font-weight: 800; | |
background: -webkit-linear-gradient(right, #6c9a77, #2d696a); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
em { | |
font-family: "Lora", serif; /* 使用 'Lora' 字體,若無法加載則回退到系統的serif字體 */ | |
font-weight: 700; | |
font-style: italic; /* 設置斜體 */ | |
} | |
section section::after, | |
section blockquote::before, | |
section blockquote::after { | |
color: var(--JAMA-comment); | |
} | |
section table th, | |
section table td { | |
font-size: 0.8em; | |
padding: 0.4em 0.4em; | |
border-right: 1px solid var(--JAMA-background); | |
} | |
section table thead th { | |
background: var(--JAMA-blue); | |
/* background: var(--JAMA-foreground); */ | |
color: var(--JAMA-background); | |
font-size: 0.8em; | |
color: white; /* sets the text color of the table header to white */ | |
} | |
section table tbody > tr:nth-child(even) td, | |
section table tbody > tr:nth-child(even) th { | |
background: var(--JAMA-current-line); | |
font-size: 0.8em; | |
} | |
section footer, | |
section::after { | |
box-sizing: border-box; | |
line-height: 30px; | |
/* overflow: hidden; */ | |
padding: 10px 20px; | |
position: absolute; | |
color: var(--JAMA-blue); | |
} | |
section header { | |
position: absolute; | |
box-sizing: border-box; | |
background-color: var(--JAMA-blue); | |
color: #6c9a77; | |
border-bottom-left-radius: 15px; | |
/* border-bottom-right-radius: 15px; */ | |
/* border-left: #2d696a 35px solid; */ | |
font-size: 18px; | |
height: 30px; | |
padding: 3px 20px; | |
right: 0; | |
top: 0; | |
font-weight: 400; | |
text-align: right; | |
/* max-width: 500px; */ | |
} | |
footer { | |
left: 0; | |
right: 0; | |
bottom: 0; | |
font-size: 14px; | |
} | |
header strong { | |
padding: 0px 4px 0px 4px; | |
font-weight: 500; | |
color: var(--JAMA-background); | |
/* text-decoration: underline; */ | |
} | |
section::after { | |
animation-name: slideInRight; | |
animation-duration: 1s; | |
animation-fill-mode: both; | |
animation-timing-function: cubic-bezier(0.6, 0.05, 0.4, 0.95); | |
content: attr(data-marpit-pagination) " / " | |
attr(data-marpit-pagination-total); | |
} | |
section.green > h1, | |
section.green > h2, | |
section.green > h3, | |
section.green > h4, | |
section.green > h5, | |
section.green > h6, | |
section.green > footer, | |
section.green::after { | |
color: var(--JAMA-background); | |
} | |
section.green { | |
background-color: var(--JAMA-blue); | |
color: var(--JAMA-background); | |
font-size: 36px; | |
} | |
section.medium { | |
font-size: 36px; | |
} | |
section.large { | |
font-size: 48px; | |
} | |
section.small { | |
font-size: 18px; | |
} | |
section.happy { | |
font-size: 18px; | |
} | |
/* TWO colomn style */ | |
section.two { | |
column-count: 2; | |
} | |
/* fit h1 */ | |
section.center h1 { | |
text-align: center; | |
justify-content: center; | |
} | |
/* THREE colomn style */ | |
section.three { | |
column-count: 3; | |
} | |
/* FOUR colomn style */ | |
section.four { | |
column-count: 4; | |
} | |
section::after { | |
right: 0; | |
bottom: 0; | |
font-size: 14px; | |
} | |
section.free { | |
display: flex; | |
width: 100%; | |
gap: 1em; | |
} | |
section.free div { | |
display: flex; | |
flex-direction: column; | |
/* justify-content: center; */ | |
} | |
.free { | |
display: flex; | |
width: 100%; | |
gap: 1em; | |
} | |
.free div { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
/* height: 600px; /* 設置一個合適的高度 */ | |
} | |
.free > div img:not(.emoji) { | |
width: auto; | |
transition: transform 0.3s ease; | |
} | |
.free > div img:not(.emoji) { | |
width: auto; | |
transition: transform 0.3s ease; | |
} | |
.bigtable > div { | |
justify-content: center; | |
display: flex; | |
flex-direction: column; | |
} | |
.bigtable > div > table { | |
border-spacing: 0; | |
border-collapse: collapse; | |
/* border: 1px solid; */ | |
/* border-color: var(--JAMA-background); */ | |
border-radius: 9px; /* sets the border radius */ | |
overflow: hidden; /* hides the overflow from the rounded corners */ | |
margin: 1em 0 0 0; | |
border: 1px solid var(--JAMA-background); | |
} | |
.bigtable > div > table th, | |
.bigtable > div > table td { | |
text-align: center; | |
font-size: 1.8em; | |
padding: 0.4em 1.4em; | |
border-left: 50px solid var(--JAMA-background); | |
border-right: 50px solid var(--JAMA-background); | |
background: #eeeeee; | |
} | |
.bigtable > div > table thead th { | |
text-align: center; | |
background: var(--JAMA-blue); | |
color: var(--JAMA-background); | |
border-top: 5px solid var(--JAMA-background); | |
font-size: 1.8em; | |
color: white; /* sets the text color of the table header to white */ | |
} | |
.bigtable > div > table tbody > tr:nth-child(even) td, | |
.bigtable > div > table tbody > tr:nth-child(even) th { | |
background: var(--JAMA-current-line); | |
font-size: 1.8em; | |
} | |
.even { | |
display: flex; | |
width: 100%; | |
gap: 1.5rem; | |
justify-content: space-between; /* 如果您想要在元素之間和容器邊緣有相同的空間,可用 space-around */ | |
} | |
.even > div img { | |
width: 5.1rem; | |
} | |
.even div { | |
display: flex; | |
flex-direction: column; | |
/* justify-content: center; */ | |
flex-grow: 1; /* 新增這行讓 div 元素平均分佈並填充可用空間 */ | |
/* 移除了高度的設定,因為它目前被注釋了 */ | |
padding: 15px; /* 增加一些內距,讓邊框不會太靠近文字 */ | |
margin: 10px 0; /* 上下邊距,為標題和其他元素之間提供空間 */ | |
} | |
section.even h2 { | |
display: flex; | |
flex-direction: column; | |
/* justify-content: center; */ | |
flex-grow: 1; /* 新增這行讓 div 元素平均分佈並填充可用空間 */ | |
/* 移除了高度的設定,因為它目前被注釋了 */ | |
padding: 15px; /* 增加一些內距,讓邊框不會太靠近文字 */ | |
margin: 10px 0; /* 上下邊距,為標題和其他元素之間提供空間 */ | |
} | |
.boxlist { | |
display: flex; | |
width: 100%; | |
gap: 1.5rem; | |
justify-content: space-between; /* 如果您想要在元素之間和容器邊緣有相同的空間,可用 space-around */ | |
} | |
.boxlist div { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
flex-grow: 1; /* 新增這行讓 div 元素平均分佈並填充可用空間 */ | |
/* 移除了高度的設定,因為它目前被注釋了 */ | |
background-color: #efefef; | |
border-bottom: 10px solid var(--JAMA-blue); /* 下邊框設置為藍色 */ | |
/* box-shadow: var(--box-shadow); */ | |
padding: 15px; /* 增加一些內距,讓邊框不會太靠近文字 */ | |
margin: 20px 20px; /* 上下邊距,為標題和其他元素之間提供空間 */ | |
} | |
.top { | |
display: flex; | |
width: 100%; | |
gap: 1.5rem; | |
} | |
.top div { | |
/* display: flex; */ | |
/* flex-direction: column; */ | |
justify-content: center; | |
/* height: 600px; /* 設置一個合適的高度 */ | |
} | |
.container { | |
display: flex; | |
} | |
.tri { | |
display: flex; | |
justify-content: center; | |
align-items: left; | |
gap: 1rem; | |
} | |
.tri > div { | |
flex: 1; | |
width: calc(33% - 0.5rem); /* set width to 50% minus half the gap */ | |
padding: var(--box-padding); /* 增加一些內距,讓邊框不會太靠近文字 */ | |
background-color: #efefef; | |
border-bottom: 10px solid var(--JAMA-blue); /* 下邊框設置為藍色 */ | |
/* box-shadow: var(--box-shadow); */ | |
transition: transform 0.3s ease; | |
margin: 20px 0px; /* 上下邊距,為標題和其他元素之間提供空間 */ | |
} | |
.tri > div > p > strong { | |
font-size: 1.5em; | |
font-weight: 900; | |
color: var(--JAMA-blue); | |
column-span: all; | |
} | |
.tetra { | |
display: flex; | |
justify-content: center; | |
align-items: left; | |
gap: 1rem; | |
} | |
.tetra > div { | |
flex: 1; | |
width: calc(25% - 0.5rem); /* set width to 50% minus half the gap */ | |
border-bottom: 10px solid var(--JAMA-blue); /* 下邊框設置為藍色 */ | |
background-color: #efefef; | |
/* box-shadow: var(--box-shadow); */ | |
padding: var(--box-padding); /* 增加一些內距,讓邊框不會太靠近文字 */ | |
margin: 20px 0px; /* 上下邊距,為標題和其他元素之間提供空間 */ | |
transition: transform 0.3s ease; | |
} | |
.half { | |
display: flex; | |
justify-content: center; | |
align-items: left; | |
gap: 1rem; | |
} | |
.half > div { | |
flex: 1; | |
width: calc(50% - 0.5rem); /* set width to 50% minus half the gap */ | |
padding-right: 0.5em; | |
transition: transform 0.3s ease; | |
} | |
.half > div:hover, | |
.free > div img:hover { | |
transform: translateY(-10px); | |
transform-origin: center; | |
border-top-width: 0px; | |
} | |
.columns { | |
padding-top: 1em; | |
padding-right: 1em; | |
/* margin-right: 1.5em; */ | |
display: flex; | |
justify-content: center; | |
align-items: left; | |
gap: 1rem; | |
} | |
.columns > div img:not(.emoji) { | |
display: block; | |
margin: 0 auto; | |
max-width: 100%; | |
height: auto; | |
} | |
.columns > div { | |
flex: 1; | |
width: calc(50% - 0.5rem); /* set width to 50% minus half the gap */ | |
transition: transform 0.3s ease; | |
padding-right: 0.5em; | |
} | |
/* .columns div:not(:last-child) { */ | |
/* border-right: 1px dashed #2d696a; */ | |
/* } */ | |
.columns div:not(:last-child) { | |
position: relative; | |
} | |
.columns div:not(:last-child)::after { | |
content: ""; | |
position: absolute; | |
right: 0; | |
top: 30px; /* Start 10px from the top */ | |
bottom: 30px; /* End 10px from the bottom */ | |
border-right: 1px dashed #2d696a; | |
width: 0; /* Ensures the pseudo-element is a line */ | |
} | |
.columns div:hover { | |
transform: translateY(-5px); | |
transform-origin: center; | |
border-top-width: 0px; | |
} | |
hr { | |
border: 1px dashed var(--JAMA-blue); | |
margin-top: 10px; | |
opacity: 0.5; | |
/* margin-left: -50px; */ | |
margin-bottom: 10px; | |
} | |
.dash { | |
border: none; | |
border-top: 1px dashed #2d696a; | |
height: 0; | |
margin: 0.4em 0; | |
} | |
.centered-content { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
height: 600px; /* 設置一個合適的高度 */ | |
} | |
a { | |
color: var(--JAMA-cyan); | |
} | |
ul li:hover::marker { | |
transform: scale(1.5); | |
color: #ffb703; | |
} | |
li { | |
transition: opacity 0.3s ease; | |
transition: transform 0.3s ease; | |
} | |
li::marker { | |
color: #2d696a; | |
} | |
li:hover { | |
/* transform: translateX(-5px); */ | |
/* transform: scale(1.05); */ | |
transition: transform 0.3s ease; | |
text-decoration: underline; | |
text-decoration-color: #6c9a77; | |
text-decoration-style: solid; | |
text-decoration-thickness: 1px; | |
} | |
/* for toc */ | |
.scroll li:hover { | |
transform: translateX(15px); | |
/* transform: scale(1.25); */ | |
transition: transform 0.2s ease; | |
text-decoration: underline; | |
text-decoration-color: #6c9a77; | |
text-decoration-style: solid; | |
text-decoration-thickness: 5px; | |
} | |
li[data-bespoke-marp-fragment="active"] { | |
opacity: 1; | |
transition: transform 0.3s ease; | |
} | |
li[data-bespoke-marp-fragment="inactive"] { | |
transition: transform 0.3s ease; | |
visibility: visible; | |
opacity: 0.2; | |
} | |
pre ol li > span:hover { | |
font-weight: 800; | |
transition: transform 0.1s ease; | |
transform: translateX(10px); | |
/* color: var(--JAMA-green); */ | |
color: #ffb703; | |
} | |
pre ol li::before:hover { | |
color: #ffb703; | |
} | |
td:hover { | |
/* box-shadow: 12px 2px 15px rgba(0, 0, 0, 0.3); */ | |
color: #2d696a; | |
/* border: 2px solid #2d696a; */ | |
background-color: white; /* sets the background color of the table header */ | |
transition: opacity 0.5s ease; | |
} | |
tr:hover { | |
transition: transform 0.3s ease; | |
} | |
button { | |
display: inline-block; | |
outline: none; | |
cursor: pointer; | |
font-size: inherit; | |
line-height: 1; | |
border-radius: 200px; | |
transition-property: background-color, border-color, color, box-shadow, | |
filter; | |
transition-duration: 0.3s; | |
border: 1px solid transparent; | |
letter-spacing: 2px; | |
min-width: 160px; | |
text-transform: uppercase; | |
white-space: normal; | |
font-weight: 700; | |
text-align: center; | |
padding: 2px 2px; | |
margin-left: 20px; | |
color: #fff; | |
background-color: #2d696a; | |
height: 48px; | |
:hover { | |
transform: scale(1.04); | |
background-color: #2d696a; | |
} | |
} | |
.container { | |
border: 1px solid black; | |
margin: 10px; | |
} | |
summary { | |
color: #2d696a; | |
font-weight: bold; | |
} | |
/* line num in codebox */ | |
pre ol { | |
all: unset; | |
display: grid; | |
grid-template-columns: auto 1fr; | |
counter-reset: line-number 0; | |
} | |
code ol { | |
padding-right: 0em; | |
} | |
pre ol li { | |
display: contents; | |
color: #fff; | |
font-weight: 400; | |
line-height: 1.5em; | |
/* font-family: "Inter", sans-serif; */ | |
/* font-family: "Overpass Mono", monospace; */ | |
font-family: "JetBrains Mono", monospace; | |
} | |
pre ol li span[data-marp-line-number]::before { | |
display: block; | |
content: counter(line-number); | |
counter-increment: line-number; | |
text-align: right; | |
color: #595959; | |
font-weight: 800; | |
background-color: #222; | |
border-right: 5px solid #595959; | |
margin-right: 0.51em; | |
padding-right: 0.51em; | |
padding-left: 0.51em; | |
} | |
img[alt*="badge"] { | |
height: 30px; | |
} | |
img[alt*="svg"] { | |
height: 30px; | |
font-family: "Inter", sans-serif; | |
} | |
img[alt*="emojik"] { | |
animation: move 2.5s infinite cubic-bezier(0.6, 0.05, 0.4, 0.95); | |
} | |
img[alt*="RLQ"] { | |
position: absolute; /* sets the position of the element to absolute */ | |
right: 80px; | |
bottom: 80px; | |
} | |
img[alt*="RUQ"] { | |
position: absolute; /* sets the position of the element to absolute */ | |
right: 80px; | |
top: 80px; | |
} | |
svg.markmap { | |
width: 200%; | |
} | |
img { | |
animation-name: fadeIn; | |
animation-duration: 0.2s; | |
animation-fill-mode: both; | |
animation-delay: 0.3s; | |
} | |
div[class^="admonition"] { | |
column-span: all; | |
margin: 0.8em 10px 0.8em; | |
/* background: white; */ | |
/* margin-left: 10px; */ | |
/* max-width: 40%; */ | |
/* transition: transform 0.2s ease; */ | |
} | |
div[class^="admonition"] > p > strong { | |
font-weight: bold; | |
} | |
/* div[class^="admonition"] > p { */ | |
/* } */ | |
p.admonition-title { | |
padding: 5px 0px 5px 40px; | |
margin: 15px 0px 0px 0px; | |
} | |
p.admonition-title::before { | |
padding-left: 10px; | |
padding-top: 4px; | |
/* animation: fade 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; */ | |
} | |
.table-of-contents { | |
overflow-y: scroll; | |
height: 580px; | |
} | |
.markdown-alert { | |
padding: 1em; | |
border-left: 0.3rem solid; | |
padding-bottom: 0px; | |
padding-top: 0px; | |
border-color: var(--border-color); | |
} | |
.markdown-alert > span { | |
display: flex; | |
flex-direction: row; | |
align-items: center; | |
color: var(--border-color); | |
} | |
.markdown-alert .markdown-alert-icon { | |
margin-right: 0.5em; | |
fill: var(--border-color); | |
} | |
.markdown-alert.note { | |
--border-color: #539bf5; | |
} | |
.markdown-alert.warning { | |
--border-color: #c69026; | |
} | |
.markdown-alert.important { | |
--border-color: #986ee2; | |
} | |
.markdown-alert.caution { | |
--border-color: #e5534b; | |
} | |
.markdown-alert.tip { | |
--border-color: #57ab5a; | |
} | |
.task-list-item-checkbox { | |
transform: scale(1.5); | |
} | |
.box { | |
width: 40%; | |
margin: 0 auto; | |
background: rgba(255, 255, 255, 0.2); | |
padding: 35px; | |
border: 2px solid #fff; | |
border-radius: 20px/50px; | |
background-clip: padding-box; | |
text-align: center; | |
} | |
.button { | |
font-size: 1em; | |
padding: 2px; | |
border: 2px solid #06d85f; | |
text-decoration: none; | |
cursor: pointer; | |
transition: all 0.3s ease-out; | |
} | |
.button:hover { | |
background: #06d85f; | |
} | |
.overlay { | |
position: fixed; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
background: rgba(0, 0, 0, 0.7); | |
transition: opacity 500ms; | |
visibility: hidden; | |
opacity: 0; | |
} | |
.overlay:target { | |
visibility: visible; | |
opacity: 1; | |
} | |
.popup { | |
margin: 70px auto; | |
padding: 20px; | |
background: #fff; | |
border-radius: 5px; | |
width: 70%; | |
position: relative; | |
transition: all 5s ease-in-out; | |
} | |
.popup h2 { | |
margin-top: 0; | |
color: #333; | |
} | |
.popup .close { | |
position: absolute; | |
top: 20px; | |
right: 30px; | |
transition: all 200ms; | |
font-size: 30px; | |
font-weight: bold; | |
text-decoration: none; | |
color: #333; | |
} | |
.popup .close:hover { | |
color: #06d85f; | |
} | |
.popup .content { | |
max-height: 30%; | |
overflow: auto; | |
} | |
img[alt*="circle"] { | |
border-radius: 50%; | |
} | |
@media screen and (max-width: 1000px) { | |
.box { | |
width: 70%; | |
} | |
.popup { | |
width: 70%; | |
} | |
} | |
.markmap > svg { | |
width: 100%; | |
height: 550px; | |
font: 300 16px/20px sans-serif; | |
} | |
.material-symbols-outlined { | |
font-size: 140px; | |
color: #2d696a; | |
margin-bottom: 2px; | |
font-variation-settings: | |
"FILL" 1, | |
"wght" 500, | |
"GRAD" 100, | |
"opsz" 48; | |
} | |
.bx { | |
color: #2d696a; | |
} | |
g { | |
font-size: 60px; /* 調整這裡的數值來改變字體大小 */ | |
} | |
/* animation */ | |
@keyframes pulse { | |
0% { | |
font-variation-settings: "wght" 200; | |
} | |
50% { | |
font-variation-settings: "wght" 500; | |
} | |
100% { | |
font-variation-settings: "wght" 200; | |
} | |
} | |
section h4 { | |
opacity: 1; | |
transform: translateY(0); | |
animation: head-fade-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; | |
} | |
@keyframes head-fade-in { | |
from { | |
opacity: 0; | |
transform: translateY(-40px); | |
} | |
to { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
} | |
@keyframes move { | |
0% { | |
transform: translateX(0); | |
} | |
50% { | |
transform: translateX(-20px); | |
} | |
100% { | |
transform: translateX(0); | |
} | |
} | |
@keyframes slideInRight { | |
from { | |
transform: translateX(100%); | |
} | |
to { | |
transform: translateX(0); | |
} | |
} | |
@keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
@keyframes fade { | |
0% { | |
opacity: 0; | |
} | |
50% { | |
opacity: 1; | |
} | |
100% { | |
opacity: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment