commit 17f2462baf29cdb258bdbc8b1bfa84436c580b9f Author: voidarc Date: Sat Mar 21 14:53:25 2026 +0000 initial diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..aae75ac --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "content"] + path = content + url = https://git.voidarc.co.uk/voidarc/blog.norg diff --git a/assets/norgolith.svg b/assets/norgolith.svg new file mode 100644 index 0000000..6da6bf3 --- /dev/null +++ b/assets/norgolith.svg @@ -0,0 +1,181 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..3417daf --- /dev/null +++ b/assets/style.css @@ -0,0 +1,110 @@ +/* Default fonts */ +@font-face { + font-family: "Inter"; + font-style: normal; + font-display: swap; + font-weight: 100 900; + src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +@font-face { + font-family: "JetBrains Mono"; + font-style: normal; + font-display: swap; + font-weight: 100 800; + src: url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +@font-face { + font-family: "JetBrains Mono Italic"; + font-style: italic; + font-display: swap; + font-weight: 100 800; + src: url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/latin-wght-italic.woff2) format('woff2-variations'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +/* Styling */ +*, *:before, *:after { + box-sizing: border-box; +} + +body { + color: white; + background-color: #202030; + width: auto; + height: 100%; + font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +/* Inline verbatim `` */ +code { + font-family: "JetBrains Mono", monospace; + background-color: #303040; + border-radius: 6px; + padding: 0px 4px; +} + +/* PrismJS specific css */ +pre[class*="language-"], +code[class*="language-"] { + text-shadow: unset !important; + font-family: "JetBrains Mono", monospace !important; +} + +/* PrismJS line-numbers plugin */ +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.4em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + /* letter-spacing: -1px; */ + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.line-numbers-rows > span { + display: block; + counter-increment: linenumber; +} + +.line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; +} + +/* Norgolith landing page styling */ +#desc > a, +#discord-link > a, +#github-pages > a, +#github-issues > a { + color: var(--color-blue-400); +} +#desc > a:hover, +#discord-link > a:hover, +#github-pages > a:hover, +#github-issues > a:hover { + text-decoration: underline; +} diff --git a/content b/content new file mode 160000 index 0000000..9c423da --- /dev/null +++ b/content @@ -0,0 +1 @@ +Subproject commit 9c423da16696186d3ce64203d95926397b16ff3f diff --git a/norgolith.toml b/norgolith.toml new file mode 100644 index 0000000..9dcbfd8 --- /dev/null +++ b/norgolith.toml @@ -0,0 +1,30 @@ +rootUrl = 'https://blog.voidarc.co.uk' +language = 'en-US' +title = 'voidarc' +author = 'user01' + +# Code blocks highlighting +[highlighter] +enable = false +# engine = 'prism' # Can be 'prism' or 'hljs'. Defaults to 'prism' + +# RSS feed +[rss] +enable = true +description = 'Latest posts' +ttl = 60 +image = '/assets/favicon.png' + +[extra] +license = "MIT" # Optional +favicon_path = "/assets/norgolith.svg" # Fallback to default favicon +footer_author_link = "https://git.voidarc.co.uk/voidarc" # Optional +enable_mermaid = true # Enable Mermaid.js for diagrams + +[extra.nav] +blog = "/posts" +Git = "https://git.voidarc.co.uk" + +[extra.footer] +Link_name = "url" +GitHub = "https://git.voidarc.co.uk/voidarc" diff --git a/public/assets/css/prism-sweetie.min.css b/public/assets/css/prism-sweetie.min.css new file mode 100644 index 0000000..294dc34 --- /dev/null +++ b/public/assets/css/prism-sweetie.min.css @@ -0,0 +1 @@ +pre[class*=language-]{--padding-y:var(--am-prism-padding-y, 1rem);--padding-x:var(--am-prism-padding-x, 1rem);padding:var(--padding-y) var(--padding-x);overflow:auto;font-size:var(--am-prism-font-size,.85em);border-radius:var(--am-prism-border-radius,.4em)}pre>code[class*=language-]{padding:initial;font-size:1em;font-weight:400;font-family:var(--am-prism-font-family,ui-monospace),monospace;line-height:var(--am-prism-line-height,1.5);background-color:initial}code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-] .line-numbers-rows{box-sizing:content-box;margin:calc(var(--padding-y) * -1) 0;padding:var(--padding-y) 0}.line-numbers.line-numbers .line-numbers-rows{border-right-width:var(--am-prism-border-width,1px);border-right-color:var(--am-prism-border-color)}.line-numbers .line-numbers-rows>span:before{color:var(--am-prism-line-numbers-color)}div.code-toolbar>.toolbar{top:.3rem!important;right:.3rem!important}div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button{display:inline-flex;padding:0 .75em;font-size:var(--am-prism-font-size,.8em);font-family:var(--am-prism-font-family,ui-monospace),monospace;font-weight:600!important;line-height:2.25em;color:var(--am-prism-copy-color);background-color:var(--am-prism-copy-bg);border-radius:calc(var(--am-prism-border-radius, .4em) - .1em);cursor:pointer;box-shadow:none;opacity:1;transition:opacity .2s}div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button:hover{opacity:.8}div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button:focus{opacity:1}code[class*=language-],pre[class*=language-]{color:#202023}pre[class*=language-]{background:#bbbbce}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#202023;background:#bbbbce}pre[data-line]{position:relative}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:#fff8c5;box-shadow:inset 5px 0 0 #eed888;z-index:0;pointer-events:none;line-height:inherit;white-space:pre}.namespace{opacity:.7}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8989a9}.token.operator,.token.punctuation{color:#0c5090}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.class-name,.token.symbol,.token.tag{color:#ae580e}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#287f0d}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#287f0d}.token.atrule,.token.attr-value,.token.keyword{color:#0c5090}.token.function{color:#a00c79}.token.macro,.token.important,.token.regex,.token.variable{color:#9437ff}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--am-prism-line-numbers-color:#18181a77;--am-prism-border-color:#18181a22;--am-prism-copy-color:#202023aa;--am-prism-copy-bg:#78789d22}html[class*="-dark"],html[class*="dark-"],.dark{& code[class*=language-],& pre[class*=language-]{color:#d3d7de}& pre[class*=language-]{background:#303040}& :not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#bdbdbd;background:#303040}& pre[data-line]{position:relative}& pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}& .line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:#2f2a1e;box-shadow:inset 5px 0 0 #674c16;z-index:0;pointer-events:none;line-height:inherit;white-space:pre}& .namespace{opacity:.7}& .token.cdata,& .token.comment,& .token.doctype,& .token.prolog{color:#798399}& .token.punctuation,& .token.operator,& .token.variable{color:#73a3f3}& .token.boolean,& .token.constant,& .token.deleted,& .token.number,& .token.property,& .token.symbol,& .token.class-name,& .token.tag{color:#e7a06a}& .token.attr-name,& .token.builtin,& .token.char,& .token.inserted,& .token.selector,& .token.string{color:#89c252}& .language-css .token.string,& .style .token.string,& .token.entity,& .token.url{color:#89c252;background:#161b22}& .token.atrule,& .token.keyword{color:#73a3f3}& .token.attr-value,& .token.function{color:#d087e8}& .token.macro,& .token.important,& .token.regex{color:#b094e2}& .token.bold,& .token.important{font-weight:700}& .token.italic{font-style:italic}& .token.entity{cursor:help}&{--am-prism-line-numbers-color:#bdbdbd55;--am-prism-border-color:#bdbdbd22;--am-prism-copy-color:#d3d7de;--am-prism-copy-bg:#707b8722}} diff --git a/public/assets/css/styles.min.css b/public/assets/css/styles.min.css new file mode 100644 index 0000000..2d8e720 --- /dev/null +++ b/public/assets/css/styles.min.css @@ -0,0 +1,1372 @@ +/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ +@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap"); +@import url("https://unpkg.com/@catppuccin/palette/css/catppuccin.css"); +@layer properties; +@layer theme, base, components, utilities; +@layer theme { + :root, :host { + --font-sans: "Fira Mono", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-mono: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; + --color-blue-400: oklch(70.7% 0.165 254.624); + --spacing: 0.25rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --leading-relaxed: 1.625; + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --ease-in: cubic-bezier(0.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); + --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --default-transition-duration: 150ms; + --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + --color-base: var(--base); + --color-base-alt: var(--base-alt); + --color-surface: var(--surface); + --color-text: var(--text); + --color-text-alt: var(--text-alt); + --color-grey: var(--grey); + --color-dark-grey: var(--dark-grey); + --color-red: var(--red); + --color-orange: var(--orange); + --color-green: var(--green); + --color-teal: var(--teal); + --color-yellow: var(--yellow); + --color-blue: var(--blue); + --color-magenta: var(--magenta); + --color-violet: var(--violet); + --color-cyan: var(--cyan); + } +} +@layer base { + *, ::after, ::before, ::backdrop, ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, strong { + font-weight: bolder; + } + code, kbd, samp, pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring { + outline: auto; + } + progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, ul, menu { + list-style: none; + } + img, svg, video, canvas, audio, iframe, embed, object { + display: block; + vertical-align: middle; + } + img, video { + max-width: 100%; + height: auto; + } + button, input, select, optgroup, textarea, ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + } + textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { + appearance: button; + } + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden='until-found'])) { + display: none !important; + } +} +@layer utilities { + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + border-width: 0; + } + .relative { + position: relative; + } + .static { + position: static; + } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } + .mx-auto { + margin-inline: auto; + } + .mt-0\! { + margin-top: calc(var(--spacing) * 0) !important; + } + .mt-4 { + margin-top: calc(var(--spacing) * 4); + } + .mt-6 { + margin-top: calc(var(--spacing) * 6); + } + .mt-8 { + margin-top: calc(var(--spacing) * 8); + } + .mt-12 { + margin-top: calc(var(--spacing) * 12); + } + .mr-1 { + margin-right: calc(var(--spacing) * 1); + } + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } + .mr-4 { + margin-right: calc(var(--spacing) * 4); + } + .mr-px { + margin-right: 1px; + } + .block { + display: block; + } + .flex { + display: flex; + } + .hidden { + display: none; + } + .inline-flex { + display: inline-flex; + } + .h-5 { + height: calc(var(--spacing) * 5); + } + .h-8 { + height: calc(var(--spacing) * 8); + } + .h-16 { + height: calc(var(--spacing) * 16); + } + .min-h-screen { + min-height: 100vh; + } + .w-5 { + width: calc(var(--spacing) * 5); + } + .w-8 { + width: calc(var(--spacing) * 8); + } + .w-fit { + width: fit-content; + } + .w-full { + width: 100%; + } + .max-w-\[50\%\] { + max-width: 50%; + } + .flex-1 { + flex: 1; + } + .shrink-0 { + flex-shrink: 0; + } + .rotate-90 { + rotate: 90deg; + } + .flex-col { + flex-direction: column; + } + .flex-row { + flex-direction: row; + } + .flex-wrap { + flex-wrap: wrap; + } + .items-center { + align-items: center; + } + .justify-between { + justify-content: space-between; + } + .justify-center { + justify-content: center; + } + .space-y-2 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-4 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-x-1 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-2 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-4 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); + } + } + .truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .rounded-lg { + border-radius: var(--radius-lg); + } + .rounded-md { + border-radius: var(--radius-md); + } + .rounded-sm { + border-radius: var(--radius-sm); + } + .rounded-xl { + border-radius: var(--radius-xl); + } + .border-2 { + border-style: var(--tw-border-style); + border-width: 2px; + } + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + } + .border-base-alt { + border-color: var(--color-base-alt); + } + .border-t-base-alt { + border-top-color: var(--color-base-alt); + } + .bg-\[\#303040\] { + background-color: #303040; + } + .bg-grey { + background-color: var(--color-grey); + } + .bg-surface { + background-color: var(--color-surface); + } + .p-2 { + padding: calc(var(--spacing) * 2); + } + .p-4 { + padding: calc(var(--spacing) * 4); + } + .px-1 { + padding-inline: calc(var(--spacing) * 1); + } + .px-3 { + padding-inline: calc(var(--spacing) * 3); + } + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + .px-6 { + padding-inline: calc(var(--spacing) * 6); + } + .py-2 { + padding-block: calc(var(--spacing) * 2); + } + .py-4 { + padding-block: calc(var(--spacing) * 4); + } + .pt-2 { + padding-top: calc(var(--spacing) * 2); + } + .pt-6 { + padding-top: calc(var(--spacing) * 6); + } + .pt-8 { + padding-top: calc(var(--spacing) * 8); + } + .pt-10 { + padding-top: calc(var(--spacing) * 10); + } + .pb-4 { + padding-bottom: calc(var(--spacing) * 4); + } + .text-center { + text-align: center; + } + .font-mono { + font-family: var(--font-mono); + } + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + .font-medium { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + .break-keep { + word-break: keep-all; + } + .text-base { + color: var(--color-base); + } + .text-blue { + color: var(--color-blue); + } + .text-blue\! { + color: var(--color-blue) !important; + } + .text-blue-400 { + color: var(--color-blue-400); + } + .text-dark-grey { + color: var(--color-dark-grey); + } + .text-grey { + color: var(--color-grey); + } + .text-magenta { + color: var(--color-magenta); + } + .text-magenta\! { + color: var(--color-magenta) !important; + } + .text-red { + color: var(--color-red); + } + .text-text { + color: var(--color-text); + } + .text-text-alt { + color: var(--color-text-alt); + } + .text-text\/70 { + color: var(--color-text); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-text) 70%, transparent); + } + } + .capitalize { + text-transform: capitalize; + } + .italic { + font-style: italic; + } + .tabular-nums { + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .no-underline\! { + text-decoration-line: none !important; + } + .opacity-0 { + opacity: 0%; + } + .opacity-100 { + opacity: 100%; + } + .shadow-lg { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-sm { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .transition { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-all { + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-colors { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .duration-150 { + --tw-duration: 150ms; + transition-duration: 150ms; + } + .duration-200 { + --tw-duration: 200ms; + transition-duration: 200ms; + } + .duration-300 { + --tw-duration: 300ms; + transition-duration: 300ms; + } + .ease-in { + --tw-ease: var(--ease-in); + transition-timing-function: var(--ease-in); + } + .ease-in-out { + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); + } + .ease-linear { + --tw-ease: linear; + transition-timing-function: linear; + } + .ease-out { + --tw-ease: var(--ease-out); + transition-timing-function: var(--ease-out); + } + .last\:mr-0 { + &:last-child { + margin-right: calc(var(--spacing) * 0); + } + } + .hover\:bg-magenta { + &:hover { + @media (hover: hover) { + background-color: var(--color-magenta); + } + } + } + .hover\:text-base\! { + &:hover { + @media (hover: hover) { + color: var(--color-base) !important; + } + } + } + .hover\:text-blue { + &:hover { + @media (hover: hover) { + color: var(--color-blue); + } + } + } + .hover\:text-blue-400 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-400); + } + } + } + .hover\:text-text-alt { + &:hover { + @media (hover: hover) { + color: var(--color-text-alt); + } + } + } + .hover\:text-yellow { + &:hover { + @media (hover: hover) { + color: var(--color-yellow); + } + } + } + .hover\:no-underline\! { + &:hover { + @media (hover: hover) { + text-decoration-line: none !important; + } + } + } + .hover\:underline { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } + } + } + .hover\:underline\! { + &:hover { + @media (hover: hover) { + text-decoration-line: underline !important; + } + } + } + .hover\:decoration-dashed { + &:hover { + @media (hover: hover) { + text-decoration-style: dashed; + } + } + } + .focus\:outline-none { + &:focus { + --tw-outline-style: none; + outline-style: none; + } + } + .md\:mr-6 { + @media (width >= 48rem) { + margin-right: calc(var(--spacing) * 6); + } + } + .md\:flex { + @media (width >= 48rem) { + display: flex; + } + } + .md\:hidden { + @media (width >= 48rem) { + display: none; + } + } + .md\:flex-row { + @media (width >= 48rem) { + flex-direction: row; + } + } + .md\:items-center { + @media (width >= 48rem) { + align-items: center; + } + } + .md\:space-y-0 { + @media (width >= 48rem) { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))); + } + } + } + .md\:space-x-8 { + @media (width >= 48rem) { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse))); + } + } + } + .md\:px-0 { + @media (width >= 48rem) { + padding-inline: calc(var(--spacing) * 0); + } + } + .md\:text-2xl { + @media (width >= 48rem) { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + } + .md\:text-sm { + @media (width >= 48rem) { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + } + .md\:text-xl { + @media (width >= 48rem) { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + } + .lg\:mr-8 { + @media (width >= 64rem) { + margin-right: calc(var(--spacing) * 8); + } + } + .dark\:border-t-\[\#39394b\] { + &:where(.dark, .dark *) { + border-top-color: #39394b; + } + } + .dark\:text-grey { + &:where(.dark, .dark *) { + color: var(--color-grey); + } + } +} +@layer base { + button:not(:disabled), [role="button"]:not(:disabled) { + cursor: pointer; + } +} +@layer utilities { + .table { + display: initial; + } +} +:root { + --base: var(--ctp-latte-base); + --base-alt: var(--ctp-latte-mantle); + --surface: var(--ctp-latte-surface0); + --text: var(--ctp-latte-text); + --text-alt: var(--ctp-latte-subtext1); + --grey: var(--ctp-latte-overlay1); + --dark-grey: var(--ctp-latte-overlay0); + --magenta: var(--ctp-latte-mauve); + --red: var(--ctp-latte-red); + --orange: var(--ctp-latte-peach); + --yellow: var(--ctp-latte-yellow); + --green: var(--ctp-latte-green); + --teal: var(--ctp-latte-teal); + --cyan: var(--ctp-latte-sky); + --blue: var(--ctp-latte-blue); + --violet: var(--ctp-latte-lavender); +} +:root.dark { + --base: var(--ctp-mocha-base); + --base-alt: var(--ctp-mocha-mantle); + --surface: var(--ctp-mocha-surface0); + --text: var(--ctp-mocha-text); + --text-alt: var(--ctp-mocha-subtext1); + --grey: var(--ctp-mocha-overlay1); + --dark-grey: var(--ctp-mocha-overlay0); + --magenta: var(--ctp-mocha-mauve); + --red: var(--ctp-mocha-red); + --orange: var(--ctp-mocha-peach); + --yellow: var(--ctp-mocha-yellow); + --green: var(--ctp-mocha-green); + --teal: var(--ctp-mocha-teal); + --cyan: var(--ctp-mocha-sky); + --blue: var(--ctp-mocha-blue); + --violet: var(--ctp-mocha-lavender); +} +html { + scrollbar-color: var(--blue) var(--surface); + scroll-behavior: smooth; + font-family: var(--font-sans); + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); +} +body { + background-color: var(--color-base); + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + color: var(--color-text); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +main a { + text-decoration-line: underline; + &:hover { + @media (hover: hover) { + color: var(--color-blue); + } + } +} +a.icon { + text-decoration-line: none; +} +a { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 200ms; + transition-duration: 200ms; + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); +} +hr { + color: var(--color-base-alt); + &:where(.dark, .dark *) { + --tw-brightness: brightness(120%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } +} +header, footer { + background-color: var(--color-surface); + color: var(--color-text-alt); +} +h1, h2, h3, h4, h5, h6 { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); +} +h1 { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); +} +h2 { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + counter-increment: h2; + counter-reset: h3; +} +h3 { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + counter-increment: h3; + counter-reset: h4; +} +h4 { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + counter-increment: h4; +} +h5 { + counter-increment: h5; +} +h6 { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + counter-increment: h6; +} +p { + padding-block: calc(var(--spacing) * 2); + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); +} +strong { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); +} +ul { + list-style-type: disc; +} +ol { + list-style-type: decimal; +} +ul, ol { + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); +} +nav ul, nav ol { + margin-inline: calc(var(--spacing) * 2); + list-style-type: none; + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))); + } +} +main ul { + padding-left: calc(var(--spacing) * 4); +} +main h2, article h2, section h2 { + margin-top: calc(var(--spacing) * 10); +} +main h3, article h3, section h3 { + margin-top: calc(var(--spacing) * 8); +} +main h4, article h4, section h4 { + margin-top: calc(var(--spacing) * 6); +} +main h5, article h5, section h5 { + margin-top: calc(var(--spacing) * 4); +} +main h6, article h6, section h6 { + margin-top: calc(var(--spacing) * 2); +} +main div#content h2:not(:first-child) { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-top-color: var(--color-base-alt); + padding-top: calc(var(--spacing) * 5); + &:where(.dark, .dark *) { + border-top-color: #39394b; + } +} +main div#content h3:not(:first-child) { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-top-color: var(--color-base-alt); + padding-top: calc(var(--spacing) * 4); + &:where(.dark, .dark *) { + border-top-color: #39394b; + } +} +main div#content h4:not(:first-child) { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-top-color: var(--color-base-alt); + padding-top: calc(var(--spacing) * 3); + &:where(.dark, .dark *) { + border-top-color: #39394b; + } +} +main div#content h5:not(:first-child) { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-top-color: var(--color-base-alt); + padding-top: calc(var(--spacing) * 2); + &:where(.dark, .dark *) { + border-top-color: #39394b; + } +} +main div#content h6:not(:first-child) { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-top-color: var(--color-base-alt); + padding-top: calc(var(--spacing) * 1); + &:where(.dark, .dark *) { + border-top-color: #39394b; + } +} +blockquote { + margin-block: calc(var(--spacing) * 4); + border-top-right-radius: var(--radius-sm); + border-bottom-right-radius: var(--radius-sm); + border-inline-start-style: var(--tw-border-style); + border-inline-start-width: 4px; + border-color: var(--color-base-alt); + background-color: var(--color-surface); + padding: calc(var(--spacing) * 4); + &:where(.dark, .dark *) { + border-color: var(--color-surface); + } + &:where(.dark, .dark *) { + background-color: var(--color-base-alt); + } +} +blockquote.tip { + border-color: var(--color-green); + background-color: var(--color-green); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-green) 30%, transparent); + } +} +blockquote.note { + border-color: var(--color-blue); + background-color: var(--color-blue); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue) 30%, transparent); + } +} +blockquote.important { + border-color: var(--color-violet); + background-color: var(--color-violet); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-violet) 30%, transparent); + } +} +blockquote.warning { + border-color: var(--color-yellow); + background-color: var(--color-yellow); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-yellow) 30%, transparent); + } +} +blockquote.error { + border-color: var(--color-red); + background-color: var(--color-red); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-red) 30%, transparent); + } +} +blockquote > p { + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); +} +code:not([class*="language-"]) { + border-radius: var(--radius-md); + background-color: var(--color-base-alt); + padding-inline: calc(var(--spacing) * 1); + padding-block: 1px; + font-family: var(--font-mono); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + &:where(.dark, .dark *) { + background-color: var(--color-surface); + } + &:where(.dark, .dark *) { + --tw-brightness: brightness(80%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } +} +nav.toc { + height: calc(3/4 * 100%); + border-radius: var(--radius-md); + border-style: var(--tw-border-style); + border-width: 2px; + border-color: var(--color-base-alt); + background-color: var(--color-surface); + padding-top: calc(var(--spacing) * 4); + padding-bottom: calc(var(--spacing) * 4); + font-family: var(--font-mono); +} +nav.toc ol { + list-style-position: inside; + list-style-type: decimal; + padding-left: calc(var(--spacing) * 4); +} +nav.toc ul { + list-style-position: inside; + list-style-type: disc; + padding-left: calc(var(--spacing) * 4); +} +nav.toc ol li, nav.toc ul li { + margin-top: calc(var(--spacing) * 0); + padding-bottom: calc(var(--spacing) * 0); +} +nav.toc ol li a, nav.toc ul li a { + text-decoration-line: none; + &:hover { + @media (hover: hover) { + color: var(--color-blue); + } + } +} +nav.toc ol li::marker, nav.toc ul li::marker { + &:hover { + @media (hover: hover) { + color: var(--color-blue); + } + } +} +nav.toc ol li ol, nav.toc ul li ul { + padding-bottom: calc(var(--spacing) * 2); +} +pre[class*="language-"], code[class*="language-"] { + font-variant-ligatures: common-ligatures !important; + background-color: var(--color-surface) !important; + font-family: var(--font-mono) !important; + text-shadow: none !important; + &:where(.dark, .dark *) { + background-color: var(--color-base-alt); + } +} +pre[class*="language-"].line-numbers { + counter-reset: linenumber; + position: relative; + padding-left: calc(var(--spacing) * 13); +} +pre[class*="language-"].line-numbers > code { + white-space: inherit; + position: relative; +} +.line-numbers .line-numbers-rows { + pointer-events: none; + position: absolute; + top: -1.5px; + left: calc(var(--spacing) * -12); + display: flex; + width: calc(var(--spacing) * 10); + flex-direction: column; + border-right-style: var(--tw-border-style) !important; + border-right-width: 1px !important; + border-right-color: var(--color-grey) !important; + -webkit-user-select: none; + user-select: none; +} +.line-numbers-rows > span { + counter-increment: linenumber; + display: block; + --tw-leading: 1.5; + line-height: 1.5; +} +.line-numbers-rows > span:before { + content: counter(linenumber); + display: block; + padding-right: calc(var(--spacing) * 2); + text-align: right; + color: var(--color-grey) !important; +} +pre.mermaid { + display: flex; + justify-content: center; +} +.dark .mermaid { + filter: invert(0.9) hue-rotate(180deg); +} +@property --tw-space-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-space-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} +@property --tw-ordinal { + syntax: "*"; + inherits: false; +} +@property --tw-slashed-zero { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-figure { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-spacing { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-fraction { + syntax: "*"; + inherits: false; +} +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-duration { + syntax: "*"; + inherits: false; +} +@property --tw-ease { + syntax: "*"; + inherits: false; +} +@property --tw-blur { + syntax: "*"; + inherits: false; +} +@property --tw-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-invert { + syntax: "*"; + inherits: false; +} +@property --tw-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-drop-shadow-size { + syntax: "*"; + inherits: false; +} +@property --tw-leading { + syntax: "*"; + inherits: false; +} +@property --tw-text-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-text-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-space-y-reverse: 0; + --tw-space-x-reverse: 0; + --tw-border-style: solid; + --tw-font-weight: initial; + --tw-ordinal: initial; + --tw-slashed-zero: initial; + --tw-numeric-figure: initial; + --tw-numeric-spacing: initial; + --tw-numeric-fraction: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-duration: initial; + --tw-ease: initial; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + --tw-leading: initial; + --tw-text-shadow-color: initial; + --tw-text-shadow-alpha: 100%; + } + } +} diff --git a/public/assets/css/tailwind.css b/public/assets/css/tailwind.css new file mode 100644 index 0000000..82be138 --- /dev/null +++ b/public/assets/css/tailwind.css @@ -0,0 +1 @@ +@import "https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap";@import "https://unpkg.com/@catppuccin/palette/css/catppuccin.css";@import "tailwindcss";@source "../../../content";@source "../../../templates";@source "../../templates";@custom-variant dark (&:where(.dark,.dark*));@layer base{button:not(:disabled),[role=button]:not(:disabled){cursor:pointer}}@layer utilities{.table{display:initial}}:root{--base:var(--ctp-latte-base);--base-alt:var(--ctp-latte-mantle);--surface:var(--ctp-latte-surface0);--text:var(--ctp-latte-text);--text-alt:var(--ctp-latte-subtext1);--grey:var(--ctp-latte-overlay1);--dark-grey:var(--ctp-latte-overlay0);--magenta:var(--ctp-latte-mauve);--red:var(--ctp-latte-red);--orange:var(--ctp-latte-peach);--yellow:var(--ctp-latte-yellow);--green:var(--ctp-latte-green);--teal:var(--ctp-latte-teal);--cyan:var(--ctp-latte-sky);--blue:var(--ctp-latte-blue);--violet:var(--ctp-latte-lavender)}:root.dark{--base:var(--ctp-mocha-base);--base-alt:var(--ctp-mocha-mantle);--surface:var(--ctp-mocha-surface0);--text:var(--ctp-mocha-text);--text-alt:var(--ctp-mocha-subtext1);--grey:var(--ctp-mocha-overlay1);--dark-grey:var(--ctp-mocha-overlay0);--magenta:var(--ctp-mocha-mauve);--red:var(--ctp-mocha-red);--orange:var(--ctp-mocha-peach);--yellow:var(--ctp-mocha-yellow);--green:var(--ctp-mocha-green);--teal:var(--ctp-mocha-teal);--cyan:var(--ctp-mocha-sky);--blue:var(--ctp-mocha-blue);--violet:var(--ctp-mocha-lavender)}@theme static{--font-sans: "Fira Mono",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: "Fira Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-base: var(--base); --color-base-alt: var(--base-alt); --color-surface: var(--surface); --color-text: var(--text); --color-text-alt: var(--text-alt); --color-grey: var(--grey); --color-dark-grey: var(--dark-grey); --color-red: var(--red); --color-orange: var(--orange); --color-green: var(--green); --color-teal: var(--teal); --color-yellow: var(--yellow); --color-blue: var(--blue); --color-magenta: var(--magenta); --color-violet: var(--violet); --color-cyan: var(--cyan);}html{scrollbar-color:var(--blue)var(--surface);@apply scroll-smooth tabular-nums font-sans;}body{@apply bg-base text-text antialiased font-medium;}main a{@apply underline hover:text-blue;}a.icon{@apply no-underline;}a{@apply transition-colors duration-200 ease-in-out;}hr{@apply text-base-alt dark:brightness-120;}header,footer{@apply bg-surface text-text-alt;}h1,h2,h3,h4,h5,h6{@apply font-bold;}h1{@apply text-3xl;}h2{counter-increment:h2;counter-reset:h3;@apply text-2xl;}h3{counter-increment:h3;counter-reset:h4;@apply text-xl;}h4{counter-increment:h4;@apply text-lg;}h5{counter-increment:h5}h6{counter-increment:h6;@apply font-semibold;}p{@apply leading-relaxed py-2;}strong{@apply font-semibold;}ul{@apply list-disc;}ol{@apply list-decimal;}ul,ol{@apply leading-relaxed;}nav ul,nav ol{@apply mx-2 space-y-0 list-none;}main ul{@apply pl-4;}main h2,article h2,section h2{@apply mt-10;}main h3,article h3,section h3{@apply mt-8;}main h4,article h4,section h4{@apply mt-6;}main h5,article h5,section h5{@apply mt-4;}main h6,article h6,section h6{@apply mt-2;}main div#content h2:not(:first-child){@apply border-t border-t-base-alt dark:border-t-[#39394b]pt-5;}main div#content h3:not(:first-child){@apply border-t border-t-base-alt dark:border-t-[#39394b]pt-4;}main div#content h4:not(:first-child){@apply border-t border-t-base-alt dark:border-t-[#39394b]pt-3;}main div#content h5:not(:first-child){@apply border-t border-t-base-alt dark:border-t-[#39394b]pt-2;}main div#content h6:not(:first-child){@apply border-t border-t-base-alt dark:border-t-[#39394b]pt-1;}blockquote{@apply p-4 my-4 border-s-4 rounded-r-sm border-base-alt bg-surface dark:border-surface dark:bg-base-alt;}blockquote.tip{@apply border-green bg-green/30;}blockquote.note{@apply border-blue bg-blue/30;}blockquote.important{@apply border-violet bg-violet/30;}blockquote.warning{@apply border-yellow bg-yellow/30;}blockquote.error{@apply border-red bg-red/30;}blockquote>p{@apply leading-relaxed;}code:not([class*=language-]){@apply px-1 py-px font-mono text-sm rounded-md bg-base-alt dark:bg-surface dark:brightness-80;}nav.toc{@apply h-3/4 pt-4 pb-4 font-mono bg-surface border-2 border-base-alt rounded-md;}nav.toc ol{@apply pl-4 list-decimal list-inside;}nav.toc ul{@apply pl-4 list-disc list-inside;}nav.toc ol li,nav.toc ul li{@apply mt-0 pb-0;}nav.toc ol li a,nav.toc ul li a{@apply no-underline hover:text-blue;}nav.toc ol li::marker,nav.toc ul li::marker{@apply hover:text-blue;}nav.toc ol li ol,nav.toc ul li ul{@apply pb-2;}pre[class*=language-],code[class*=language-]{font-variant-ligatures:common-ligatures!important;@apply bg-surface!dark:bg-base-alt font-mono!text-shadow-none!;}pre[class*=language-].line-numbers{counter-reset:linenumber;@apply relative pl-13;}pre[class*=language-].line-numbers>code{white-space:inherit;@apply relative;}.line-numbers .line-numbers-rows{@apply absolute flex flex-col top-[-1.5px]-left-12 w-10 pointer-events-none select-none border-r!border-r-grey!;}.line-numbers-rows>span{counter-increment:linenumber;@apply block leading-[1.5];}.line-numbers-rows>span:before{content:counter(linenumber);@apply text-grey!text-right pr-2 block;}pre.mermaid{@apply flex justify-center;}.dark .mermaid{filter:invert(.9)hue-rotate(180deg)} \ No newline at end of file diff --git a/public/assets/norgolith.svg b/public/assets/norgolith.svg new file mode 100644 index 0000000..6da6bf3 --- /dev/null +++ b/public/assets/norgolith.svg @@ -0,0 +1,181 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/style.css b/public/assets/style.css new file mode 100644 index 0000000..eff6603 --- /dev/null +++ b/public/assets/style.css @@ -0,0 +1 @@ +@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;src:url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:100 800;src:url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/latin-wght-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono Italic;font-style:italic;font-display:swap;font-weight:100 800;src:url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/latin-wght-italic.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*,:before,:after{box-sizing:border-box}body{color:#fff;background-color:#202030;width:auto;height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}code{background-color:#303040;border-radius:6px;padding:0 4px;font-family:JetBrains Mono,monospace}pre[class*=language-],code[class*=language-]{text-shadow:unset!important;font-family:JetBrains Mono,monospace!important}pre[class*=language-].line-numbers{counter-reset:linenumber;padding-left:3.4em;position:relative}pre[class*=language-].line-numbers>code{white-space:inherit;position:relative}.line-numbers .line-numbers-rows{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-right:1px solid #999;width:3em;font-size:100%;position:absolute;top:0;left:-3.8em}.line-numbers-rows>span{counter-increment:linenumber;display:block}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;text-align:right;padding-right:.8em;display:block}#desc>a,#discord-link>a,#github-pages>a,#github-issues>a{color:var(--color-blue-400)}#desc>a:hover,#discord-link>a:hover,#github-pages>a:hover,#github-issues>a:hover{text-decoration:underline} \ No newline at end of file diff --git a/public/categories/blog/index.html b/public/categories/blog/index.html new file mode 100644 index 0000000..831cc88 --- /dev/null +++ b/public/categories/blog/index.html @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Category: blog - Voidarc + + + +
+
+ + +
+ +
+ +
+

