125 lines
1.8 KiB
CSS
125 lines
1.8 KiB
CSS
@keyframes code-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.highlight div,
|
|
pre {
|
|
background-color: var(--code-background);
|
|
padding: 0.7em;
|
|
overflow-x: auto;
|
|
margin: 0px;
|
|
border: 1px solid var(--code-border);
|
|
border-radius: 3px 0 3px 3px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.highlight {
|
|
margin: 0.8em 0;
|
|
}
|
|
|
|
.highlight div pre {
|
|
border: 0px;
|
|
padding: 0px 5px;
|
|
margin: 0px;
|
|
box-shadow: 0px 0px 0px;
|
|
}
|
|
|
|
code {
|
|
font-family: 'Source Code Pro', monospace;
|
|
color: var(--code);
|
|
|
|
/* For Iosevka */
|
|
/* font-stretch: expanded; */
|
|
font-stretch: normal;
|
|
|
|
background: var(--code-background);
|
|
border-radius: 5%;
|
|
padding: 1px 4px;
|
|
border: 1px solid var(--code-border);
|
|
font-size: 0.920em;
|
|
}
|
|
|
|
pre code {
|
|
font-size: 0.900em;
|
|
font-stretch: normal;
|
|
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
margin: 0px;
|
|
tab-size: 4;
|
|
}
|
|
|
|
@media screen and (max-width: 760px) {
|
|
pre code {
|
|
font-size: 80%;
|
|
}
|
|
}
|
|
|
|
.fs95 {
|
|
font-size: 90%;
|
|
}
|
|
|
|
.fs90 {
|
|
font-size: 90%;
|
|
}
|
|
|
|
.fs85 {
|
|
font-size: 85%;
|
|
}
|
|
|
|
.fs80 {
|
|
font-size: 80%;
|
|
}
|
|
|
|
.fs75 {
|
|
font-size: 75%;
|
|
}
|
|
|
|
.fs70 {
|
|
font-size: 75%;
|
|
}
|
|
|
|
.fs50 {
|
|
font-size: 50%;
|
|
}
|
|
|
|
/* Line numbers in code blocks. */
|
|
.ln {
|
|
user-select: none;
|
|
margin-right: 14px;
|
|
color: rgb(150, 150, 150);
|
|
}
|
|
|
|
.hl {
|
|
background-color: var(--code-hl);
|
|
outline-style: solid;
|
|
outline-color: var(--code-hl);
|
|
outline-width: 0.5px;
|
|
}
|
|
|
|
/* Copy code button */
|
|
.copy-code-button {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (min-width: 760px) {
|
|
.copy-code-button {
|
|
animation-duration: 1s;
|
|
animation-name: code-fade-in;
|
|
margin-top: -22px;
|
|
float: right;
|
|
display: block;
|
|
background-color: var(--code-background);
|
|
border-color: var(--code-border);
|
|
border-style: solid;
|
|
border-width: 1px 1px 0 1px;
|
|
border-radius: 2px 2px 0 0;
|
|
color: var(--text-dim);
|
|
}
|
|
}
|