diff --git a/README.md b/README.md index 247322a..dfb39de 100644 --- a/README.md +++ b/README.md @@ -28,12 +28,16 @@ pointing the `shareCss` relation at the matching note – see | Theme | File | Palette (dark / light) | Source | |---|---|---|---| | **Coffee** (active by default) | `theme/blog_share_theme_coffee.css` | espresso `#1d150f` / latte-cream `#f0e2d0`, caramel `#e0a15c` · cream `#E8E3C3` / ink `#2D1A1D`, berry `#8e2d53` | [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) (MIT) | -| **Harbor** | `theme/blog_share_theme_harbor.css` | near-black `#1b1b1b` / cream `#efebdc`, coral `#e75a50` · paper `#dfe4c4` / ink `#1c2d28`, nord-blue `#5e81ac` | [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbor-theme) (MIT) | +| **Harbor** | `theme/blog_share_theme_harbor.css` | near-black `#1b1b1b` / cream `#efebdc`, coral `#e75a50` · paper `#dfe4c4` / ink `#1c2d28`, nord-blue `#5e81ac` | [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) (MIT) | | **Gruvbox** | `theme/blog_share_theme_gruvbox.css` | bg `#282828` / fg `#ebdbb2`, accents red/green/yellow/blue | [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (MIT) | +| **Solarized** | `theme/blog_share_theme_solarized.css` | bg `#002b36` / fg `#839496`, blue `#268bd2` cyan `#2aa198` · bg `#fdf6e3` / fg `#657b83` | [Solarized by Ethan Schoonover](https://ethanschoonover.com/solarized/) (MIT) | +| **Tokyo Night** | `theme/blog_share_theme_tokyonight.css` | storm `#24283b` / fg `#c0caf5`, blue `#7aa2f7` · day `#e1e2e7` / fg `#3760bf` | [tokyonight.nvim](https://github.com/folke/tokyonight.nvim) (Apache-2.0) | ![Coffee palette](assets/palette-coffee.png) ![Harbor palette](assets/palette-harbor.png) ![Gruvbox palette](assets/palette-gruvbox.png) +![Solarized palette](assets/palette-solarized.png) +![Tokyo Night palette](assets/palette-tokyonight.png) ## Features @@ -83,6 +87,8 @@ pointing the `shareCss` relation at the matching note – see | `theme/blog_share_theme_coffee.css` | Coffee / Coffee Latte share theme (active by default) | code, `text/css` | | `theme/blog_share_theme_harbor.css` | Harbor / Harbordark share theme | code, `text/css` | | `theme/blog_share_theme_gruvbox.css` | Gruvbox light/dark share theme | code, `text/css` | +| `theme/blog_share_theme_solarized.css` | Solarized dark/light share theme | code, `text/css` | +| `theme/blog_share_theme_tokyonight.css` | Tokyo Night (storm/day) share theme | code, `text/css` | | `theme/favicon.svg` | default site favicon | code (SVG) | | `theme/cookie.woff2` | "Cookie" font for the Buy me a coffee button | file, `font/woff2` | | `lib/highlight.js` | vendored highlight.js | code, `application/javascript` | @@ -143,6 +149,8 @@ Under **`.blog`** create one code note per file, using the file name as the note | `blog_share_theme_coffee.css` | `theme/blog_share_theme_coffee.css` | `text/css` | | `blog_share_theme_harbor.css` | `theme/blog_share_theme_harbor.css` | `text/css` | | `blog_share_theme_gruvbox.css` | `theme/blog_share_theme_gruvbox.css` | `text/css` | +| `blog_share_theme_solarized.css` | `theme/blog_share_theme_solarized.css` | `text/css` | +| `blog_share_theme_tokyonight.css` | `theme/blog_share_theme_tokyonight.css` | `text/css` | | `favicon` | `theme/favicon.svg` | – (SVG) | | `Cookie` | `theme/cookie.woff2` | `font/woff2` (file note) | | `highlight.js` | `lib/highlight.js` | `application/javascript` | @@ -315,7 +323,7 @@ server { ## Customisation -- **Theme**: pick one of `theme/blog_share_theme_{coffee,harbor,gruvbox}.css` and point the blog's +- **Theme**: pick one of `theme/blog_share_theme_{coffee,harbor,gruvbox,solarized,tokyonight}.css` and point the blog's `shareCss` relation at it – see [`docs/switch-blog-theme.md`](docs/switch-blog-theme.md). Each theme ships dark + light via `html.theme-light/dark`. The 3D viewer and Mermaid rendering read the theme's CSS variables, so they adapt automatically to whichever theme is active. @@ -330,6 +338,6 @@ This project is licensed under the **GNU General Public License v3.0** – see [ The repository also contains third-party assets that keep their own licenses: `lib/highlight.js` (BSD-3-Clause), `lib/hljs_line_numbers.js` (MIT), -`theme/cookie.woff2` (SIL OFL 1.1), the three palette images `assets/palette-*.png` (MIT) and the embedded +`theme/cookie.woff2` (SIL OFL 1.1), the palette images `assets/palette-*.png` (MIT) and the embedded Trilium logo in `scripts/bmc_button.js` (AGPL-3.0). See [`THIRD_PARTY_LICENSES.md`](THIRD_PARTY_LICENSES.md) for details. \ No newline at end of file diff --git a/THIRD_PARTY_LICENSES.md b/THIRD_PARTY_LICENSES.md index 2dfb65b..1872d7b 100644 --- a/THIRD_PARTY_LICENSES.md +++ b/THIRD_PARTY_LICENSES.md @@ -14,6 +14,10 @@ The following files in this repository are **not** covered by the GPL-3.0 and ke | `theme/blog_share_theme_coffee.css` | Coffee / Coffee Latte color scheme from [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) (repo: MIT) | [MIT](#mit-license) | | `theme/blog_share_theme_harbor.css` | Harbor / Harbordark color scheme from [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbor-theme) (repo: MIT) | [MIT](#mit-license) | | `theme/blog_share_theme_gruvbox.css` | Gruvbox color scheme from [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (repo: MIT) | [MIT](#mit-license) | +| `theme/blog_share_theme_solarized.css` | Solarized color scheme by [Ethan Schoonover](https://ethanschoonover.com/solarized/) | [MIT](#mit-license) | +| `theme/blog_share_theme_tokyonight.css` | Tokyo Night color scheme from [folke/tokyonight.nvim](https://github.com/folke/tokyonight.nvim) | [Apache-2.0](#apache-2.0) | +| `assets/palette-solarized.png` | Solarized palette image (Ethan Schoonover) | [MIT](#mit-license) | +| `assets/palette-tokyonight.png` | Tokyo Night palette image from [folke/tokyonight.nvim](https://github.com/folke/tokyonight.nvim) | [Apache-2.0](#apache-2.0) | | `lib/3d/three.min.js`, `lib/3d/OrbitControls.js`, `lib/3d/STLLoader.js` | [three.js](https://github.com/mrdoob/three.js) r128 | [MIT](#mit-license) | | `lib/3d/occt-import-js.js`, `lib/3d/occt-import-js.wasm` | [occt-import-js](https://github.com/kovacsv/occt-import-js) (OpenCASCADE, WASM) | [LGPL-2.1](#lgpl-21) | | `lib/3d/occt-wasm-bundle.js`, `lib/3d/occt-wasm.wasm` | [occt-wasm](https://github.com/andymai/occt-wasm) (OpenCASCADE **OCCT V8**, WebAssembly, esbuild-bundled `OcctKernel`) | [MIT OR Apache-2.0](#mit-license) | @@ -98,4 +102,10 @@ the WASM blob is loaded at runtime by `scripts/3d_model_viewer.js` and is not st The Trilium logo embedded in `scripts/bmc_button.js` belongs to the Trilium / TriliumNext project and is used under the terms of the GNU Affero General -Public License v3.0 (). \ No newline at end of file +Public License v3.0 (). +## Apache-2.0 + +The Tokyo Night color scheme (in `theme/blog_share_theme_tokyonight.css` and +`assets/palette-tokyonight.png`) is derived from +[tokyonight.nvim](https://github.com/folke/tokyonight.nvim) and used under the +Apache License 2.0 (). diff --git a/assets/palette-solarized.png b/assets/palette-solarized.png new file mode 100644 index 0000000..5269e14 Binary files /dev/null and b/assets/palette-solarized.png differ diff --git a/assets/palette-tokyonight.png b/assets/palette-tokyonight.png new file mode 100644 index 0000000..db6ec3b Binary files /dev/null and b/assets/palette-tokyonight.png differ diff --git a/docs/switch-blog-theme.md b/docs/switch-blog-theme.md index 7847be3..654ee59 100644 --- a/docs/switch-blog-theme.md +++ b/docs/switch-blog-theme.md @@ -12,6 +12,8 @@ note IDs are given for reference. | Coffee (default) | `theme/blog_share_theme_coffee.css` | `NqZXcFRGi3II` | espresso / latte-cream | | Harbor | `theme/blog_share_theme_harbor.css` | `Ep54EDTwKxup` | harbordark / paper | | Gruvbox | `theme/blog_share_theme_gruvbox.css` | `edhL5cByGwqA` | gruvbox dark / light | +| Solarized | `theme/blog_share_theme_solarized.css` | `UFxPR5IpTyfj` | base03 / base3 | +| Tokyo Night | `theme/blog_share_theme_tokyonight.css` | `bf1OKYo3msZm` | storm / day | All three themes include a `html.theme-light` + `html.theme-dark` block, theme-aware **3D viewer** overlays and **Mermaid** rendering. The 3D viewer reads the theme's CSS variables diff --git a/theme/blog_share_theme_solarized.css b/theme/blog_share_theme_solarized.css new file mode 100644 index 0000000..6eb209a --- /dev/null +++ b/theme/blog_share_theme_solarized.css @@ -0,0 +1,1891 @@ +/* + * Solarized Share Theme (light/dark) + * Solarized by Ethan Schoonover (https://ethanschoonover.com/solarized/, MIT) + */ + +/* + * Harbor Share Theme for Richard's Blog (Trilium Public Share) + * Light: Harbor (paper #fdf6e3 / ink #657b83, accent #268bd2) + * Dark: Harbordark (#002b36 / #839496, accent #268bd2) + * Based on https://github.com/HANCORE-linux/omarchy-harbor-theme (MIT) + */ + +html.theme-light { + --background-primary: #fdf6e3; + --background-secondary: #eee8d5; + --background-highlight: #93a1a1; + --background-active: #268bd2; + --blog-card-bg: #eee8d5; + --scrollbar-thumb: #93a1a1; + --scrollbar-hover: #93a1a1; + --scrollbar-track: #eee8d5; + --text-primary: #657b83; + --text-heading: #657b83; + --text-menu: #586e75; + --text-link: #268bd2; + --text-menu-active: #fdf6e3; + color-scheme: light; +} + +html.theme-dark { + --background-primary: #002b36; + --background-secondary: #073642; + --background-highlight: #073642; + --background-active: #268bd2; + --blog-card-bg: #073642; + --scrollbar-thumb: #073642; + --scrollbar-hover: #073642; + --scrollbar-track: #002b36; + --text-primary: #839496; + --text-heading: #839496; + --text-menu: #859900; + --text-link: #268bd2; + --text-menu-active: #002b36; + color-scheme: dark; +} + +body { + font-family: "Inter", "Montserrat", "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif; +} + +/* ---------- Header: Logo durch Laptop-Emoji ---------- */ +#header-logo img { + display: none; +} + +#header-logo::before { + content: "💻"; + font-size: 1.5em; + line-height: 1; + margin-right: 8px; + display: inline-block; + vertical-align: middle; +} + +/* ---------- Buy Me a Coffee (original, lokal) ---------- */ +@font-face { + font-family: "Cookie"; + src: url(/api/notes/__COOKIE_FONT_ID__/download) format("woff2"); + font-weight: 400; + font-display: swap; +} + +#bmc-links { + margin-top: auto; + padding: 8px 25px 4px; + background: var(--background-secondary); + display: flex; + flex-direction: column; + gap: 2px; +} + +.bmc-link { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 6px 4px 24px; + border-radius: 6px; + color: var(--text-heading); + text-decoration: none; + font-size: 0.9em; + transition: background-color 150ms ease, color 150ms ease; +} + +.bmc-link:hover { + background: var(--background-highlight); + color: var(--text-heading); + text-decoration: none; +} + +.bmc-link .tn-icon { + color: var(--text-link); +} + +/* ---------- Menu: wie Footer-Links gestalten ---------- */ +#menu a { + color: var(--text-heading); + gap: 8px; + font-size: 0.9em; + padding: 4px 6px; + border-color: transparent; + transition: background-color 150ms ease, color 150ms ease; +} + +#menu a:hover { + background: var(--background-highlight); + color: var(--text-heading); + border-color: transparent; + text-decoration: none; +} + +#menu a.active { + background: var(--background-active); + color: var(--background-secondary); + border-color: transparent; +} + +#menu .tn-icon { + color: var(--text-link); +} + +#bmc-wrap { + padding: 8px 14px 14px; + background: var(--background-secondary); + border-top: 1px solid var(--background-highlight); +} + +.bmc-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + box-sizing: border-box; + padding: 6px 12px 8px; + border-radius: 8px; + background: #fabd2f; + color: #657b83; + border: 2px solid #657b83; + font-family: "Cookie", "Brush Script MT", cursive; + font-size: 1.4em; + line-height: 1.1; + text-decoration: none; + transition: background-color 150ms ease, transform 150ms ease; +} + +.bmc-btn:hover { + background: #cb4b16; + color: #657b83; + text-decoration: none; + transform: translateY(-1px); +} + +.bmc-btn .bmc-emoji { + font-size: 1.15em; +} + +.bmc-copyright { + margin-top: 8px; + font-size: 0.75em; + color: var(--text-menu); + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + flex-wrap: wrap; +} + +.bmc-powered { + display: inline-flex; + align-items: center; + gap: 3px; + color: var(--text-menu); + text-decoration: none; + transition: color 150ms ease; +} + +.bmc-powered:hover { + color: var(--text-link); + text-decoration: none; +} + +.powered-logo { + width: 1em; + height: 1em; + display: inline-block; +} + +/* ---------- Reading time ---------- */ +.reading-time { + font-size: 0.8em; + color: var(--text-menu); + margin: -0.9em 0 1.25em; +} + +/* ---------- Blog pagination ---------- */ +.blog-pagination { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin: 1.5em 0 0; + padding-top: 1em; + border-top: 1px solid var(--background-highlight); +} + +.blog-pagination .blog-page-num { + font-size: 0.85em; + color: var(--text-menu); +} + +/* ---------- Share footer navigation (built-in prev/next) ausblenden ---------- */ +#content-footer .navigation { + display: none; +} + +/* ---------- Prev/Next ---------- */ +.blog-prevnext { + display: flex; + justify-content: space-between; + gap: 12px; + margin: 1.5em 0 0; + padding-top: 1em; + border-top: 1px solid var(--background-highlight); +} + +.blog-pn { + display: flex; + flex-direction: column; + gap: 2px; + max-width: 45%; + color: var(--text-heading); + text-decoration: none; + transition: color 150ms ease; +} + +.blog-pn.next { + margin-left: auto; + align-items: flex-end; + text-align: right; +} + +.blog-pn-label { + font-size: 0.72em; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--text-menu); +} + +.blog-pn:hover { + color: var(--text-link); + text-decoration: none; +} + +.blog-pn.empty { + display: none; +} + +/* ---------- Search ---------- */ +.blog-search { + margin: 0.5em 0 1em; +} + +.blog-search-input { + width: 100%; + box-sizing: border-box; + padding: 10px 14px; + border-radius: 8px; + border: 1px solid var(--background-highlight); + background: var(--background-secondary); + color: var(--text-heading); + font-size: 1em; +} + +.blog-search-input:focus { + outline: none; + border-color: var(--text-link); +} + +.blog-search-list { + list-style: none; + padding: 0; + margin: 1em 0 0; +} + +.blog-search-hit { + display: flex; + flex-direction: column; + gap: 2px; + padding: 8px 12px; + border-radius: 8px; + border: 1px solid var(--background-highlight); + background: var(--blog-card-bg); + color: var(--text-heading); + text-decoration: none; + margin-bottom: 8px; + transition: border-color 150ms ease; +} + +.blog-search-hit:hover { + border-color: var(--text-link); + text-decoration: none; +} + +.blog-search-path { + font-size: 0.8em; + color: var(--text-menu); +} + +.blog-search-none { + color: var(--text-menu); +} + +/* ---------- Header-Suche (ersetzt eingebaute) ---------- */ +.search-item { + position: relative; +} + +.blog-search-header-input { + flex: 1; + min-width: 0; + padding: 6px 10px 6px 32px; + border-radius: 6px; + border: 1px solid rgba(131, 148, 150, 0.55); + background: rgba(131, 148, 150, 0.10); + color: var(--text-heading); + font-size: 0.9em; + transition: border-color 150ms ease, box-shadow 150ms ease; +} + +html.theme-light .blog-search-header-input { + border-color: #268bd2; + background: rgba(38, 107, 210, 0.10); +} + +.blog-search-header-input:focus { + outline: none; + border-color: #839496; + box-shadow: 0 0 0 2px rgba(131, 148, 150, 0.20); +} + +html.theme-light .blog-search-header-input:focus { + border-color: #268bd2; + box-shadow: 0 0 0 2px rgba(38, 107, 210, 0.15); +} + +.search-item .search-icon { + color: rgba(131, 148, 150, 0.85); +} + +html.theme-light .search-item .search-icon { + color: #268bd2; +} + +.tn-image { + width: 18px; + height: 18px; + border-radius: 4px; + flex-shrink: 0; + vertical-align: middle; +} + +.tn-image-svg { + color: var(--text-link); +} + +.title-image { + width: 34px; + height: 34px; + border-radius: 6px; + vertical-align: middle; + margin-right: 10px; +} + +.note-fallback { + margin: 1em 0; + overflow: hidden; +} + +.note-fallback-link { + font-size: 0.9em; +} + +.mermaid-fallback { + margin: 1em 0; +} + +.mermaid-render { + margin: 1em 0; + padding: 14px; + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow-x: auto; +} + +.mermaid-render svg { + max-width: 100%; + height: auto; +} + +.mermaid-source { + margin: 12px 0 0; + text-align: center; +} + +.mermaid-source summary { + cursor: pointer; + font-size: 0.85em; + color: var(--text-menu); + user-select: none; + padding: 4px 10px; + border: 1px solid var(--background-highlight); + border-radius: 6px; + display: inline-block; + background: var(--background-secondary); +} + +.mermaid-source summary:hover { + color: var(--text-heading); + border-color: var(--text-link); +} + +.mermaid-source pre { + width: min(100%, 820px); + margin: 8px auto 0; + text-align: left; + position: relative; + overflow: hidden; +} + +#content .mermaid-source .hljs-ln { + width: 100%; +} + +/* ---------- Rendered widgets: mind map + excalidraw ---------- */ +.mindmap-render, +.excalidraw-render { + margin: 1em 0; + padding: 14px; + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow-x: auto; +} + +.mindmap-svg { + display: block; + width: 100%; + height: auto; +} + +.excalidraw-svg { + display: block; + max-width: 100%; + height: auto; +} + +.mindmap-render svg text { + user-select: none; +} + +.blog-search-overlay { + display: none; + position: absolute; + top: calc(100% + 4px); + left: 0; + right: 0; + z-index: 50; + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); +} + +.blog-search-overlay.open { + display: block; +} + +.blog-search-overlay-hit { + display: flex; + flex-direction: column; + gap: 1px; + padding: 7px 10px; + color: var(--text-heading); + text-decoration: none; + font-size: 0.85em; + border-bottom: 1px solid var(--background-highlight); +} + +.blog-search-overlay-hit:last-child { + border-bottom: none; +} + +.blog-search-overlay-hit:hover { + background: var(--background-highlight); + text-decoration: none; +} + +.blog-search-overlay-hit .s { + font-size: 0.75em; + color: var(--text-menu); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.blog-search-overlay .blog-search-none { + padding: 8px 10px; + font-size: 0.85em; +} + +#main { + max-width: min(92vw, 1200px); +} + +#site-header { + padding-bottom: 10px; +} + +#title { + font-family: "JetBrains Mono", "Montserrat", monospace; + letter-spacing: -0.02em; +} + +body.is-garden #title { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +body.is-garden #title .note-state { + margin-left: auto; + flex-shrink: 0; +} + +body.is-garden #content h1#title { + background-color: rgba(133, 153, 0, 0.30) !important; + border-bottom-color: rgba(133, 153, 0, 0.60) !important; +} + +html.theme-light body.is-garden #content h1#title { + background-color: rgba(88, 110, 117, 0.15) !important; + border-bottom-color: rgba(88, 110, 117, 0.40) !important; +} + +/* ---------- Blog index (generated article list) ---------- */ +.blog-post { + padding: 1.2em 1.4em; + margin-bottom: 1.25em; + border: 1px solid var(--background-highlight); + border-radius: 10px; + background: var(--blog-card-bg); + transition: border-color 150ms ease, box-shadow 150ms ease; + cursor: pointer; +} + +.blog-post:last-child { + margin-bottom: 0; +} + +.blog-post:hover { + border-color: var(--text-link); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); +} + +#content .blog-post:first-of-type { + margin-top: 1.5em; +} + +/* ---------- Blog post thumbnails (Bild links, Teaser rechts) ---------- */ +.blog-post-inner { + display: flex; + gap: 16px; + align-items: stretch; +} + +.blog-thumb-link { + flex: 0 0 auto; + width: min(256px, 35%); + text-decoration: none; +} + +.blog-thumb { + display: block; + width: 100%; + height: 100%; + max-height: 256px; + object-fit: cover; + border-radius: 8px; + border: 1px solid var(--background-highlight); +} + +.blog-post-body { + flex: 1; + min-width: 0; +} + +.blog-post-title { + margin: 0 0 0.25em; +} + +.blog-post-title a { + color: var(--text-heading); + text-decoration: none; + transition: color 150ms ease; +} + +.blog-post-title a:hover { + color: var(--text-link); + text-decoration: none; +} + +.blog-post-meta { + display: flex; + gap: 12px; + font-size: 0.85em; + color: var(--text-menu); + margin-bottom: 0.5em; +} + +.blog-post-date { + font-variant-numeric: tabular-nums; + opacity: 0.85; +} + +.blog-post-category { + background: var(--background-highlight); + border-radius: 8px; + padding: 1px 10px; + color: var(--text-heading); + font-weight: 600; +} + +.blog-post-summary { + margin: 0 0 0.5em; + color: var(--text-primary); +} + +.blog-post-tags { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.tag { + font-size: 0.78em; + color: var(--text-link); + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + padding: 1px 8px; +} + +a.tag { + text-decoration: none; + transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; +} + +a.tag:hover { + background: var(--background-highlight); + border-color: var(--text-link); + color: var(--text-heading); + text-decoration: none; +} + +/* ---------- Article meta (date/category on individual pages) ---------- */ +.article-meta { + display: flex; + gap: 12px; + font-size: 0.9em; + color: var(--text-menu); + margin-bottom: 1em; + padding-bottom: 1em; + border-bottom: 1px solid var(--background-highlight); +} + +/* ---------- Headings (h2-h6) - Harbor header boxes ---------- */ +html.theme-dark { + --header-h2-bg: rgba(38, 107, 210, 0.30); + --header-h2-border: rgba(38, 107, 210, 0.6); + --header-h3-bg: rgba(133, 153, 0, 0.25); + --header-h3-border: rgba(133, 153, 0, 0.6); + --header-h4-bg: rgba(181, 137, 0, 0.22); + --header-h4-border: rgba(181, 137, 0, 0.55); + --header-h5-bg: rgba(131, 148, 150, 0.25); + --header-h5-border: rgba(131, 148, 150, 0.6); + --header-h6-bg: rgba(229, 137, 128, 0.25); + --header-h6-border: rgba(229, 137, 128, 0.6); + --header-h1-bg: rgba(220, 50, 47, 0.30); + --header-h1-border: rgba(220, 50, 47, 0.6); +} + +html.theme-light { + --header-h2-bg: rgba(38, 107, 210, 0.18); + --header-h2-border: rgba(38, 107, 210, 0.45); + --header-h3-bg: rgba(88, 110, 117, 0.14); + --header-h3-border: rgba(88, 110, 117, 0.38); + --header-h4-bg: rgba(203, 75, 22, 0.14); + --header-h4-border: rgba(203, 75, 22, 0.38); + --header-h5-bg: rgba(211, 54, 130, 0.12); + --header-h5-border: rgba(211, 54, 130, 0.35); + --header-h6-bg: rgba(42, 161, 152, 0.12); + --header-h6-border: rgba(42, 161, 152, 0.35); + --header-h1-bg: rgba(220, 50, 47, 0.14); + --header-h1-border: rgba(220, 50, 47, 0.40); +} + +#content h1 { + background-color: var(--header-h1-bg); + border-bottom: 2px solid var(--header-h1-border); + border-radius: 4px; + padding: 0.3em 0.4em; + font-size: 1.6em; + font-weight: 700; + margin-top: 1.5em; + margin-bottom: 1.25em; +} + +#content h2 { + background-color: var(--header-h2-bg); + border-bottom: 2px solid var(--header-h2-border); + border-radius: 4px; + padding: 0.25em 0.4em; +} + +#content h3 { + background-color: var(--header-h3-bg); + border-bottom: 2px solid var(--header-h3-border); + border-radius: 4px; + padding: 0.2em 0.35em; +} + +#content h4 { + background-color: var(--header-h4-bg); + border-bottom: 2px solid var(--header-h4-border); + border-radius: 4px; + padding: 0.2em 0.35em; +} + +#content h5 { + background-color: var(--header-h5-bg); + border-bottom: 2px solid var(--header-h5-border); + border-radius: 4px; + padding: 0.2em 0.35em; +} + +#content h6 { + background-color: var(--header-h6-bg); + border-bottom: 2px solid var(--header-h6-border); + border-radius: 4px; + padding: 0.2em 0.35em; +} + +#childLinks { + display: none; +} + +#index { + display: none; +} + +/* ---------- Code blocks - Harbordark (always, also in light mode) ---------- */ +.ck-content pre, +#content pre { + background-color: #073642; + color: #839496; + border: 1px solid #073642; + border-radius: 8px; +} + +.ck-content code, +#content code { + background-color: #073642; + color: #839496; + border-color: #073642; + border-radius: 8px; + padding: 0.1em 0.35em; +} + +html.theme-light .ck-content pre, +html.theme-light #content pre { + background-color: #eee8d5; + color: #657b83; + border-color: #93a1a1; +} + +html.theme-light .ck-content code, +html.theme-light #content code { + background-color: #eee8d5; + color: #657b83; + border-color: #93a1a1; +} + +/* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */ +#content figure.image { + margin: 1.25em auto; +} + +#content figure img, +#content img:not(.blog-thumb) { + border-radius: 8px; +} + +/* ---------- 3D model viewer (STL / STEP) ---------- */ +.model-viewer { + position: relative; + box-sizing: border-box; + width: calc(100vw - 24px); + margin: 1em 0; + margin-left: calc(50% - (100vw - 24px) / 2); + background: #002b36; + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow: hidden; +} + +.model-viewer.model-viewer-inline { + width: 100%; + margin-left: 0; +} + +.model-viewer-data { + position: absolute; + top: 8px; + right: 10px; + z-index: 3; + display: none; + font-size: 0.75em; + color: #859900; + background: rgba(0, 43, 54, 0.85); + border: 1px solid #073642; + border-radius: 6px; + padding: 2px 10px; + font-variant-numeric: tabular-nums; + pointer-events: none; +} + +.model-viewer-canvas { + position: relative; + width: 100%; + height: min(70vh, 900px); + min-height: 420px; +} + +.model-viewer-status { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 48px; + box-sizing: border-box; + color: #859900; + font-size: 0.9em; +} + +.model-viewer-status.error { + color: #dc322f; +} + +.model-viewer-progress { + position: absolute; + left: 0; + right: 0; + bottom: 40px; + height: 6px; + width: min(60%, 480px); + margin: 0 auto; + background: #073642; + border-radius: 3px; + overflow: hidden; +} + +.model-viewer-progress-fill { + height: 100%; + width: 0; + background: #b58900; + border-radius: 3px; + transition: width 150ms ease; +} + +.model-viewer-progress-fill.indeterminate { + width: 40%; + animation: model-progress 1.1s ease-in-out infinite; +} + +@keyframes model-progress { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(250%); } +} + +.model-viewer-hint { + position: absolute; + top: 8px; + left: 10px; + font-size: 0.75em; + color: #859900; + z-index: 2; + pointer-events: none; +} + +.model-viewer-caption { + font-size: 0.85em; + font-style: italic; + color: var(--text-menu); + text-align: center; + padding: 4px 12px; + background: var(--background-secondary); + border-top: 1px solid var(--background-highlight); +} + +.model-viewer canvas { + display: block; + width: 100%; + height: 100%; +} + +/* ---------- 3D-Viewer: theme-bewusste Overlays ---------- */ +html.theme-light .model-viewer { + background: #eee8d5; +} +html.theme-light .model-viewer-status, +html.theme-light .model-viewer-hint, +html.theme-light .model-viewer-data { + color: #657b83; +} +html.theme-light .model-viewer-data { + background: rgba(253, 246, 227, 0.85); + border-color: #93a1a1; +} +html.theme-light .model-viewer-status.error { + color: #dc322f; +} +html.theme-light .model-viewer-progress { + background: #93a1a1; +} +html.theme-light .model-viewer-progress-fill { + background: #268bd2; +} + +/* ---------- Bildunterschriften (Harbor) ---------- */ +#content figcaption { + font-size: 0.85em; + font-style: italic; + color: var(--text-menu); + text-align: center; + margin-top: 8px; + padding: 4px 12px; + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + display: inline-block; +} + +.hljs { + background: #073642; + color: #839496; +} + +.hljs-comment, +.hljs-quote { + color: #586e75; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-subst { + color: #dc322f; +} + +.hljs-number, +.hljs-literal, +.hljs-variable, +.hljs-template-variable, +.hljs-tag .hljs-attr { + color: #268bd2; +} + +.hljs-string, +.hljs-doctag { + color: #859900; +} + +.hljs-title, +.hljs-section, +.hljs-selector-id { + color: #b58900; +} + +.hljs-type, +.hljs-class .hljs-title, +.hljs-attribute { + color: #839496; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-link, +.hljs-meta, +.hljs-deletion, +.hljs-addition { + color: #268bd2; +} + +.hljs-built_in, +.hljs-builtin-name, +.hljs-params { + color: #839496; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} +/* ---------- Light mode: Harbor light highlighter ---------- */ +html.theme-light .hljs, +html.theme-light pre code.hljs { + background: #eee8d5 !important; + color: #657b83; +} + +html.theme-light .hljs-comment, +html.theme-light .hljs-quote { + color: #93a1a1; +} + +html.theme-light .hljs-keyword, +html.theme-light .hljs-selector-tag, +html.theme-light .hljs-subst { + color: #dc322f; +} + +html.theme-light .hljs-number, +html.theme-light .hljs-literal, +html.theme-light .hljs-variable, +html.theme-light .hljs-template-variable, +html.theme-light .hljs-tag .hljs-attr { + color: #d33682; +} + +html.theme-light .hljs-string, +html.theme-light .hljs-doctag { + color: #586e75; +} + +html.theme-light .hljs-title, +html.theme-light .hljs-section, +html.theme-light .hljs-selector-id { + color: #cb4b16; +} + +html.theme-light .hljs-type, +html.theme-light .hljs-class .hljs-title, +html.theme-light .hljs-attribute { + color: #268bd2; +} + +html.theme-light .hljs-symbol, +html.theme-light .hljs-bullet, +html.theme-light .hljs-link, +html.theme-light .hljs-meta, +html.theme-light .hljs-deletion, +html.theme-light .hljs-addition { + color: #d33682; +} + +html.theme-light .hljs-built_in, +html.theme-light .hljs-builtin-name, +html.theme-light .hljs-params { + color: #2aa198; +} + +html.theme-light .hljs-regexp, +html.theme-light .hljs-operator, +html.theme-light .hljs-selector-attr, +html.theme-light .hljs-selector-pseudo, +html.theme-light .hljs-selector-class, +html.theme-light .hljs-template-tag { + color: #d33682; +} + +html.theme-light .hljs-name, +html.theme-light .hljs-tag { + color: #268bd2; +} + +html.theme-light .hljs-meta .hljs-string { + color: #586e75; +} +/* ---------- Admonitions (Trilium-style, gefüllt) ---------- */ +.admonition { + --accent-color: var(--background-highlight); + --admonition-bg: var(--background-secondary); + border: 1px solid var(--accent-color); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + background: var(--admonition-bg); + border-radius: 0.5em; + padding: 1em; + padding-inline-start: 2.5em; + margin: 1.25em 0; + position: relative; + overflow: hidden; +} + +html.theme-dark .admonition.note { --admonition-bg: rgba(38, 107, 210, 0.16); } +html.theme-dark .admonition.tip { --admonition-bg: rgba(88, 110, 117, 0.16); } +html.theme-dark .admonition.important { --admonition-bg: rgba(211, 54, 130, 0.18); } +html.theme-dark .admonition.caution { --admonition-bg: rgba(220, 50, 47, 0.16); } +html.theme-dark .admonition.warning { --admonition-bg: rgba(203, 75, 22, 0.16); } +html.theme-dark .admonition { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } + +html.theme-light .admonition.note { --admonition-bg: rgba(38, 107, 210, 0.18); } +html.theme-light .admonition.tip { --admonition-bg: rgba(88, 110, 117, 0.16); } +html.theme-light .admonition.important { --admonition-bg: rgba(211, 54, 130, 0.16); } +html.theme-light .admonition.caution { --admonition-bg: rgba(220, 50, 47, 0.16); } +html.theme-light .admonition.warning { --admonition-bg: rgba(203, 75, 22, 0.20); } + +.admonition p:last-child { + margin-bottom: 0; +} + +.admonition p, +.admonition h2 { + margin-top: 0; +} + +.admonition.note { --accent-color: #268bd2; } +.admonition.tip { --accent-color: #586e75; } +.admonition.important { --accent-color: #d33682; } +.admonition.caution { --accent-color: #dc322f; } +.admonition.warning { --accent-color: #cb4b16; } + +.admonition::before { + color: var(--accent-color); + font-family: boxicons !important; + position: absolute; + top: 1em; + inset-inline-start: 1em; +} + +.admonition.note::before { content: "\eb21"; } +.admonition.tip::before { content: "\ea0d"; } +.admonition.important::before { content: "\ea7c"; } +.admonition.caution::before { content: "\eac7"; } +.admonition.warning::before { content: "\eac5"; } +/* ---------- Tables (Harbor, theme-aware) ---------- */ +html.theme-dark { + --table-header-bg: rgba(38, 107, 210, 0.20); + --table-header-text: #839496; + --table-header-border: rgba(38, 107, 210, 0.45); + --table-stripe: rgba(255, 255, 255, 0.04); + --table-hover: rgba(38, 107, 210, 0.12); + --table-rowlabel-bg: rgba(255, 255, 255, 0.05); + --table-rowlabel-text: #839496; +} + +html.theme-light { + --table-header-bg: rgba(38, 107, 210, 0.16); + --table-header-text: #657b83; + --table-header-border: rgba(38, 107, 210, 0.40); + --table-stripe: rgba(0, 0, 0, 0.04); + --table-hover: rgba(38, 107, 210, 0.12); + --table-rowlabel-bg: rgba(0, 0, 0, 0.05); + --table-rowlabel-text: #657b83; +} + +.ck-content table, +#content table { + border-collapse: separate; + border-spacing: 0; + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow: hidden; + margin: 1em 0; +} + +.ck-content table th, +.ck-content table td, +#content table th, +#content table td { + border: none; + border-bottom: 1px solid var(--background-highlight); + border-right: 1px solid var(--background-highlight); + padding: 8px 12px; + text-align: left; + background-color: transparent !important; +} + +.ck-content table th:last-child, +.ck-content table td:last-child, +#content table th:last-child, +#content table td:last-child { + border-right: none; +} + +.ck-content table tr:last-child td, +#content table tr:last-child td { + border-bottom: none; +} + +.ck-content table thead th, +#content table thead th { + background-color: var(--table-header-bg) !important; + color: var(--table-header-text); + font-weight: 700; + border-bottom: 2px solid var(--table-header-border); +} + +.ck-content table tbody td:first-child, +#content table tbody td:first-child { + background-color: var(--table-rowlabel-bg) !important; + color: var(--table-rowlabel-text); + font-weight: 600; + white-space: nowrap; +} + +.ck-content table tbody tr:nth-child(even) td:not(:first-child), +#content table tbody tr:nth-child(even) td:not(:first-child) { + background-color: var(--table-stripe) !important; +} + +.ck-content table tbody tr:hover td, +#content table tbody tr:hover td { + background-color: rgba(38, 107, 210, 0.10) !important; +} + +.ck-content table .col-hover, +#content table .col-hover { + background-color: rgba(38, 107, 210, 0.10) !important; +} + +.ck-content table tbody tr:hover td.col-hover, +.ck-content table thead th.col-hover, +#content table tbody tr:hover td.col-hover, +#content table thead th.col-hover { + background-color: rgba(38, 107, 210, 0.18) !important; +} +/* ---------- Category subcategories ---------- */ +.blog-subcategories { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 0 0 1.25em; +} + +.blog-subcategory { + display: inline-flex; + align-items: center; + gap: 6px; + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + padding: 4px 12px; + color: var(--text-heading); + text-decoration: none; + font-weight: 600; + transition: background-color 150ms ease, border-color 150ms ease; +} + +.blog-subcategory i { + color: var(--text-link); +} + +.blog-subcategory:hover { + background: var(--background-highlight); + border-color: var(--text-link); + color: var(--text-heading); + text-decoration: none; +} +/* ---------- Digital Garden note table ---------- */ +.blog-garden-table { + width: 100%; +} + +.blog-garden-table tbody td:first-child { + background: transparent !important; + font-weight: normal; +} + +.note-type { + display: inline-block; + font-size: 0.8em; + padding: 2px 10px; + border-radius: 8px; + background: var(--background-highlight); + color: var(--text-heading); + font-weight: 600; + text-transform: capitalize; + white-space: nowrap; +} +/* ---------- Digital Garden rows: clickable + sage hover ---------- */ +.blog-garden-table tbody tr { + cursor: pointer; +} + +#content .blog-garden-table tbody tr:hover td, +#content .blog-garden-table .col-hover { + background-color: rgba(133, 153, 0, 0.15) !important; +} + +#content .blog-garden-table tbody tr:hover td.col-hover { + background-color: rgba(133, 153, 0, 0.25) !important; +} +.note-state { + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 0.8em; + padding: 2px 10px; + border-radius: 8px; + background: rgba(133, 153, 0, 0.20); + color: var(--text-heading); + font-weight: 600; + white-space: nowrap; +} + +.note-state i { + color: #859900; +} + +.note-state.state-draft { + background: rgba(101, 123, 131, 0.22); +} + +.note-state.state-draft i { + color: #657b83; +} + +.note-state.state-review { + background: rgba(131, 148, 150, 0.25); +} + +.note-state.state-review i { + color: #839496; +} + +.note-state.state-unknown { + background: rgba(220, 50, 47, 0.18); +} + +.note-state.state-unknown i { + color: #dc322f; +} + +/* ---------- Peppige Garden-Badges (dark) ---------- */ +html.theme-dark .note-state { + background: rgba(133, 153, 0, 0.40); + border: 1px solid #859900; + color: #002b36; +} +html.theme-dark .note-state i { + color: #002b36; +} +html.theme-dark .note-state.state-draft { + background: rgba(220, 50, 47, 0.85); + border-color: #dc322f; + color: #002b36; +} +html.theme-dark .note-state.state-draft i { + color: #002b36; +} +html.theme-dark .note-state.state-review { + background: rgba(38, 107, 210, 0.85); + border-color: #268bd2; + color: #002b36; +} +html.theme-dark .note-state.state-review i { + color: #002b36; +} +html.theme-dark .note-state.state-unknown { + background: rgba(181, 137, 0, 0.85); + border-color: #b58900; + color: #002b36; +} +html.theme-dark .note-state.state-unknown i { + color: #002b36; +} + +/* ---------- Peppige Garden-Badges (light) ---------- */ +html.theme-light .note-state { + background: rgba(88, 110, 117, 0.85); + border: 1px solid #586e75; + color: #fdf6e3; +} +html.theme-light .note-state i { + color: #fdf6e3; +} +html.theme-light .note-state.state-draft { + background: rgba(203, 75, 22, 0.95); + border-color: #cb4b16; + color: #657b83; +} +html.theme-light .note-state.state-draft i { + color: #657b83; +} +html.theme-light .note-state.state-review { + background: rgba(38, 107, 210, 0.95); + border-color: #268bd2; + color: #fdf6e3; +} +html.theme-light .note-state.state-review i { + color: #fdf6e3; +} +html.theme-light .note-state.state-unknown { + background: rgba(220, 50, 47, 0.95); + border-color: #dc322f; + color: #fdf6e3; +} +html.theme-light .note-state.state-unknown i { + color: #fdf6e3; +} +/* ---------- Code notes: always Harbordark like code boxes ---------- */ +#content.type-code pre { + background-color: #073642 !important; + color: #839496; + border: 1px solid #073642; + border-radius: 8px; + padding: 1em; + margin: 1em 0; +} + +#content.type-code code { + background-color: transparent !important; + color: #839496; + border: 0; +} + +html.theme-light #content.type-code pre { + background-color: #eee8d5 !important; + color: #657b83; + border-color: #93a1a1; +} + +html.theme-light #content.type-code code { + color: #657b83; +} +/* ---------- Code: line numbers + copy button ---------- */ +pre.code-processed { + position: relative; + display: flex; + align-items: flex-start; + line-height: 1.6; +} + +pre.code-processed .code-wrap { + flex: 1; + min-width: 0; + overflow-x: auto; + border-radius: 8px; +} + +pre.code-processed .code-wrap code { + display: block; + line-height: inherit; + padding: 0; + margin: 0; +} + +pre.code-processed .code-lines { + flex-shrink: 0; + user-select: none; + text-align: right; + padding: 0 12px 0 0; + margin: 0 12px 0 0; + border-right: 1px solid var(--background-highlight); + color: var(--text-menu); + white-space: pre; + font-family: "JetBrains Mono", Consolas, monospace; + font-size: 1em; + line-height: inherit; +} + +pre.code-processed .code-copy-btn, +.mermaid-source pre .code-copy-btn { + position: absolute; + top: 6px; + right: 6px; + z-index: 2; + font-size: 0.75em; + padding: 2px 10px; + border-radius: 6px; + border: 1px solid var(--background-highlight); + background: var(--background-secondary); + color: var(--text-heading); + cursor: pointer; + opacity: 0.6; + transition: opacity 150ms ease; +} + +pre.code-processed:hover .code-copy-btn, +.mermaid-source pre:hover .code-copy-btn { + opacity: 1; +} + +pre.code-processed .code-copy-btn:hover, +.mermaid-source pre .code-copy-btn:hover { + border-color: var(--text-link); + opacity: 1; +} +/* ---------- highlight.js line numbers ---------- */ +#content .hljs-ln { + border-collapse: collapse; + border: none !important; + box-shadow: none; + border-radius: 8px; + margin: 0; + width: auto; + line-height: 1.4; +} + +#content .hljs-ln td, +#content .hljs-ln th { + border: none !important; + background-color: transparent !important; + padding: 0; +} + +#content .hljs-ln tbody td:first-child, +#content .hljs-ln thead th:first-child { + background-color: transparent !important; +} + +#content .hljs-ln tbody tr:nth-child(even) td { + background-color: transparent !important; +} + +#content .hljs-ln .col-hover { + background-color: transparent !important; +} + +#content .hljs-ln tbody tr:hover td, +#content .hljs-ln tbody tr:hover td.col-hover { + background-color: rgba(38, 107, 210, 0.08) !important; +} + +html.theme-light #content .hljs-ln tbody tr:hover td, +html.theme-light #content .hljs-ln tbody tr:hover td.col-hover { + background-color: rgba(38, 107, 210, 0.08) !important; +} + +.hljs-ln-numbers { + user-select: none; + text-align: right; + padding-right: 12px !important; + padding-left: 4px; + border-right: 1px solid var(--background-highlight) !important; + color: var(--text-menu); + white-space: nowrap; + vertical-align: top; + font-family: "JetBrains Mono", Consolas, monospace; +} + +.hljs-ln-code { + padding-left: 12px !important; + white-space: pre; + vertical-align: top; +} +/* ---------- Scrollbars (Harbor) ---------- */ +::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +::-webkit-scrollbar-track { + background: var(--scrollbar-track); +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: 6px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-hover); +} + +* { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); +} + +/* ---------- Code boxes: scrollbars ---------- */ +pre, +pre.code-processed .code-wrap, +.hljs-ln-code { + scrollbar-color: #073642 #002b36; +} + +pre::-webkit-scrollbar-thumb, +pre.code-processed .code-wrap::-webkit-scrollbar-thumb, +.hljs-ln-code::-webkit-scrollbar-thumb { + background: #073642; +} + +pre::-webkit-scrollbar-thumb:hover, +pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover, +.hljs-ln-code::-webkit-scrollbar-thumb:hover { + background: #073642; +} + +pre::-webkit-scrollbar-track, +pre.code-processed .code-wrap::-webkit-scrollbar-track, +.hljs-ln-code::-webkit-scrollbar-track { + background: #002b36; +} + +html.theme-light pre, +html.theme-light pre.code-processed .code-wrap, +html.theme-light .hljs-ln-code { + scrollbar-color: #93a1a1 #eee8d5; +} + +html.theme-light pre::-webkit-scrollbar-thumb, +html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb, +html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb { + background: #93a1a1; +} + +html.theme-light pre::-webkit-scrollbar-thumb:hover, +html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover, +html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb:hover { + background: #93a1a1; +} + +html.theme-light pre::-webkit-scrollbar-track, +html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-track, +html.theme-light .hljs-ln-code::-webkit-scrollbar-track { + background: #eee8d5; +} + +/* ---------- Link icons / markers: internal links without arrow, external links keep a marker ---------- */ +#content a::after, +#content a::before, +#content-footer .navigation a::after, +#content-footer .navigation a::before, +a.next::after, +a.previous::before, +.bmc-btn::after, +.bmc-btn::before, +.bmc-powered::after, +.bmc-powered::before { + content: none !important; +} + +#content a[href^="http://"]:not([href^="https://YOUR-INSTANCE.example.com"])::after, +#content a[href^="https://"]:not([href^="https://YOUR-INSTANCE.example.com"])::after { + content: " ↗" !important; + display: inline-block; + margin-left: 3px; + font-size: 0.85em; + color: var(--text-link); +} + +/* inline text links (in paragraphs/lists): colour only */ +#content p a:not([class]), +#content li a:not([class]) { + color: var(--text-link); + text-decoration: none; + background: transparent; + border: 0; + padding: 0; + border-radius: 0; +} + +#content p a:not([class]):hover, +#content li a:not([class]):hover { + color: var(--text-heading); + background: transparent; +} + +/* action links as buttons (subtle tint, noticeable on hover) */ +.blog-pn { + padding: 6px 14px; + border: 1px solid rgba(38, 107, 210, 0.30); + border-radius: 8px; + background: rgba(38, 107, 210, 0.08); + transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; +} + +html.theme-light .blog-pn { + border-color: rgba(38, 107, 210, 0.30); + background: rgba(38, 107, 210, 0.08); +} + +.blog-pn:hover { + background: rgba(38, 107, 210, 0.18); + border-color: #268bd2; +} + +html.theme-light .blog-pn:hover { + background: rgba(38, 107, 210, 0.15); + border-color: #268bd2; +} + +/* ---------- Mermaid diagrams - Harbor, theme-following ---------- */ +/* + * The blog renders inline Mermaid diagrams with the default theme, so the + * generated SVG carries light-blue node fills that clash with Harbor. + * Override the SVG element colours here; the selectors hang off + * html.theme-dark / html.theme-light, so the diagrams follow the theme + * toggle automatically without re-rendering. + */ + +.mermaid { + margin: 1.25em auto; + overflow-x: auto; + background: transparent; +} + +.mermaid svg { + max-width: 100%; + height: auto; +} + +/* Text in node labels and titles */ +html.theme-dark .mermaid svg text, +html.theme-dark .mermaid svg tspan, +html.theme-dark .mermaid svg .nodeLabel, +html.theme-dark .mermaid svg .edgeLabel p { + fill: #839496 !important; + color: #839496 !important; +} + +html.theme-light .mermaid svg text, +html.theme-light .mermaid svg tspan, +html.theme-light .mermaid svg .nodeLabel, +html.theme-light .mermaid svg .edgeLabel p { + fill: #657b83 !important; + color: #657b83 !important; +} + +/* Graph/node title */ +html.theme-dark .mermaid svg .titleText text, +html.theme-dark .mermaid svg .node .label .nodeLabel { + fill: #839496 !important; + color: #839496 !important; +} + +html.theme-light .mermaid svg .titleText text, +html.theme-light .mermaid svg .node .label .nodeLabel { + fill: #657b83 !important; + color: #657b83 !important; +} + +/* Node shapes (rectangles, rounded boxes, ellipses, diamonds) */ +html.theme-dark .mermaid svg .node rect, +html.theme-dark .mermaid svg .node polygon, +html.theme-dark .mermaid svg .node circle, +html.theme-dark .mermaid svg .node ellipse, +html.theme-dark .mermaid svg .node path, +html.theme-dark .mermaid svg .cluster rect { + fill: #073642 !important; + stroke: #839496 !important; +} + +html.theme-light .mermaid svg .node rect, +html.theme-light .mermaid svg .node polygon, +html.theme-light .mermaid svg .node circle, +html.theme-light .mermaid svg .node ellipse, +html.theme-light .mermaid svg .node path, +html.theme-light .mermaid svg .cluster rect { + fill: #eee8d5 !important; + stroke: #268bd2 !important; +} + +/* Rounded corners on rectangular node boxes and subgraph clusters (8 px, like the blog cards) */ +html.theme-dark .mermaid svg .node rect, +html.theme-light .mermaid svg .node rect, +html.theme-dark .mermaid svg .cluster rect, +html.theme-light .mermaid svg .cluster rect { + rx: 8px !important; + ry: 8px !important; +} + +/* Edge lines: stroke only (a filled edge path would look like a polygon) */ +html.theme-dark .mermaid svg .edgePaths path { + fill: none !important; + stroke: #859900 !important; +} + +html.theme-light .mermaid svg .edgePaths path { + fill: none !important; + stroke: #93a1a1 !important; +} + +/* Arrowheads (markers): filled triangles */ +html.theme-dark .mermaid svg marker.flowchart-v2, +html.theme-dark .mermaid svg .arrowMarkerPath { + fill: #859900 !important; + stroke: #859900 !important; +} + +html.theme-light .mermaid svg marker.flowchart-v2, +html.theme-light .mermaid svg .arrowMarkerPath { + fill: #93a1a1 !important; + stroke: #93a1a1 !important; +} + +/* Edge labels: HTML text inside a foreignObject (div.labelBkg > span.edgeLabel); + the label panel background lives on the g.edgeLabel element itself */ +html.theme-dark .mermaid svg g.edgeLabel { + background: #002b36 !important; + fill: #839496 !important; + color: #839496 !important; +} + +html.theme-dark .mermaid svg .edgeLabel .labelBkg { + fill: #002b36 !important; + background: #002b36 !important; + color: #839496 !important; +} + +html.theme-dark .mermaid svg .edgeLabel .labelBkg .edgeLabel { + fill: #839496 !important; + color: #839496 !important; + background: #002b36 !important; +} + +html.theme-dark .mermaid svg .edgeLabel .labelBkg .edgeLabel p { + fill: #839496 !important; + color: #839496 !important; + background: #002b36 !important; +} + +html.theme-light .mermaid svg g.edgeLabel { + background: #eee8d5 !important; + fill: #657b83 !important; + color: #657b83 !important; +} + +html.theme-light .mermaid svg .edgeLabel .labelBkg { + fill: #eee8d5 !important; + background: #eee8d5 !important; + color: #657b83 !important; +} + +html.theme-light .mermaid svg .edgeLabel .labelBkg .edgeLabel { + fill: #657b83 !important; + color: #657b83 !important; + background: #eee8d5 !important; +} + +html.theme-light .mermaid svg .edgeLabel .labelBkg .edgeLabel p { + fill: #657b83 !important; + color: #657b83 !important; + background: #eee8d5 !important; +} + +/* Subgraph cluster border + label */ +html.theme-dark .mermaid svg .cluster rect { + stroke: #073642 !important; + fill: rgba(0, 43, 54, 0.35) !important; +} + +html.theme-light .mermaid svg .cluster rect { + stroke: #93a1a1 !important; + fill: rgba(238, 232, 213, 0.40) !important; +} + +html.theme-dark .mermaid svg .cluster .nodeLabel, +html.theme-dark .mermaid svg .cluster-label text { + fill: #859900 !important; + color: #859900 !important; +} + +html.theme-light .mermaid svg .cluster .nodeLabel, +html.theme-light .mermaid svg .cluster-label text { + fill: #586e75 !important; + color: #586e75 !important; +} +/* ---------- G-code / Zusatz-Scopes (name = G/M-Codes, attr = Parameter) ---------- */ +.hljs-name { color: #b58900; } +.hljs-attr { color: #839496; } +html.theme-light .hljs-name { color: #268bd2; } +html.theme-light .hljs-attr { color: #586e75; } \ No newline at end of file diff --git a/theme/blog_share_theme_tokyonight.css b/theme/blog_share_theme_tokyonight.css new file mode 100644 index 0000000..0a6059b --- /dev/null +++ b/theme/blog_share_theme_tokyonight.css @@ -0,0 +1,1891 @@ +/* + * Tokyo Night Share Theme (light/dark) + * Based on tokyonight.nvim (https://github.com/folke/tokyonight.nvim, Apache-2.0) + */ + +/* + * Harbor Share Theme for Richard's Blog (Trilium Public Share) + * Light: Harbor (paper #e1e2e7 / ink #3760bf, accent #2e7de9) + * Dark: Harbordark (#24283b / #c0caf5, accent #7aa2f7) + * Based on https://github.com/HANCORE-linux/omarchy-harbor-theme (MIT) + */ + +html.theme-light { + --background-primary: #e1e2e7; + --background-secondary: #cfc9c2; + --background-highlight: #c4c6dd; + --background-active: #2e7de9; + --blog-card-bg: #cfc9c2; + --scrollbar-thumb: #c4c6dd; + --scrollbar-hover: #9aa5ce; + --scrollbar-track: #cfc9c2; + --text-primary: #3760bf; + --text-heading: #3760bf; + --text-menu: #a0a6c2; + --text-link: #2e7de9; + --text-menu-active: #e1e2e7; + color-scheme: light; +} + +html.theme-dark { + --background-primary: #24283b; + --background-secondary: #1a1b26; + --background-highlight: #292e42; + --background-active: #7aa2f7; + --blog-card-bg: #1a1b26; + --scrollbar-thumb: #292e42; + --scrollbar-hover: #292e42; + --scrollbar-track: #24283b; + --text-primary: #c0caf5; + --text-heading: #c0caf5; + --text-menu: #9ece6a; + --text-link: #7aa2f7; + --text-menu-active: #24283b; + color-scheme: dark; +} + +body { + font-family: "Inter", "Montserrat", "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif; +} + +/* ---------- Header: Logo durch Laptop-Emoji ---------- */ +#header-logo img { + display: none; +} + +#header-logo::before { + content: "💻"; + font-size: 1.5em; + line-height: 1; + margin-right: 8px; + display: inline-block; + vertical-align: middle; +} + +/* ---------- Buy Me a Coffee (original, lokal) ---------- */ +@font-face { + font-family: "Cookie"; + src: url(/api/notes/__COOKIE_FONT_ID__/download) format("woff2"); + font-weight: 400; + font-display: swap; +} + +#bmc-links { + margin-top: auto; + padding: 8px 25px 4px; + background: var(--background-secondary); + display: flex; + flex-direction: column; + gap: 2px; +} + +.bmc-link { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 6px 4px 24px; + border-radius: 6px; + color: var(--text-heading); + text-decoration: none; + font-size: 0.9em; + transition: background-color 150ms ease, color 150ms ease; +} + +.bmc-link:hover { + background: var(--background-highlight); + color: var(--text-heading); + text-decoration: none; +} + +.bmc-link .tn-icon { + color: var(--text-link); +} + +/* ---------- Menu: wie Footer-Links gestalten ---------- */ +#menu a { + color: var(--text-heading); + gap: 8px; + font-size: 0.9em; + padding: 4px 6px; + border-color: transparent; + transition: background-color 150ms ease, color 150ms ease; +} + +#menu a:hover { + background: var(--background-highlight); + color: var(--text-heading); + border-color: transparent; + text-decoration: none; +} + +#menu a.active { + background: var(--background-active); + color: var(--background-secondary); + border-color: transparent; +} + +#menu .tn-icon { + color: var(--text-link); +} + +#bmc-wrap { + padding: 8px 14px 14px; + background: var(--background-secondary); + border-top: 1px solid var(--background-highlight); +} + +.bmc-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + box-sizing: border-box; + padding: 6px 12px 8px; + border-radius: 8px; + background: #fabd2f; + color: #3760bf; + border: 2px solid #3760bf; + font-family: "Cookie", "Brush Script MT", cursive; + font-size: 1.4em; + line-height: 1.1; + text-decoration: none; + transition: background-color 150ms ease, transform 150ms ease; +} + +.bmc-btn:hover { + background: #b15c00; + color: #3760bf; + text-decoration: none; + transform: translateY(-1px); +} + +.bmc-btn .bmc-emoji { + font-size: 1.15em; +} + +.bmc-copyright { + margin-top: 8px; + font-size: 0.75em; + color: var(--text-menu); + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + flex-wrap: wrap; +} + +.bmc-powered { + display: inline-flex; + align-items: center; + gap: 3px; + color: var(--text-menu); + text-decoration: none; + transition: color 150ms ease; +} + +.bmc-powered:hover { + color: var(--text-link); + text-decoration: none; +} + +.powered-logo { + width: 1em; + height: 1em; + display: inline-block; +} + +/* ---------- Reading time ---------- */ +.reading-time { + font-size: 0.8em; + color: var(--text-menu); + margin: -0.9em 0 1.25em; +} + +/* ---------- Blog pagination ---------- */ +.blog-pagination { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin: 1.5em 0 0; + padding-top: 1em; + border-top: 1px solid var(--background-highlight); +} + +.blog-pagination .blog-page-num { + font-size: 0.85em; + color: var(--text-menu); +} + +/* ---------- Share footer navigation (built-in prev/next) ausblenden ---------- */ +#content-footer .navigation { + display: none; +} + +/* ---------- Prev/Next ---------- */ +.blog-prevnext { + display: flex; + justify-content: space-between; + gap: 12px; + margin: 1.5em 0 0; + padding-top: 1em; + border-top: 1px solid var(--background-highlight); +} + +.blog-pn { + display: flex; + flex-direction: column; + gap: 2px; + max-width: 45%; + color: var(--text-heading); + text-decoration: none; + transition: color 150ms ease; +} + +.blog-pn.next { + margin-left: auto; + align-items: flex-end; + text-align: right; +} + +.blog-pn-label { + font-size: 0.72em; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--text-menu); +} + +.blog-pn:hover { + color: var(--text-link); + text-decoration: none; +} + +.blog-pn.empty { + display: none; +} + +/* ---------- Search ---------- */ +.blog-search { + margin: 0.5em 0 1em; +} + +.blog-search-input { + width: 100%; + box-sizing: border-box; + padding: 10px 14px; + border-radius: 8px; + border: 1px solid var(--background-highlight); + background: var(--background-secondary); + color: var(--text-heading); + font-size: 1em; +} + +.blog-search-input:focus { + outline: none; + border-color: var(--text-link); +} + +.blog-search-list { + list-style: none; + padding: 0; + margin: 1em 0 0; +} + +.blog-search-hit { + display: flex; + flex-direction: column; + gap: 2px; + padding: 8px 12px; + border-radius: 8px; + border: 1px solid var(--background-highlight); + background: var(--blog-card-bg); + color: var(--text-heading); + text-decoration: none; + margin-bottom: 8px; + transition: border-color 150ms ease; +} + +.blog-search-hit:hover { + border-color: var(--text-link); + text-decoration: none; +} + +.blog-search-path { + font-size: 0.8em; + color: var(--text-menu); +} + +.blog-search-none { + color: var(--text-menu); +} + +/* ---------- Header-Suche (ersetzt eingebaute) ---------- */ +.search-item { + position: relative; +} + +.blog-search-header-input { + flex: 1; + min-width: 0; + padding: 6px 10px 6px 32px; + border-radius: 6px; + border: 1px solid rgba(169, 177, 214, 0.55); + background: rgba(169, 177, 214, 0.10); + color: var(--text-heading); + font-size: 0.9em; + transition: border-color 150ms ease, box-shadow 150ms ease; +} + +html.theme-light .blog-search-header-input { + border-color: #2e7de9; + background: rgba(46, 125, 233, 0.10); +} + +.blog-search-header-input:focus { + outline: none; + border-color: #a9b1d6; + box-shadow: 0 0 0 2px rgba(169, 177, 214, 0.20); +} + +html.theme-light .blog-search-header-input:focus { + border-color: #2e7de9; + box-shadow: 0 0 0 2px rgba(46, 125, 233, 0.15); +} + +.search-item .search-icon { + color: rgba(169, 177, 214, 0.85); +} + +html.theme-light .search-item .search-icon { + color: #2e7de9; +} + +.tn-image { + width: 18px; + height: 18px; + border-radius: 4px; + flex-shrink: 0; + vertical-align: middle; +} + +.tn-image-svg { + color: var(--text-link); +} + +.title-image { + width: 34px; + height: 34px; + border-radius: 6px; + vertical-align: middle; + margin-right: 10px; +} + +.note-fallback { + margin: 1em 0; + overflow: hidden; +} + +.note-fallback-link { + font-size: 0.9em; +} + +.mermaid-fallback { + margin: 1em 0; +} + +.mermaid-render { + margin: 1em 0; + padding: 14px; + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow-x: auto; +} + +.mermaid-render svg { + max-width: 100%; + height: auto; +} + +.mermaid-source { + margin: 12px 0 0; + text-align: center; +} + +.mermaid-source summary { + cursor: pointer; + font-size: 0.85em; + color: var(--text-menu); + user-select: none; + padding: 4px 10px; + border: 1px solid var(--background-highlight); + border-radius: 6px; + display: inline-block; + background: var(--background-secondary); +} + +.mermaid-source summary:hover { + color: var(--text-heading); + border-color: var(--text-link); +} + +.mermaid-source pre { + width: min(100%, 820px); + margin: 8px auto 0; + text-align: left; + position: relative; + overflow: hidden; +} + +#content .mermaid-source .hljs-ln { + width: 100%; +} + +/* ---------- Rendered widgets: mind map + excalidraw ---------- */ +.mindmap-render, +.excalidraw-render { + margin: 1em 0; + padding: 14px; + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow-x: auto; +} + +.mindmap-svg { + display: block; + width: 100%; + height: auto; +} + +.excalidraw-svg { + display: block; + max-width: 100%; + height: auto; +} + +.mindmap-render svg text { + user-select: none; +} + +.blog-search-overlay { + display: none; + position: absolute; + top: calc(100% + 4px); + left: 0; + right: 0; + z-index: 50; + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); +} + +.blog-search-overlay.open { + display: block; +} + +.blog-search-overlay-hit { + display: flex; + flex-direction: column; + gap: 1px; + padding: 7px 10px; + color: var(--text-heading); + text-decoration: none; + font-size: 0.85em; + border-bottom: 1px solid var(--background-highlight); +} + +.blog-search-overlay-hit:last-child { + border-bottom: none; +} + +.blog-search-overlay-hit:hover { + background: var(--background-highlight); + text-decoration: none; +} + +.blog-search-overlay-hit .s { + font-size: 0.75em; + color: var(--text-menu); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.blog-search-overlay .blog-search-none { + padding: 8px 10px; + font-size: 0.85em; +} + +#main { + max-width: min(92vw, 1200px); +} + +#site-header { + padding-bottom: 10px; +} + +#title { + font-family: "JetBrains Mono", "Montserrat", monospace; + letter-spacing: -0.02em; +} + +body.is-garden #title { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +body.is-garden #title .note-state { + margin-left: auto; + flex-shrink: 0; +} + +body.is-garden #content h1#title { + background-color: rgba(158, 206, 106, 0.30) !important; + border-bottom-color: rgba(158, 206, 106, 0.60) !important; +} + +html.theme-light body.is-garden #content h1#title { + background-color: rgba(160, 166, 194, 0.15) !important; + border-bottom-color: rgba(160, 166, 194, 0.40) !important; +} + +/* ---------- Blog index (generated article list) ---------- */ +.blog-post { + padding: 1.2em 1.4em; + margin-bottom: 1.25em; + border: 1px solid var(--background-highlight); + border-radius: 10px; + background: var(--blog-card-bg); + transition: border-color 150ms ease, box-shadow 150ms ease; + cursor: pointer; +} + +.blog-post:last-child { + margin-bottom: 0; +} + +.blog-post:hover { + border-color: var(--text-link); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); +} + +#content .blog-post:first-of-type { + margin-top: 1.5em; +} + +/* ---------- Blog post thumbnails (Bild links, Teaser rechts) ---------- */ +.blog-post-inner { + display: flex; + gap: 16px; + align-items: stretch; +} + +.blog-thumb-link { + flex: 0 0 auto; + width: min(256px, 35%); + text-decoration: none; +} + +.blog-thumb { + display: block; + width: 100%; + height: 100%; + max-height: 256px; + object-fit: cover; + border-radius: 8px; + border: 1px solid var(--background-highlight); +} + +.blog-post-body { + flex: 1; + min-width: 0; +} + +.blog-post-title { + margin: 0 0 0.25em; +} + +.blog-post-title a { + color: var(--text-heading); + text-decoration: none; + transition: color 150ms ease; +} + +.blog-post-title a:hover { + color: var(--text-link); + text-decoration: none; +} + +.blog-post-meta { + display: flex; + gap: 12px; + font-size: 0.85em; + color: var(--text-menu); + margin-bottom: 0.5em; +} + +.blog-post-date { + font-variant-numeric: tabular-nums; + opacity: 0.85; +} + +.blog-post-category { + background: var(--background-highlight); + border-radius: 8px; + padding: 1px 10px; + color: var(--text-heading); + font-weight: 600; +} + +.blog-post-summary { + margin: 0 0 0.5em; + color: var(--text-primary); +} + +.blog-post-tags { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.tag { + font-size: 0.78em; + color: var(--text-link); + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + padding: 1px 8px; +} + +a.tag { + text-decoration: none; + transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; +} + +a.tag:hover { + background: var(--background-highlight); + border-color: var(--text-link); + color: var(--text-heading); + text-decoration: none; +} + +/* ---------- Article meta (date/category on individual pages) ---------- */ +.article-meta { + display: flex; + gap: 12px; + font-size: 0.9em; + color: var(--text-menu); + margin-bottom: 1em; + padding-bottom: 1em; + border-bottom: 1px solid var(--background-highlight); +} + +/* ---------- Headings (h2-h6) - Harbor header boxes ---------- */ +html.theme-dark { + --header-h2-bg: rgba(122, 162, 247, 0.30); + --header-h2-border: rgba(122, 162, 247, 0.6); + --header-h3-bg: rgba(158, 206, 106, 0.25); + --header-h3-border: rgba(158, 206, 106, 0.6); + --header-h4-bg: rgba(224, 175, 104, 0.22); + --header-h4-border: rgba(224, 175, 104, 0.55); + --header-h5-bg: rgba(169, 177, 214, 0.25); + --header-h5-border: rgba(169, 177, 214, 0.6); + --header-h6-bg: rgba(229, 137, 128, 0.25); + --header-h6-border: rgba(229, 137, 128, 0.6); + --header-h1-bg: rgba(247, 118, 142, 0.30); + --header-h1-border: rgba(247, 118, 142, 0.6); +} + +html.theme-light { + --header-h2-bg: rgba(122, 162, 247, 0.18); + --header-h2-border: rgba(122, 162, 247, 0.45); + --header-h3-bg: rgba(160, 166, 194, 0.14); + --header-h3-border: rgba(160, 166, 194, 0.38); + --header-h4-bg: rgba(177, 92, 0, 0.14); + --header-h4-border: rgba(177, 92, 0, 0.38); + --header-h5-bg: rgba(152, 84, 241, 0.12); + --header-h5-border: rgba(152, 84, 241, 0.35); + --header-h6-bg: rgba(13, 185, 215, 0.12); + --header-h6-border: rgba(13, 185, 215, 0.35); + --header-h1-bg: rgba(245, 42, 101, 0.14); + --header-h1-border: rgba(245, 42, 101, 0.40); +} + +#content h1 { + background-color: var(--header-h1-bg); + border-bottom: 2px solid var(--header-h1-border); + border-radius: 4px; + padding: 0.3em 0.4em; + font-size: 1.6em; + font-weight: 700; + margin-top: 1.5em; + margin-bottom: 1.25em; +} + +#content h2 { + background-color: var(--header-h2-bg); + border-bottom: 2px solid var(--header-h2-border); + border-radius: 4px; + padding: 0.25em 0.4em; +} + +#content h3 { + background-color: var(--header-h3-bg); + border-bottom: 2px solid var(--header-h3-border); + border-radius: 4px; + padding: 0.2em 0.35em; +} + +#content h4 { + background-color: var(--header-h4-bg); + border-bottom: 2px solid var(--header-h4-border); + border-radius: 4px; + padding: 0.2em 0.35em; +} + +#content h5 { + background-color: var(--header-h5-bg); + border-bottom: 2px solid var(--header-h5-border); + border-radius: 4px; + padding: 0.2em 0.35em; +} + +#content h6 { + background-color: var(--header-h6-bg); + border-bottom: 2px solid var(--header-h6-border); + border-radius: 4px; + padding: 0.2em 0.35em; +} + +#childLinks { + display: none; +} + +#index { + display: none; +} + +/* ---------- Code blocks - Harbordark (always, also in light mode) ---------- */ +.ck-content pre, +#content pre { + background-color: #1a1b26; + color: #c0caf5; + border: 1px solid #292e42; + border-radius: 8px; +} + +.ck-content code, +#content code { + background-color: #292e42; + color: #c0caf5; + border-color: #292e42; + border-radius: 8px; + padding: 0.1em 0.35em; +} + +html.theme-light .ck-content pre, +html.theme-light #content pre { + background-color: #e1e2e7; + color: #3760bf; + border-color: #c4c6dd; +} + +html.theme-light .ck-content code, +html.theme-light #content code { + background-color: #e1e2e7; + color: #3760bf; + border-color: #9aa5ce; +} + +/* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */ +#content figure.image { + margin: 1.25em auto; +} + +#content figure img, +#content img:not(.blog-thumb) { + border-radius: 8px; +} + +/* ---------- 3D model viewer (STL / STEP) ---------- */ +.model-viewer { + position: relative; + box-sizing: border-box; + width: calc(100vw - 24px); + margin: 1em 0; + margin-left: calc(50% - (100vw - 24px) / 2); + background: #24283b; + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow: hidden; +} + +.model-viewer.model-viewer-inline { + width: 100%; + margin-left: 0; +} + +.model-viewer-data { + position: absolute; + top: 8px; + right: 10px; + z-index: 3; + display: none; + font-size: 0.75em; + color: #9ece6a; + background: rgba(26, 27, 38, 0.85); + border: 1px solid #292e42; + border-radius: 6px; + padding: 2px 10px; + font-variant-numeric: tabular-nums; + pointer-events: none; +} + +.model-viewer-canvas { + position: relative; + width: 100%; + height: min(70vh, 900px); + min-height: 420px; +} + +.model-viewer-status { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 48px; + box-sizing: border-box; + color: #9ece6a; + font-size: 0.9em; +} + +.model-viewer-status.error { + color: #f7768e; +} + +.model-viewer-progress { + position: absolute; + left: 0; + right: 0; + bottom: 40px; + height: 6px; + width: min(60%, 480px); + margin: 0 auto; + background: #292e42; + border-radius: 3px; + overflow: hidden; +} + +.model-viewer-progress-fill { + height: 100%; + width: 0; + background: #e0af68; + border-radius: 3px; + transition: width 150ms ease; +} + +.model-viewer-progress-fill.indeterminate { + width: 40%; + animation: model-progress 1.1s ease-in-out infinite; +} + +@keyframes model-progress { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(250%); } +} + +.model-viewer-hint { + position: absolute; + top: 8px; + left: 10px; + font-size: 0.75em; + color: #9ece6a; + z-index: 2; + pointer-events: none; +} + +.model-viewer-caption { + font-size: 0.85em; + font-style: italic; + color: var(--text-menu); + text-align: center; + padding: 4px 12px; + background: var(--background-secondary); + border-top: 1px solid var(--background-highlight); +} + +.model-viewer canvas { + display: block; + width: 100%; + height: 100%; +} + +/* ---------- 3D-Viewer: theme-bewusste Overlays ---------- */ +html.theme-light .model-viewer { + background: #e1e2e7; +} +html.theme-light .model-viewer-status, +html.theme-light .model-viewer-hint, +html.theme-light .model-viewer-data { + color: #3760bf; +} +html.theme-light .model-viewer-data { + background: rgba(225, 226, 231, 0.85); + border-color: #c4c6dd; +} +html.theme-light .model-viewer-status.error { + color: #f52a65; +} +html.theme-light .model-viewer-progress { + background: #c4c6dd; +} +html.theme-light .model-viewer-progress-fill { + background: #2e7de9; +} + +/* ---------- Bildunterschriften (Harbor) ---------- */ +#content figcaption { + font-size: 0.85em; + font-style: italic; + color: var(--text-menu); + text-align: center; + margin-top: 8px; + padding: 4px 12px; + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + display: inline-block; +} + +.hljs { + background: #1a1b26; + color: #c0caf5; +} + +.hljs-comment, +.hljs-quote { + color: #565f89; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-subst { + color: #f7768e; +} + +.hljs-number, +.hljs-literal, +.hljs-variable, +.hljs-template-variable, +.hljs-tag .hljs-attr { + color: #7aa2f7; +} + +.hljs-string, +.hljs-doctag { + color: #9ece6a; +} + +.hljs-title, +.hljs-section, +.hljs-selector-id { + color: #e0af68; +} + +.hljs-type, +.hljs-class .hljs-title, +.hljs-attribute { + color: #a9b1d6; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-link, +.hljs-meta, +.hljs-deletion, +.hljs-addition { + color: #7aa2f7; +} + +.hljs-built_in, +.hljs-builtin-name, +.hljs-params { + color: #a9b1d6; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} +/* ---------- Light mode: Harbor light highlighter ---------- */ +html.theme-light .hljs, +html.theme-light pre code.hljs { + background: #e1e2e7 !important; + color: #3760bf; +} + +html.theme-light .hljs-comment, +html.theme-light .hljs-quote { + color: #9aa5ce; +} + +html.theme-light .hljs-keyword, +html.theme-light .hljs-selector-tag, +html.theme-light .hljs-subst { + color: #f52a65; +} + +html.theme-light .hljs-number, +html.theme-light .hljs-literal, +html.theme-light .hljs-variable, +html.theme-light .hljs-template-variable, +html.theme-light .hljs-tag .hljs-attr { + color: #9854f1; +} + +html.theme-light .hljs-string, +html.theme-light .hljs-doctag { + color: #a0a6c2; +} + +html.theme-light .hljs-title, +html.theme-light .hljs-section, +html.theme-light .hljs-selector-id { + color: #b15c00; +} + +html.theme-light .hljs-type, +html.theme-light .hljs-class .hljs-title, +html.theme-light .hljs-attribute { + color: #2e7de9; +} + +html.theme-light .hljs-symbol, +html.theme-light .hljs-bullet, +html.theme-light .hljs-link, +html.theme-light .hljs-meta, +html.theme-light .hljs-deletion, +html.theme-light .hljs-addition { + color: #9854f1; +} + +html.theme-light .hljs-built_in, +html.theme-light .hljs-builtin-name, +html.theme-light .hljs-params { + color: #0db9d7; +} + +html.theme-light .hljs-regexp, +html.theme-light .hljs-operator, +html.theme-light .hljs-selector-attr, +html.theme-light .hljs-selector-pseudo, +html.theme-light .hljs-selector-class, +html.theme-light .hljs-template-tag { + color: #9854f1; +} + +html.theme-light .hljs-name, +html.theme-light .hljs-tag { + color: #2e7de9; +} + +html.theme-light .hljs-meta .hljs-string { + color: #a0a6c2; +} +/* ---------- Admonitions (Trilium-style, gefüllt) ---------- */ +.admonition { + --accent-color: var(--background-highlight); + --admonition-bg: var(--background-secondary); + border: 1px solid var(--accent-color); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + background: var(--admonition-bg); + border-radius: 0.5em; + padding: 1em; + padding-inline-start: 2.5em; + margin: 1.25em 0; + position: relative; + overflow: hidden; +} + +html.theme-dark .admonition.note { --admonition-bg: rgba(46, 125, 233, 0.16); } +html.theme-dark .admonition.tip { --admonition-bg: rgba(160, 166, 194, 0.16); } +html.theme-dark .admonition.important { --admonition-bg: rgba(152, 84, 241, 0.18); } +html.theme-dark .admonition.caution { --admonition-bg: rgba(245, 42, 101, 0.16); } +html.theme-dark .admonition.warning { --admonition-bg: rgba(177, 92, 0, 0.16); } +html.theme-dark .admonition { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } + +html.theme-light .admonition.note { --admonition-bg: rgba(46, 125, 233, 0.18); } +html.theme-light .admonition.tip { --admonition-bg: rgba(160, 166, 194, 0.16); } +html.theme-light .admonition.important { --admonition-bg: rgba(152, 84, 241, 0.16); } +html.theme-light .admonition.caution { --admonition-bg: rgba(245, 42, 101, 0.16); } +html.theme-light .admonition.warning { --admonition-bg: rgba(177, 92, 0, 0.20); } + +.admonition p:last-child { + margin-bottom: 0; +} + +.admonition p, +.admonition h2 { + margin-top: 0; +} + +.admonition.note { --accent-color: #2e7de9; } +.admonition.tip { --accent-color: #a0a6c2; } +.admonition.important { --accent-color: #9854f1; } +.admonition.caution { --accent-color: #f52a65; } +.admonition.warning { --accent-color: #b15c00; } + +.admonition::before { + color: var(--accent-color); + font-family: boxicons !important; + position: absolute; + top: 1em; + inset-inline-start: 1em; +} + +.admonition.note::before { content: "\eb21"; } +.admonition.tip::before { content: "\ea0d"; } +.admonition.important::before { content: "\ea7c"; } +.admonition.caution::before { content: "\eac7"; } +.admonition.warning::before { content: "\eac5"; } +/* ---------- Tables (Harbor, theme-aware) ---------- */ +html.theme-dark { + --table-header-bg: rgba(122, 162, 247, 0.20); + --table-header-text: #c0caf5; + --table-header-border: rgba(122, 162, 247, 0.45); + --table-stripe: rgba(255, 255, 255, 0.04); + --table-hover: rgba(122, 162, 247, 0.12); + --table-rowlabel-bg: rgba(255, 255, 255, 0.05); + --table-rowlabel-text: #c0caf5; +} + +html.theme-light { + --table-header-bg: rgba(122, 162, 247, 0.16); + --table-header-text: #3760bf; + --table-header-border: rgba(122, 162, 247, 0.40); + --table-stripe: rgba(0, 0, 0, 0.04); + --table-hover: rgba(122, 162, 247, 0.12); + --table-rowlabel-bg: rgba(0, 0, 0, 0.05); + --table-rowlabel-text: #3760bf; +} + +.ck-content table, +#content table { + border-collapse: separate; + border-spacing: 0; + border: 1px solid var(--background-highlight); + border-radius: 8px; + overflow: hidden; + margin: 1em 0; +} + +.ck-content table th, +.ck-content table td, +#content table th, +#content table td { + border: none; + border-bottom: 1px solid var(--background-highlight); + border-right: 1px solid var(--background-highlight); + padding: 8px 12px; + text-align: left; + background-color: transparent !important; +} + +.ck-content table th:last-child, +.ck-content table td:last-child, +#content table th:last-child, +#content table td:last-child { + border-right: none; +} + +.ck-content table tr:last-child td, +#content table tr:last-child td { + border-bottom: none; +} + +.ck-content table thead th, +#content table thead th { + background-color: var(--table-header-bg) !important; + color: var(--table-header-text); + font-weight: 700; + border-bottom: 2px solid var(--table-header-border); +} + +.ck-content table tbody td:first-child, +#content table tbody td:first-child { + background-color: var(--table-rowlabel-bg) !important; + color: var(--table-rowlabel-text); + font-weight: 600; + white-space: nowrap; +} + +.ck-content table tbody tr:nth-child(even) td:not(:first-child), +#content table tbody tr:nth-child(even) td:not(:first-child) { + background-color: var(--table-stripe) !important; +} + +.ck-content table tbody tr:hover td, +#content table tbody tr:hover td { + background-color: rgba(122, 162, 247, 0.10) !important; +} + +.ck-content table .col-hover, +#content table .col-hover { + background-color: rgba(122, 162, 247, 0.10) !important; +} + +.ck-content table tbody tr:hover td.col-hover, +.ck-content table thead th.col-hover, +#content table tbody tr:hover td.col-hover, +#content table thead th.col-hover { + background-color: rgba(122, 162, 247, 0.18) !important; +} +/* ---------- Category subcategories ---------- */ +.blog-subcategories { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 0 0 1.25em; +} + +.blog-subcategory { + display: inline-flex; + align-items: center; + gap: 6px; + background: var(--background-secondary); + border: 1px solid var(--background-highlight); + border-radius: 8px; + padding: 4px 12px; + color: var(--text-heading); + text-decoration: none; + font-weight: 600; + transition: background-color 150ms ease, border-color 150ms ease; +} + +.blog-subcategory i { + color: var(--text-link); +} + +.blog-subcategory:hover { + background: var(--background-highlight); + border-color: var(--text-link); + color: var(--text-heading); + text-decoration: none; +} +/* ---------- Digital Garden note table ---------- */ +.blog-garden-table { + width: 100%; +} + +.blog-garden-table tbody td:first-child { + background: transparent !important; + font-weight: normal; +} + +.note-type { + display: inline-block; + font-size: 0.8em; + padding: 2px 10px; + border-radius: 8px; + background: var(--background-highlight); + color: var(--text-heading); + font-weight: 600; + text-transform: capitalize; + white-space: nowrap; +} +/* ---------- Digital Garden rows: clickable + sage hover ---------- */ +.blog-garden-table tbody tr { + cursor: pointer; +} + +#content .blog-garden-table tbody tr:hover td, +#content .blog-garden-table .col-hover { + background-color: rgba(158, 206, 106, 0.15) !important; +} + +#content .blog-garden-table tbody tr:hover td.col-hover { + background-color: rgba(158, 206, 106, 0.25) !important; +} +.note-state { + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 0.8em; + padding: 2px 10px; + border-radius: 8px; + background: rgba(158, 206, 106, 0.20); + color: var(--text-heading); + font-weight: 600; + white-space: nowrap; +} + +.note-state i { + color: #9ece6a; +} + +.note-state.state-draft { + background: rgba(84, 92, 126, 0.22); +} + +.note-state.state-draft i { + color: #9aa5ce; +} + +.note-state.state-review { + background: rgba(169, 177, 214, 0.25); +} + +.note-state.state-review i { + color: #a9b1d6; +} + +.note-state.state-unknown { + background: rgba(247, 118, 142, 0.18); +} + +.note-state.state-unknown i { + color: #f7768e; +} + +/* ---------- Peppige Garden-Badges (dark) ---------- */ +html.theme-dark .note-state { + background: rgba(158, 206, 106, 0.40); + border: 1px solid #9ece6a; + color: #24283b; +} +html.theme-dark .note-state i { + color: #24283b; +} +html.theme-dark .note-state.state-draft { + background: rgba(247, 118, 142, 0.85); + border-color: #f7768e; + color: #24283b; +} +html.theme-dark .note-state.state-draft i { + color: #24283b; +} +html.theme-dark .note-state.state-review { + background: rgba(46, 125, 233, 0.85); + border-color: #7aa2f7; + color: #24283b; +} +html.theme-dark .note-state.state-review i { + color: #24283b; +} +html.theme-dark .note-state.state-unknown { + background: rgba(224, 175, 104, 0.85); + border-color: #e0af68; + color: #24283b; +} +html.theme-dark .note-state.state-unknown i { + color: #24283b; +} + +/* ---------- Peppige Garden-Badges (light) ---------- */ +html.theme-light .note-state { + background: rgba(160, 166, 194, 0.85); + border: 1px solid #a0a6c2; + color: #e1e2e7; +} +html.theme-light .note-state i { + color: #e1e2e7; +} +html.theme-light .note-state.state-draft { + background: rgba(177, 92, 0, 0.95); + border-color: #b15c00; + color: #3760bf; +} +html.theme-light .note-state.state-draft i { + color: #3760bf; +} +html.theme-light .note-state.state-review { + background: rgba(122, 162, 247, 0.95); + border-color: #2e7de9; + color: #e1e2e7; +} +html.theme-light .note-state.state-review i { + color: #e1e2e7; +} +html.theme-light .note-state.state-unknown { + background: rgba(245, 42, 101, 0.95); + border-color: #f52a65; + color: #e1e2e7; +} +html.theme-light .note-state.state-unknown i { + color: #e1e2e7; +} +/* ---------- Code notes: always Harbordark like code boxes ---------- */ +#content.type-code pre { + background-color: #1a1b26 !important; + color: #c0caf5; + border: 1px solid #292e42; + border-radius: 8px; + padding: 1em; + margin: 1em 0; +} + +#content.type-code code { + background-color: transparent !important; + color: #c0caf5; + border: 0; +} + +html.theme-light #content.type-code pre { + background-color: #e1e2e7 !important; + color: #3760bf; + border-color: #c4c6dd; +} + +html.theme-light #content.type-code code { + color: #3760bf; +} +/* ---------- Code: line numbers + copy button ---------- */ +pre.code-processed { + position: relative; + display: flex; + align-items: flex-start; + line-height: 1.6; +} + +pre.code-processed .code-wrap { + flex: 1; + min-width: 0; + overflow-x: auto; + border-radius: 8px; +} + +pre.code-processed .code-wrap code { + display: block; + line-height: inherit; + padding: 0; + margin: 0; +} + +pre.code-processed .code-lines { + flex-shrink: 0; + user-select: none; + text-align: right; + padding: 0 12px 0 0; + margin: 0 12px 0 0; + border-right: 1px solid var(--background-highlight); + color: var(--text-menu); + white-space: pre; + font-family: "JetBrains Mono", Consolas, monospace; + font-size: 1em; + line-height: inherit; +} + +pre.code-processed .code-copy-btn, +.mermaid-source pre .code-copy-btn { + position: absolute; + top: 6px; + right: 6px; + z-index: 2; + font-size: 0.75em; + padding: 2px 10px; + border-radius: 6px; + border: 1px solid var(--background-highlight); + background: var(--background-secondary); + color: var(--text-heading); + cursor: pointer; + opacity: 0.6; + transition: opacity 150ms ease; +} + +pre.code-processed:hover .code-copy-btn, +.mermaid-source pre:hover .code-copy-btn { + opacity: 1; +} + +pre.code-processed .code-copy-btn:hover, +.mermaid-source pre .code-copy-btn:hover { + border-color: var(--text-link); + opacity: 1; +} +/* ---------- highlight.js line numbers ---------- */ +#content .hljs-ln { + border-collapse: collapse; + border: none !important; + box-shadow: none; + border-radius: 8px; + margin: 0; + width: auto; + line-height: 1.4; +} + +#content .hljs-ln td, +#content .hljs-ln th { + border: none !important; + background-color: transparent !important; + padding: 0; +} + +#content .hljs-ln tbody td:first-child, +#content .hljs-ln thead th:first-child { + background-color: transparent !important; +} + +#content .hljs-ln tbody tr:nth-child(even) td { + background-color: transparent !important; +} + +#content .hljs-ln .col-hover { + background-color: transparent !important; +} + +#content .hljs-ln tbody tr:hover td, +#content .hljs-ln tbody tr:hover td.col-hover { + background-color: rgba(122, 162, 247, 0.08) !important; +} + +html.theme-light #content .hljs-ln tbody tr:hover td, +html.theme-light #content .hljs-ln tbody tr:hover td.col-hover { + background-color: rgba(122, 162, 247, 0.08) !important; +} + +.hljs-ln-numbers { + user-select: none; + text-align: right; + padding-right: 12px !important; + padding-left: 4px; + border-right: 1px solid var(--background-highlight) !important; + color: var(--text-menu); + white-space: nowrap; + vertical-align: top; + font-family: "JetBrains Mono", Consolas, monospace; +} + +.hljs-ln-code { + padding-left: 12px !important; + white-space: pre; + vertical-align: top; +} +/* ---------- Scrollbars (Harbor) ---------- */ +::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +::-webkit-scrollbar-track { + background: var(--scrollbar-track); +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: 6px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-hover); +} + +* { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); +} + +/* ---------- Code boxes: scrollbars ---------- */ +pre, +pre.code-processed .code-wrap, +.hljs-ln-code { + scrollbar-color: #292e42 #24283b; +} + +pre::-webkit-scrollbar-thumb, +pre.code-processed .code-wrap::-webkit-scrollbar-thumb, +.hljs-ln-code::-webkit-scrollbar-thumb { + background: #292e42; +} + +pre::-webkit-scrollbar-thumb:hover, +pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover, +.hljs-ln-code::-webkit-scrollbar-thumb:hover { + background: #292e42; +} + +pre::-webkit-scrollbar-track, +pre.code-processed .code-wrap::-webkit-scrollbar-track, +.hljs-ln-code::-webkit-scrollbar-track { + background: #24283b; +} + +html.theme-light pre, +html.theme-light pre.code-processed .code-wrap, +html.theme-light .hljs-ln-code { + scrollbar-color: #9aa5ce #cfc9c2; +} + +html.theme-light pre::-webkit-scrollbar-thumb, +html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb, +html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb { + background: #9aa5ce; +} + +html.theme-light pre::-webkit-scrollbar-thumb:hover, +html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover, +html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb:hover { + background: #c4c6dd; +} + +html.theme-light pre::-webkit-scrollbar-track, +html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-track, +html.theme-light .hljs-ln-code::-webkit-scrollbar-track { + background: #cfc9c2; +} + +/* ---------- Link icons / markers: internal links without arrow, external links keep a marker ---------- */ +#content a::after, +#content a::before, +#content-footer .navigation a::after, +#content-footer .navigation a::before, +a.next::after, +a.previous::before, +.bmc-btn::after, +.bmc-btn::before, +.bmc-powered::after, +.bmc-powered::before { + content: none !important; +} + +#content a[href^="http://"]:not([href^="https://YOUR-INSTANCE.example.com"])::after, +#content a[href^="https://"]:not([href^="https://YOUR-INSTANCE.example.com"])::after { + content: " ↗" !important; + display: inline-block; + margin-left: 3px; + font-size: 0.85em; + color: var(--text-link); +} + +/* inline text links (in paragraphs/lists): colour only */ +#content p a:not([class]), +#content li a:not([class]) { + color: var(--text-link); + text-decoration: none; + background: transparent; + border: 0; + padding: 0; + border-radius: 0; +} + +#content p a:not([class]):hover, +#content li a:not([class]):hover { + color: var(--text-heading); + background: transparent; +} + +/* action links as buttons (subtle tint, noticeable on hover) */ +.blog-pn { + padding: 6px 14px; + border: 1px solid rgba(122, 162, 247, 0.30); + border-radius: 8px; + background: rgba(122, 162, 247, 0.08); + transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; +} + +html.theme-light .blog-pn { + border-color: rgba(46, 125, 233, 0.30); + background: rgba(46, 125, 233, 0.08); +} + +.blog-pn:hover { + background: rgba(122, 162, 247, 0.18); + border-color: #7aa2f7; +} + +html.theme-light .blog-pn:hover { + background: rgba(46, 125, 233, 0.15); + border-color: #2e7de9; +} + +/* ---------- Mermaid diagrams - Harbor, theme-following ---------- */ +/* + * The blog renders inline Mermaid diagrams with the default theme, so the + * generated SVG carries light-blue node fills that clash with Harbor. + * Override the SVG element colours here; the selectors hang off + * html.theme-dark / html.theme-light, so the diagrams follow the theme + * toggle automatically without re-rendering. + */ + +.mermaid { + margin: 1.25em auto; + overflow-x: auto; + background: transparent; +} + +.mermaid svg { + max-width: 100%; + height: auto; +} + +/* Text in node labels and titles */ +html.theme-dark .mermaid svg text, +html.theme-dark .mermaid svg tspan, +html.theme-dark .mermaid svg .nodeLabel, +html.theme-dark .mermaid svg .edgeLabel p { + fill: #c0caf5 !important; + color: #c0caf5 !important; +} + +html.theme-light .mermaid svg text, +html.theme-light .mermaid svg tspan, +html.theme-light .mermaid svg .nodeLabel, +html.theme-light .mermaid svg .edgeLabel p { + fill: #3760bf !important; + color: #3760bf !important; +} + +/* Graph/node title */ +html.theme-dark .mermaid svg .titleText text, +html.theme-dark .mermaid svg .node .label .nodeLabel { + fill: #c0caf5 !important; + color: #c0caf5 !important; +} + +html.theme-light .mermaid svg .titleText text, +html.theme-light .mermaid svg .node .label .nodeLabel { + fill: #3760bf !important; + color: #3760bf !important; +} + +/* Node shapes (rectangles, rounded boxes, ellipses, diamonds) */ +html.theme-dark .mermaid svg .node rect, +html.theme-dark .mermaid svg .node polygon, +html.theme-dark .mermaid svg .node circle, +html.theme-dark .mermaid svg .node ellipse, +html.theme-dark .mermaid svg .node path, +html.theme-dark .mermaid svg .cluster rect { + fill: #1a1b26 !important; + stroke: #a9b1d6 !important; +} + +html.theme-light .mermaid svg .node rect, +html.theme-light .mermaid svg .node polygon, +html.theme-light .mermaid svg .node circle, +html.theme-light .mermaid svg .node ellipse, +html.theme-light .mermaid svg .node path, +html.theme-light .mermaid svg .cluster rect { + fill: #cfc9c2 !important; + stroke: #2e7de9 !important; +} + +/* Rounded corners on rectangular node boxes and subgraph clusters (8 px, like the blog cards) */ +html.theme-dark .mermaid svg .node rect, +html.theme-light .mermaid svg .node rect, +html.theme-dark .mermaid svg .cluster rect, +html.theme-light .mermaid svg .cluster rect { + rx: 8px !important; + ry: 8px !important; +} + +/* Edge lines: stroke only (a filled edge path would look like a polygon) */ +html.theme-dark .mermaid svg .edgePaths path { + fill: none !important; + stroke: #9ece6a !important; +} + +html.theme-light .mermaid svg .edgePaths path { + fill: none !important; + stroke: #9aa5ce !important; +} + +/* Arrowheads (markers): filled triangles */ +html.theme-dark .mermaid svg marker.flowchart-v2, +html.theme-dark .mermaid svg .arrowMarkerPath { + fill: #9ece6a !important; + stroke: #9ece6a !important; +} + +html.theme-light .mermaid svg marker.flowchart-v2, +html.theme-light .mermaid svg .arrowMarkerPath { + fill: #9aa5ce !important; + stroke: #9aa5ce !important; +} + +/* Edge labels: HTML text inside a foreignObject (div.labelBkg > span.edgeLabel); + the label panel background lives on the g.edgeLabel element itself */ +html.theme-dark .mermaid svg g.edgeLabel { + background: #24283b !important; + fill: #c0caf5 !important; + color: #c0caf5 !important; +} + +html.theme-dark .mermaid svg .edgeLabel .labelBkg { + fill: #24283b !important; + background: #24283b !important; + color: #c0caf5 !important; +} + +html.theme-dark .mermaid svg .edgeLabel .labelBkg .edgeLabel { + fill: #c0caf5 !important; + color: #c0caf5 !important; + background: #24283b !important; +} + +html.theme-dark .mermaid svg .edgeLabel .labelBkg .edgeLabel p { + fill: #c0caf5 !important; + color: #c0caf5 !important; + background: #24283b !important; +} + +html.theme-light .mermaid svg g.edgeLabel { + background: #cfc9c2 !important; + fill: #3760bf !important; + color: #3760bf !important; +} + +html.theme-light .mermaid svg .edgeLabel .labelBkg { + fill: #cfc9c2 !important; + background: #cfc9c2 !important; + color: #3760bf !important; +} + +html.theme-light .mermaid svg .edgeLabel .labelBkg .edgeLabel { + fill: #3760bf !important; + color: #3760bf !important; + background: #cfc9c2 !important; +} + +html.theme-light .mermaid svg .edgeLabel .labelBkg .edgeLabel p { + fill: #3760bf !important; + color: #3760bf !important; + background: #cfc9c2 !important; +} + +/* Subgraph cluster border + label */ +html.theme-dark .mermaid svg .cluster rect { + stroke: #292e42 !important; + fill: rgba(26, 27, 38, 0.35) !important; +} + +html.theme-light .mermaid svg .cluster rect { + stroke: #c4c6dd !important; + fill: rgba(207, 201, 194, 0.40) !important; +} + +html.theme-dark .mermaid svg .cluster .nodeLabel, +html.theme-dark .mermaid svg .cluster-label text { + fill: #9ece6a !important; + color: #9ece6a !important; +} + +html.theme-light .mermaid svg .cluster .nodeLabel, +html.theme-light .mermaid svg .cluster-label text { + fill: #a0a6c2 !important; + color: #a0a6c2 !important; +} +/* ---------- G-code / Zusatz-Scopes (name = G/M-Codes, attr = Parameter) ---------- */ +.hljs-name { color: #e0af68; } +.hljs-attr { color: #a9b1d6; } +html.theme-light .hljs-name { color: #2e7de9; } +html.theme-light .hljs-attr { color: #a0a6c2; } \ No newline at end of file