Posts in blog

+

All the posts with the category "blog"

+
    + +
+
+ +
+ + +
+ + diff --git a/public/categories/index.html b/public/categories/index.html new file mode 100644 index 0000000..a7e477d --- /dev/null +++ b/public/categories/index.html @@ -0,0 +1,278 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Categories - Voidarc + + + +
+
+ + +
+ +
+ +
+

Categories

+

All the categories used in posts.

+
    + + + +
  • + blog + (0 posts) +
  • + + + +
  • + neorg + (0 posts) +
  • + + + +
  • + nvim + (0 posts) +
  • + + + +
  • + voidarc + (0 posts) +
  • + + + +
  • + webdev + (0 posts) +
  • + +
+
+ +
+ + +
+ + diff --git a/public/categories/neorg/index.html b/public/categories/neorg/index.html new file mode 100644 index 0000000..2094c55 --- /dev/null +++ b/public/categories/neorg/index.html @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Category: neorg - Voidarc + + + +
+
+ + +
+ +
+ +
+

Posts in neorg

+

All the posts with the category "neorg"

+
    + +
+
+ +
+ + +
+ + diff --git a/public/categories/nvim/index.html b/public/categories/nvim/index.html new file mode 100644 index 0000000..2cd055d --- /dev/null +++ b/public/categories/nvim/index.html @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Category: nvim - Voidarc + + + +
+
+ + +
+ +
+ +
+

