From ad32c446c55afd714232a2df956b35df98612c55 Mon Sep 17 00:00:00 2001 From: Vader_HODL Date: Fri, 8 May 2026 13:23:48 -0500 Subject: [PATCH] style update main style updates --- CLAUDE.md | 63 +++ docs/.vuepress/config.js | 13 +- docs/.vuepress/enhanceApp.js | 61 +++ docs/.vuepress/public/css/mynode.css | 48 +- docs/.vuepress/styles/index.styl | 779 +++++++++++++++++++++++++++ docs/.vuepress/styles/palette.styl | 14 + 6 files changed, 958 insertions(+), 20 deletions(-) create mode 100644 CLAUDE.md create mode 100644 docs/.vuepress/enhanceApp.js create mode 100644 docs/.vuepress/styles/index.styl create mode 100644 docs/.vuepress/styles/palette.styl diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..da2f9b9 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,63 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +This is the documentation site for [MyNode](https://mynodebtc.com/), a Bitcoin and Lightning Network node software. Built with **VuePress v1.5.3**, deployed to GitHub Pages at https://mynodebtc.github.io/. + +## Development Commands + +```bash +# Install dependencies +yarn install + +# Start local dev server (http://localhost:8080) +yarn docs:dev + +# Production build (output: docs/.vuepress/dist/) +yarn docs:build +``` + +> VuePress requires the `NODE_OPTIONS=--openssl-legacy-provider` flag on newer Node.js versions. The GitHub Actions workflow sets this automatically; set it manually if builds fail locally. + +## Repository Structure + +``` +docs/ +├── .vuepress/ +│ ├── config.js # Sidebar nav, plugins, theme config +│ └── public/ # Static assets: images at public/images// +├── README.md # Homepage (hero + features frontmatter) +├── intro/ # Getting started guides +├── device/ # Hardware setup & management +├── bitcoin/ # Bitcoin node configuration +├── lightning/ # Lightning Network (RTL, ThunderHub, wallets) +├── electrum/ # Electrum wallet integration +├── advanced/ # SSH, terminal, custom configs, VMs +├── troubleshooting/ # Error resolution guides +└── [other topic dirs] # btcpay-server, tor, vpn, multisig, etc. +``` + +## Content Patterns + +- All documentation lives in `docs//.md` as plain Markdown +- Images: store in `docs/.vuepress/public/images//`, reference as `/images//image.png` +- Adding a new page requires registering it in the sidebar in `docs/.vuepress/config.js` +- The sidebar uses collapsible groups; match the existing structure when adding entries + +## Design + +The docs site is a visual extension of the main marketing site at `D:\camilo\Documents\GitHub\mynode_web`. + +**Hard rule: never modify guide content** (any `.md` file under `docs/` except `docs/README.md`). All changes must be limited to: +- `docs/.vuepress/config.js` — theme/plugin config +- `docs/.vuepress/public/css/mynode.css` — all visual styling +- `docs/.vuepress/public/` — static assets (images, fonts, icons) +- `docs/README.md` — homepage layout only + +The design system lives in the main site repo. Before making any styling decision, check `D:\camilo\Documents\GitHub\mynode_web` for the canonical tokens, components, and patterns. + +## Deployment + +GitHub Actions automatically builds and deploys on every push to `master`. The built site is pushed to the `mynodebtc/mynodebtc.github.io` repository. Manual deployment is available via `deploy.sh` (force-pushes to the pages repo). diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 9329479..5f95f7a 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -3,17 +3,22 @@ module.exports = { description: "Helpful guides and documentation for using MyNode and getting the most out of all it has to offer!", base: "/", head: [ - ['meta', { name: 'theme-color', content: '#3eaf7c' }], + // Must be first — sets data-theme before any CSS renders to prevent flash. + ['script', {}, `(function(){var t=localStorage.getItem('mn-theme');if(t==='light')document.documentElement.setAttribute('data-theme','light');})()`], + ['meta', { name: 'theme-color', content: '#F08E20' }], ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }], ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }], - ['link', { rel : 'icon', href: '/favicon.ico' }], + ['link', { rel: 'icon', href: '/favicon.ico' }], + ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }], + ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }], + ['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap' }], ['link', { rel : 'stylesheet', href: '/css/mynode.css' }], ['script',{async: true, src: 'https://www.googletagmanager.com/gtag/js?id=G-871EBBS9WR'},], ['script',{},["window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-871EBBS9WR');",],], ], themeConfig: { repo: 'mynodebtc/mynode_docs', - repoLabel: 'Contribute!', + repoLabel: 'Contribute', editLinks: true, editLinkText: 'Help us improve this page!', docsDir: 'docs', @@ -21,7 +26,7 @@ module.exports = { sidebarDepth: 0, nav: [ { text: "Back to MyNode", link: "https://www.mynodebtc.com/"}, - { text: "Order Now!", link: "https://www.mynodebtc.com/order_now"} + { text: "Order Now", link: "https://www.mynodebtc.com/order_now"} ], logo: "/images/logo.png", sidebar: [ diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js new file mode 100644 index 0000000..440f390 --- /dev/null +++ b/docs/.vuepress/enhanceApp.js @@ -0,0 +1,61 @@ +export default ({ Vue, router }) => { + if (typeof window === 'undefined') return + + // Apply saved theme before first paint + const saved = localStorage.getItem('mn-theme') + if (saved === 'light') { + document.documentElement.setAttribute('data-theme', 'light') + } + + // Fire on every component mount — ensureToggle is idempotent so it only + // actually does work the first time the navbar is in the DOM. + Vue.mixin({ + mounted () { + ensureToggle() + } + }) + + // Also re-check after each SPA navigation in case the button got removed. + router.afterEach(() => { + Vue.nextTick(ensureToggle) + }) +} + +function ensureToggle () { + if (document.querySelector('.mn-theme-toggle')) return + + const links = document.querySelector('.navbar .links') + if (!links) return + + const btn = document.createElement('button') + btn.className = 'mn-theme-toggle' + btn.setAttribute('aria-label', 'Toggle color theme') + syncIcon(btn) + + btn.addEventListener('click', () => { + const isLight = document.documentElement.getAttribute('data-theme') === 'light' + if (isLight) { + document.documentElement.removeAttribute('data-theme') + localStorage.setItem('mn-theme', 'dark') + } else { + document.documentElement.setAttribute('data-theme', 'light') + localStorage.setItem('mn-theme', 'light') + } + syncIcon(btn) + }) + + links.appendChild(btn) +} + +function syncIcon (btn) { + const isLight = document.documentElement.getAttribute('data-theme') === 'light' + btn.innerHTML = isLight ? moonSvg() : sunSvg() +} + +function sunSvg () { + return `` +} + +function moonSvg () { + return `` +} diff --git a/docs/.vuepress/public/css/mynode.css b/docs/.vuepress/public/css/mynode.css index 2c8f2a9..95ce8b5 100644 --- a/docs/.vuepress/public/css/mynode.css +++ b/docs/.vuepress/public/css/mynode.css @@ -1,21 +1,37 @@ -.app_screenshot { - border-color: #000000; - border-radius: 20px; - border-style: solid; - border-width: 3px; - width: 50%; - display: block; - margin-left: auto; - margin-right: auto; - margin-top: 15px; - margin-bottom: 25px; +// Utility classes referenced directly in guide content. +// Theme overrides live in docs/.vuepress/styles/index.styl + +.app_screenshot, +.app-screenshot { + border: 1px solid rgba(255, 255, 255, 0.10); + border-radius: 16px; + width: 60%; + max-width: 100%; + display: block; + margin: 20px auto 30px; + box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45); } + .danger { - background: #ff0e0e64; - border-radius: 10px; - padding: 0.5em 1em; + background: rgba(248, 113, 113, 0.09); + border-left: 4px solid #f87171; + border-radius: 10px; + padding: 0.5em 1em; + color: rgba(255, 255, 255, 0.55); } .danger h2 { - border-bottom: None; -} \ No newline at end of file + border-bottom: none; + color: #f87171; +} + +@media (max-width: 719px) { + .app_screenshot, + .app-screenshot { + width: 88%; + } + + .theme-default-content { + padding: 1.75rem 1.25rem 4rem !important; + } +} diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl new file mode 100644 index 0000000..86a8a32 --- /dev/null +++ b/docs/.vuepress/styles/index.styl @@ -0,0 +1,779 @@ +// index.styl — injected AFTER the default theme CSS by webpack. +// Uses CSS custom properties so both dark (default) and light themes +// are driven by a single variable swap on html[data-theme="light"]. + +// ─── Design tokens ──────────────────────────────────────────────────────── + +:root + --mn-bg #15171a + --mn-bg-alt #1c1e22 + --mn-navbar-bg rgba(21,23,26,0.85) + --mn-sidebar-bg #15171a + --mn-text-hi #e4e4e7 + --mn-text rgba(255,255,255,0.55) + --mn-text-mid rgba(255,255,255,0.38) + --mn-text-muted rgba(255,255,255,0.30) + --mn-border rgba(255,255,255,0.08) + --mn-border-hover rgba(255,255,255,0.20) + --mn-card-bg rgba(255,255,255,0.03) + --mn-orange #F08E20 + --mn-orange-hover #F4BB32 + --mn-link #F08E20 + --mn-link-hover #F4BB32 + --mn-code-bg rgba(255,255,255,0.07) + --mn-code-clr #F08E20 + --mn-pre-bg rgba(255,255,255,0.04) + --mn-pre-border rgba(255,255,255,0.08) + --mn-pre-text rgba(255,255,255,0.82) + --mn-th-bg rgba(255,255,255,0.05) + --mn-tr-alt rgba(255,255,255,0.025) + --mn-search-bg rgba(255,255,255,0.07) + --mn-search-border rgba(255,255,255,0.12) + --mn-search-text #e4e4e7 + --mn-search-drop #1c1e22 + --mn-scrim #15171a + --mn-toggle-clr rgba(255,255,255,0.60) + --mn-toggle-border rgba(255,255,255,0.14) + --mn-toggle-hover rgba(255,255,255,0.07) + +html[data-theme="light"] + --mn-bg #f5f5f7 + --mn-bg-alt #ffffff + --mn-navbar-bg rgba(245,245,247,0.88) + --mn-sidebar-bg #f5f5f7 + --mn-text-hi #1d1d1f + --mn-text rgba(0,0,0,0.65) + --mn-text-mid rgba(0,0,0,0.45) + --mn-text-muted rgba(0,0,0,0.35) + --mn-border rgba(0,0,0,0.08) + --mn-border-hover rgba(0,0,0,0.20) + --mn-card-bg rgba(0,0,0,0.03) + --mn-link #d97706 + --mn-link-hover #b45309 + --mn-code-bg rgba(0,0,0,0.06) + --mn-code-clr #c2410c + --mn-pre-bg #f0f0f2 + --mn-pre-border rgba(0,0,0,0.09) + --mn-pre-text rgba(0,0,0,0.80) + --mn-th-bg rgba(0,0,0,0.04) + --mn-tr-alt rgba(0,0,0,0.02) + --mn-search-bg rgba(0,0,0,0.06) + --mn-search-border rgba(0,0,0,0.14) + --mn-search-text #1d1d1f + --mn-search-drop #ffffff + --mn-scrim #f5f5f7 + --mn-toggle-clr rgba(0,0,0,0.55) + --mn-toggle-border rgba(0,0,0,0.14) + --mn-toggle-hover rgba(0,0,0,0.06) + +// ─── Base ───────────────────────────────────────────────────────────────── + +html, +body, +#app, +.theme-container + background var(--mn-bg) !important + font-family 'Inter', system-ui, -apple-system, sans-serif !important + color var(--mn-text) !important + -webkit-font-smoothing antialiased + -moz-osx-font-smoothing grayscale + +// ─── Navbar ─────────────────────────────────────────────────────────────── + +.navbar + position fixed !important + top 0 + left 0 + right 0 + z-index 1030 !important + height 68px !important + line-height 1 !important + display flex !important + flex-direction row !important + align-items center !important + background var(--mn-navbar-bg) !important + backdrop-filter blur(20px) !important + -webkit-backdrop-filter blur(20px) !important + border-bottom 1px solid var(--mn-border) !important + box-shadow none !important + padding 0 2rem !important + +// Home link — left anchor +.navbar .home-link + display inline-flex !important + align-items center !important + flex-shrink 0 !important + height 36px !important + line-height 1 !important + padding 0 !important + margin 0 !important + +.navbar .logo + height 28px !important + width auto !important + display block !important + margin-right 0.55rem !important + +.site-name + color var(--mn-text-hi) !important + font-weight 700 !important + font-size 1rem !important + letter-spacing -0.01em !important + line-height 1 !important + white-space nowrap !important + +// .links — fills remaining width, right-aligned +.navbar .links + flex 1 !important + display flex !important + flex-direction row !important + align-items center !important + justify-content flex-end !important + gap 0.45rem !important + padding-left 1.5rem !important + height 36px !important + background transparent !important + background-color transparent !important + +// VuePress also renders a inside for the mobile menu. +// Hide it on desktop so it doesn't duplicate the navbar. +.sidebar .nav-links + display none !important + +@media (max-width 719px) + .sidebar .nav-links + display block !important + +// Scope everything below to .navbar so sidebar NavLinks is not affected. + +.navbar .nav-links + display inline-flex !important + align-items center !important + gap 0.45rem !important + height 36px !important + +.navbar .nav-item + display inline-flex !important + align-items center !important + height 36px !important + +// Kill outbound link icons in the navbar only +.navbar .nav-links .icon.outbound, +.repo-link .icon.outbound + display none !important + +// Base nav link +.navbar .nav-links a + display inline-flex !important + align-items center !important + height 34px !important + font-size 0.875rem !important + font-weight 500 !important + color var(--mn-text) !important + border-bottom none !important + padding 0 1rem !important + border-radius 9999px !important + transition color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important + white-space nowrap !important + line-height 1 !important + +.navbar .nav-links a:hover, +.navbar .nav-links a.router-link-active + color var(--mn-text-hi) !important + background var(--mn-toggle-hover) !important + text-decoration none !important + +// "Back to MyNode" — plain text nav link (no pill, no border) +.navbar .nav-links .nav-item:first-of-type > a + background transparent !important + color var(--mn-text) !important + border none !important + font-weight 500 !important + +.navbar .nav-links .nav-item:first-of-type > a:hover + background var(--mn-toggle-hover) !important + color var(--mn-text-hi) !important + text-decoration none !important + +// "Order Now" — primary orange CTA pill +.navbar .nav-links .nav-item:last-of-type > a + display inline-flex !important + align-items center !important + height 34px !important + background #F08E20 !important + color #000 !important + font-weight 700 !important + border 1px solid transparent !important + padding 0 1.1rem !important + box-shadow 0 0 20px rgba(240,142,32,0.25) !important + transition background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important + +.navbar .nav-links .nav-item:last-of-type > a:hover + background #F4BB32 !important + color #000 !important + box-shadow 0 0 28px rgba(240,142,32,0.40) !important + transform scale(1.04) !important + text-decoration none !important + +// "Contribute" repo link — plain text, visible but not prominent +.repo-link + display inline-flex !important + align-items center !important + height 34px !important + color var(--mn-text-hi) !important + font-size 0.875rem !important + font-weight 500 !important + padding 0 1rem !important + border-radius 9999px !important + border none !important + transition color 0.2s ease, background 0.2s ease !important + white-space nowrap !important + line-height 1 !important + +.repo-link:hover + color var(--mn-text-hi) !important + background var(--mn-toggle-hover) !important + text-decoration none !important + +// ─── Theme toggle button (injected by enhanceApp.js) ────────────────────── + +.mn-theme-toggle + display inline-flex !important + align-items center !important + justify-content center !important + flex-shrink 0 !important + width 34px !important + height 34px !important + border-radius 9999px !important + border 1px solid var(--mn-toggle-border) !important + background transparent !important + color var(--mn-toggle-clr) !important + cursor pointer !important + padding 0 !important + transition color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important + +.mn-theme-toggle:hover + background var(--mn-toggle-hover) !important + border-color var(--mn-border-hover) !important + color var(--mn-text-hi) !important + +.mn-theme-toggle svg + display block + flex-shrink 0 + +// ─── Search box ─────────────────────────────────────────────────────────── + +.search-box + position relative !important + display inline-flex !important + align-items center !important + height 34px !important + +.search-box::before + content '' + position absolute + left 0.75rem + top 50% + transform translateY(-50%) + width 14px + height 14px + background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='rgba(255%2C255%2C255%2C0.35)' stroke-width='1.6'/%3E%3Cpath d='M13.5 13.5L17 17' stroke='rgba(255%2C255%2C255%2C0.35)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") + background-repeat no-repeat + background-size contain + pointer-events none + z-index 1 + +html[data-theme="light"] .search-box::before + background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='rgba(0%2C0%2C0%2C0.40)' stroke-width='1.6'/%3E%3Cpath d='M13.5 13.5L17 17' stroke='rgba(0%2C0%2C0%2C0.40)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") + +.search-box input + height 34px !important + padding 0 1rem 0 2.2rem !important + background var(--mn-search-bg) !important + border 1px solid var(--mn-search-border) !important + border-radius 9999px !important + color var(--mn-search-text) !important + caret-color var(--mn-orange) !important + font-size 0.875rem !important + line-height 1 !important + +.search-box input:focus + border-color rgba(240,142,32,0.50) !important + background var(--mn-search-bg) !important + outline none !important + +.search-box input::placeholder + color var(--mn-text-muted) !important + +.search-box .suggestions + background var(--mn-search-drop) !important + border 1px solid var(--mn-border) !important + border-radius 12px !important + box-shadow 0 20px 60px rgba(0,0,0,0.50) !important + +.search-box .suggestion + color var(--mn-text) !important + border-radius 8px !important + +.search-box .suggestion a + color var(--mn-text) !important + +.search-box .suggestion.focused + background rgba(240,142,32,0.12) !important + +.search-box .suggestion.focused a + color var(--mn-orange) !important + +// Mobile hamburger +.sidebar-button .icon + fill var(--mn-text) !important + +// ─── Sidebar ────────────────────────────────────────────────────────────── + +.sidebar + background var(--mn-sidebar-bg) !important + border-right 1px solid var(--mn-border) !important + padding-top 0.5rem !important + +.sidebar-group > .sidebar-heading + color var(--mn-text-muted) !important + font-size 0.72rem !important + font-weight 600 !important + letter-spacing 0.18em !important + text-transform uppercase !important + padding 1.1rem 1.5rem 0.3rem !important + cursor default !important + +.sidebar-group > .sidebar-heading.open, +.sidebar-group > .sidebar-heading:hover + color var(--mn-orange) !important + +.sidebar-group > .sidebar-heading .arrow.right + border-left-color var(--mn-text-mid) !important + +.sidebar-group > .sidebar-heading .arrow.down + border-top-color var(--mn-text-mid) !important + +.sidebar-group > .sidebar-heading.open .arrow.right + border-left-color var(--mn-orange) !important + +.sidebar-group > .sidebar-heading.open .arrow.down + border-top-color var(--mn-orange) !important + +.sidebar-link, +.sidebar-links > li > a + font-size 0.875rem !important + font-weight 400 !important + color var(--mn-text) !important + border-left none !important + border-radius 8px !important + padding 0.32rem 1rem !important + margin 0.06rem 0.6rem !important + display block !important + transition background 0.15s ease, color 0.15s ease !important + +.sidebar-link:hover + background var(--mn-toggle-hover) !important + color var(--mn-text-hi) !important + text-decoration none !important + +.sidebar-link.active + background rgba(240,142,32,0.12) !important + color var(--mn-orange) !important + font-weight 500 !important + +.sidebar-sub-headers .sidebar-link + padding-left 1.6rem !important + font-size 0.82rem !important + color var(--mn-text-mid) !important + +.sidebar-sub-headers .sidebar-link:hover + color var(--mn-text) !important + +.sidebar-sub-headers .sidebar-link.active + color var(--mn-orange) !important + background rgba(240,142,32,0.08) !important + +// ─── Page layout ────────────────────────────────────────────────────────── + +.page + background var(--mn-bg) !important + padding-top 68px !important + min-height 100vh !important + +.theme-default-content + max-width 800px !important + padding 2.75rem 2.75rem 5rem !important + +// ─── Home page text colors ──────────────────────────────────────────────── + +.home .hero .description + color var(--mn-text-hi) !important + +.home .features .feature h2 + color var(--mn-text-hi) !important + +.home .features .feature p + color var(--mn-text) !important + +.home .footer + color var(--mn-text-mid) !important + +.home .features + border-top 1px solid var(--mn-border) !important + border-bottom 1px solid var(--mn-border) !important + +// ─── Typography ─────────────────────────────────────────────────────────── + +.theme-default-content h1, +.theme-default-content h2, +.theme-default-content h3, +.theme-default-content h4, +.theme-default-content h5, +.theme-default-content h6 + font-family 'Inter', sans-serif !important + color var(--mn-text-hi) !important + letter-spacing -0.02em !important + line-height 1.25 !important + +.theme-default-content h1 + font-size 2.1rem !important + font-weight 800 !important + margin-top 1rem !important + margin-bottom 1.25rem !important + padding-top 0 !important + border-bottom none !important + +.theme-default-content h2 + font-size 1.4rem !important + font-weight 700 !important + margin-top 2.75rem !important + padding-top 0 !important + padding-bottom 0.65rem !important + border-bottom 1px solid var(--mn-border) !important + +.theme-default-content h3 + font-size 1.1rem !important + font-weight 600 !important + margin-top 2rem !important + padding-top 0 !important + +.theme-default-content h4, +.theme-default-content h5, +.theme-default-content h6 + font-size 0.95rem !important + font-weight 600 !important + margin-top 1.5rem !important + padding-top 0 !important + +.theme-default-content p + color var(--mn-text) !important + line-height 1.8 !important + font-weight 300 !important + +.theme-default-content li + color var(--mn-text) !important + line-height 1.75 !important + font-weight 300 !important + +.theme-default-content strong + color var(--mn-text-hi) !important + font-weight 600 !important + +.theme-default-content em + color var(--mn-text) !important + +.theme-default-content a + color var(--mn-link) !important + text-decoration none !important + transition color 0.2s ease !important + +.theme-default-content a:hover + color var(--mn-link-hover) !important + text-decoration underline !important + +.theme-default-content hr + border none !important + border-top 1px solid var(--mn-border) !important + margin 2.5rem 0 !important + +.theme-default-content blockquote + background var(--mn-card-bg) !important + border-left 4px solid var(--mn-orange) !important + border-radius 0 8px 8px 0 !important + padding 0.8rem 1.25rem !important + margin 1.5rem 0 !important + color var(--mn-text) !important + +.theme-default-content blockquote p + margin 0 !important + +// ─── Code ───────────────────────────────────────────────────────────────── + +.theme-default-content code + background var(--mn-code-bg) !important + color var(--mn-code-clr) !important + border 1px solid var(--mn-border) !important + border-radius 5px !important + padding 0.13em 0.42em !important + font-size 0.875em !important + +div[class*='language-'], +.theme-default-content pre + background var(--mn-pre-bg) !important + border 1px solid var(--mn-pre-border) !important + border-radius 12px !important + +div[class*='language-'] code, +.theme-default-content pre code + background transparent !important + border none !important + color var(--mn-pre-text) !important + padding 0 !important + font-size 0.88rem !important + +div[class*='language-'] button + background var(--mn-card-bg) !important + color var(--mn-text-mid) !important + border 1px solid var(--mn-border) !important + border-radius 6px !important + +div[class*='language-'] button:hover + color var(--mn-text-hi) !important + +// ─── Tables ─────────────────────────────────────────────────────────────── + +.theme-default-content table + border-collapse collapse !important + width 100% !important + margin 1.5rem 0 !important + +.theme-default-content thead tr + background var(--mn-th-bg) !important + +.theme-default-content th + color var(--mn-text-hi) !important + font-weight 600 !important + font-size 0.82rem !important + letter-spacing 0.04em !important + border 1px solid var(--mn-border) !important + padding 0.7em 1em !important + background var(--mn-th-bg) !important + +.theme-default-content tr + border-top 1px solid var(--mn-border) !important + background transparent !important + +.theme-default-content tr:nth-child(2n) + background var(--mn-tr-alt) !important + +.theme-default-content td + border 1px solid var(--mn-border) !important + padding 0.65em 1em !important + color var(--mn-text) !important + +// ─── Custom containers ──────────────────────────────────────────────────── + +.custom-block + border-radius 10px !important + padding 0.85rem 1.25rem !important + margin 1.5rem 0 !important + +.custom-block.tip + background rgba(240,142,32,0.07) !important + border-left 4px solid var(--mn-orange) !important + color var(--mn-text) !important + +.custom-block.tip .custom-block-title + color var(--mn-orange) !important + font-weight 600 !important + +.custom-block.warning + background rgba(255,160,0,0.07) !important + border-left 4px solid #ffa000 !important + color var(--mn-text) !important + +.custom-block.warning .custom-block-title + color #ffa000 !important + font-weight 600 !important + +.custom-block.danger + background rgba(248,113,113,0.09) !important + border-left 4px solid #f87171 !important + color var(--mn-text) !important + +.custom-block.danger .custom-block-title + color #f87171 !important + font-weight 600 !important + +// ─── Page edit / prev-next nav ──────────────────────────────────────────── + +.page-edit + border-top 1px solid var(--mn-border) !important + padding 1.25rem 2.75rem !important + margin-top 2rem !important + +.page-edit .edit-link a + color var(--mn-text-muted) !important + font-size 0.82rem !important + +.page-edit .edit-link a:hover + color var(--mn-orange) !important + text-decoration none !important + +.page-edit .last-updated span + color var(--mn-text-muted) !important + font-size 0.82rem !important + +.page-nav + padding 0 2.75rem 2.5rem !important + +.page-nav .inner + border-top 1px solid var(--mn-border) !important + padding-top 1.5rem !important + min-height auto !important + +.page-nav .prev a, +.page-nav .next a + color var(--mn-orange) !important + font-weight 500 !important + font-size 0.875rem !important + +.page-nav .prev a:hover, +.page-nav .next a:hover + color var(--mn-orange-hover) !important + text-decoration none !important + +// ─── Back-to-top ────────────────────────────────────────────────────────── + +#back-to-top + background rgba(240,142,32,0.15) !important + border 1px solid rgba(240,142,32,0.30) !important + border-radius 9999px !important + color var(--mn-orange) !important + +#back-to-top:hover + background rgba(240,142,32,0.28) !important + +// ─── Medium-zoom ────────────────────────────────────────────────────────── + +.medium-zoom-overlay + background var(--mn-scrim) !important + +.medium-zoom-image--opened + border-radius 12px !important + box-shadow 0 24px 80px rgba(0,0,0,0.70) !important + +// ─── Selection & scrollbar ──────────────────────────────────────────────── + +::selection + background rgba(240,142,32,0.28) + color #ffffff + +::-webkit-scrollbar + width 6px + height 6px + +::-webkit-scrollbar-track + background var(--mn-bg) + +::-webkit-scrollbar-thumb + background rgba(128,128,128,0.25) + border-radius 3px + +::-webkit-scrollbar-thumb:hover + background rgba(128,128,128,0.40) + +// ─── Images ─────────────────────────────────────────────────────────────── + +// Base rule — block + constrained. !important required because VuePress +// theme CSS and the medium-zoom plugin can override these at runtime. +// NO margin here — each container pattern handles its own spacing. +.theme-default-content img + display block !important + max-width 100% !important + height auto !important + +//
— the dominant pattern in the docs. +.theme-default-content center + display block !important + +.theme-default-content figure + display block !important + margin 2rem auto !important + text-align center !important + +.theme-default-content figure img + display block !important + margin 0 auto !important + max-width 100% !important + height auto !important + +// Images with an inline width attribute (style="width:200px") — honour it +// but never let them exceed the container +.theme-default-content figure img[style*="width"] + max-width 100% !important + +// Plain markdown images (![alt](src)) land inside

— make them block +// and add breathing room. The :has rule removes the p's own margin to +// avoid double-spacing. +.theme-default-content p > img + display block !important + margin 2rem auto !important + max-width 100% !important + border-radius 8px + +.theme-default-content p:has(> img:only-child) + margin-top 0 !important + margin-bottom 0 !important + +// Figcaption +.theme-default-content figcaption + font-size 0.82rem + color var(--mn-text-muted) + margin-top 0.5rem + text-align center + +// Side-by-side flex image pairs (used in btcpay-server and a few other pages) +.theme-default-content div[style*="display: flex"], +.theme-default-content div[style*="display:flex"] + margin 2rem 0 !important + gap 1rem + +.theme-default-content div[style*="display: flex"] img, +.theme-default-content div[style*="display:flex"] img + max-width 48% !important + height auto !important + margin 0 !important + border-radius 8px !important + +// ─── Responsive ─────────────────────────────────────────────────────────── + +@media (max-width 719px) + .theme-default-content + padding 1.75rem 1.25rem 4rem !important + + .page-edit, + .page-nav + padding-left 1.25rem !important + padding-right 1.25rem !important + + // Stack side-by-side image pairs on mobile + .theme-default-content div[style*="display: flex"], + .theme-default-content div[style*="display:flex"] + flex-direction column !important + + .theme-default-content div[style*="display: flex"] img, + .theme-default-content div[style*="display:flex"] img + max-width 90% !important + margin 0.75rem auto !important + + // Side-by-side images stack on mobile + .theme-default-content div[style*="display: flex"], + .theme-default-content div[style*="display:flex"] + flex-direction column !important + + .theme-default-content div[style*="display: flex"] img, + .theme-default-content div[style*="display:flex"] img + max-width 90% !important + margin 0.75rem auto !important diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl new file mode 100644 index 0000000..452f7ce --- /dev/null +++ b/docs/.vuepress/styles/palette.styl @@ -0,0 +1,14 @@ +// VuePress default theme Stylus variables +// These are injected BEFORE the theme compiles — so the theme builds +// with these values rather than needing to be overridden afterward. + +$accentColor = #F08E20 +$textColor = rgba(255,255,255,0.55) +$borderColor = rgba(255,255,255,0.08) +$codeBgColor = rgba(255,255,255,0.04) +$arrowBgColor = rgba(255,255,255,0.30) + +$navbarHeight = 68px +$sidebarWidth = 20rem +$contentWidth = 800px +$homePageWidth = 960px