From bbb2111ce67798380149385b0727138589346f82 Mon Sep 17 00:00:00 2001 From: voidarc Date: Sat, 21 Mar 2026 13:47:17 +0000 Subject: [PATCH] initial --- .gitmodules | 6 + assets/norgolith.svg | 181 ++++ assets/style.css | 110 ++ content | 1 + norgolith.toml | 30 + public | 1 + templates/base.html | 62 ++ templates/categories.html | 23 + templates/category.html | 19 + templates/default.html | 28 + templates/rss.xml | 33 + theme/.metadata.toml | 3 + theme/LICENSE | 21 + theme/README.md | 143 +++ theme/assets/css/prism-sweetie.min.css | 1 + theme/assets/css/styles.min.css | 1372 ++++++++++++++++++++++++ theme/assets/css/tailwind.css | 343 ++++++ theme/templates/base.html | 147 +++ theme/templates/categories.html | 33 + theme/templates/category.html | 31 + theme/templates/default.html | 17 + theme/templates/home.html | 45 + theme/templates/partials/footer.html | 30 + theme/templates/partials/nav.html | 72 ++ theme/templates/post.html | 77 ++ theme/templates/posts.html | 38 + theme/templates/rss.xml | 33 + theme/theme.toml | 5 + 28 files changed, 2905 insertions(+) create mode 100644 .gitmodules create mode 100644 assets/norgolith.svg create mode 100644 assets/style.css create mode 160000 content create mode 100644 norgolith.toml create mode 160000 public create mode 100644 templates/base.html create mode 100644 templates/categories.html create mode 100644 templates/category.html create mode 100644 templates/default.html create mode 100644 templates/rss.xml create mode 100644 theme/.metadata.toml create mode 100644 theme/LICENSE create mode 100644 theme/README.md create mode 100644 theme/assets/css/prism-sweetie.min.css create mode 100644 theme/assets/css/styles.min.css create mode 100644 theme/assets/css/tailwind.css create mode 100644 theme/templates/base.html create mode 100644 theme/templates/categories.html create mode 100644 theme/templates/category.html create mode 100644 theme/templates/default.html create mode 100644 theme/templates/home.html create mode 100644 theme/templates/partials/footer.html create mode 100644 theme/templates/partials/nav.html create mode 100644 theme/templates/post.html create mode 100644 theme/templates/posts.html create mode 100644 theme/templates/rss.xml create mode 100644 theme/theme.toml diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..0952c09 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,6 @@ +[submodule "public"] + path = public + url = https://git.voidarc.co.uk/voidarc/blog.html +[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..2e720a4 --- /dev/null +++ b/content @@ -0,0 +1 @@ +Subproject commit 2e720a45c3a9a006a9455680117d3df7d4ca3fc8 diff --git a/norgolith.toml b/norgolith.toml new file mode 100644 index 0000000..3e37886 --- /dev/null +++ b/norgolith.toml @@ -0,0 +1,30 @@ +rootUrl = 'http://localhost:3030' +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 b/public new file mode 160000 index 0000000..f80f485 --- /dev/null +++ b/public @@ -0,0 +1 @@ +Subproject commit f80f485244b065a8c08aa1cae13a94cc6df97970 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 %} +
+ + {{ name | title }} + +
+ {% 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"