Posts in nvim

+

All the posts with the category "nvim"

+
    + +
+
+ +
+ + +
+ + diff --git a/public/categories/voidarc/index.html b/public/categories/voidarc/index.html new file mode 100644 index 0000000..76d9996 --- /dev/null +++ b/public/categories/voidarc/index.html @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Category: voidarc - Voidarc + + + +
+
+ + +
+ +
+ +
+

Posts in voidarc

+

All the posts with the category "voidarc"

+
    + +
+
+ +
+ + +
+ + diff --git a/public/categories/webdev/index.html b/public/categories/webdev/index.html new file mode 100644 index 0000000..e069306 --- /dev/null +++ b/public/categories/webdev/index.html @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Category: webdev - Voidarc + + + +
+
+ + +
+ +
+ +
+

Posts in webdev

+

All the posts with the category "webdev"

+
    + +
+
+ +
+ + +
+ + diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..4cfa2ec --- /dev/null +++ b/public/index.html @@ -0,0 +1 @@ +Home - Voidarc

Voidarc

Home page for Voidarc Documentation (or whatever excuse for a blog this is). I just wanted to do this for fun idk. Seems interesting for A-level.

If you can read this, server02 hasn't crashed (yet) :)

test for webhook

Recent posts

Making a Blog Using a Niche Markdown Language

