407 lines
7 KiB
CSS
407 lines
7 KiB
CSS
|
html {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: "Inter", -apple-system, "avenir next", avenir, roboto, noto, ubuntu, "helvetica neue", helvetica, sans-serif;
|
||
|
|
font-size: 1rem;
|
||
|
|
line-height: 1.5;
|
||
|
|
margin: 0;
|
||
|
|
min-height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre, code {
|
||
|
|
font-family: "Roboto Mono", "Courier New", monospace;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2, h3, h4, h5 {
|
||
|
|
margin-top: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
hr {
|
||
|
|
margin: 1em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
hr.page-break {
|
||
|
|
text-align: center;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
hr.page-break:before {
|
||
|
|
content: "-----";
|
||
|
|
}
|
||
|
|
hr.page-break:after {
|
||
|
|
content: attr(data-content) "-----";
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 1em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
margin: 0.4em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.w {
|
||
|
|
max-width: 720px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 4em 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
table, th, td {
|
||
|
|
width: 100%;
|
||
|
|
border: thin solid var(--border);
|
||
|
|
border-collapse: collapse;
|
||
|
|
padding: 0.4em;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.highlighter-rouge pre code, pre code.highlighter-rouge {
|
||
|
|
display: block;
|
||
|
|
overflow-x: auto;
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
blockquote {
|
||
|
|
font-style: italic;
|
||
|
|
border: thin solid var(--border);
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
blockquote p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
max-width: 100%;
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
html[data-theme=dark] html, html[data-theme=dark] body {
|
||
|
|
--bg: #24273a;
|
||
|
|
--bg-secondary: #24273a;
|
||
|
|
--border: #cad3f5;
|
||
|
|
--headings: #b8c0e0;
|
||
|
|
--text: #cad3f5;
|
||
|
|
--text-secondary: ;
|
||
|
|
--links: #c6a0f6;
|
||
|
|
--highlight: #24273a;
|
||
|
|
--code-text: #f5bde6;
|
||
|
|
--share-text: #24273a;
|
||
|
|
}
|
||
|
|
|
||
|
|
html[data-theme=light] html, html[data-theme=light] body {
|
||
|
|
--bg: #eff1f5;
|
||
|
|
--bg-secondary: #eff1f5;
|
||
|
|
--border: #4c4f69;
|
||
|
|
--headings: #5c5f77;
|
||
|
|
--text: #4c4f69;
|
||
|
|
--text-secondary: ;
|
||
|
|
--links: #8839ef;
|
||
|
|
--highlight: #eff1f5;
|
||
|
|
--code-text: #ea76cb;
|
||
|
|
--share-text: #eff1f5;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
body[data-theme=auto] html, body[data-theme=auto] body {
|
||
|
|
--bg: #24273a;
|
||
|
|
--bg-secondary: #24273a;
|
||
|
|
--border: #cad3f5;
|
||
|
|
--headings: #b8c0e0;
|
||
|
|
--text: #cad3f5;
|
||
|
|
--text-secondary: ;
|
||
|
|
--links: #c6a0f6;
|
||
|
|
--highlight: #24273a;
|
||
|
|
--code-text: #f5bde6;
|
||
|
|
--share-text: #24273a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
body[data-theme=auto] html, body[data-theme=auto] body {
|
||
|
|
--bg: #eff1f5;
|
||
|
|
--bg-secondary: #eff1f5;
|
||
|
|
--border: #4c4f69;
|
||
|
|
--headings: #5c5f77;
|
||
|
|
--text: #4c4f69;
|
||
|
|
--text-secondary: ;
|
||
|
|
--links: #8839ef;
|
||
|
|
--highlight: #eff1f5;
|
||
|
|
--code-text: #ea76cb;
|
||
|
|
--share-text: #eff1f5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
html, body {
|
||
|
|
background-color: var(--bg);
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2, h3, h4, h5, h6 {
|
||
|
|
color: var(--headings);
|
||
|
|
}
|
||
|
|
|
||
|
|
p, strong, b, em, small, li, hr, table, figcaption {
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight, pre code, blockquote {
|
||
|
|
border-radius: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
blockquote {
|
||
|
|
background-color: var(--bg-secondary);
|
||
|
|
border: 1px var(--border) solid;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: var(--links);
|
||
|
|
}
|
||
|
|
|
||
|
|
*:target {
|
||
|
|
background-color: var(--bg-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
html.transition,
|
||
|
|
html.transition *,
|
||
|
|
html.transition *:before,
|
||
|
|
html.transition *:after {
|
||
|
|
transition: all 250ms !important;
|
||
|
|
transition-delay: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme-toggle {
|
||
|
|
color: var(--text);
|
||
|
|
background-color: transparent;
|
||
|
|
padding: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 1em;
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
border: 2px transparent solid;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme-toggle:hover {
|
||
|
|
color: var(--links);
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme-toggle:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dashed {
|
||
|
|
border-top: 1px var(--text) dashed;
|
||
|
|
margin: 0.5em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
mark {
|
||
|
|
padding: 0.4em;
|
||
|
|
background-color: var(--highlight);
|
||
|
|
font-size: 0.6em;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-date {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
margin-top: 1rem;
|
||
|
|
font-size: 0.7em;
|
||
|
|
font-family: "Roboto Mono", "Courier New", monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.home-date {
|
||
|
|
font-family: "Roboto Mono", "Courier New", monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-list-item a {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-bold {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-upcase {
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
p code, li code {
|
||
|
|
background-color: var(--bg-secondary);
|
||
|
|
padding: 0.2rem;
|
||
|
|
color: var(--code-text);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-title {
|
||
|
|
margin-bottom: -1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project-title {
|
||
|
|
margin-bottom: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.credits {
|
||
|
|
font-size: 0.8em;
|
||
|
|
color: var(--text);
|
||
|
|
margin: 8em auto -4em auto;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.credits a {
|
||
|
|
color: var(--text);
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.credits a:hover {
|
||
|
|
color: var(--links);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
font-family: "Roboto Mono", "Courier New", monospace;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
padding: 0.4em 1em;
|
||
|
|
margin-right: 0.5em;
|
||
|
|
border-radius: 1em;
|
||
|
|
background-color: var(--bg-secondary);
|
||
|
|
font-size: 0.7em;
|
||
|
|
font-weight: bold;
|
||
|
|
text-transform: lowercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.horizontal-list {
|
||
|
|
display: flex;
|
||
|
|
margin-top: 0em;
|
||
|
|
margin-left: -40px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
ul.horizontal-list li {
|
||
|
|
display: inline;
|
||
|
|
margin-right: 1em;
|
||
|
|
}
|
||
|
|
ul.horizontal-list li a {
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
padding: 1em;
|
||
|
|
border: 1px var(--text) solid;
|
||
|
|
width: 11em;
|
||
|
|
height: auto;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 1em;
|
||
|
|
align-items: center;
|
||
|
|
background-color: var(--bg-secondary);
|
||
|
|
margin-bottom: 0.8em;
|
||
|
|
border-radius: 0.5em;
|
||
|
|
}
|
||
|
|
.card .header {
|
||
|
|
color: var(--links);
|
||
|
|
}
|
||
|
|
.card .body {
|
||
|
|
font-size: 0.8em;
|
||
|
|
}
|
||
|
|
.card hr {
|
||
|
|
margin: 0.5em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive cards - one column layout on small screens */
|
||
|
|
@media screen and (max-width: 600px) {
|
||
|
|
ul.horizontal-list li.card {
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 1em;
|
||
|
|
margin-left: 1em;
|
||
|
|
}
|
||
|
|
ul.horizontal-list li.card a, ul.horizontal-list li.card .header {
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.highlight .hll {
|
||
|
|
background-color: #363a4f;
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight {
|
||
|
|
background: #363a4f;
|
||
|
|
color: #cad3f5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight .c {
|
||
|
|
color: #8087a2;
|
||
|
|
font-style: italic;
|
||
|
|
} /* Comment */
|
||
|
|
.highlight .err {
|
||
|
|
color: #ed8796;
|
||
|
|
} /* Error */
|
||
|
|
.highlight .k {
|
||
|
|
color: #ed8796;
|
||
|
|
font-style: italic;
|
||
|
|
} /* Keyword */
|
||
|
|
.highlight .l {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal */
|
||
|
|
.highlight .n {
|
||
|
|
color: #ee99a0;
|
||
|
|
} /* Name */
|
||
|
|
.highlight .o {
|
||
|
|
color: #8bd5ca;
|
||
|
|
} /* Operator */
|
||
|
|
.highlight .p {
|
||
|
|
color: #ed8796;
|
||
|
|
} /* Punctuation */
|
||
|
|
.highlight .m {
|
||
|
|
color: #f5a97f;
|
||
|
|
} /* Literal.Number */
|
||
|
|
.highlight .s {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String */
|
||
|
|
.highlight .na {
|
||
|
|
color: #6699cc;
|
||
|
|
} /* Name.Attribute */
|
||
|
|
.highlight .nb {
|
||
|
|
color: #c6a0f6;
|
||
|
|
} /* Name.Builtin */
|
||
|
|
.highlight .nf {
|
||
|
|
color: #8aadf4;
|
||
|
|
} /* Name.Function */
|
||
|
|
.highlight .sa {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String.Affix */
|
||
|
|
.highlight .sb {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String.Backtick */
|
||
|
|
.highlight .sc {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String.Char */
|
||
|
|
.highlight .dl {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String.Delimiter */
|
||
|
|
.highlight .sd {
|
||
|
|
color: #8087a2;
|
||
|
|
} /* Literal.String.Doc */
|
||
|
|
.highlight .s2 {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String.Double */
|
||
|
|
.highlight .se {
|
||
|
|
color: #f5a97f;
|
||
|
|
} /* Literal.String.Escape */
|
||
|
|
.highlight .sh {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String.Heredoc */
|
||
|
|
.highlight .si {
|
||
|
|
color: #c6a0f6;
|
||
|
|
} /* Literal.String.Interpol */
|
||
|
|
.highlight .sx {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String.Other */
|
||
|
|
.highlight .sr {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String.Regex */
|
||
|
|
.highlight .s1 {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String.Single */
|
||
|
|
.highlight .ss {
|
||
|
|
color: #a6da95;
|
||
|
|
} /* Literal.String.Symbol */
|
||
|
|
|
||
|
|
/*# sourceMappingURL=main.css.map */
|