the home site for me: also iteration 3 or 4 of my site

feat: consolidate all css into a single imported sass file

+1 -3
config.toml
···
title = "Zera"
description = "The home site of Kieran Klukas"
-
compile_sass = false
+
compile_sass = true
minify_html = true
generate_feeds = true
default_language = "en"
···
highlight_code = true
highlight_theme = "css"
-
-
extra_syntaxes_and_themes = ["highlighting", "highlighting/catppuccin"]
[slugify]
paths = "on"
+4
sass/css/main.sass
···
+
@import "reset"
+
@import "suCSS"
+
@import "syntax-theme"
+
@import "mods"
+140
sass/css/mods.css
···
+
#nav-bar {
+
padding: 0.625rem 0 0 0;
+
display: flex;
+
flex-direction: row;
+
gap: 0.25rem;
+
flex-wrap: wrap;
+
justify-content: flex-end;
+
align-items: center;
+
align-content: flex-end;
+
}
+
+
#footer-container {
+
display: flex;
+
flex-wrap: wrap;
+
justify-content: space-between;
+
align-items: center;
+
}
+
+
.accent-data {
+
color: var(--accent);
+
}
+
+
.theme-transition {
+
transition: color 0.3s ease, background-color 0.3s ease;
+
}
+
+
.tags-data {
+
display: flex;
+
flex-direction: column;
+
flex-wrap: wrap;
+
justify-content: flex-end;
+
align-items: flex-start;
+
align-content: flex-end;
+
}
+
+
.title-list li {
+
margin-bottom: 0.375rem;
+
}
+
+
/* icons settings */
+
.icons {
+
width: 1.3rem;
+
height: 1.3rem;
+
aspect-ratio: 1/1;
+
display: inline-block;
+
vertical-align: middle;
+
color: var(--text);
+
fill: var(--text);
+
background-color: transparent;
+
cursor: pointer;
+
}
+
+
.icons:hover {
+
background-color: transparent;
+
color: var(--accent);
+
}
+
+
/* footnotes */
+
.footnote-definition {
+
margin: 0 0 0 0.125rem;
+
}
+
+
.footnote-definition-label {
+
color: var(--accent);
+
}
+
+
.footnote-definition p {
+
display: inline;
+
margin: 0.625rem 0 0 0.625rem;
+
}
+
+
/* general classes */
+
.no-style {
+
padding: 0;
+
margin: 0;
+
border: none;
+
border-radius: 0;
+
}
+
+
.no-style:hover {
+
background-color: transparent;
+
color: var(--accent);
+
}
+
+
.center {
+
text-align: center;
+
}
+
+
.center img {
+
display: block;
+
margin: 1rem auto;
+
}
+
+
.float-right {
+
float: right;
+
}
+
+
.float-left {
+
float: left;
+
}
+
+
div code,
+
li code,
+
p code {
+
color: var(--text);
+
background-color: var(--bg-light);
+
}
+
+
pre {
+
border-top-left-radius: 0;
+
}
+
+
blockquote {
+
padding-top: 0.2rem;
+
padding-bottom: 0.2rem;
+
}
+
+
blockquote:has(+ pre) {
+
display: inline-block;
+
border: none;
+
font-family: "code" !important;
+
font-size: 0.8rem;
+
font-weight: 600;
+
margin: 0;
+
margin-bottom: 0.2rem;
+
margin-block: 0 0;
+
border-top-left-radius: 5px;
+
border-top-right-radius: 5px;
+
padding-left: 0.75rem;
+
padding-right: 0.75rem;
+
padding-top: 0.25rem;
+
padding-bottom: 0.25rem;
+
position: relative;
+
background-color: var(--accent);
+
}
+
+
blockquote:has(+ pre) p {
+
margin: 0;
+
color: var(--accent-text);
+
}
+118
sass/css/reset.css
···
+
/* Box sizing rules */
+
*,
+
*::before,
+
*::after {
+
box-sizing: border-box;
+
-webkit-box-sizing: border-box;
+
}
+
+
* {
+
margin: 0;
+
}
+
+
/* Prevent font size inflation */
+
html {
+
-moz-text-size-adjust: none;
+
-webkit-text-size-adjust: none;
+
text-size-adjust: none;
+
}
+
+
/* Remove default margin in favour of better control in authored CSS */
+
body,
+
h1,
+
h2,
+
h3,
+
h4,
+
p,
+
figure,
+
blockquote,
+
dl,
+
dd {
+
margin-block-end: 0;
+
}
+
+
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+
ul,
+
ol,
+
ul[role="list"],
+
ol[role="list"] {
+
list-style: none;
+
}
+
+
/* Set core body defaults */
+
body {
+
min-height: 100vh;
+
line-height: 1.5;
+
-webkit-font-smoothing: antialiased;
+
}
+
+
/* Set shorter line heights on headings and interactive elements */
+
h1,
+
h2,
+
h3,
+
h4,
+
button,
+
input,
+
label {
+
line-height: 1.1;
+
}
+
+
/* Balance text wrapping on headings */
+
h1,
+
h2,
+
h3,
+
h4 {
+
text-wrap: balance;
+
}
+
+
p,
+
h1,
+
h2,
+
h3,
+
h4,
+
h5,
+
h6 {
+
overflow-wrap: break-word;
+
}
+
+
/* A elements that don't have a class get default styles */
+
a:not([class]) {
+
text-decoration-skip-ink: auto;
+
}
+
+
/* Make images easier to work with */
+
img,
+
picture,
+
video,
+
canvas,
+
svg {
+
max-width: 100%;
+
display: block;
+
}
+
+
/* Inherit fonts for inputs and buttons */
+
input,
+
button,
+
textarea,
+
select,
+
progress {
+
appearance: none;
+
-webkit-appearance: none;
+
-moz-appearance: none;
+
font: inherit;
+
}
+
+
/* Make sure textareas without a rows attribute are not tiny */
+
textarea:not([rows]) {
+
min-height: 10em;
+
}
+
+
/* Anything that has been anchored to should have extra scroll margin */
+
:target {
+
scroll-margin-block: 5ex;
+
}
+
+
#root,
+
#__next {
+
isolation: isolate;
+
}
+674
sass/css/suCSS.css
···
+
:root,
+
::backdrop {
+
/* set sans-serif & mono fonts */
+
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
+
"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
+
"Helvetica Neue", sans-serif;
+
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+
--standard-border-radius: 5px;
+
+
/* default colors */
+
--bg: #eeeeee;
+
--bg-light: #cbcdcd;
+
--text: #41474e;
+
--text-light: #646868;
+
--accent: #d26878;
+
--accent-light: #e08f67;
+
--accent-text: var(--bg);
+
--border: #646868;
+
--link: #5690af;
+
}
+
+
/* theme media queries */
+
@media (prefers-color-scheme: dark) {
+
:root,
+
::backdrop {
+
color-scheme: dark;
+
--bg: #222529;
+
--bg-light: #464949;
+
--text: #d6d6d6;
+
--text-light: #dbd5bc;
+
--accent: #78b6ad;
+
--accent-light: #87c9e5;
+
--accent-text: var(--bg);
+
--border: #dbd5bc;
+
--link: #e2aea2;
+
}
+
img,
+
video {
+
opacity: 0.8;
+
}
+
}
+
+
@media (prefers-color-scheme: light) {
+
:root,
+
::backdrop {
+
color-scheme: light;
+
--bg: #eeeeee;
+
--bg-light: #cbcdcd;
+
--text: #41474e;
+
--text-light: #646868;
+
--accent: #d26878;
+
--accent-light: #e08f67;
+
--accent-text: var(--bg);
+
--border: #646868;
+
--link: #5690af;
+
}
+
}
+
+
[data-theme="light"] {
+
/* default (light) theme */
+
color-scheme: light;
+
--bg: #eeeeee;
+
--bg-light: #cbcdcd;
+
--text: #41474e;
+
--text-light: #646868;
+
--accent: #d26878;
+
--accent-light: #e08f67;
+
--accent-text: var(--bg);
+
--border: #646868;
+
--link: #5690af;
+
}
+
+
[data-theme="dark"] {
+
color-scheme: dark;
+
--bg: #222529;
+
--bg-light: #464949;
+
--text: #d6d6d6;
+
--text-light: #dbd5bc;
+
--accent: #78b6ad;
+
--accent-light: #87c9e5;
+
--accent-text: var(--bg);
+
--border: #dbd5bc;
+
--link: #e2aea2;
+
}
+
+
::selection,
+
::-moz-selection {
+
color: var(--bg);
+
background: var(--accent);
+
}
+
+
/* chromium scrollbars */
+
::-webkit-scrollbar {
+
width: 8px;
+
height: 8px;
+
overflow: visible;
+
}
+
::-webkit-scrollbar-thumb {
+
background: var(--accent);
+
width: 12px;
+
}
+
::-webkit-scrollbar-track {
+
background: var(--bg-light);
+
}
+
+
/* firefox scrollbars */
+
* {
+
scrollbar-color: var(--accent) var(--bg-light);
+
scrollbar-width: thin;
+
scrollbar-height: thin;
+
}
+
+
html {
+
color-scheme: light dark;
+
font-family: var(--mono-font);
+
scroll-behavior: smooth;
+
}
+
+
body {
+
min-height: 100svh;
+
color: var(--text);
+
background-color: var(--bg);
+
font-size: 1rem;
+
display: grid;
+
grid-template-columns: 1fr min(45rem, 90%) 1fr;
+
grid-template-rows: auto 1fr auto;
+
grid-row-gap: 0.625rem;
+
}
+
body > * {
+
grid-column: 2;
+
}
+
+
body > footer {
+
color: var(--text-light);
+
font-size: 0.875;
+
}
+
+
/* Format headers */
+
h1 {
+
font-size: 2rem;
+
}
+
h2 {
+
font-size: 1.75rem;
+
}
+
h3 {
+
font-size: 1.5rem;
+
}
+
h4 {
+
font-size: 1.25rem;
+
}
+
h5 {
+
font-size: 1rem;
+
}
+
h6 {
+
font-size: 0.75rem;
+
}
+
+
h1,
+
h2,
+
h3,
+
h4,
+
h5,
+
h6 {
+
margin: 0.5em 0 0.5em 0;
+
}
+
+
/* Fix line height when title wraps */
+
h1,
+
h2,
+
h3 {
+
line-height: 1.1;
+
}
+
+
h1::before,
+
h2::before,
+
h3::before,
+
h4::before,
+
h5::before,
+
h6::before {
+
color: var(--accent);
+
content: "# ";
+
}
+
+
@media only screen and (max-width: 720px) {
+
h1 {
+
font-size: 1.5rem;
+
}
+
h2 {
+
font-size: 1.25rem;
+
}
+
h3 {
+
font-size: 1rem;
+
}
+
h4 {
+
font-size: 0.75rem;
+
}
+
h5 {
+
font-size: 0.5rem;
+
}
+
h6 {
+
font-size: 0.25rem;
+
}
+
}
+
+
p {
+
margin: 1rem 0;
+
}
+
+
/* format links */
+
a,
+
a:visited {
+
text-decoration: none;
+
border-radius: 0.125rem;
+
color: var(--link);
+
}
+
+
a:hover {
+
background-color: var(--link);
+
color: var(--bg);
+
}
+
+
/* format lists */
+
ul {
+
list-style: none;
+
margin-top: 0.25rem;
+
margin-bottom: 0.25rem;
+
}
+
+
ol {
+
list-style-type: decimal;
+
margin-top: 0.25rem;
+
margin-bottom: 0.25rem;
+
}
+
+
li {
+
margin-bottom: 0.125rem;
+
}
+
+
ul li::marker {
+
content: "» ";
+
color: var(--accent);
+
}
+
+
ul li:hover::marker {
+
content: "# ";
+
font-weight: 700;
+
color: var(--link);
+
}
+
+
ol li::marker {
+
color: var(--accent);
+
}
+
+
ol li:hover::marker {
+
font-weight: 700;
+
color: var(--link);
+
}
+
+
/* Use flexbox to allow items to wrap, as needed */
+
header > nav ul,
+
header > nav ol {
+
display: flex;
+
flex-direction: row;
+
flex-wrap: wrap;
+
align-content: space-around;
+
justify-content: right;
+
list-style-type: none;
+
margin: 0.5rem 0 0 0;
+
padding: 0;
+
gap: 1rem;
+
}
+
+
/* List items are inline elements, make them behave more like blocks */
+
header > nav ul li,
+
header > nav ol li {
+
display: inline-block;
+
}
+
+
/* Consolidate box styling */
+
aside,
+
details,
+
pre,
+
progress {
+
background-color: var(--bg-light);
+
border-radius: var(--standard-border-radius);
+
}
+
+
aside {
+
font-size: 1rem;
+
width: 35%;
+
padding: 0 10px;
+
margin-inline-start: 10px;
+
float: right;
+
}
+
*[dir="rtl"] aside {
+
float: left;
+
}
+
+
/* make aside full-width on mobile */
+
@media only screen and (max-width: 720px) {
+
aside {
+
width: 100%;
+
float: none;
+
margin-inline-start: 0;
+
}
+
}
+
+
details {
+
padding: 0.5rem;
+
}
+
+
summary {
+
cursor: pointer;
+
font-weight: bold;
+
word-break: break-all;
+
}
+
+
details[open] > summary + * {
+
margin-top: 0;
+
}
+
+
details[open] > summary {
+
margin-bottom: 0.5rem;
+
}
+
+
details[open] > :last-child {
+
margin-bottom: 0;
+
}
+
+
/* Format tables */
+
table {
+
border-collapse: collapse;
+
margin: 1.5rem 0;
+
display: block;
+
overflow-x: auto;
+
white-space: nowrap;
+
}
+
+
td,
+
th {
+
border: 1px solid var(--border);
+
text-align: start;
+
padding: 0.5rem;
+
}
+
+
th {
+
background-color: var(--bg-light);
+
font-weight: bold;
+
}
+
+
tr:nth-child(even) {
+
background-color: var(--bg-light);
+
}
+
+
table caption {
+
text-align: left;
+
font-weight: bold;
+
margin: 0 0 0.4rem 1rem;
+
}
+
+
/* format forms */
+
fieldset {
+
border: 1px dashed var(--accent);
+
border-radius: var(--standard-border-radius);
+
}
+
+
fieldset > legend {
+
color: var(--accent);
+
}
+
+
textarea,
+
select,
+
input,
+
button,
+
.button {
+
font-size: inherit;
+
font-family: inherit;
+
padding: 0.25rem;
+
border-radius: var(--standard-border-radius);
+
box-shadow: none;
+
max-width: 100%;
+
display: inline-block;
+
}
+
+
textarea,
+
select,
+
input {
+
color: var(--text);
+
background-color: var(--bg);
+
border: 1px dashed var(--border);
+
}
+
+
label {
+
display: block;
+
}
+
+
fieldset label {
+
margin: 0 0 0.3rem 0;
+
}
+
+
textarea {
+
max-width: 43.5rem;
+
resize: both;
+
}
+
+
textarea:not([cols]) {
+
width: 100%;
+
}
+
+
@media only screen and (max-width: 720px) {
+
textarea,
+
select,
+
input {
+
width: 100%;
+
}
+
}
+
+
/* format buttons */
+
button,
+
.button,
+
a.button,
+
input[type="submit"],
+
input[type="reset"],
+
input[type="button"],
+
label[type="button"] {
+
border: 1px solid var(--accent);
+
background-color: var(--accent);
+
color: var(--accent-text);
+
padding: 0.5rem 0.9rem;
+
text-decoration: none;
+
line-height: normal;
+
}
+
+
.button[aria-disabled="true"],
+
input:disabled,
+
textarea:disabled,
+
select:disabled,
+
button[disabled] {
+
cursor: not-allowed;
+
background-color: var(--bg-light);
+
border-color: var(--bg-light);
+
color: var(--text-light);
+
}
+
+
input[type="range"] {
+
padding: 0;
+
color: var(--accent);
+
}
+
+
abbr[title] {
+
cursor: help;
+
text-decoration-line: underline;
+
text-decoration-style: dotted;
+
}
+
+
button:enabled:hover,
+
.button:not([aria-disabled="true"]):hover,
+
input[type="submit"]:enabled:hover,
+
input[type="reset"]:enabled:hover,
+
input[type="button"]:enabled:hover,
+
label[type="button"]:hover {
+
background-color: var(--accent-light);
+
border-color: var(--accent-light);
+
cursor: pointer;
+
}
+
+
.button:focus-visible,
+
button:focus-visible:where(:enabled),
+
input:enabled:focus-visible:where(
+
[type="submit"],
+
[type="reset"],
+
[type="button"]
+
) {
+
outline: 2px solid var(--accent);
+
outline-offset: 1px;
+
}
+
+
/* checkbox and radio button style */
+
input[type="checkbox"],
+
input[type="radio"] {
+
vertical-align: middle;
+
position: relative;
+
width: min-content;
+
width: 14px;
+
height: 14px;
+
}
+
+
input[type="checkbox"] + label,
+
input[type="radio"] + label {
+
display: inline-block;
+
}
+
+
input[type="radio"] {
+
border-radius: 100%;
+
}
+
+
input[type="checkbox"]:checked,
+
input[type="radio"]:checked {
+
background-color: var(--accent);
+
}
+
+
@media only screen and (max-width: 720px) {
+
textarea,
+
select,
+
input {
+
width: 100%;
+
}
+
}
+
+
input[type="color"] {
+
height: 2.5rem;
+
padding: 0.2rem;
+
}
+
+
input[type="file"] {
+
border: 0;
+
}
+
+
/* misc body elements */
+
hr {
+
border: 1px dashed var(--accent);
+
margin: 0.5rem 0 0.5rem 0;
+
}
+
+
mark {
+
padding: 0 0.25em 0 0.25em;
+
border-radius: var(--standard-border-radius);
+
background-color: var(--accent);
+
color: var(--bg);
+
}
+
+
mark a {
+
color: var(--link);
+
}
+
+
img,
+
video {
+
max-width: 90%;
+
height: auto;
+
padding: 0.125rem;
+
border: dashed 2px var(--accent);
+
border-radius: 15px;
+
}
+
+
figure {
+
margin: 0;
+
display: block;
+
overflow-x: auto;
+
}
+
+
figcaption {
+
text-align: left;
+
font-size: 0.875rem;
+
color: var(--text-light);
+
margin: 0 0 1rem 1rem;
+
}
+
+
blockquote {
+
margin: 0 0 0 1.25rem;
+
padding: 0.5rem 0 0 0.5rem;
+
border-inline-start: 0.375rem solid var(--accent);
+
color: var(--text-light);
+
font-style: italic;
+
}
+
+
cite {
+
font-size: 0.875rem;
+
color: var(--text-light);
+
font-style: normal;
+
}
+
+
dt {
+
color: var(--text-light);
+
}
+
+
code,
+
pre,
+
pre span,
+
kbd,
+
samp {
+
font-family: var(--mono-font);
+
}
+
+
pre {
+
border: 1px solid var(--accent);
+
max-height: 30rem;
+
padding: 0.625rem;
+
overflow: auto;
+
font-style: monospace;
+
white-space: pre-wrap;
+
}
+
+
p code,
+
li code,
+
div code {
+
padding: 0 0.125rem 0 0.125rem;
+
border-radius: 3px;
+
color: var(--bg);
+
background-color: var(--text);
+
}
+
+
pre code {
+
padding: 0;
+
border-radius: 0;
+
color: inherit;
+
background-color: inherit;
+
}
+
+
iframe {
+
max-width: 90%;
+
}
+
+
/* progress bars */
+
progress {
+
width: 100%;
+
}
+
+
progress:indeterminate {
+
background-color: var(--bg-light);
+
}
+
+
progress::-webkit-progress-bar {
+
border-radius: var(--standard-border-radius);
+
background-color: var(--bg-light);
+
}
+
+
progress::-webkit-progress-value {
+
border-radius: var(--standard-border-radius);
+
background-color: var(--accent);
+
}
+
+
progress::-moz-progress-bar {
+
border-radius: var(--standard-border-radius);
+
background-color: var(--accent);
+
transition-property: width;
+
transition-duration: 0.3s;
+
}
+
+
progress:indeterminate::-moz-progress-bar {
+
background-color: var(--bg-light);
+
}
+
+
dialog {
+
max-width: 40rem;
+
margin: auto;
+
}
+
+
dialog::backdrop {
+
background-color: var(--bg);
+
opacity: 0.8;
+
}
+
+
@media only screen and (max-width: 720px) {
+
dialog {
+
max-width: 100%;
+
margin: auto 1em;
+
}
+
}
+
+
/* superscript & subscript */
+
/* prevent scripts from affecting line-height. */
+
sup,
+
sub {
+
vertical-align: baseline;
+
position: relative;
+
}
+
+
sup {
+
top: -0.4em;
+
}
+
+
sub {
+
top: 0.3em;
+
}
+563
sass/css/syntax-theme.css
···
+
/*
+
* theme "Catppuccin" generated by syntect
+
*/
+
+
html[data-theme="light"] .z-code {
+
color: #4c4f69;
+
background-color: #f3f2f2;
+
}
+
+
html[data-theme="light"] .z-comment {
+
color: #9ca0b0;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-string {
+
color: #40a02b;
+
}
+
html[data-theme="light"] .z-string.z-regexp {
+
color: #fe640b;
+
}
+
html[data-theme="light"] .z-constant.z-numeric {
+
color: #fe640b;
+
}
+
html[data-theme="light"] .z-constant.z-language.z-boolean {
+
color: #fe640b;
+
font-weight: bold;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-constant.z-language {
+
color: #7287fd;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-support.z-function.z-builtin {
+
color: #fe640b;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-variable.z-other.z-constant {
+
color: #fe640b;
+
}
+
html[data-theme="light"] .z-keyword {
+
color: #d20f39;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-keyword.z-control.z-loop,
+
.z-keyword.z-control.z-conditional,
+
.z-keyword.z-control.z-c\+\+ {
+
color: #8839ef;
+
font-weight: bold;
+
}
+
html[data-theme="light"] .z-keyword.z-control.z-return,
+
.z-keyword.z-control.z-flow.z-return {
+
color: #ea76cb;
+
font-weight: bold;
+
}
+
html[data-theme="light"] .z-support.z-type.z-exception {
+
color: #fe640b;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-keyword.z-operator,
+
.z-punctuation.z-accessor {
+
color: #04a5e5;
+
font-weight: bold;
+
}
+
html[data-theme="light"] .z-punctuation.z-separator {
+
color: #179299;
+
}
+
html[data-theme="light"] .z-punctuation.z-terminator {
+
color: #179299;
+
}
+
html[data-theme="light"] .z-punctuation.z-section {
+
color: #7c7f93;
+
}
+
html[data-theme="light"] .z-keyword.z-control.z-import.z-include {
+
color: #179299;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-storage {
+
color: #d20f39;
+
}
+
html[data-theme="light"] .z-storage.z-type {
+
color: #df8e1d;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-storage.z-modifier {
+
color: #d20f39;
+
}
+
html[data-theme="light"] .z-entity.z-name.z-namespace,
+
.z-meta.z-path {
+
color: #dc8a78;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-storage.z-type.z-class {
+
color: #dc8a78;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-entity.z-name.z-label {
+
color: #1e66f5;
+
}
+
html[data-theme="light"] .z-keyword.z-declaration.z-class {
+
color: #d20f39;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-entity.z-name.z-class,
+
.z-meta.z-toc-list.z-full-identifier {
+
color: #04a5e5;
+
}
+
html[data-theme="light"] .z-entity.z-other.z-inherited-class {
+
color: #04a5e5;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-entity.z-name.z-function,
+
.z-variable.z-function {
+
color: #1e66f5;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-entity.z-name.z-function.z-preprocessor {
+
color: #d20f39;
+
}
+
html[data-theme="light"] .z-keyword.z-control.z-import {
+
color: #d20f39;
+
}
+
html[data-theme="light"] .z-entity.z-name.z-function.z-constructor,
+
.z-entity.z-name.z-function.z-destructor {
+
color: #7287fd;
+
}
+
html[data-theme="light"] .z-variable.z-parameter.z-function {
+
color: #dc8a78;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-keyword.z-declaration.z-function {
+
color: #e64553;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-support.z-function {
+
color: #04a5e5;
+
}
+
html[data-theme="light"] .z-support.z-constant {
+
color: #1e66f5;
+
}
+
html[data-theme="light"] .z-support.z-type,
+
.z-support.z-class {
+
color: #1e66f5;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-variable.z-function {
+
color: #1e66f5;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-variable.z-parameter {
+
color: #dc8a78;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-variable.z-other {
+
color: #4c4f69;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-variable.z-other.z-member {
+
color: #dc8a78;
+
}
+
html[data-theme="light"] .z-variable.z-language {
+
color: #179299;
+
}
+
html[data-theme="light"] .z-entity.z-name.z-tag {
+
color: #fe640b;
+
}
+
html[data-theme="light"] .z-entity.z-other.z-attribute-name {
+
color: #8839ef;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-punctuation.z-definition.z-tag {
+
color: #e64553;
+
}
+
html[data-theme="light"] .z-markup.z-underline.z-link.z-markdown {
+
color: #dc8a78;
+
text-decoration: underline;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-meta.z-link.z-inline.z-description {
+
color: #7287fd;
+
font-weight: bold;
+
}
+
html[data-theme="light"] .z-comment.z-block.z-markdown,
+
.z-meta.z-code-fence,
+
.z-markup.z-raw.z-code-fence,
+
.z-markup.z-raw.z-inline {
+
color: #179299;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-punctuation.z-definition.z-heading,
+
.z-entity.z-name.z-section {
+
color: #1e66f5;
+
font-weight: bold;
+
}
+
html[data-theme="light"] .z-markup.z-italic {
+
color: #e64553;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-markup.z-bold {
+
color: #e64553;
+
font-weight: bold;
+
}
+
html[data-theme="light"] .z-constant.z-character.z-escape {
+
color: #ea76cb;
+
}
+
html[data-theme="light"]
+
.z-source.z-shell.z-bash
+
.z-meta.z-function.z-shell
+
.z-meta.z-compound.z-shell
+
.z-meta.z-function-call.z-identifier.z-shell {
+
color: #ea76cb;
+
}
+
html[data-theme="light"] .z-variable.z-language.z-shell {
+
color: #d20f39;
+
font-style: italic;
+
}
+
html[data-theme="light"]
+
.z-source.z-lua
+
.z-meta.z-function.z-lua
+
.z-meta.z-block.z-lua
+
.z-meta.z-mapping.z-value.z-lua
+
.z-meta.z-mapping.z-key.z-lua
+
.z-string.z-unquoted.z-key.z-lua {
+
color: #7287fd;
+
font-style: italic;
+
}
+
html[data-theme="light"]
+
.z-source.z-lua
+
.z-meta.z-function.z-lua
+
.z-meta.z-block.z-lua
+
.z-meta.z-mapping.z-key.z-lua
+
.z-string.z-unquoted.z-key.z-lua {
+
color: #dd7878;
+
}
+
html[data-theme="light"] .z-entity.z-name.z-constant.z-java {
+
color: #179299;
+
}
+
html[data-theme="light"] .z-support.z-type.z-property-name.z-css {
+
color: #dd7878;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-support.z-constant.z-property-value.z-css {
+
color: #4c4f69;
+
}
+
html[data-theme="light"] .z-constant.z-numeric.z-suffix.z-css,
+
.z-keyword.z-other.z-unit.z-css {
+
color: #179299;
+
font-style: italic;
+
}
+
html[data-theme="light"] .z-variable.z-other.z-custom-property.z-name.z-css,
+
.z-support.z-type.z-custom-property.z-name.z-css,
+
.z-punctuation.z-definition.z-custom-property.z-css {
+
color: #179299;
+
}
+
html[data-theme="light"] .z-entity.z-name.z-tag.z-css {
+
color: #7287fd;
+
}
+
html[data-theme="light"] .z-variable.z-other.z-sass {
+
color: #179299;
+
}
+
html[data-theme="light"] .z-invalid {
+
color: #4c4f69;
+
background-color: #d20f39;
+
}
+
html[data-theme="light"] .z-invalid.z-deprecated {
+
color: #4c4f69;
+
background-color: #8839ef;
+
}
+
html[data-theme="light"] .z-meta.z-diff,
+
.z-meta.z-diff.z-header {
+
color: #9ca0b0;
+
}
+
html[data-theme="light"] .z-markup.z-deleted {
+
color: #d20f39;
+
}
+
html[data-theme="light"] .z-markup.z-inserted {
+
color: #40a02b;
+
}
+
html[data-theme="light"] .z-markup.z-changed {
+
color: #df8e1d;
+
}
+
html[data-theme="light"] .z-message.z-error {
+
color: #d20f39;
+
}
+
+
/* dark */
+
+
html[data-theme="dark"] .z-code {
+
color: #cad3f5;
+
background-color: #2a2e35;
+
}
+
+
html[data-theme="dark"] .z-comment {
+
color: #6e738d;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-string {
+
color: #a6da95;
+
}
+
html[data-theme="dark"] .z-string.z-regexp {
+
color: #f5a97f;
+
}
+
html[data-theme="dark"] .z-constant.z-numeric {
+
color: #f5a97f;
+
}
+
html[data-theme="dark"] .z-constant.z-language.z-boolean {
+
color: #f5a97f;
+
font-weight: bold;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-constant.z-language {
+
color: #b7bdf8;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-support.z-function.z-builtin {
+
color: #f5a97f;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-variable.z-other.z-constant {
+
color: #f5a97f;
+
}
+
html[data-theme="dark"] .z-keyword {
+
color: #ed8796;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-keyword.z-control.z-loop,
+
.z-keyword.z-control.z-conditional,
+
.z-keyword.z-control.z-c\+\+ {
+
color: #c6a0f6;
+
font-weight: bold;
+
}
+
html[data-theme="dark"] .z-keyword.z-control.z-return,
+
.z-keyword.z-control.z-flow.z-return {
+
color: #f5bde6;
+
font-weight: bold;
+
}
+
html[data-theme="dark"] .z-support.z-type.z-exception {
+
color: #f5a97f;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-keyword.z-operator,
+
.z-punctuation.z-accessor {
+
color: #91d7e3;
+
font-weight: bold;
+
}
+
html[data-theme="dark"] .z-punctuation.z-separator {
+
color: #8bd5ca;
+
}
+
html[data-theme="dark"] .z-punctuation.z-terminator {
+
color: #8bd5ca;
+
}
+
html[data-theme="dark"] .z-punctuation.z-section {
+
color: #939ab7;
+
}
+
html[data-theme="dark"] .z-keyword.z-control.z-import.z-include {
+
color: #8bd5ca;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-storage {
+
color: #ed8796;
+
}
+
html[data-theme="dark"] .z-storage.z-type {
+
color: #eed49f;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-storage.z-modifier {
+
color: #ed8796;
+
}
+
html[data-theme="dark"] .z-entity.z-name.z-namespace,
+
.z-meta.z-path {
+
color: #f4dbd6;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-storage.z-type.z-class {
+
color: #f4dbd6;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-entity.z-name.z-label {
+
color: #8aadf4;
+
}
+
html[data-theme="dark"] .z-keyword.z-declaration.z-class {
+
color: #ed8796;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-entity.z-name.z-class,
+
.z-meta.z-toc-list.z-full-identifier {
+
color: #91d7e3;
+
}
+
html[data-theme="dark"] .z-entity.z-other.z-inherited-class {
+
color: #91d7e3;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-entity.z-name.z-function,
+
.z-variable.z-function {
+
color: #8aadf4;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-entity.z-name.z-function.z-preprocessor {
+
color: #ed8796;
+
}
+
html[data-theme="dark"] .z-keyword.z-control.z-import {
+
color: #ed8796;
+
}
+
html[data-theme="dark"] .z-entity.z-name.z-function.z-constructor,
+
.z-entity.z-name.z-function.z-destructor {
+
color: #b7bdf8;
+
}
+
html[data-theme="dark"] .z-variable.z-parameter.z-function {
+
color: #f4dbd6;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-keyword.z-declaration.z-function {
+
color: #ee99a0;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-support.z-function {
+
color: #91d7e3;
+
}
+
html[data-theme="dark"] .z-support.z-constant {
+
color: #8aadf4;
+
}
+
html[data-theme="dark"] .z-support.z-type,
+
.z-support.z-class {
+
color: #8aadf4;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-variable.z-function {
+
color: #8aadf4;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-variable.z-parameter {
+
color: #f4dbd6;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-variable.z-other {
+
color: #cad3f5;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-variable.z-other.z-member {
+
color: #f4dbd6;
+
}
+
html[data-theme="dark"] .z-variable.z-language {
+
color: #8bd5ca;
+
}
+
html[data-theme="dark"] .z-entity.z-name.z-tag {
+
color: #f5a97f;
+
}
+
html[data-theme="dark"] .z-entity.z-other.z-attribute-name {
+
color: #c6a0f6;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-punctuation.z-definition.z-tag {
+
color: #ee99a0;
+
}
+
html[data-theme="dark"] .z-markup.z-underline.z-link.z-markdown {
+
color: #f4dbd6;
+
text-decoration: underline;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-meta.z-link.z-inline.z-description {
+
color: #b7bdf8;
+
font-weight: bold;
+
}
+
html[data-theme="dark"] .z-comment.z-block.z-markdown,
+
.z-meta.z-code-fence,
+
.z-markup.z-raw.z-code-fence,
+
.z-markup.z-raw.z-inline {
+
color: #8bd5ca;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-punctuation.z-definition.z-heading,
+
.z-entity.z-name.z-section {
+
color: #8aadf4;
+
font-weight: bold;
+
}
+
html[data-theme="dark"] .z-markup.z-italic {
+
color: #ee99a0;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-markup.z-bold {
+
color: #ee99a0;
+
font-weight: bold;
+
}
+
html[data-theme="dark"] .z-constant.z-character.z-escape {
+
color: #f5bde6;
+
}
+
html[data-theme="dark"]
+
.z-source.z-shell.z-bash
+
.z-meta.z-function.z-shell
+
.z-meta.z-compound.z-shell
+
.z-meta.z-function-call.z-identifier.z-shell {
+
color: #f5bde6;
+
}
+
html[data-theme="dark"] .z-variable.z-language.z-shell {
+
color: #ed8796;
+
font-style: italic;
+
}
+
html[data-theme="dark"]
+
.z-source.z-lua
+
.z-meta.z-function.z-lua
+
.z-meta.z-block.z-lua
+
.z-meta.z-mapping.z-value.z-lua
+
.z-meta.z-mapping.z-key.z-lua
+
.z-string.z-unquoted.z-key.z-lua {
+
color: #b7bdf8;
+
font-style: italic;
+
}
+
html[data-theme="dark"]
+
.z-source.z-lua
+
.z-meta.z-function.z-lua
+
.z-meta.z-block.z-lua
+
.z-meta.z-mapping.z-key.z-lua
+
.z-string.z-unquoted.z-key.z-lua {
+
color: #f0c6c6;
+
}
+
html[data-theme="dark"] .z-entity.z-name.z-constant.z-java {
+
color: #8bd5ca;
+
}
+
html[data-theme="dark"] .z-support.z-type.z-property-name.z-css {
+
color: #f0c6c6;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-support.z-constant.z-property-value.z-css {
+
color: #cad3f5;
+
}
+
html[data-theme="dark"] .z-constant.z-numeric.z-suffix.z-css,
+
.z-keyword.z-other.z-unit.z-css {
+
color: #8bd5ca;
+
font-style: italic;
+
}
+
html[data-theme="dark"] .z-variable.z-other.z-custom-property.z-name.z-css,
+
.z-support.z-type.z-custom-property.z-name.z-css,
+
.z-punctuation.z-definition.z-custom-property.z-css {
+
color: #8bd5ca;
+
}
+
html[data-theme="dark"] .z-entity.z-name.z-tag.z-css {
+
color: #b7bdf8;
+
}
+
html[data-theme="dark"] .z-variable.z-other.z-sass {
+
color: #8bd5ca;
+
}
+
html[data-theme="dark"] .z-invalid {
+
color: #cad3f5;
+
background-color: #ed8796;
+
}
+
html[data-theme="dark"] .z-invalid.z-deprecated {
+
color: #cad3f5;
+
background-color: #c6a0f6;
+
}
+
html[data-theme="dark"] .z-meta.z-diff,
+
.z-meta.z-diff.z-header {
+
color: #6e738d;
+
}
+
html[data-theme="dark"] .z-markup.z-deleted {
+
color: #ed8796;
+
}
+
html[data-theme="dark"] .z-markup.z-inserted {
+
color: #a6da95;
+
}
+
html[data-theme="dark"] .z-markup.z-changed {
+
color: #eed49f;
+
}
+
html[data-theme="dark"] .z-message.z-error {
+
color: #ed8796;
+
}
+1 -16
templates/head.html
···
<link
rel="stylesheet"
type="text/css"
-
href="https://speyll.github.io/suCSS/reset-min.css"
-
/>
-
<link
-
rel="stylesheet"
-
type="text/css"
-
href="https://speyll.github.io/suCSS/suCSS-min.css"
-
/>
-
<link
-
rel="stylesheet"
-
type="text/css"
-
href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"
-
/>
-
<link
-
rel="stylesheet"
-
type="text/css"
-
href="{{ get_url(path='css/syntax-theme.css', trailing_slash=false) | safe }}"
+
href="{{ get_url(path='css/main.css', trailing_slash=false) | safe }}"
/>
{% endblock css %}
<script