How to make a blog using Norg and some random project from github

Nonsense Preamble Neorg is a markdown Language that is Org mode but with some different shit in it. …

Read more …
\ No newline at end of file diff --git a/public/posts/index.html b/public/posts/index.html new file mode 100644 index 0000000..974af31 --- /dev/null +++ b/public/posts/index.html @@ -0,0 +1 @@ +Posts - Voidarc

Posts

Making a Blog Using a Niche Markdown Language

How to make a blog using Norg and some random project from github

Nonsense Preamble Neorg is a markdown Language that is Org mode but with some different shit in it. It is supposed to be a replacement, but since I never really used Org mode in the first place, that doesn't really apply. However, after using it for a whole 10 seconds, I decided I could never go bac…

Read more …
\ No newline at end of file diff --git a/public/posts/site/index.html b/public/posts/site/index.html new file mode 100644 index 0000000..5852b9d --- /dev/null +++ b/public/posts/site/index.html @@ -0,0 +1 @@ +Making A Blog Using A Niche Markdown Language - Voidarc

Making a Blog Using a Niche Markdown Language

Nonsense Preamble

Neorg is a markdown Language that is Org mode but with some different shit in it. It is supposed to be a replacement, but since I never really used Org mode in the first place, that doesn't really apply. However, after using it for a whole 10 seconds, I decided I could never go back to using Markdown ever again. Norg was just a superior language in almost every way, except widespread support. There are a plethora of plugins, but a distinct lack of real world uses, or even good utilities for using it outside of nvim, like it was intended. However, there was some random thing called Norgolith, that did apparently exactly what I needed it to, so here we are.

Norgolith

Apparently, as often happens on the internet, someone had thought of the same genius idea I had and made it already. I was fully prepared to have to spend 3 weeks making a custom solution in Javascript that would end up half baked, but fortunately someone had already done all the hard work for me!

A static site generator is exactly what it says on the tin. It takes in some manner of arbitrary markdown script, and spits out some html that can be served to the end user. Pretty simple if you ask me. Well, if you had asked me before I started that is. As things often go, I did things completely wrong the first time round. I assumed that, because I didn't know what generator meant, Norgolith would have some docker compose version that i could just shove some norg files into and it would handle the rest. That's literally what it says on the homepage, after all. Something something Sod's law. Turns out that I would have to use more than just docker in order to get something like this working.

The First Hurdle

When I first downloaded the app in question, the first problem I encountered was the blatant lack of documentation upkeep. As the docs indicated, I tried running lith serve to serve the app. Turns out, the command had been renamed to lith dev quite a while ago. The command itself hadn't changed, nor the functionality, just the name. Of course, this was as simple as I thought, because I tend not to think much when faced with simple concepts. The same thing happened when I decided on a whim to host an email server, which still to this day has not recieved a single email from anyone other than myself.

The First Attempt

Once I had realised that the docs were completely unreliable, I decided that it would be a great use of my time to try and follow them anyway. The creator (amartin) had done the usual blogger thing and hosted all the docs on Norgolith, which would be fine if Norgolith had a search function. Unfortunately, it does not, nor does it have a nice page where you can see all the pages that are outside of the post directory, which just so happened to be every page of the docs. In fact, on the doc site, there is a dead link to a theoretical post example, which was removed on github but not from the header.

Strange.

I initialised a Norg site in some random directory, still believing that I could host the whole thing self-sufficiently, and instead of reading more than the code snippets in the github readme, I set off immediately to make a docker container that would serve the app. By that, I mean I asked gemini and had to wait for the app to compile on my very old server. After a while, I gave up and went to do something else, because I'm lazy. The first site was a failiure.

The Second, More Successful, Attempt

For some reason, when I woke up the next day, something came over me. I realised that when I had run lith build, it had produced a static site , which made me realise that I might be stupid. I realised that using some complex webhooks, i.e. 1 webhook, I could have a local copy in norg form, and then have a git managed copy of the generated site. Shouldn't be too difficult using n8n, the only useful app I've ever installed. Before that, though, I could use the dev server for what it was actually intended for, and make a first post to style.

Styling, and my newfound love-hate relationship with Tailwind

Tailwind css was created in order to solve the really hard task of adding border-radius: 3; to anything on a website. Why use readable syntax when your css can be spread across 15 different files and require an interpreter, after all. Tailwind is based on immutable classes, and too many variables for my liking. Instead of using color: white; in a css file, you could apply the class text-text to every div on your page, provided that you set the --text variable to white beforehand, in a different file, and managed to compile it using the right version of tailwind. Because of the fact that I use nix, btw, the default package for tailwind provides tailwind 3, that requires npx nonsense packages in order to function, and also doesn't recognise half of the functions that are in the theme I stole borrowed and changed, as stated in the licence I definately read.

On my first try, having never used tailwind before, I decided to just edit the files and see what happened. Of course, because the tailwind.css file isn't the one that gets applied to the frontend, and nothing changed, so I gave up (I know, shocking).A On a retry, I used the tailwind_4 package, and it worked perfectly first try. Who could've guessed, I guess. Once I realised tailwind was actually pretty simple, and I was the problem, I managed to import my fonts and a Catppuccin css variable file, hence the current color scheme. Pretty nifty, huh.

In short, fuck tailwind. But also, use tailwind for everything you possibly can.

The Dreaded Backend

The concept was simple, as all concepts are, expecially when the person making said concept has no concept of how to properly make concepts. This person turned out to be me, and the concept was fairly simple. Have a primary repo, that contained 2 submodules. The primary repo would house the whole site, config, themes, etc. The first submodule would contain the raw .norg files that are in the content/ directory, and the second would have the output html files that would need to end up on the server serving the service that is currently letting you read this right now.

Said service would be a simple nginx docker container on some random port, that serves whatever it is asked. In order for such a service to be viable, I don't want to have to manage it manually. Instead, I can use a webhook to pull the html repo whenever there is a new commit. This could also be on a timer, but instant gratification is better.

\ No newline at end of file diff --git a/public/rss.xml b/public/rss.xml new file mode 100644 index 0000000..572d6fb --- /dev/null +++ b/public/rss.xml @@ -0,0 +1,33 @@ + + + + voidarc + https://blog.voidarc.co.uk + Latest posts + Norgolith + en-US + Sat, 21 Mar 2026 14:39:49 +0000 + 60 + + + + https://blog.voidarc.co.uk/assets/favicon.png + voidarc + https://blog.voidarc.co.uk + 144 + 144 + + + + + Making a Blog Using a Niche Markdown Language + https://blog.voidarc.co.uk/posts/site/ + https://blog.voidarc.co.uk/posts/site/ + How to make a blog using Norg and some random project from github + Adumh00man + Sat, 21 Mar 2026 11:39:17 +0000 + BlogNeorgNvimVoidarcWebdev + + + + diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..5eb1d52 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,62 @@ + + + + {% block head %} + + {% if metadata.description and not metadata.description == "nil" %} + + {% endif %} + {% if metadata.authors %} + + {% endif %} + {% if metadata.categories %} + + {% endif %} + + {% if config.highlighter is defined and config.highlighter.enable %} + {# If highlighter is enabled but the engine is not defined then fallback to prismjs #} + {% if config.highlighter.engine is not string or config.highlighter.engine == "prism" %} + {# PrismJS #} + + + + + {% elif config.highlighter.engine is defined + and config.highlighter.engine == "hljs" %} + {# Highlight.js #} + + + #} + {# Enable this one instead if you want all the `` tags to be highlighted + + #} + {% elif config.highlighter.engine is string + and config.highlighter.engine not in ["prism", "hljs"] %} + + {% endif %} + {% endif %} + {# User-defined styling #} + {# Tailwind CDN, replace with the Tailwind standalone CLI for production! #} + + + + {% block title %}{% endblock title %} - {{ config.title | title }} + {% endblock head %} + + +
{% block content %}{% endblock content %}
+ + + diff --git a/templates/categories.html b/templates/categories.html new file mode 100644 index 0000000..78badea --- /dev/null +++ b/templates/categories.html @@ -0,0 +1,23 @@ +{% extends "base.html" %} +{% block title %}Categories{% endblock title %} +{% block content %} +
+

Categories

+

All the categories used in posts.

+
+
    + {% for category in categories | sort %} + {%- set_global cat_posts = 0 -%} + {% for post in posts %} + {% if category in post.categories %} + {%- set_global cat_posts = cat_posts + 1 -%} + {% endif %} + {% endfor %} +
  • + {{ category }} + ({{ cat_posts }} post{{ cat_posts | pluralize }}) +
  • + {% endfor %} +
+
+{% endblock content %} diff --git a/templates/category.html b/templates/category.html new file mode 100644 index 0000000..c866c32 --- /dev/null +++ b/templates/category.html @@ -0,0 +1,19 @@ +{% extends "base.html" %} +{% block title %}Category: {{ category }}{% endblock title %} +{% block content %} +
+

Posts in {{ category }}

+

All the posts with the category "{{ category }}"

+
+
    + {% for post in posts %} + {% if category in post.categories %} +
  • + {{ post.title }} + +
  • + {% endif %} + {% endfor %} +
