331 lines
5 KiB
CSS
331 lines
5 KiB
CSS
|
@charset "UTF-8";
|
||
|
/*!
|
||
|
* Marp Dracula theme.
|
||
|
* @theme dracula
|
||
|
* @author Daniel Nicolas Gisolfi
|
||
|
*
|
||
|
* @auto-scaling true
|
||
|
* @size 4:3 960px 720px
|
||
|
* @size 16:9 1280px 720px
|
||
|
*/
|
||
|
|
||
|
@import url("https://fonts.googleapis.com/css?family=Lato:400,900|IBM+Plex+Sans:400,700");
|
||
|
|
||
|
:root {
|
||
|
--dracula-background: #282a36;
|
||
|
--dracula-current-line: #44475a;
|
||
|
--dracula-foreground: #f8f8f2;
|
||
|
--dracula-comment: #6272a4;
|
||
|
--dracula-cyan: #8be9fd;
|
||
|
--dracula-green: #50fa7b;
|
||
|
--dracula-orange: #ffb86c;
|
||
|
--dracula-pink: #ff79c6;
|
||
|
--dracula-purple: #bd93f9;
|
||
|
--dracula-red: #ff5555;
|
||
|
--dracula-yellow: #f1fa8c;
|
||
|
}
|
||
|
|
||
|
.hljs {
|
||
|
display: block;
|
||
|
overflow-x: auto;
|
||
|
padding: 0.5em;
|
||
|
background: var(--dracula-background);
|
||
|
}
|
||
|
|
||
|
/* Dracula Foreground */
|
||
|
.hljs,
|
||
|
.hljs-subst,
|
||
|
.hljs-typing,
|
||
|
.hljs-variable,
|
||
|
.hljs-template-variable {
|
||
|
color: var(--dracula-foreground);
|
||
|
}
|
||
|
|
||
|
/* Dracula Comment */
|
||
|
.hljs-comment,
|
||
|
.hljs-quote,
|
||
|
.hljs-deletion {
|
||
|
color: var(--dracula-comment);
|
||
|
}
|
||
|
|
||
|
/* Dracula Cyan */
|
||
|
.hljs-meta .hljs-doctag,
|
||
|
.hljs-built_in,
|
||
|
.hljs-selector-tag,
|
||
|
.hljs-section,
|
||
|
.hljs-link,
|
||
|
.hljs-class {
|
||
|
color: var(--dracula-cyan);
|
||
|
}
|
||
|
|
||
|
/* Dracula Green */
|
||
|
.hljs-title {
|
||
|
color: var(--dracula-green);
|
||
|
}
|
||
|
|
||
|
/* Dracula Orange */
|
||
|
.hljs-params {
|
||
|
color: var(--dracula-orange);
|
||
|
}
|
||
|
|
||
|
/* Dracula Pink */
|
||
|
.hljs-keyword {
|
||
|
color: var(--dracula-pink);
|
||
|
}
|
||
|
|
||
|
/* Dracula Purple */
|
||
|
.hljs-literal,
|
||
|
.hljs-number {
|
||
|
color: var(--dracula-purple);
|
||
|
}
|
||
|
|
||
|
/* Dracula Red */
|
||
|
.hljs-regexp {
|
||
|
color: var(--dracula-red);
|
||
|
}
|
||
|
|
||
|
/* Dracula Yellow */
|
||
|
.hljs-string,
|
||
|
.hljs-name,
|
||
|
.hljs-type,
|
||
|
.hljs-attr,
|
||
|
.hljs-symbol,
|
||
|
.hljs-bullet,
|
||
|
.hljs-addition,
|
||
|
.hljs-template-tag {
|
||
|
color: var(--dracula-yellow);
|
||
|
}
|
||
|
|
||
|
.hljs-keyword,
|
||
|
.hljs-selector-tag,
|
||
|
.hljs-literal,
|
||
|
.hljs-title,
|
||
|
.hljs-section,
|
||
|
.hljs-doctag,
|
||
|
.hljs-type,
|
||
|
.hljs-name,
|
||
|
.hljs-strong {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
.hljs-params,
|
||
|
.hljs-emphasis {
|
||
|
font-style: italic;
|
||
|
}
|
||
|
|
||
|
svg[data-marp-fitting="svg"] {
|
||
|
max-height: 580px;
|
||
|
}
|
||
|
|
||
|
h1,
|
||
|
h2,
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h6 {
|
||
|
margin: 0.5em 0 0 0;
|
||
|
color: var(--dracula-pink);
|
||
|
}
|
||
|
h1 strong,
|
||
|
h2 strong,
|
||
|
h3 strong,
|
||
|
h4 strong,
|
||
|
h5 strong,
|
||
|
h6 strong {
|
||
|
font-weight: inherit;
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
font-size: 1.8em;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
font-size: 1.5em;
|
||
|
}
|
||
|
|
||
|
h3 {
|
||
|
font-size: 1.3em;
|
||
|
}
|
||
|
|
||
|
h4 {
|
||
|
font-size: 1.1em;
|
||
|
}
|
||
|
|
||
|
h5 {
|
||
|
font-size: 1em;
|
||
|
}
|
||
|
|
||
|
h6 {
|
||
|
font-size: 0.9em;
|
||
|
}
|
||
|
|
||
|
p,
|
||
|
blockquote {
|
||
|
margin: 1em 0 0 0;
|
||
|
}
|
||
|
|
||
|
ul > li,
|
||
|
ol > li {
|
||
|
margin: 0.3em 0 0 0;
|
||
|
color: var(--dracula-cyan);
|
||
|
}
|
||
|
ul > li > p,
|
||
|
ol > li > p {
|
||
|
margin: 0.6em 0 0 0;
|
||
|
}
|
||
|
|
||
|
code {
|
||
|
display: inline-block;
|
||
|
font-family: "IBM Plex Mono", monospace;
|
||
|
font-size: 0.8em;
|
||
|
letter-spacing: 0;
|
||
|
margin: -0.1em 0.15em;
|
||
|
padding: 0.1em 0.2em;
|
||
|
vertical-align: baseline;
|
||
|
color: var(--dracula-green);
|
||
|
}
|
||
|
|
||
|
pre {
|
||
|
display: block;
|
||
|
margin: 1em 0 0 0;
|
||
|
min-height: 1em;
|
||
|
overflow: visible;
|
||
|
}
|
||
|
pre code {
|
||
|
box-sizing: border-box;
|
||
|
margin: 0;
|
||
|
min-width: 100%;
|
||
|
padding: 0.5em;
|
||
|
font-size: 0.7em;
|
||
|
}
|
||
|
pre code svg[data-marp-fitting="svg"] {
|
||
|
max-height: calc(580px - 1em);
|
||
|
}
|
||
|
|
||
|
blockquote {
|
||
|
margin: 1em 0 0 0;
|
||
|
padding: 0 1em;
|
||
|
position: relative;
|
||
|
color: var(--dracula-orange);
|
||
|
}
|
||
|
blockquote::after,
|
||
|
blockquote::before {
|
||
|
content: "“";
|
||
|
display: block;
|
||
|
font-family: "Times New Roman", serif;
|
||
|
font-weight: bold;
|
||
|
position: absolute;
|
||
|
color: var(--dracula-green);
|
||
|
}
|
||
|
blockquote::before {
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
}
|
||
|
blockquote::after {
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
transform: rotate(180deg);
|
||
|
}
|
||
|
blockquote > *:first-child {
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
|
||
|
mark {
|
||
|
background: transparent;
|
||
|
}
|
||
|
|
||
|
table {
|
||
|
border-spacing: 0;
|
||
|
border-collapse: collapse;
|
||
|
margin: 1em 0 0 0;
|
||
|
}
|
||
|
table th,
|
||
|
table td {
|
||
|
padding: 0.2em 0.4em;
|
||
|
border-width: 1px;
|
||
|
border-style: solid;
|
||
|
}
|
||
|
|
||
|
section {
|
||
|
font-size: 35px;
|
||
|
font-family: "IBM Plex Sans";
|
||
|
line-height: 1.35;
|
||
|
letter-spacing: 1.25px;
|
||
|
padding: 70px;
|
||
|
color: var(--dracula-foreground);
|
||
|
background-color: var(--dracula-background);
|
||
|
}
|
||
|
section > *:first-child,
|
||
|
section > header:first-child + * {
|
||
|
margin-top: 0;
|
||
|
}
|
||
|
section a,
|
||
|
section mark {
|
||
|
color: var(--dracula-red);
|
||
|
}
|
||
|
section code {
|
||
|
background: var(--dracula-current-line);
|
||
|
color: var(--dracula-current-green);
|
||
|
}
|
||
|
section h1 strong,
|
||
|
section h2 strong,
|
||
|
section h3 strong,
|
||
|
section h4 strong,
|
||
|
section h5 strong,
|
||
|
section h6 strong {
|
||
|
color: var(--dracula-current-line);
|
||
|
}
|
||
|
section pre > code {
|
||
|
background: var(--dracula-current-line);
|
||
|
}
|
||
|
section header,
|
||
|
section footer,
|
||
|
section section::after,
|
||
|
section blockquote::before,
|
||
|
section blockquote::after {
|
||
|
color: var(--dracula-comment);
|
||
|
}
|
||
|
section table th,
|
||
|
section table td {
|
||
|
border-color: var(--dracula-current-line);
|
||
|
}
|
||
|
section table thead th {
|
||
|
background: var(--dracula-current-line);
|
||
|
color: var(--dracula-yellow);
|
||
|
}
|
||
|
section table tbody > tr:nth-child(even) td,
|
||
|
section table tbody > tr:nth-child(even) th {
|
||
|
background: var(--dracula-current-line);
|
||
|
}
|
||
|
|
||
|
header,
|
||
|
footer,
|
||
|
section::after {
|
||
|
box-sizing: border-box;
|
||
|
font-size: 66%;
|
||
|
height: 70px;
|
||
|
line-height: 50px;
|
||
|
overflow: hidden;
|
||
|
padding: 10px 25px;
|
||
|
position: absolute;
|
||
|
color: var(--dracula-comment);
|
||
|
}
|
||
|
|
||
|
header {
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
top: 0;
|
||
|
}
|
||
|
|
||
|
footer {
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
}
|
||
|
|
||
|
section::after {
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
font-size: 80%;
|
||
|
}
|