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

feat: add biome and format

+31
biome.json
···
+
{
+
"$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
+
"vcs": {
+
"enabled": false,
+
"clientKind": "git",
+
"useIgnoreFile": false
+
},
+
"files": {
+
"ignoreUnknown": false,
+
"ignore": []
+
},
+
"formatter": {
+
"formatWithErrors": true,
+
"enabled": true,
+
"indentStyle": "tab"
+
},
+
"organizeImports": {
+
"enabled": true
+
},
+
"linter": {
+
"enabled": true,
+
"rules": {
+
"recommended": true
+
}
+
},
+
"javascript": {
+
"formatter": {
+
"quoteStyle": "double"
+
}
+
}
+
}
+79 -79
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;
+
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: center;
-
align-items: center;
-
text-align: center;
-
padding-bottom: 0.5rem;
+
display: flex;
+
flex-wrap: wrap;
+
justify-content: center;
+
align-items: center;
+
text-align: center;
+
padding-bottom: 0.5rem;
}
.accent-data {
-
color: var(--accent-light);
+
color: var(--accent-light);
}
.theme-transition {
-
transition: background-color 0.3s ease;
+
transition: background-color 0.3s ease;
}
.tags-data {
-
display: flex;
-
flex-direction: row;
-
flex-wrap: wrap;
-
justify-content: flex-end;
-
align-items: flex-start;
-
align-content: flex-end;
-
gap: 0.25rem;
+
display: flex;
+
flex-direction: row;
+
flex-wrap: wrap;
+
justify-content: flex-end;
+
align-items: flex-start;
+
align-content: flex-end;
+
gap: 0.25rem;
}
.title-list li {
-
margin-bottom: 0.375rem;
+
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;
+
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);
+
background-color: transparent;
+
color: var(--accent);
}
/* footnotes */
.footnote-definition {
-
margin: 0 0 0 0.125rem;
+
margin: 0 0 0 0.125rem;
}
.footnote-definition-label {
-
color: var(--accent);
+
color: var(--accent);
}
.footnote-definition p {
-
display: inline;
-
margin: 0.625rem 0 0 0.625rem;
+
display: inline;
+
margin: 0.625rem 0 0 0.625rem;
}
/* general classes */
.no-style {
-
padding: 0;
-
margin: 0;
-
border: none;
-
border-radius: 0;
+
padding: 0;
+
margin: 0;
+
border: none;
+
border-radius: 0;
}
.no-style:hover {
-
background-color: transparent;
-
color: var(--accent);
+
background-color: transparent;
+
color: var(--accent);
}
.center {
-
text-align: center;
+
text-align: center;
}
.center img {
-
display: block;
-
margin: 1rem auto;
+
display: block;
+
margin: 1rem auto;
}
.center figcaption {
-
text-align: center;
+
text-align: center;
}
.float-right {
-
float: right;
+
float: right;
}
.float-left {
-
float: left;
+
float: left;
}
div code,
li code,
p code {
-
color: var(--text);
-
background-color: var(--bg-light);
+
color: var(--text);
+
background-color: var(--bg-light);
}
pre {
-
border-top-left-radius: 0;
+
border-top-left-radius: 0;
}
blockquote {
-
padding-top: 0.2rem;
-
padding-bottom: 0.2rem;
+
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);
+
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);
+
margin: 0;
+
color: var(--accent-text);
}
.yt-embed {
-
width: 100%;
-
display: flex;
-
justify-content: center;
+
width: 100%;
+
display: flex;
+
justify-content: center;
}
.yt-embed iframe {
-
width: 100%;
-
aspect-ratio: 16 / 9;
+
width: 100%;
+
aspect-ratio: 16 / 9;
}
+24 -24
sass/css/reset.css
···
*,
*::before,
*::after {
-
box-sizing: border-box;
-
-webkit-box-sizing: border-box;
+
box-sizing: border-box;
+
-webkit-box-sizing: border-box;
}
* {
-
margin: 0;
+
margin: 0;
}
/* Prevent font size inflation */
html {
-
-moz-text-size-adjust: none;
-
-webkit-text-size-adjust: none;
-
text-size-adjust: none;
+
-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 */
···
blockquote,
dl,
dd {
-
margin-block-end: 0;
+
margin-block-end: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
···
ol,
ul[role="list"],
ol[role="list"] {
-
list-style: none;
+
list-style: none;
}
/* Set core body defaults */
body {
-
min-height: 100vh;
-
line-height: 1.5;
-
-webkit-font-smoothing: antialiased;
+
min-height: 100vh;
+
line-height: 1.5;
+
-webkit-font-smoothing: antialiased;
}
/* Set shorter line heights on headings and interactive elements */
···
button,
input,
label {
-
line-height: 1.1;
+
line-height: 1.1;
}
/* Balance text wrapping on headings */
···
h2,
h3,
h4 {
-
text-wrap: balance;
+
text-wrap: balance;
}
p,
···
h4,
h5,
h6 {
-
overflow-wrap: break-word;
+
overflow-wrap: break-word;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
-
text-decoration-skip-ink: auto;
+
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
···
video,
canvas,
svg {
-
max-width: 100%;
-
display: block;
+
max-width: 100%;
+
display: block;
}
/* Inherit fonts for inputs and buttons */
···
textarea,
select,
progress {
-
appearance: none;
-
-webkit-appearance: none;
-
-moz-appearance: none;
-
font: inherit;
+
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;
+
min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
-
scroll-margin-block: 5ex;
+
scroll-margin-block: 5ex;
}
#root,
#__next {
-
isolation: isolate;
+
isolation: isolate;
}
+320 -321
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;
+
/* 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: #686764;
-
--accent: #58310ac5;
-
--accent-light: #e08f67;
-
--accent-text: var(--bg);
-
--border: #646868;
-
--link: #573819c5;
+
/* default colors */
+
--bg: #eeeeee;
+
--bg-light: #cbcdcd;
+
--text: #41474e;
+
--text-light: #686764;
+
--accent: #58310ac5;
+
--accent-light: #e08f67;
+
--accent-text: var(--bg);
+
--border: #646868;
+
--link: #573819c5;
}
/* theme media queries */
@media (prefers-color-scheme: dark) {
-
:root,
-
::backdrop {
-
color-scheme: dark;
-
--bg: #222529;
-
--bg-light: #464949;
-
--text: #d6d6d6;
-
--text-light: #c5c0b7;
-
--accent: #78b6ad;
-
--accent-light: #87c9e5;
-
--accent-text: var(--bg);
-
--border: #dbd5bc;
-
--link: #e2c8a2;
-
}
-
img,
-
video {
-
opacity: 0.8;
-
}
+
:root,
+
::backdrop {
+
color-scheme: dark;
+
--bg: #222529;
+
--bg-light: #464949;
+
--text: #d6d6d6;
+
--text-light: #c5c0b7;
+
--accent: #78b6ad;
+
--accent-light: #87c9e5;
+
--accent-text: var(--bg);
+
--border: #dbd5bc;
+
--link: #e2c8a2;
+
}
+
img,
+
video {
+
opacity: 0.8;
+
}
}
@media (prefers-color-scheme: light) {
-
:root,
-
::backdrop {
-
color-scheme: light;
-
--bg: #eeeeee;
-
--bg-light: #cbcdcd;
-
--text: #41474e;
-
--text-light: #686764;
-
--accent: #58310ac5;
-
--accent-light: #e08f67;
-
--accent-text: var(--bg);
-
--border: #646868;
-
--link: #573819c5;
-
}
+
:root,
+
::backdrop {
+
color-scheme: light;
+
--bg: #eeeeee;
+
--bg-light: #cbcdcd;
+
--text: #41474e;
+
--text-light: #686764;
+
--accent: #58310ac5;
+
--accent-light: #e08f67;
+
--accent-text: var(--bg);
+
--border: #646868;
+
--link: #573819c5;
+
}
}
[data-theme="light"] {
-
/* default (light) theme */
-
color-scheme: light;
-
--bg: #eeeeee;
-
--bg-light: #cbcdcd;
-
--text: #41474e;
-
--text-light: #686764;
-
--accent: #58310ac5;
-
--accent-light: #56412bc5;
-
--accent-text: var(--bg);
-
--border: #646868;
-
--link: #573819c5;
+
/* default (light) theme */
+
color-scheme: light;
+
--bg: #eeeeee;
+
--bg-light: #cbcdcd;
+
--text: #41474e;
+
--text-light: #686764;
+
--accent: #58310ac5;
+
--accent-light: #56412bc5;
+
--accent-text: var(--bg);
+
--border: #646868;
+
--link: #573819c5;
}
[data-theme="dark"] {
-
color-scheme: dark;
-
--bg: #222529;
-
--bg-light: #464949;
-
--text: #d6d6d6;
-
--text-light: #c5c0b7;
-
--accent: #78b4b6e3;
-
--accent-light: #c5edefe6;
-
--accent-text: var(--bg);
-
--border: #dbd5bc;
-
--link: #e2c8a2;
+
color-scheme: dark;
+
--bg: #222529;
+
--bg-light: #464949;
+
--text: #d6d6d6;
+
--text-light: #c5c0b7;
+
--accent: #78b4b6e3;
+
--accent-light: #c5edefe6;
+
--accent-text: var(--bg);
+
--border: #dbd5bc;
+
--link: #e2c8a2;
}
::selection,
::-moz-selection {
-
color: var(--bg);
-
background: var(--accent);
+
color: var(--bg);
+
background: var(--accent);
}
/* chromium scrollbars */
::-webkit-scrollbar {
-
width: 8px;
-
height: 8px;
-
overflow: visible;
+
width: 8px;
+
height: 8px;
+
overflow: visible;
}
::-webkit-scrollbar-thumb {
-
background: var(--accent);
-
width: 12px;
+
background: var(--accent);
+
width: 12px;
}
::-webkit-scrollbar-track {
-
background: var(--bg-light);
+
background: var(--bg-light);
}
/* firefox scrollbars */
* {
-
scrollbar-color: var(--accent) var(--bg-light);
-
scrollbar-width: thin;
-
scrollbar-height: thin;
+
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;
+
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;
+
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;
+
grid-column: 2;
}
body > footer {
-
color: var(--text-light);
-
font-size: 0.875;
+
color: var(--text-light);
+
font-size: 0.875;
}
/* Format headers */
h1 {
-
font-size: 2rem;
+
font-size: 2rem;
}
h2 {
-
font-size: 1.75rem;
+
font-size: 1.75rem;
}
h3 {
-
font-size: 1.5rem;
+
font-size: 1.5rem;
}
h4 {
-
font-size: 1.25rem;
+
font-size: 1.25rem;
}
h5 {
-
font-size: 1rem;
+
font-size: 1rem;
}
h6 {
-
font-size: 0.75rem;
+
font-size: 0.75rem;
}
h1,
···
h4,
h5,
h6 {
-
margin: 0.5em 0 0.5em 0;
+
margin: 0.5em 0 0.5em 0;
}
/* Fix line height when title wraps */
h1,
h2,
h3 {
-
line-height: 1.1;
+
line-height: 1.1;
}
h1::before,
···
h4::before,
h5::before,
h6::before {
-
color: var(--accent);
-
content: "# ";
+
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;
-
}
+
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;
+
margin: 1rem 0;
}
/* format links */
a,
a:visited {
-
text-decoration: none;
-
font-weight: bold;
-
font-style: italic;
-
border-radius: 0.125rem;
-
color: var(--link);
+
text-decoration: none;
+
font-weight: bold;
+
font-style: italic;
+
border-radius: 0.125rem;
+
color: var(--link);
}
a:hover {
-
background-color: var(--link);
-
color: var(--bg);
+
background-color: var(--link);
+
color: var(--bg);
}
/* format lists */
ul {
-
list-style: none;
-
margin-top: 0.25rem;
-
margin-bottom: 0.25rem;
+
list-style: none;
+
margin-top: 0.25rem;
+
margin-bottom: 0.25rem;
}
ol {
-
list-style-type: decimal;
-
margin-top: 0.25rem;
-
margin-bottom: 0.25rem;
+
list-style-type: decimal;
+
margin-top: 0.25rem;
+
margin-bottom: 0.25rem;
}
li {
-
margin-bottom: 0.125rem;
+
margin-bottom: 0.125rem;
}
ul li::marker {
-
content: "» ";
-
color: var(--accent);
+
content: "» ";
+
color: var(--accent);
}
ul li:hover::marker {
-
content: "# ";
-
font-weight: 700;
-
color: var(--link);
+
content: "# ";
+
font-weight: 700;
+
color: var(--link);
}
ol li::marker {
-
color: var(--accent);
+
color: var(--accent);
}
ol li:hover::marker {
-
font-weight: 700;
-
color: var(--link);
+
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;
+
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;
+
display: inline-block;
}
/* Consolidate box styling */
aside,
details,
progress {
-
background-color: var(--bg-light);
-
border-radius: var(--standard-border-radius);
+
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;
+
font-size: 1rem;
+
width: 35%;
+
padding: 0 10px;
+
margin-inline-start: 10px;
+
float: right;
}
*[dir="rtl"] aside {
-
float: left;
+
float: left;
}
/* make aside full-width on mobile */
@media only screen and (max-width: 720px) {
-
aside {
-
width: 100%;
-
float: none;
-
margin-inline-start: 0;
-
}
+
aside {
+
width: 100%;
+
float: none;
+
margin-inline-start: 0;
+
}
}
details {
-
padding: 0.5rem;
+
padding: 0.5rem;
}
summary {
-
cursor: pointer;
-
font-weight: bold;
-
word-break: break-all;
+
cursor: pointer;
+
font-weight: bold;
+
word-break: break-all;
}
details[open] > summary + * {
-
margin-top: 0;
+
margin-top: 0;
}
details[open] > summary {
-
margin-bottom: 0.5rem;
+
margin-bottom: 0.5rem;
}
details[open] > :last-child {
-
margin-bottom: 0;
+
margin-bottom: 0;
}
/* Format tables */
table {
-
border-collapse: collapse;
-
margin: 1.5rem 0;
-
display: block;
-
overflow-x: auto;
-
white-space: nowrap;
+
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;
+
border: 1px solid var(--border);
+
text-align: start;
+
padding: 0.5rem;
}
th {
-
background-color: var(--bg-light);
-
font-weight: bold;
+
background-color: var(--bg-light);
+
font-weight: bold;
}
tr:nth-child(even) {
-
background-color: var(--bg-light);
+
background-color: var(--bg-light);
}
table caption {
-
text-align: left;
-
font-weight: bold;
-
margin: 0 0 0.4rem 1rem;
+
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);
+
border: 1px dashed var(--accent);
+
border-radius: var(--standard-border-radius);
}
fieldset > legend {
-
color: var(--accent);
+
color: var(--accent);
}
textarea,
···
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;
+
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);
+
color: var(--text);
+
background-color: var(--bg);
+
border: 1px dashed var(--border);
}
label {
-
display: block;
+
display: block;
}
fieldset label {
-
margin: 0 0 0.3rem 0;
+
margin: 0 0 0.3rem 0;
}
textarea {
-
max-width: 43.5rem;
-
resize: both;
+
max-width: 43.5rem;
+
resize: both;
}
textarea:not([cols]) {
-
width: 100%;
+
width: 100%;
}
@media only screen and (max-width: 720px) {
-
textarea,
-
select,
-
input {
-
width: 100%;
-
}
+
textarea,
+
select,
+
input {
+
width: 100%;
+
}
}
/* format buttons */
···
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;
+
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"],
···
textarea:disabled,
select:disabled,
button[disabled] {
-
cursor: not-allowed;
-
background-color: var(--bg-light);
-
border-color: var(--bg-light);
-
color: var(--text-light);
+
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);
+
padding: 0;
+
color: var(--accent);
}
abbr[title] {
-
cursor: help;
-
text-decoration-line: underline;
-
text-decoration-style: dotted;
+
cursor: help;
+
text-decoration-line: underline;
+
text-decoration-style: dotted;
}
button: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;
+
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;
+
[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;
+
vertical-align: middle;
+
position: relative;
+
width: min-content;
+
width: 14px;
+
height: 14px;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
-
display: inline-block;
+
display: inline-block;
}
input[type="radio"] {
-
border-radius: 100%;
+
border-radius: 100%;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
-
background-color: var(--accent);
+
background-color: var(--accent);
}
@media only screen and (max-width: 720px) {
-
textarea,
-
select,
-
input {
-
width: 100%;
-
}
+
textarea,
+
select,
+
input {
+
width: 100%;
+
}
}
input[type="color"] {
-
height: 2.5rem;
-
padding: 0.2rem;
+
height: 2.5rem;
+
padding: 0.2rem;
}
input[type="file"] {
-
border: 0;
+
border: 0;
}
/* misc body elements */
hr {
-
border: 1px dashed var(--accent);
-
margin: 0.5rem 0 0.5rem 0;
+
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);
+
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);
+
color: var(--link);
}
img,
video,
iframe[src^="https://www.youtube-nocookie.com"],
-
iframe[src^="https://www.youtube.com"]
-
{
-
max-width: 90%;
-
height: auto;
-
padding: 0.125rem;
-
border: dashed 2px var(--accent);
-
border-radius: 15px;
+
iframe[src^="https://www.youtube.com"] {
+
max-width: 90%;
+
height: auto;
+
padding: 0.125rem;
+
border: dashed 2px var(--accent);
+
border-radius: 15px;
}
figure {
-
margin: 0;
-
display: block;
-
overflow-x: auto;
+
margin: 0;
+
display: block;
+
overflow-x: auto;
}
figcaption {
-
text-align: left;
-
font-size: 0.875rem;
-
color: var(--text-light);
-
margin: 0 0 1rem 1rem;
+
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;
+
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;
}
p:has(cite) {
-
text-align: right;
-
font-size: 0.875rem;
-
color: var(--text-light);
-
font-weight: 600;
+
text-align: right;
+
font-size: 0.875rem;
+
color: var(--text-light);
+
font-weight: 600;
}
cite::before {
-
content: "— ";
+
content: "— ";
}
dt {
-
color: var(--text-light);
+
color: var(--text-light);
}
code,
···
pre span,
kbd,
samp {
-
font-family: var(--mono-font);
+
font-family: var(--mono-font);
}
pre {
-
border: 1px solid var(--accent);
-
max-height: 30rem;
-
padding: 0.625rem;
-
overflow-x: auto;
-
font-style: monospace;
+
border: 1px solid var(--accent);
+
max-height: 30rem;
+
padding: 0.625rem;
+
overflow-x: auto;
+
font-style: monospace;
}
p code,
li code,
div code {
-
padding: 0 0.125rem 0 0.125rem;
-
border-radius: 3px;
-
color: var(--bg);
-
background-color: var(--text);
-
transition: background-color 0.3s ease;
+
padding: 0 0.125rem 0 0.125rem;
+
border-radius: 3px;
+
color: var(--bg);
+
background-color: var(--text);
+
transition: background-color 0.3s ease;
}
pre code {
-
padding: 0;
-
border-radius: 0;
-
color: inherit;
-
background-color: inherit;
+
padding: 0;
+
border-radius: 0;
+
color: inherit;
+
background-color: inherit;
}
iframe {
-
max-width: 90%;
+
max-width: 90%;
}
/* progress bars */
progress {
-
width: 100%;
+
width: 100%;
}
progress:indeterminate {
-
background-color: var(--bg-light);
+
background-color: var(--bg-light);
}
progress::-webkit-progress-bar {
-
border-radius: var(--standard-border-radius);
-
background-color: var(--bg-light);
+
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);
+
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;
+
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);
+
background-color: var(--bg-light);
}
dialog {
-
max-width: 40rem;
-
margin: auto;
+
max-width: 40rem;
+
margin: auto;
}
dialog::backdrop {
-
background-color: var(--bg);
-
opacity: 0.8;
+
background-color: var(--bg);
+
opacity: 0.8;
}
@media only screen and (max-width: 720px) {
-
dialog {
-
max-width: 100%;
-
margin: auto 1em;
-
}
+
dialog {
+
max-width: 100%;
+
margin: auto 1em;
+
}
}
/* superscript & subscript */
/* prevent scripts from affecting line-height. */
sup,
sub {
-
vertical-align: baseline;
-
position: relative;
+
vertical-align: baseline;
+
position: relative;
}
sup {
-
top: -0.4em;
+
top: -0.4em;
}
sub {
-
top: 0.3em;
+
top: 0.3em;
}
+247 -247
sass/css/syntax-theme.css
···
*/
@supports not (-moz-appearance: none) {
-
.z-code {
-
transition: background-color 0.3s ease;
-
}
+
.z-code {
+
transition: background-color 0.3s ease;
+
}
}
html[data-theme="light"] .z-code {
-
color: #4c4f69;
-
background-color: #f2efea;
+
color: #4c4f69;
+
background-color: #f2efea;
}
html[data-theme="light"] .z-comment {
-
color: #9ca0b0;
-
font-style: italic;
+
color: #9ca0b0;
+
font-style: italic;
}
html[data-theme="light"] .z-string {
-
color: #40a02b;
+
color: #40a02b;
}
html[data-theme="light"] .z-string.z-regexp {
-
color: #fe640b;
+
color: #fe640b;
}
html[data-theme="light"] .z-constant.z-numeric {
-
color: #fe640b;
+
color: #fe640b;
}
html[data-theme="light"] .z-constant.z-language.z-boolean {
-
color: #fe640b;
-
font-weight: bold;
-
font-style: italic;
+
color: #fe640b;
+
font-weight: bold;
+
font-style: italic;
}
html[data-theme="light"] .z-constant.z-language {
-
color: #7287fd;
-
font-style: italic;
+
color: #7287fd;
+
font-style: italic;
}
html[data-theme="light"] .z-support.z-function.z-builtin {
-
color: #fe640b;
-
font-style: italic;
+
color: #fe640b;
+
font-style: italic;
}
html[data-theme="light"] .z-variable.z-other.z-constant {
-
color: #fe640b;
+
color: #fe640b;
}
html[data-theme="light"] .z-keyword {
-
color: #d20f39;
-
font-style: italic;
+
color: #d20f39;
+
font-style: italic;
}
html[data-theme="light"] .z-keyword.z-control.z-loop,
html[data-theme="light"] .z-keyword.z-control.z-conditional,
html[data-theme="light"] .z-keyword.z-control.z-c\+\+ {
-
color: #8839ef;
-
font-weight: bold;
+
color: #8839ef;
+
font-weight: bold;
}
html[data-theme="light"] .z-keyword.z-control.z-return,
html[data-theme="light"] .z-keyword.z-control.z-flow.z-return {
-
color: #ea76cb;
-
font-weight: bold;
+
color: #ea76cb;
+
font-weight: bold;
}
html[data-theme="light"] .z-support.z-type.z-exception {
-
color: #fe640b;
-
font-style: italic;
+
color: #fe640b;
+
font-style: italic;
}
html[data-theme="light"] .z-keyword.z-operator,
html[data-theme="light"] .z-punctuation.z-accessor {
-
color: #04a5e5;
-
font-weight: bold;
+
color: #04a5e5;
+
font-weight: bold;
}
html[data-theme="light"] .z-punctuation.z-separator {
-
color: #179299;
+
color: #179299;
}
html[data-theme="light"] .z-punctuation.z-terminator {
-
color: #179299;
+
color: #179299;
}
html[data-theme="light"] .z-punctuation.z-section {
-
color: #7c7f93;
+
color: #7c7f93;
}
html[data-theme="light"] .z-keyword.z-control.z-import.z-include {
-
color: #179299;
-
font-style: italic;
+
color: #179299;
+
font-style: italic;
}
html[data-theme="light"] .z-storage {
-
color: #d20f39;
+
color: #d20f39;
}
html[data-theme="light"] .z-storage.z-type {
-
color: #df8e1d;
-
font-style: italic;
+
color: #df8e1d;
+
font-style: italic;
}
html[data-theme="light"] .z-storage.z-modifier {
-
color: #d20f39;
+
color: #d20f39;
}
html[data-theme="light"] .z-entity.z-name.z-namespace,
html[data-theme="light"] .z-meta.z-path {
-
color: #dc8a78;
-
font-style: italic;
+
color: #dc8a78;
+
font-style: italic;
}
html[data-theme="light"] .z-storage.z-type.z-class {
-
color: #dc8a78;
-
font-style: italic;
+
color: #dc8a78;
+
font-style: italic;
}
html[data-theme="light"] .z-entity.z-name.z-label {
-
color: #1e66f5;
+
color: #1e66f5;
}
html[data-theme="light"] .z-keyword.z-declaration.z-class {
-
color: #d20f39;
-
font-style: italic;
+
color: #d20f39;
+
font-style: italic;
}
html[data-theme="light"] .z-entity.z-name.z-class,
html[data-theme="light"] .z-meta.z-toc-list.z-full-identifier {
-
color: #04a5e5;
+
color: #04a5e5;
}
html[data-theme="light"] .z-entity.z-other.z-inherited-class {
-
color: #04a5e5;
-
font-style: italic;
+
color: #04a5e5;
+
font-style: italic;
}
html[data-theme="light"] .z-entity.z-name.z-function,
html[data-theme="light"] .z-variable.z-function {
-
color: #1e66f5;
-
font-style: italic;
+
color: #1e66f5;
+
font-style: italic;
}
html[data-theme="light"] .z-entity.z-name.z-function.z-preprocessor {
-
color: #d20f39;
+
color: #d20f39;
}
html[data-theme="light"] .z-keyword.z-control.z-import {
-
color: #d20f39;
+
color: #d20f39;
}
html[data-theme="light"] .z-entity.z-name.z-function.z-constructor,
html[data-theme="light"] .z-entity.z-name.z-function.z-destructor {
-
color: #7287fd;
+
color: #7287fd;
}
html[data-theme="light"] .z-variable.z-parameter.z-function {
-
color: #dc8a78;
-
font-style: italic;
+
color: #dc8a78;
+
font-style: italic;
}
html[data-theme="light"] .z-keyword.z-declaration.z-function {
-
color: #e64553;
-
font-style: italic;
+
color: #e64553;
+
font-style: italic;
}
html[data-theme="light"] .z-support.z-function {
-
color: #04a5e5;
+
color: #04a5e5;
}
html[data-theme="light"] .z-support.z-constant {
-
color: #1e66f5;
+
color: #1e66f5;
}
html[data-theme="light"] .z-support.z-type,
html[data-theme="light"] .z-support.z-class {
-
color: #1e66f5;
-
font-style: italic;
+
color: #1e66f5;
+
font-style: italic;
}
html[data-theme="light"] .z-variable.z-function {
-
color: #1e66f5;
-
font-style: italic;
+
color: #1e66f5;
+
font-style: italic;
}
html[data-theme="light"] .z-variable.z-parameter {
-
color: #dc8a78;
-
font-style: italic;
+
color: #dc8a78;
+
font-style: italic;
}
html[data-theme="light"] .z-variable.z-other {
-
color: #4c4f69;
-
font-style: italic;
+
color: #4c4f69;
+
font-style: italic;
}
html[data-theme="light"] .z-variable.z-other.z-member {
-
color: #dc8a78;
+
color: #dc8a78;
}
html[data-theme="light"] .z-variable.z-language {
-
color: #179299;
+
color: #179299;
}
html[data-theme="light"] .z-entity.z-name.z-tag {
-
color: #fe640b;
+
color: #fe640b;
}
html[data-theme="light"] .z-entity.z-other.z-attribute-name {
-
color: #8839ef;
-
font-style: italic;
+
color: #8839ef;
+
font-style: italic;
}
html[data-theme="light"] .z-punctuation.z-definition.z-tag {
-
color: #e64553;
+
color: #e64553;
}
html[data-theme="light"] .z-markup.z-underline.z-link.z-markdown {
-
color: #dc8a78;
-
text-decoration: underline;
-
font-style: italic;
+
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;
+
color: #7287fd;
+
font-weight: bold;
}
html[data-theme="light"] .z-comment.z-block.z-markdown,
html[data-theme="light"] .z-meta.z-code-fence,
html[data-theme="light"] .z-markup.z-raw.z-code-fence,
html[data-theme="light"] .z-markup.z-raw.z-inline {
-
color: #179299;
-
font-style: italic;
+
color: #179299;
+
font-style: italic;
}
html[data-theme="light"] .z-punctuation.z-definition.z-heading,
html[data-theme="light"] .z-entity.z-name.z-section {
-
color: #1e66f5;
-
font-weight: bold;
+
color: #1e66f5;
+
font-weight: bold;
}
html[data-theme="light"] .z-markup.z-italic {
-
color: #e64553;
-
font-style: italic;
+
color: #e64553;
+
font-style: italic;
}
html[data-theme="light"] .z-markup.z-bold {
-
color: #e64553;
-
font-weight: bold;
+
color: #e64553;
+
font-weight: bold;
}
html[data-theme="light"] .z-constant.z-character.z-escape {
-
color: #ea76cb;
+
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;
+
.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;
+
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;
+
.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;
+
.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;
+
color: #179299;
}
html[data-theme="light"] .z-support.z-type.z-property-name.z-css {
-
color: #dd7878;
-
font-style: italic;
+
color: #dd7878;
+
font-style: italic;
}
html[data-theme="light"] .z-support.z-constant.z-property-value.z-css {
-
color: #4c4f69;
+
color: #4c4f69;
}
html[data-theme="light"] .z-constant.z-numeric.z-suffix.z-css,
html[data-theme="light"] .z-keyword.z-other.z-unit.z-css {
-
color: #179299;
-
font-style: italic;
+
color: #179299;
+
font-style: italic;
}
html[data-theme="light"] .z-variable.z-other.z-custom-property.z-name.z-css,
html[data-theme="light"] .z-support.z-type.z-custom-property.z-name.z-css,
html[data-theme="light"] .z-punctuation.z-definition.z-custom-property.z-css {
-
color: #179299;
+
color: #179299;
}
html[data-theme="light"] .z-entity.z-name.z-tag.z-css {
-
color: #7287fd;
+
color: #7287fd;
}
html[data-theme="light"] .z-variable.z-other.z-sass {
-
color: #179299;
+
color: #179299;
}
html[data-theme="light"] .z-invalid {
-
color: #4c4f69;
-
background-color: #d20f39;
+
color: #4c4f69;
+
background-color: #d20f39;
}
html[data-theme="light"] .z-invalid.z-deprecated {
-
color: #4c4f69;
-
background-color: #8839ef;
+
color: #4c4f69;
+
background-color: #8839ef;
}
html[data-theme="light"] .z-meta.z-diff,
html[data-theme="light"] .z-meta.z-diff.z-header {
-
color: #9ca0b0;
+
color: #9ca0b0;
}
html[data-theme="light"] .z-markup.z-deleted {
-
color: #d20f39;
+
color: #d20f39;
}
html[data-theme="light"] .z-markup.z-inserted {
-
color: #40a02b;
+
color: #40a02b;
}
html[data-theme="light"] .z-markup.z-changed {
-
color: #df8e1d;
+
color: #df8e1d;
}
html[data-theme="light"] .z-message.z-error {
-
color: #d20f39;
+
color: #d20f39;
}
/* dark */
html[data-theme="dark"] .z-code {
-
color: #cad3f5;
-
background-color: #2a2e35;
+
color: #cad3f5;
+
background-color: #2a2e35;
}
html[data-theme="dark"] .z-comment {
-
color: #6e738d;
-
font-style: italic;
+
color: #6e738d;
+
font-style: italic;
}
html[data-theme="dark"] .z-string {
-
color: #a6da95;
+
color: #a6da95;
}
html[data-theme="dark"] .z-string.z-regexp {
-
color: #f5a97f;
+
color: #f5a97f;
}
html[data-theme="dark"] .z-constant.z-numeric {
-
color: #f5a97f;
+
color: #f5a97f;
}
html[data-theme="dark"] .z-constant.z-language.z-boolean {
-
color: #f5a97f;
-
font-weight: bold;
-
font-style: italic;
+
color: #f5a97f;
+
font-weight: bold;
+
font-style: italic;
}
html[data-theme="dark"] .z-constant.z-language {
-
color: #b7bdf8;
-
font-style: italic;
+
color: #b7bdf8;
+
font-style: italic;
}
html[data-theme="dark"] .z-support.z-function.z-builtin {
-
color: #f5a97f;
-
font-style: italic;
+
color: #f5a97f;
+
font-style: italic;
}
html[data-theme="dark"] .z-variable.z-other.z-constant {
-
color: #f5a97f;
+
color: #f5a97f;
}
html[data-theme="dark"] .z-keyword {
-
color: #ed8796;
-
font-style: italic;
+
color: #ed8796;
+
font-style: italic;
}
html[data-theme="dark"] .z-keyword.z-control.z-loop,
html[data-theme="dark"] .z-keyword.z-control.z-conditional,
html[data-theme="dark"] .z-keyword.z-control.z-c\+\+ {
-
color: #c6a0f6;
-
font-weight: bold;
+
color: #c6a0f6;
+
font-weight: bold;
}
html[data-theme="dark"] .z-keyword.z-control.z-return,
html[data-theme="dark"] .z-keyword.z-control.z-flow.z-return {
-
color: #f5bde6;
-
font-weight: bold;
+
color: #f5bde6;
+
font-weight: bold;
}
html[data-theme="dark"] .z-support.z-type.z-exception {
-
color: #f5a97f;
-
font-style: italic;
+
color: #f5a97f;
+
font-style: italic;
}
html[data-theme="dark"] .z-keyword.z-operator,
html[data-theme="dark"] .z-punctuation.z-accessor {
-
color: #91d7e3;
-
font-weight: bold;
+
color: #91d7e3;
+
font-weight: bold;
}
html[data-theme="dark"] .z-punctuation.z-separator {
-
color: #8bd5ca;
+
color: #8bd5ca;
}
html[data-theme="dark"] .z-punctuation.z-terminator {
-
color: #8bd5ca;
+
color: #8bd5ca;
}
html[data-theme="dark"] .z-punctuation.z-section {
-
color: #939ab7;
+
color: #939ab7;
}
html[data-theme="dark"] .z-keyword.z-control.z-import.z-include {
-
color: #8bd5ca;
-
font-style: italic;
+
color: #8bd5ca;
+
font-style: italic;
}
html[data-theme="dark"] .z-storage {
-
color: #ed8796;
+
color: #ed8796;
}
html[data-theme="dark"] .z-storage.z-type {
-
color: #eed49f;
-
font-style: italic;
+
color: #eed49f;
+
font-style: italic;
}
html[data-theme="dark"] .z-storage.z-modifier {
-
color: #ed8796;
+
color: #ed8796;
}
html[data-theme="dark"] .z-entity.z-name.z-namespace,
html[data-theme="dark"] .z-meta.z-path {
-
color: #f4dbd6;
-
font-style: italic;
+
color: #f4dbd6;
+
font-style: italic;
}
html[data-theme="dark"] .z-storage.z-type.z-class {
-
color: #f4dbd6;
-
font-style: italic;
+
color: #f4dbd6;
+
font-style: italic;
}
html[data-theme="dark"] .z-entity.z-name.z-label {
-
color: #8aadf4;
+
color: #8aadf4;
}
html[data-theme="dark"] .z-keyword.z-declaration.z-class {
-
color: #ed8796;
-
font-style: italic;
+
color: #ed8796;
+
font-style: italic;
}
html[data-theme="dark"] .z-entity.z-name.z-class,
html[data-theme="dark"] .z-meta.z-toc-list.z-full-identifier {
-
color: #91d7e3;
+
color: #91d7e3;
}
html[data-theme="dark"] .z-entity.z-other.z-inherited-class {
-
color: #91d7e3;
-
font-style: italic;
+
color: #91d7e3;
+
font-style: italic;
}
html[data-theme="dark"] .z-entity.z-name.z-function,
html[data-theme="dark"] .z-variable.z-function {
-
color: #8aadf4;
-
font-style: italic;
+
color: #8aadf4;
+
font-style: italic;
}
html[data-theme="dark"] .z-entity.z-name.z-function.z-preprocessor {
-
color: #ed8796;
+
color: #ed8796;
}
html[data-theme="dark"] .z-keyword.z-control.z-import {
-
color: #ed8796;
+
color: #ed8796;
}
html[data-theme="dark"] .z-entity.z-name.z-function.z-constructor,
html[data-theme="dark"] .z-entity.z-name.z-function.z-destructor {
-
color: #b7bdf8;
+
color: #b7bdf8;
}
html[data-theme="dark"] .z-variable.z-parameter.z-function {
-
color: #f4dbd6;
-
font-style: italic;
+
color: #f4dbd6;
+
font-style: italic;
}
html[data-theme="dark"] .z-keyword.z-declaration.z-function {
-
color: #ee99a0;
-
font-style: italic;
+
color: #ee99a0;
+
font-style: italic;
}
html[data-theme="dark"] .z-support.z-function {
-
color: #91d7e3;
+
color: #91d7e3;
}
html[data-theme="dark"] .z-support.z-constant {
-
color: #8aadf4;
+
color: #8aadf4;
}
html[data-theme="dark"] .z-support.z-type,
html[data-theme="dark"] .z-support.z-class {
-
color: #8aadf4;
-
font-style: italic;
+
color: #8aadf4;
+
font-style: italic;
}
html[data-theme="dark"] .z-variable.z-function {
-
color: #8aadf4;
-
font-style: italic;
+
color: #8aadf4;
+
font-style: italic;
}
html[data-theme="dark"] .z-variable.z-parameter {
-
color: #f4dbd6;
-
font-style: italic;
+
color: #f4dbd6;
+
font-style: italic;
}
html[data-theme="dark"] .z-variable.z-other {
-
color: #cad3f5;
-
font-style: italic;
+
color: #cad3f5;
+
font-style: italic;
}
html[data-theme="dark"] .z-variable.z-other.z-member {
-
color: #f4dbd6;
+
color: #f4dbd6;
}
html[data-theme="dark"] .z-variable.z-language {
-
color: #8bd5ca;
+
color: #8bd5ca;
}
html[data-theme="dark"] .z-entity.z-name.z-tag {
-
color: #f5a97f;
+
color: #f5a97f;
}
html[data-theme="dark"] .z-entity.z-other.z-attribute-name {
-
color: #c6a0f6;
-
font-style: italic;
+
color: #c6a0f6;
+
font-style: italic;
}
html[data-theme="dark"] .z-punctuation.z-definition.z-tag {
-
color: #ee99a0;
+
color: #ee99a0;
}
html[data-theme="dark"] .z-markup.z-underline.z-link.z-markdown {
-
color: #f4dbd6;
-
text-decoration: underline;
-
font-style: italic;
+
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;
+
color: #b7bdf8;
+
font-weight: bold;
}
html[data-theme="dark"] .z-comment.z-block.z-markdown,
html[data-theme="dark"] .z-meta.z-code-fence,
html[data-theme="dark"] .z-markup.z-raw.z-code-fence,
html[data-theme="dark"] .z-markup.z-raw.z-inline {
-
color: #8bd5ca;
-
font-style: italic;
+
color: #8bd5ca;
+
font-style: italic;
}
html[data-theme="dark"] .z-punctuation.z-definition.z-heading,
html[data-theme="dark"] .z-entity.z-name.z-section {
-
color: #8aadf4;
-
font-weight: bold;
+
color: #8aadf4;
+
font-weight: bold;
}
html[data-theme="dark"] .z-markup.z-italic {
-
color: #ee99a0;
-
font-style: italic;
+
color: #ee99a0;
+
font-style: italic;
}
html[data-theme="dark"] .z-markup.z-bold {
-
color: #ee99a0;
-
font-weight: bold;
+
color: #ee99a0;
+
font-weight: bold;
}
html[data-theme="dark"] .z-constant.z-character.z-escape {
-
color: #f5bde6;
+
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;
+
.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;
+
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;
+
.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;
+
.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;
+
color: #8bd5ca;
}
html[data-theme="dark"] .z-support.z-type.z-property-name.z-css {
-
color: #f0c6c6;
-
font-style: italic;
+
color: #f0c6c6;
+
font-style: italic;
}
html[data-theme="dark"] .z-support.z-constant.z-property-value.z-css {
-
color: #cad3f5;
+
color: #cad3f5;
}
html[data-theme="dark"] .z-constant.z-numeric.z-suffix.z-css,
html[data-theme="dark"] .z-keyword.z-other.z-unit.z-css {
-
color: #8bd5ca;
-
font-style: italic;
+
color: #8bd5ca;
+
font-style: italic;
}
html[data-theme="dark"] .z-variable.z-other.z-custom-property.z-name.z-css,
html[data-theme="dark"] .z-support.z-type.z-custom-property.z-name.z-css,
html[data-theme="dark"] .z-punctuation.z-definition.z-custom-property.z-css {
-
color: #8bd5ca;
+
color: #8bd5ca;
}
html[data-theme="dark"] .z-entity.z-name.z-tag.z-css {
-
color: #b7bdf8;
+
color: #b7bdf8;
}
html[data-theme="dark"] .z-variable.z-other.z-sass {
-
color: #8bd5ca;
+
color: #8bd5ca;
}
html[data-theme="dark"] .z-invalid {
-
color: #cad3f5;
-
background-color: #ed8796;
+
color: #cad3f5;
+
background-color: #ed8796;
}
html[data-theme="dark"] .z-invalid.z-deprecated {
-
color: #cad3f5;
-
background-color: #c6a0f6;
+
color: #cad3f5;
+
background-color: #c6a0f6;
}
html[data-theme="dark"] .z-meta.z-diff,
html[data-theme="dark"] .z-meta.z-diff.z-header {
-
color: #6e738d;
+
color: #6e738d;
}
html[data-theme="dark"] .z-markup.z-deleted {
-
color: #ed8796;
+
color: #ed8796;
}
html[data-theme="dark"] .z-markup.z-inserted {
-
color: #a6da95;
+
color: #a6da95;
}
html[data-theme="dark"] .z-markup.z-changed {
-
color: #eed49f;
+
color: #eed49f;
}
html[data-theme="dark"] .z-message.z-error {
-
color: #ed8796;
+
color: #ed8796;
}
+30 -25
static/js/script.js
···
-
const toggleButton = document.getElementById('theme-toggle');
-
const themeIcon = document.getElementById('theme-icon');
-
const themeSound = document.getElementById('theme-sound');
+
const toggleButton = document.getElementById("theme-toggle");
+
const themeIcon = document.getElementById("theme-icon");
+
const themeSound = document.getElementById("theme-sound");
// Function to update the theme icon based on the current theme
const updateThemeIcon = (isDarkMode) => {
-
const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
-
const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
-
themeIcon.querySelector('use').setAttribute('href', iconPath);
+
const themeMode = isDarkMode ? "darkMode" : "lightMode";
+
const iconPath = themeIcon
+
.querySelector("use")
+
.getAttribute("href")
+
.replace(/#.*$/, `#${themeMode}`);
+
themeIcon.querySelector("use").setAttribute("href", iconPath);
};
// Function to update the theme based on the current mode
const updateTheme = (isDarkMode) => {
-
const theme = isDarkMode ? 'dark' : 'light';
-
document.documentElement.setAttribute('data-theme', theme);
-
updateThemeIcon(isDarkMode);
+
const theme = isDarkMode ? "dark" : "light";
+
document.documentElement.setAttribute("data-theme", theme);
+
updateThemeIcon(isDarkMode);
};
// Function to toggle the theme
const toggleTheme = () => {
-
const isDarkMode = toggleButton.checked;
-
updateTheme(isDarkMode);
-
themeSound.play();
-
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+
const isDarkMode = toggleButton.checked;
+
updateTheme(isDarkMode);
+
themeSound.play();
+
localStorage.setItem("theme", isDarkMode ? "dark" : "light");
-
// Add transition class to body for smooth transition
-
document.body.classList.add('theme-transition');
-
setTimeout(() => {
-
document.body.classList.remove('theme-transition');
-
}, 300);
+
// Add transition class to body for smooth transition
+
document.body.classList.add("theme-transition");
+
setTimeout(() => {
+
document.body.classList.remove("theme-transition");
+
}, 300);
};
// Event listener for theme toggle
-
toggleButton.addEventListener('change', toggleTheme);
+
toggleButton.addEventListener("change", toggleTheme);
// Function to initialize the theme based on the stored preference
const initializeTheme = () => {
-
const storedTheme = localStorage.getItem('theme');
-
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
const isDarkMode = storedTheme === 'dark' || (!storedTheme && prefersDark);
-
toggleButton.checked = isDarkMode;
-
updateTheme(isDarkMode);
+
const storedTheme = localStorage.getItem("theme");
+
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
const isDarkMode = storedTheme === "dark" || (!storedTheme && prefersDark);
+
toggleButton.checked = isDarkMode;
+
updateTheme(isDarkMode);
};
// Initialize the theme
initializeTheme();
// Listen for changes in system preference
-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme);
+
window
+
.matchMedia("(prefers-color-scheme: dark)")
+
.addEventListener("change", initializeTheme);
+19 -1
static/site.webmanifest
···
-
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+
{
+
"name": "",
+
"short_name": "",
+
"icons": [
+
{
+
"src": "/android-chrome-192x192.png",
+
"sizes": "192x192",
+
"type": "image/png"
+
},
+
{
+
"src": "/android-chrome-512x512.png",
+
"sizes": "512x512",
+
"type": "image/png"
+
}
+
],
+
"theme_color": "#ffffff",
+
"background_color": "#ffffff",
+
"display": "standalone"
+
}
+13 -13
tools/package.json
···
{
-
"name": "zera",
-
"module": "index.ts",
-
"type": "module",
-
"scripts": {
-
"gen": "bun run tools/genOG.ts"
-
},
-
"devDependencies": {
-
"@types/bun": "latest",
-
"puppeteer": "^23.6.0"
-
},
-
"peerDependencies": {
-
"typescript": "^5.0.0"
-
}
+
"name": "zera",
+
"module": "index.ts",
+
"type": "module",
+
"scripts": {
+
"gen": "bun run tools/genOG.ts"
+
},
+
"devDependencies": {
+
"@types/bun": "latest",
+
"puppeteer": "^23.6.0"
+
},
+
"peerDependencies": {
+
"typescript": "^5.0.0"
+
}
}
+22 -22
tsconfig.json
···
{
-
"compilerOptions": {
-
// Enable latest features
-
"lib": ["ESNext", "DOM"],
-
"target": "ESNext",
-
"module": "ESNext",
-
"moduleDetection": "force",
-
"jsx": "react-jsx",
-
"allowJs": true,
+
"compilerOptions": {
+
// Enable latest features
+
"lib": ["ESNext", "DOM"],
+
"target": "ESNext",
+
"module": "ESNext",
+
"moduleDetection": "force",
+
"jsx": "react-jsx",
+
"allowJs": true,
-
// Bundler mode
-
"moduleResolution": "bundler",
-
"allowImportingTsExtensions": true,
-
"verbatimModuleSyntax": true,
-
"noEmit": true,
+
// Bundler mode
+
"moduleResolution": "bundler",
+
"allowImportingTsExtensions": true,
+
"verbatimModuleSyntax": true,
+
"noEmit": true,
-
// Best practices
-
"strict": true,
-
"skipLibCheck": true,
-
"noFallthroughCasesInSwitch": true,
+
// Best practices
+
"strict": true,
+
"skipLibCheck": true,
+
"noFallthroughCasesInSwitch": true,
-
// Some stricter flags (disabled by default)
-
"noUnusedLocals": false,
-
"noUnusedParameters": false,
-
"noPropertyAccessFromIndexSignature": false
-
}
+
// Some stricter flags (disabled by default)
+
"noUnusedLocals": false,
+
"noUnusedParameters": false,
+
"noPropertyAccessFromIndexSignature": false
+
}
}