hence/presentation/dracula.css

330 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%;
}