+
+{% endblock content %} diff --git a/templates/default.html b/templates/default.html new file mode 100644 index 0000000..bb4189b --- /dev/null +++ b/templates/default.html @@ -0,0 +1,28 @@ +{% extends "base.html" %} +{% block title %}{{ metadata.title | title }}{% endblock title %} +{% block content %} +
+{{ content | safe }} +
+{% endblock content %} +{% block footer %} + +{% endblock footer %} diff --git a/templates/rss.xml b/templates/rss.xml new file mode 100644 index 0000000..c125be3 --- /dev/null +++ b/templates/rss.xml @@ -0,0 +1,33 @@ + + + + {{ config.title }} + {{ config.rootUrl | escape_xml | safe }} + {{ config.rss.description | default(value="Latest posts")}} + Norgolith + {{ config.language }} + {{ now | date(format="%a, %d %b %Y %H:%M:%S %z") }} + {{ config.rss.ttl | default(value=60) }} + + + + {{ config.rootUrl | escape_xml | safe }}{{ config.rss.image | default(value="/assets/favicon.png") }} + {{ config.title }} + {{ config.rootUrl | escape_xml | safe }} + 144 + 144 + + + {% for post in posts | filter(attribute="draft", value=false) %} + + {{ post.title }} + {{ post.permalink | escape_xml | safe }} + {{ post.permalink | escape_xml | safe }} + {{ post.description }} + {{ post.authors | join(sep=", ") }} + {{ post.created | date(format="%a, %d %b %Y %H:%M:%S %z") }} + {% if post.categories %}{% for category in post.categories %}{{ category }}{% endfor %}{% endif %} + + {% endfor %} + + diff --git a/theme/.metadata.toml b/theme/.metadata.toml new file mode 100644 index 0000000..68c212a --- /dev/null +++ b/theme/.metadata.toml @@ -0,0 +1,3 @@ +repo = "github:NTBBloodbath/norgowind" +version = "0.6.0" +pin = false diff --git a/theme/LICENSE b/theme/LICENSE new file mode 100644 index 0000000..1a2c807 --- /dev/null +++ b/theme/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 NTBBloodbath + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/theme/README.md b/theme/README.md new file mode 100644 index 0000000..444de6f --- /dev/null +++ b/theme/README.md @@ -0,0 +1,143 @@ +# Norgowind + +[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE) +![Version](https://img.shields.io/badge/version-0.4.1-blue) + +A modern, responsive theme for the [Norgolith SSG](https://github.com/NTBBloodbath/norgolith), built with TailwindCSS. Norgowind provides a clean, customizable look for your Norgolith-powered site, with extra features and easy configuration. + +--- + +## Features +- Beautiful, responsive minimal design powered by TailwindCSS +- Ready-to-use templates for posts, categories, home, and more +- Customizable navigation and footer links +- Built-in icons support thanks to tabler icons library +- Mermaid.js support for diagrams and charts +- Additional blockquote styles (tip, note, important, warning, error) +- Truncation options for post cards + +## Demo +See Norgowind in action: +- [amartin.beer](https://amartin.beer) +- [Official Norgolith documentation](https://norgolith.amartin.beer) + +### Showcase + +
+ Home page + + image + +
+ +
+ Post view + + image + +
+ +## Requirements +- [Norgolith](https://github.com/NTBBloodbath/norgolith) (latest commit on `master` branch required) +- [TailwindCSS CLI](https://tailwindcss.com/docs/installation) (for development or custom styling) + +## Installation +```bash +lith theme pull github:NTBBloodbath/norgowind +``` + +> [!IMPORTANT] +> +> Norgowind requires the latest Norgolith commit in the master branch in order to work. + +## Usage +After installing, configure your site as described below. If you plan to modify the CSS, see the [Tailwind Reloading](#tailwind-reloading) section. + +### Configuration +Add the following fields to your `norgolith.toml`: + +```toml +[extra] +license = "GPLv2" # Optional +favicon_path = "/assets/norgolith.svg" # Fallback to default favicon +footer_author_link = "https://github.com/NTBBloodbath" # Optional +enable_mermaid = true # Enable Mermaid.js for diagrams + +[extra.nav] +# Link_name = "url" +# blog = "/posts" +# GitHub = "https://github.com/NTBBloodbath/norgolith" + +[extra.footer] +# Link_name = "url" +# GitHub = "https://github.com/NTBBloodbath/norgolith" +``` + +### Templates +Norgowind provides these templates: +``` +templates +├── partials +│ ├── footer.html <- Footer content +│ └── nav.html <- Header navbar +├── base.html <- Main template (extends others) +├── categories.html <- Categories list +├── category.html <- Category posts list +├── default.html <- Default template for all content +├── home.html <- Homepage +├── post.html <- Blog post +└── posts.html <- Posts list +``` + +To use a template, set the `layout` metadata in your content files. For example, in a blog post: +```norg +layout: post +``` + +> [!TIP] +> +> Norgolith expects your blog posts in the `content/posts` directory. + +### MermaidJS Support +Norgowind comes with opt-in support for MermaidJS flowcharts. You can use mermaid charts through embedded HTML in your norg content if you set the `enable_mermaid` option to `true` in the `extra` table of your configuration file: +```org +@embed html +
+  flowchart LR
+  A[HTML Fragment] --> B[Tera Engine]
+  C[Validated Metadata] --> B
+  D[Site Config] --> B
+  E[Post Collection] --> B
+  B --> F[Layout Template]
+  F --> G[Final HTML]
+
+@end +``` + +### Additional Styling +Norgowind adds extra blockquote classes (use with `+html.class` tags): +- `tip` (green) +- `note` (blue) +- `important` (violet) +- `warning` (yellow) +- `error` (red) + +![blockquotes.png](https://github.com/user-attachments/assets/d45e2e97-5e3b-43cb-8077-a16f737259b9) + +### Additional Metadata Fields +- `truncate`: Set the truncate character length for recent post cards. +- `truncate_char`: Set the truncate character (default is ellipsis). Leave empty to disable. + +### Tailwind Reloading +By default, Tailwind's configuration in Norgowind watches content files and templates. Each new class added to content using a `+html.class` tag will be included in the styling file. + +For site development, install the TailwindCSS CLI and run: +```sh +tailwindcss -i theme/assets/css/tailwind.css -o theme/assets/css/styles.min.css --minify --watch +``` + +## Contributing +Contributions, issues, and feature requests are welcome! Feel free to open an issue or pull request. + +## License +Norgowind is licensed under the MIT License. diff --git a/theme/assets/css/prism-sweetie.min.css b/theme/assets/css/prism-sweetie.min.css new file mode 100644 index 0000000..294dc34 --- /dev/null +++ b/theme/assets/css/prism-sweetie.min.css @@ -0,0 +1 @@ +pre[class*=language-]{--padding-y:var(--am-prism-padding-y, 1rem);--padding-x:var(--am-prism-padding-x, 1rem);padding:var(--padding-y) var(--padding-x);overflow:auto;font-size:var(--am-prism-font-size,.85em);border-radius:var(--am-prism-border-radius,.4em)}pre>code[class*=language-]{padding:initial;font-size:1em;font-weight:400;font-family:var(--am-prism-font-family,ui-monospace),monospace;line-height:var(--am-prism-line-height,1.5);background-color:initial}code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-] .line-numbers-rows{box-sizing:content-box;margin:calc(var(--padding-y) * -1) 0;padding:var(--padding-y) 0}.line-numbers.line-numbers .line-numbers-rows{border-right-width:var(--am-prism-border-width,1px);border-right-color:var(--am-prism-border-color)}.line-numbers .line-numbers-rows>span:before{color:var(--am-prism-line-numbers-color)}div.code-toolbar>.toolbar{top:.3rem!important;right:.3rem!important}div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button{display:inline-flex;padding:0 .75em;font-size:var(--am-prism-font-size,.8em);font-family:var(--am-prism-font-family,ui-monospace),monospace;font-weight:600!important;line-height:2.25em;color:var(--am-prism-copy-color);background-color:var(--am-prism-copy-bg);border-radius:calc(var(--am-prism-border-radius, .4em) - .1em);cursor:pointer;box-shadow:none;opacity:1;transition:opacity .2s}div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button:hover{opacity:.8}div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button:focus{opacity:1}code[class*=language-],pre[class*=language-]{color:#202023}pre[class*=language-]{background:#bbbbce}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#202023;background:#bbbbce}pre[data-line]{position:relative}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:#fff8c5;box-shadow:inset 5px 0 0 #eed888;z-index:0;pointer-events:none;line-height:inherit;white-space:pre}.namespace{opacity:.7}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8989a9}.token.operator,.token.punctuation{color:#0c5090}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.class-name,.token.symbol,.token.tag{color:#ae580e}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#287f0d}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#287f0d}.token.atrule,.token.attr-value,.token.keyword{color:#0c5090}.token.function{color:#a00c79}.token.macro,.token.important,.token.regex,.token.variable{color:#9437ff}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--am-prism-line-numbers-color:#18181a77;--am-prism-border-color:#18181a22;--am-prism-copy-color:#202023aa;--am-prism-copy-bg:#78789d22}html[class*="-dark"],html[class*="dark-"],.dark{& code[class*=language-],& pre[class*=language-]{color:#d3d7de}& pre[class*=language-]{background:#303040}& :not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#bdbdbd;background:#303040}& pre[data-line]{position:relative}& pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}& .line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:#2f2a1e;box-shadow:inset 5px 0 0 #674c16;z-index:0;pointer-events:none;line-height:inherit;white-space:pre}& .namespace{opacity:.7}& .token.cdata,& .token.comment,& .token.doctype,& .token.prolog{color:#798399}& .token.punctuation,& .token.operator,& .token.variable{color:#73a3f3}& .token.boolean,& .token.constant,& .token.deleted,& .token.number,& .token.property,& .token.symbol,& .token.class-name,& .token.tag{color:#e7a06a}& .token.attr-name,& .token.builtin,& .token.char,& .token.inserted,& .token.selector,& .token.string{color:#89c252}& .language-css .token.string,& .style .token.string,& .token.entity,& .token.url{color:#89c252;background:#161b22}& .token.atrule,& .token.keyword{color:#73a3f3}& .token.attr-value,& .token.function{color:#d087e8}& .token.macro,& .token.important,& .token.regex{color:#b094e2}& .token.bold,& .token.important{font-weight:700}& .token.italic{font-style:italic}& .token.entity{cursor:help}&{--am-prism-line-numbers-color:#bdbdbd55;--am-prism-border-color:#bdbdbd22;--am-prism-copy-color:#d3d7de;--am-prism-copy-bg:#707b8722}} diff --git a/theme/assets/css/styles.min.css b/theme/assets/css/styles.min.css new file mode 100644 index 0000000..2d8e720 --- /dev/null +++ b/theme/assets/css/styles.min.css @@ -0,0 +1,1372 @@ +/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ +@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap"); +@import url("https://unpkg.com/@catppuccin/palette/css/catppuccin.css"); +@layer properties; +@layer theme, base, components, utilities; +@layer theme { + :root, :host { + --font-sans: "Fira Mono", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-mono: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; + --color-blue-400: oklch(70.7% 0.165 254.624); + --spacing: 0.25rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --leading-relaxed: 1.625; + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --ease-in: cubic-bezier(0.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); + --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --default-transition-duration: 150ms; + --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + --color-base: var(--base); + --color-base-alt: var(--base-alt); + --color-surface: var(--surface); + --color-text: var(--text); + --color-text-alt: var(--text-alt); + --color-grey: var(--grey); + --color-dark-grey: var(--dark-grey); + --color-red: var(--red); + --color-orange: var(--orange); + --color-green: var(--green); + --color-teal: var(--teal); + --color-yellow: var(--yellow); + --color-blue: var(--blue); + --color-magenta: var(--magenta); + --color-violet: var(--violet); + --color-cyan: var(--cyan); + } +} +@layer base { + *, ::after, ::before, ::backdrop, ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, strong { + font-weight: bolder; + } + code, kbd, samp, pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring { + outline: auto; + } + progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, ul, menu { + list-style: none; + } + img, svg, video, canvas, audio, iframe, embed, object { + display: block; + vertical-align: middle; + } + img, video { + max-width: 100%; + height: auto; + } + button, input, select, optgroup, textarea, ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + } + textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { + appearance: button; + } + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden='until-found'])) { + display: none !important; + } +} +@layer utilities { + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + border-width: 0; + } + .relative { + position: relative; + } + .static { + position: static; + } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } + .mx-auto { + margin-inline: auto; + } + .mt-0\! { + margin-top: calc(var(--spacing) * 0) !important; + } + .mt-4 { + margin-top: calc(var(--spacing) * 4); + } + .mt-6 { + margin-top: calc(var(--spacing) * 6); + } + .mt-8 { + margin-top: calc(var(--spacing) * 8); + } + .mt-12 { + margin-top: calc(var(--spacing) * 12); + } + .mr-1 { + margin-right: calc(var(--spacing) * 1); + } + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } + .mr-4 { + margin-right: calc(var(--spacing) * 4); + } + .mr-px { + margin-right: 1px; + } + .block { + display: block; + } + .flex { + display: flex; + } + .hidden { + display: none; + } + .inline-flex { + display: inline-flex; + } + .h-5 { + height: calc(var(--spacing) * 5); + } + .h-8 { + height: calc(var(--spacing) * 8); + } + .h-16 { + height: calc(var(--spacing) * 16); + } + .min-h-screen { + min-height: 100vh; + } + .w-5 { + width: calc(var(--spacing) * 5); + } + .w-8 { + width: calc(var(--spacing) * 8); + } + .w-fit { + width: fit-content; + } + .w-full { + width: 100%; + } + .max-w-\[50\%\] { + max-width: 50%; + } + .flex-1 { + flex: 1; + } + .shrink-0 { + flex-shrink: 0; + } + .rotate-90 { + rotate: 90deg; + } + .flex-col { + flex-direction: column; + } + .flex-row { + flex-direction: row; + } + .flex-wrap { + flex-wrap: wrap; + } + .items-center { + align-items: center; + } + .justify-between { + justify-content: space-between; + } + .justify-center { + justify-content: center; + } + .space-y-2 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-4 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-x-1 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-2 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-4 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); + } + } + .truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .rounded-lg { + border-radius: var(--radius-lg); + } + .rounded-md { + border-radius: var(--radius-md); + } + .rounded-sm { + border-radius: var(--radius-sm); + } + .rounded-xl { + border-radius: var(--radius-xl); + } + .border-2 { + border-style: var(--tw-border-style); + border-width: 2px; + } + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + } + .border-base-alt { + border-color: var(--color-base-alt); + } + .border-t-base-alt { + border-top-color: var(--color-base-alt); + } + .bg-\[\#303040\] { + background-color: #303040; + } + .bg-grey { + background-color: var(--color-grey); + } + .bg-surface { + background-color: var(--color-surface); + } + .p-2 { + padding: calc(var(--spacing) * 2); + } + .p-4 { + padding: calc(var(--spacing) * 4); + } + .px-1 { + padding-inline: calc(var(--spacing) * 1); + } + .px-3 { + padding-inline: calc(var(--spacing) * 3); + } + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + .px-6 { + padding-inline: calc(var(--spacing) * 6); + } + .py-2 { + padding-block: calc(var(--spacing) * 2); + } + .py-4 { + padding-block: calc(var(--spacing) * 4); + } + .pt-2 { + padding-top: calc(var(--spacing) * 2); + } + .pt-6 { + padding-top: calc(var(--spacing) * 6); + } + .pt-8 { + padding-top: calc(var(--spacing) * 8); + } + .pt-10 { + padding-top: calc(var(--spacing) * 10); + } + .pb-4 { + padding-bottom: calc(var(--spacing) * 4); + } + .text-center { + text-align: center; + } + .font-mono { + font-family: var(--font-mono); + } + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + .font-medium { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + .break-keep { + word-break: keep-all; + } + .text-base { + color: var(--color-base); + } + .text-blue { + color: var(--color-blue); + } + .text-blue\! { + color: var(--color-blue) !important; + } + .text-blue-400 { + color: var(--color-blue-400); + } + .text-dark-grey { + color: var(--color-dark-grey); + } + .text-grey { + color: var(--color-grey); + } + .text-magenta { + color: var(--color-magenta); + } + .text-magenta\! { + color: var(--color-magenta) !important; + } + .text-red { + color: var(--color-red); + } + .text-text { + color: var(--color-text); + } + .text-text-alt { + color: var(--color-text-alt); + } + .text-text\/70 { + color: var(--color-text); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-text) 70%, transparent); + } + } + .capitalize { + text-transform: capitalize; + } + .italic { + font-style: italic; + } + .tabular-nums { + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .no-underline\! { + text-decoration-line: none !important; + } + .opacity-0 { + opacity: 0%; + } + .opacity-100 { + opacity: 100%; + } + .shadow-lg { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-sm { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .transition { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-all { + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-colors { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .duration-150 { + --tw-duration: 150ms; + transition-duration: 150ms; + } + .duration-200 { + --tw-duration: 200ms; + transition-duration: 200ms; + } + .duration-300 { + --tw-duration: 300ms; + transition-duration: 300ms; + } + .ease-in { + --tw-ease: var(--ease-in); + transition-timing-function: var(--ease-in); + } + .ease-in-out { + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); + } + .ease-linear { + --tw-ease: linear; + transition-timing-function: linear; + } + .ease-out { + --tw-ease: var(--ease-out); + transition-timing-function: var(--ease-out); + } + .last\:mr-0 { + &:last-child { + margin-right: calc(var(--spacing) * 0); + } + } + .hover\:bg-magenta { + &:hover { + @media (hover: hover) { + background-color: var(--color-magenta); + } + } + } + .hover\:text-base\! { + &:hover { + @media (hover: hover) { + color: var(--color-base) !important; + } + } + } + .hover\:text-blue { + &:hover { + @media (hover: hover) { + color: var(--color-blue); + } + } + } + .hover\:text-blue-400 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-400); + } + } + } + .hover\:text-text-alt { + &:hover { + @media (hover: hover) { + color: var(--color-text-alt); + } + } + } + .hover\:text-yellow { + &:hover { + @media (hover: hover) { + color: var(--color-yellow); + } + } + } + .hover\:no-underline\! { + &:hover { + @media (hover: hover) { + text-decoration-line: none !important; + } + } + } + .hover\:underline { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } + } + } + .hover\:underline\! { + &:hover { + @media (hover: hover) { + text-decoration-line: underline !important; + } + } + } + .hover\:decoration-dashed { + &:hover { + @media (hover: hover) { + text-decoration-style: dashed; + } + } + } + .focus\:outline-none { + &:focus { + --tw-outline-style: none; + outline-style: none; + } + } + .md\:mr-6 { + @media (width >= 48rem) { + margin-right: calc(var(--spacing) * 6); + } + } + .md\:flex { + @media (width >= 48rem) { + display: flex; + } + } + .md\:hidden { + @media (width >= 48rem) { + display: none; + } + } + .md\:flex-row { + @media (width >= 48rem) { + flex-direction: row; + } + } + .md\:items-center { + @media (width >= 48rem) { + align-items: center; + } + } + .md\:space-y-0 { + @media (width >= 48rem) { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))); + } + } + } + .md\:space-x-8 { + @media (width >= 48rem) { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse))); + } + } + } + .md\:px-0 { + @media (width >= 48rem) { + padding-inline: calc(var(--spacing) * 0); + } + } + .md\:text-2xl { + @media (width >= 48rem) { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + } + .md\:text-sm { + @media (width >= 48rem) { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + } + .md\:text-xl { + @media (width >= 48rem) { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + } + .lg\:mr-8 { + @media (width >= 64rem) { + margin-right: calc(var(--spacing) * 8); + } + } + .dark\:border-t-\[\#39394b\] { + &:where(.dark, .dark *) { + border-top-color: #39394b; + } + } + .dark\:text-grey { + &:where(.dark, .dark *) { + color: var(--color-grey); + } + } +} +@layer base { + button:not(:disabled), [role="button"]:not(:disabled) { + cursor: pointer; + } +} +@layer utilities { + .table { + display: initial; + } +} +:root { + --base: var(--ctp-latte-base); + --base-alt: var(--ctp-latte-mantle); + --surface: var(--ctp-latte-surface0); + --text: var(--ctp-latte-text); + --text-alt: var(--ctp-latte-subtext1); + --grey: var(--ctp-latte-overlay1); + --dark-grey: var(--ctp-latte-overlay0); + --magenta: var(--ctp-latte-mauve); + --red: var(--ctp-latte-red); + --orange: var(--ctp-latte-peach); + --yellow: var(--ctp-latte-yellow); + --green: var(--ctp-latte-green); + --teal: var(--ctp-latte-teal); + --cyan: var(--ctp-latte-sky); + --blue: var(--ctp-latte-blue); + --violet: var(--ctp-latte-lavender); +} +:root.dark { + --base: var(--ctp-mocha-base); + --base-alt: var(--ctp-mocha-mantle); + --surface: var(--ctp-mocha-surface0); + --text: var(--ctp-mocha-text); + --text-alt: var(--ctp-mocha-subtext1); + --grey: var(--ctp-mocha-overlay1); + --dark-grey: var(--ctp-mocha-overlay0); + --magenta: var(--ctp-mocha-mauve); + --red: var(--ctp-mocha-red); + --orange: var(--ctp-mocha-peach); + --yellow: var(--ctp-mocha-yellow); + --green: var(--ctp-mocha-green); + --teal: var(--ctp-mocha-teal); + --cyan: var(--ctp-mocha-sky); + --blue: var(--ctp-mocha-blue); + --violet: var(--ctp-mocha-lavender); +} +html { + scrollbar-color: var(--blue) var(--surface); + scroll-behavior: smooth; + font-family: var(--font-sans); + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); +} +body { + background-color: var(--color-base); + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + color: var(--color-text); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +main a { + text-decoration-line: underline; + &:hover { + @media (hover: hover) { + color: var(--color-blue); + } + } +} +a.icon { + text-decoration-line: none; +} +a { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 200ms; + transition-duration: 200ms; + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); +} +hr { + color: var(--color-base-alt); + &:where(.dark, .dark *) { + --tw-brightness: brightness(120%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } +} +header, footer { + background-color: var(--color-surface); + color: var(--color-text-alt); +} +h1, h2, h3, h4, h5, h6 { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); +} +h1 { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); +} +h2 { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + counter-increment: h2; + counter-reset: h3; +} +h3 { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + counter-increment: h3; + counter-reset: h4; +} +h4 { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + counter-increment: h4; +} +h5 { + counter-increment: h5; +} +h6 { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + counter-increment: h6; +} +p { + padding-block: calc(var(--spacing) * 2); + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); +} +strong { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); +} +ul { + list-style-type: disc; +} +ol { + list-style-type: decimal; +} +ul, ol { + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); +} +nav ul, nav ol { + margin-inline: calc(var(--spacing) * 2); + list-style-type: none; + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))); + } +} +main ul { + padding-left: calc(var(--spacing) * 4); +} +main h2, article h2, section h2 { + margin-top: calc(var(--spacing) * 10); +} +main h3, article h3, section h3 { + margin-top: calc(var(--spacing) * 8); +} +main h4, article h4, section h4 { + margin-top: calc(var(--spacing) * 6); +} +main h5, article h5, section h5 { + margin-top: calc(var(--spacing) * 4); +} +main h6, article h6, section h6 { + margin-top: calc(var(--spacing) * 2); +} +main div#content h2:not(:first-child) { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-top-color: var(--color-base-alt); + padding-top: calc(var(--spacing) * 5); + &:where(.dark, .dark *) { + border-top-color: #39394b; + } +} +main div#content h3:not(:first-child) { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-top-color: var(--color-base-alt); + padding-top: calc(var(--spacing) * 4); + &:where(.dark, .dark *) { + border-top-color: #39394b; + } +} +main div#content h4:not(:first-child) { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-top-color: var(--color-base-alt); + padding-top: calc(var(--spacing) * 3); + &:where(.dark, .dark *) { + border-top-color: #39394b; + } +} +main div#content h5:not(:first-child) { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-top-color: var(--color-base-alt); + padding-top: calc(var(--spacing) * 2); + &:where(.dark, .dark *) { + border-top-color: #39394b; + } +} +main div#content h6:not(:first-child) { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + border-top-color: var(--color-base-alt); + padding-top: calc(var(--spacing) * 1); + &:where(.dark, .dark *) { + border-top-color: #39394b; + } +} +blockquote { + margin-block: calc(var(--spacing) * 4); + border-top-right-radius: var(--radius-sm); + border-bottom-right-radius: var(--radius-sm); + border-inline-start-style: var(--tw-border-style); + border-inline-start-width: 4px; + border-color: var(--color-base-alt); + background-color: var(--color-surface); + padding: calc(var(--spacing) * 4); + &:where(.dark, .dark *) { + border-color: var(--color-surface); + } + &:where(.dark, .dark *) { + background-color: var(--color-base-alt); + } +} +blockquote.tip { + border-color: var(--color-green); + background-color: var(--color-green); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-green) 30%, transparent); + } +} +blockquote.note { + border-color: var(--color-blue); + background-color: var(--color-blue); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-blue) 30%, transparent); + } +} +blockquote.important { + border-color: var(--color-violet); + background-color: var(--color-violet); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-violet) 30%, transparent); + } +} +blockquote.warning { + border-color: var(--color-yellow); + background-color: var(--color-yellow); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-yellow) 30%, transparent); + } +} +blockquote.error { + border-color: var(--color-red); + background-color: var(--color-red); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-red) 30%, transparent); + } +} +blockquote > p { + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); +} +code:not([class*="language-"]) { + border-radius: var(--radius-md); + background-color: var(--color-base-alt); + padding-inline: calc(var(--spacing) * 1); + padding-block: 1px; + font-family: var(--font-mono); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + &:where(.dark, .dark *) { + background-color: var(--color-surface); + } + &:where(.dark, .dark *) { + --tw-brightness: brightness(80%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } +} +nav.toc { + height: calc(3/4 * 100%); + border-radius: var(--radius-md); + border-style: var(--tw-border-style); + border-width: 2px; + border-color: var(--color-base-alt); + background-color: var(--color-surface); + padding-top: calc(var(--spacing) * 4); + padding-bottom: calc(var(--spacing) * 4); + font-family: var(--font-mono); +} +nav.toc ol { + list-style-position: inside; + list-style-type: decimal; + padding-left: calc(var(--spacing) * 4); +} +nav.toc ul { + list-style-position: inside; + list-style-type: disc; + padding-left: calc(var(--spacing) * 4); +} +nav.toc ol li, nav.toc ul li { + margin-top: calc(var(--spacing) * 0); + padding-bottom: calc(var(--spacing) * 0); +} +nav.toc ol li a, nav.toc ul li a { + text-decoration-line: none; + &:hover { + @media (hover: hover) { + color: var(--color-blue); + } + } +} +nav.toc ol li::marker, nav.toc ul li::marker { + &:hover { + @media (hover: hover) { + color: var(--color-blue); + } + } +} +nav.toc ol li ol, nav.toc ul li ul { + padding-bottom: calc(var(--spacing) * 2); +} +pre[class*="language-"], code[class*="language-"] { + font-variant-ligatures: common-ligatures !important; + background-color: var(--color-surface) !important; + font-family: var(--font-mono) !important; + text-shadow: none !important; + &:where(.dark, .dark *) { + background-color: var(--color-base-alt); + } +} +pre[class*="language-"].line-numbers { + counter-reset: linenumber; + position: relative; + padding-left: calc(var(--spacing) * 13); +} +pre[class*="language-"].line-numbers > code { + white-space: inherit; + position: relative; +} +.line-numbers .line-numbers-rows { + pointer-events: none; + position: absolute; + top: -1.5px; + left: calc(var(--spacing) * -12); + display: flex; + width: calc(var(--spacing) * 10); + flex-direction: column; + border-right-style: var(--tw-border-style) !important; + border-right-width: 1px !important; + border-right-color: var(--color-grey) !important; + -webkit-user-select: none; + user-select: none; +} +.line-numbers-rows > span { + counter-increment: linenumber; + display: block; + --tw-leading: 1.5; + line-height: 1.5; +} +.line-numbers-rows > span:before { + content: counter(linenumber); + display: block; + padding-right: calc(var(--spacing) * 2); + text-align: right; + color: var(--color-grey) !important; +} +pre.mermaid { + display: flex; + justify-content: center; +} +.dark .mermaid { + filter: invert(0.9) hue-rotate(180deg); +} +@property --tw-space-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-space-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} +@property --tw-ordinal { + syntax: "*"; + inherits: false; +} +@property --tw-slashed-zero { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-figure { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-spacing { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-fraction { + syntax: "*"; + inherits: false; +} +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-duration { + syntax: "*"; + inherits: false; +} +@property --tw-ease { + syntax: "*"; + inherits: false; +} +@property --tw-blur { + syntax: "*"; + inherits: false; +} +@property --tw-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-invert { + syntax: "*"; + inherits: false; +} +@property --tw-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-drop-shadow-size { + syntax: "*"; + inherits: false; +} +@property --tw-leading { + syntax: "*"; + inherits: false; +} +@property --tw-text-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-text-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-space-y-reverse: 0; + --tw-space-x-reverse: 0; + --tw-border-style: solid; + --tw-font-weight: initial; + --tw-ordinal: initial; + --tw-slashed-zero: initial; + --tw-numeric-figure: initial; + --tw-numeric-spacing: initial; + --tw-numeric-fraction: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-duration: initial; + --tw-ease: initial; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + --tw-leading: initial; + --tw-text-shadow-color: initial; + --tw-text-shadow-alpha: 100%; + } + } +} diff --git a/theme/assets/css/tailwind.css b/theme/assets/css/tailwind.css new file mode 100644 index 0000000..4064b9a --- /dev/null +++ b/theme/assets/css/tailwind.css @@ -0,0 +1,343 @@ +@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap"); +@import url("https://unpkg.com/@catppuccin/palette/css/catppuccin.css"); +@import "tailwindcss"; +/* User content */ +@source "../../../content"; +/* User templates */ +@source "../../../templates"; +/* Theme templates */ +@source "../../templates"; + +/* Use dark class for dark theme */ +@custom-variant dark (&:where(.dark, .dark *)); + +@layer base { + /* Buttons use pointer cursor */ + button:not(:disabled), + [role="button"]:not(:disabled) { + cursor: pointer; + } +} + +/* + * Fix some code rendering bugs with PrismJS + * See https://github.com/PrismJS/prism/issues/2443 + */ +@layer utilities { + .table { + display: initial; + } +} + +/* Colorscheme, using sweetie palette */ +:root { + --base: var(--ctp-latte-base); + --base-alt: var(--ctp-latte-mantle); + --surface: var(--ctp-latte-surface0); + --text: var(--ctp-latte-text); + --text-alt: var(--ctp-latte-subtext1); + --grey: var(--ctp-latte-overlay1); + --dark-grey: var(--ctp-latte-overlay0); + --magenta: var(--ctp-latte-mauve); + --red: var(--ctp-latte-red); + --orange: var(--ctp-latte-peach); + --yellow: var(--ctp-latte-yellow); + --green: var(--ctp-latte-green); + --teal: var(--ctp-latte-teal); + --cyan: var(--ctp-latte-sky); + --blue: var(--ctp-latte-blue); + --violet: var(--ctp-latte-lavender); +} +:root.dark { + --base: var(--ctp-mocha-base); + --base-alt: var(--ctp-mocha-mantle); + --surface: var(--ctp-mocha-surface0); + --text: var(--ctp-mocha-text); + --text-alt: var(--ctp-mocha-subtext1); + --grey: var(--ctp-mocha-overlay1); + --dark-grey: var(--ctp-mocha-overlay0); + --magenta: var(--ctp-mocha-mauve); + --red: var(--ctp-mocha-red); + --orange: var(--ctp-mocha-peach); + --yellow: var(--ctp-mocha-yellow); + --green: var(--ctp-mocha-green); + --teal: var(--ctp-mocha-teal); + --cyan: var(--ctp-mocha-sky); + --blue: var(--ctp-mocha-blue); + --violet: var(--ctp-mocha-lavender); +} + +@theme static { + --font-sans: + "Fira Mono", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-mono: + "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; + + --color-base: var(--base); + --color-base-alt: var(--base-alt); + --color-surface: var(--surface); + --color-text: var(--text); + --color-text-alt: var(--text-alt); + --color-grey: var(--grey); + --color-dark-grey: var(--dark-grey); + --color-red: var(--red); + --color-orange: var(--orange); + --color-green: var(--green); + --color-teal: var(--teal); + --color-yellow: var(--yellow); + --color-blue: var(--blue); + --color-magenta: var(--magenta); + --color-violet: var(--violet); + --color-cyan: var(--cyan); +} + +/* Overall design */ +html { + scrollbar-color: var(--blue) var(--surface); + @apply scroll-smooth tabular-nums font-sans; +} + +body { + @apply bg-base text-text antialiased font-medium; +} + +main a { + @apply underline hover:text-blue; +} + +a.icon { + @apply no-underline; +} + +a { + @apply transition-colors duration-200 ease-in-out; +} + +hr { + /* brightness-120 = #39394b */ + @apply text-base-alt dark:brightness-120; +} + +header, +footer { + @apply bg-surface text-text-alt; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + @apply font-bold; +} + +h1 { + @apply text-3xl; +} + +h2 { + @apply text-2xl; + counter-increment: h2; + counter-reset: h3; +} + +h3 { + @apply text-xl; + counter-increment: h3; + counter-reset: h4; +} + +h4 { + @apply text-lg; + counter-increment: h4; +} + +h5 { + counter-increment: h5; +} + +h6 { + @apply font-semibold; + counter-increment: h6; +} + +p { + @apply leading-relaxed py-2; +} + +strong { + @apply font-semibold; +} + +ul { + @apply list-disc; +} + +ol { + @apply list-decimal; +} + +ul, +ol { + @apply leading-relaxed; +} + +nav ul, +nav ol { + @apply mx-2 space-y-0 list-none; +} + +main ul { + @apply pl-4; +} + +/* Margins */ +main h2, +article h2, +section h2 { + @apply mt-10; +} +main h3, +article h3, +section h3 { + @apply mt-8; +} +main h4, +article h4, +section h4 { + @apply mt-6; +} +main h5, +article h5, +section h5 { + @apply mt-4; +} +main h6, +article h6, +section h6 { + @apply mt-2; +} + +/* Visual flair */ +main div#content h2:not(:first-child) { + @apply border-t border-t-base-alt dark:border-t-[#39394b] pt-5; +} +main div#content h3:not(:first-child) { + @apply border-t border-t-base-alt dark:border-t-[#39394b] pt-4; +} +main div#content h4:not(:first-child) { + @apply border-t border-t-base-alt dark:border-t-[#39394b] pt-3; +} +main div#content h5:not(:first-child) { + @apply border-t border-t-base-alt dark:border-t-[#39394b] pt-2; +} +main div#content h6:not(:first-child) { + @apply border-t border-t-base-alt dark:border-t-[#39394b] pt-1; +} + +blockquote { + @apply p-4 my-4 border-s-4 rounded-r-sm border-base-alt bg-surface dark:border-surface dark:bg-base-alt; +} + +blockquote.tip { + @apply border-green bg-green/30; +} +blockquote.note { + @apply border-blue bg-blue/30; +} +blockquote.important { + @apply border-violet bg-violet/30; +} +blockquote.warning { + @apply border-yellow bg-yellow/30; +} +blockquote.error { + @apply border-red bg-red/30; +} + +blockquote > p { + @apply leading-relaxed; +} + +/* Inline verbatim `` */ +code:not([class*="language-"]) { + @apply px-1 py-px font-mono text-sm rounded-md bg-base-alt dark:bg-surface dark:brightness-80; +} + +/* Table of Contents */ +nav.toc { + @apply h-3/4 pt-4 pb-4 font-mono bg-surface border-2 border-base-alt rounded-md; +} + +nav.toc ol { + @apply pl-4 list-decimal list-inside; +} + +nav.toc ul { + @apply pl-4 list-disc list-inside; +} + +nav.toc ol li, +nav.toc ul li { + @apply mt-0 pb-0; +} + +nav.toc ol li a, +nav.toc ul li a { + @apply no-underline hover:text-blue; +} + +nav.toc ol li::marker, +nav.toc ul li::marker { + @apply hover:text-blue; +} + +nav.toc ol li ol, +nav.toc ul li ul { + @apply pb-2; +} + +/* PrismJS specific css */ +pre[class*="language-"], +code[class*="language-"] { + font-variant-ligatures: common-ligatures !important; + @apply bg-surface! dark:bg-base-alt font-mono! text-shadow-none!; +} + +/* PrismJS line-numbers plugin */ +pre[class*="language-"].line-numbers { + counter-reset: linenumber; + @apply relative pl-13; +} + +pre[class*="language-"].line-numbers > code { + white-space: inherit; + @apply relative; +} + +.line-numbers .line-numbers-rows { + @apply absolute flex flex-col top-[-1.5px] -left-12 w-10 pointer-events-none select-none border-r! border-r-grey!; +} + +.line-numbers-rows > span { + counter-increment: linenumber; + @apply block leading-[1.5]; +} + +.line-numbers-rows > span:before { + content: counter(linenumber); + @apply text-grey! text-right pr-2 block; +} + +/* Center MermaidJS charts and diagrams */ +pre.mermaid { + @apply flex justify-center; +} + +/* Automatic dark theme for MermaidJS */ +.dark .mermaid { + filter: invert(0.9) hue-rotate(180deg); +} diff --git a/theme/templates/base.html b/theme/templates/base.html new file mode 100644 index 0000000..7f1c830 --- /dev/null +++ b/theme/templates/base.html @@ -0,0 +1,147 @@ + + + + {% block head %} + + + + + {# Dynamic meta tags #} + {% if metadata.description and not metadata.description == "nil" %} + + {% endif %} + {% if metadata.authors %} + + {% endif %} + {% if metadata.categories %} + + {% endif %} + + {# SEO Meta Tags #} + {% block seo_tags %}{% endblock seo_tags %} + + {# Syntax highlighter #} + {% if config.highlighter is defined and config.highlighter.enable %} + {# If highlighter is enabled but the engine is not defined then fallback to prismjs #} + {% if config.highlighter.engine is not string or config.highlighter.engine == "prism" %} + {# PrismJS #} + {# Themes from automadcms: + + #} + + + + + {% elif config.highlighter.engine is defined + and config.highlighter.engine == "hljs" %} + {# Highlight.js #} + + + #} + {# Enable this one instead if you want all the `` tags to be highlighted + + #} + {% elif config.highlighter.engine is string + and config.highlighter.engine not in ["prism", "hljs"] %} + + {% endif %} + {% endif %} + + {# AlpineJS #} + + + + + {# MermaidJS #} + {% if config.extra.enable_mermaid %} + + {% endif %} + + {# Icons #} + + + {# Styling and favicon #} + + {% if config.extra.favicon_path is defined and config.extra.favicon_path is string %} + + {% else %} + + {% endif %} + + {% block title %}{% endblock title %} - {{ config.title | title }} + {% endblock head %} + + +
+
+ {% include "partials/nav.html" %} +
+ +
+ {% block content %}{% endblock content %} +
+ +
+ {% include "partials/footer.html" %} +
+
+ + diff --git a/theme/templates/categories.html b/theme/templates/categories.html new file mode 100644 index 0000000..c9e9784 --- /dev/null +++ b/theme/templates/categories.html @@ -0,0 +1,33 @@ +{% extends "base.html" %} +{% block seo_tags %} + + + + + + +{# TODO: add support for og:image using metadata #} + + +{% endblock seo_tags %} +{% block title %}Categories{% endblock title %} +{% block content %} +
+

Categories

+

All the categories used in posts.

+
    + {% for category in categories | sort %} + {%- set_global cat_posts = 0 -%} + {% for post in posts %} + {% if category in post.categories %} + {%- set_global cat_posts = cat_posts + 1 -%} + {% endif %} + {% endfor %} +
  • + {{ category }} + ({{ cat_posts }} post{{ cat_posts | pluralize }}) +
  • + {% endfor %} +
+
+{% endblock content %} diff --git a/theme/templates/category.html b/theme/templates/category.html new file mode 100644 index 0000000..b3f6f01 --- /dev/null +++ b/theme/templates/category.html @@ -0,0 +1,31 @@ +{% extends "base.html" %} +{% block seo_tags %} + + + + + + +{# TODO: add support for og:image using metadata #} + + +{% endblock seo_tags %} +{% block title %}Category: {{ category }}{% endblock title %} +{% block content %} +
+

Posts in {{ category }}

+

All the posts with the category "{{ category }}"

+
    + {% for post in posts | filter(attribute="draft", value=false) | sort(attribute="created") | reverse %} + {% if category in post.categories %} +
  • +
    + {{ post.title }} + +
    +
  • + {% endif %} + {% endfor %} +
+
+{% endblock content %} diff --git a/theme/templates/default.html b/theme/templates/default.html new file mode 100644 index 0000000..3a46042 --- /dev/null +++ b/theme/templates/default.html @@ -0,0 +1,17 @@ +{% extends "base.html" %} +{% block seo_tags %} + + + + + + +{# TODO: add support for og:image using metadata #} + + +{% endblock seo_tags %} + +{% block title %}{{ metadata.title | title }}{% endblock title %} +{% block content %} +{{ content | safe }} +{% endblock content %} diff --git a/theme/templates/home.html b/theme/templates/home.html new file mode 100644 index 0000000..2fa32c4 --- /dev/null +++ b/theme/templates/home.html @@ -0,0 +1,45 @@ +{% extends "base.html" %} +{% block seo_tags %} + + + + + + +{# TODO: add support for og:image using metadata #} + + +{% endblock seo_tags %} + +{% block title %}{{ metadata.title | title }}{% endblock title %} +{% block content %} +{{ content | safe }} + +{# Latest 5 non-draft blog posts, ordered automatically by date #} +{% if posts | filter(attribute="draft", value=false) | length > 0 %} +
+

Recent posts

+ {% for post in posts | filter(attribute="draft", value=false) | sort(attribute="created") | reverse | slice(end=5) %} +
+
+

{{ post.title }}

+ + {{ post.description }} +
+
+

+ {% if post.truncate_char and post.truncate_char is matching("^nil$") %} + {% set truncate_char = "" %} + {% else %} + {% set truncate_char = "…" %} + {% endif %} + {{ post.raw | striptags | truncate(length=post.truncate | default(value=100), end=truncate_char) | safe }} +

+ Read more … +
+
+ {% endfor %} +
+{% endif %} + +{% endblock content %} diff --git a/theme/templates/partials/footer.html b/theme/templates/partials/footer.html new file mode 100644 index 0000000..319a44a --- /dev/null +++ b/theme/templates/partials/footer.html @@ -0,0 +1,30 @@ +
+ Copyright © {{ now(format="%Y") }} + {% if config.extra.footer_author_link %} + {{ config.author }}. + {% else %} + {{ config.author }}. + {% endif %} + {% if config.extra.license %} +
Licensed under {{ config.extra.license }}. + {% endif %} +
+
+ {% for name, link in config.extra.footer %} + + {% endfor %} +
+
diff --git a/theme/templates/partials/nav.html b/theme/templates/partials/nav.html new file mode 100644 index 0000000..cd79bd3 --- /dev/null +++ b/theme/templates/partials/nav.html @@ -0,0 +1,72 @@ + diff --git a/theme/templates/post.html b/theme/templates/post.html new file mode 100644 index 0000000..c3b8a85 --- /dev/null +++ b/theme/templates/post.html @@ -0,0 +1,77 @@ +{% extends "base.html" %} +{% block seo_tags %} + + + + + + +{# TODO: add support for og:image using metadata #} + + +{% endblock seo_tags %} + +{% block title %}{{ metadata.title | title }}{% endblock title %} +{% block content %} +
+

{{ metadata.title }}

+
+
+
+
+ {# Date, reading time #} + {% set created = metadata.created | date(format="%B %e, %Y") %} + {% set updated = metadata.updated | date(format="%B %e, %Y") %} + + + {% if created != updated %} + (Last edit: ) + {% endif %} + +
+ {% if metadata.categories | length > 0 %} +
+ Tags:  + {% for category in metadata.categories %} + + {{ category | capitalize }} + + {% endfor %} +
+ {% endif %} +
+
+{% if metadata.toc %} +
+ {% set toc_html = generate_toc(toc=metadata.toc, list_type="ol") %} + + +
+{% endif %} +
+ {{ content | safe }} +
+{% endblock content %} diff --git a/theme/templates/posts.html b/theme/templates/posts.html new file mode 100644 index 0000000..1ebe1c7 --- /dev/null +++ b/theme/templates/posts.html @@ -0,0 +1,38 @@ +{% extends "base.html" %} +{% block seo_tags %} + + + + + + + + +{% endblock seo_tags %} + +{% block title %}{{ metadata.title | title }}{% endblock title %} +{% block content %} +

Posts

+
+ {% for post in posts | filter(attribute="draft", value=false) | sort(attribute="created") | reverse %} +
+
+

{{ post.title }}

+ + {{ post.description }} +
+
+

+ {% if post.truncate_char is defined and post.truncate_char is matching("^nil$") %} + {% set truncate_char = "" %} + {% else %} + {% set truncate_char = "…" %} + {% endif %} + {{ post.raw | striptags | truncate(length=post.truncate | default(value=300), end=truncate_char) | safe }} +

+ Read more … +
+
+ {% endfor %} +
+{% endblock content %} diff --git a/theme/templates/rss.xml b/theme/templates/rss.xml new file mode 100644 index 0000000..1a908d5 --- /dev/null +++ b/theme/templates/rss.xml @@ -0,0 +1,33 @@ + + + + {{ config.title }} + {{ config.rootUrl | escape_xml | safe }} + {{ config.rss.description | default(value="Latest posts")}} + Norgolith + {{ config.language }} + {{ now | date(format="%a, %d %b %Y %H:%M:%S %z") }} + {{ config.rss.ttl | default(value=60) }} + + + + {{ config.rootUrl | escape_xml | safe }}{{ config.rss.image | default(value="/assets/favicon.svg") }} + {{ config.title }} + {{ config.rootUrl | escape_xml | safe }} + 144 + 144 + + + {% for post in posts | filter(attribute="draft", value=false) | sort(attribute="created") | reverse %} + + {{ post.title }} + {{ post.permalink | escape_xml | safe }} + {{ post.permalink | escape_xml | safe }} + {{ post.description }} + {{ post.authors | join(sep=", ") }} + {{ post.created | date(format="%a, %d %b %Y %H:%M:%S %z") }} + {% if post.categories %}{% for category in post.categories %}{{ category }}{% endfor %}{% endif %} + + {% endfor %} + + diff --git a/theme/theme.toml b/theme/theme.toml new file mode 100644 index 0000000..33005e2 --- /dev/null +++ b/theme/theme.toml @@ -0,0 +1,5 @@ +name = "Norgowind" +author = "NTBBloodbath" +description = "Norgolith <3 TailwindCSS" +version = "0.4.1" +license = "MIT"