From 47c86b4a6181e50f8e1f24c0008e47cb596bda09 Mon Sep 17 00:00:00 2001 From: Stan Lo Date: Sun, 12 Oct 2025 19:30:50 +0100 Subject: [PATCH 1/3] Add new theme 'Aliki' --- lib/rdoc/generator.rb | 1 + lib/rdoc/generator/aliki.rb | 78 + lib/rdoc/generator/template/aliki/.document | 0 .../generator/template/aliki/_aside_toc.rhtml | 8 + .../generator/template/aliki/_footer.rhtml | 25 + lib/rdoc/generator/template/aliki/_head.rhtml | 48 + .../generator/template/aliki/_header.rhtml | 55 + .../template/aliki/_sidebar_ancestors.rhtml | 6 + .../template/aliki/_sidebar_classes.rhtml | 5 + .../template/aliki/_sidebar_extends.rhtml | 15 + .../template/aliki/_sidebar_includes.rhtml | 15 + .../template/aliki/_sidebar_installed.rhtml | 15 + .../template/aliki/_sidebar_methods.rhtml | 21 + .../template/aliki/_sidebar_pages.rhtml | 32 + .../template/aliki/_sidebar_search.rhtml | 14 + .../template/aliki/_sidebar_sections.rhtml | 11 + .../template/aliki/_sidebar_toggle.rhtml | 3 + lib/rdoc/generator/template/aliki/class.rhtml | 219 +++ .../generator/template/aliki/css/rdoc.css | 1574 +++++++++++++++++ lib/rdoc/generator/template/aliki/index.rhtml | 20 + lib/rdoc/generator/template/aliki/js/aliki.js | 374 ++++ .../generator/template/aliki/js/search.js | 120 ++ .../template/aliki/js/theme-toggle.js | 125 ++ lib/rdoc/generator/template/aliki/page.rhtml | 16 + .../template/aliki/servlet_not_found.rhtml | 13 + .../template/aliki/servlet_root.rhtml | 64 + lib/rdoc/rdoc.rb | 1 + 27 files changed, 2878 insertions(+) create mode 100644 lib/rdoc/generator/aliki.rb create mode 100644 lib/rdoc/generator/template/aliki/.document create mode 100644 lib/rdoc/generator/template/aliki/_aside_toc.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_footer.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_head.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_header.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_sidebar_ancestors.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_sidebar_classes.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_sidebar_extends.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_sidebar_includes.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_sidebar_installed.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_sidebar_methods.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_sidebar_pages.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_sidebar_search.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_sidebar_sections.rhtml create mode 100644 lib/rdoc/generator/template/aliki/_sidebar_toggle.rhtml create mode 100644 lib/rdoc/generator/template/aliki/class.rhtml create mode 100644 lib/rdoc/generator/template/aliki/css/rdoc.css create mode 100644 lib/rdoc/generator/template/aliki/index.rhtml create mode 100644 lib/rdoc/generator/template/aliki/js/aliki.js create mode 100644 lib/rdoc/generator/template/aliki/js/search.js create mode 100644 lib/rdoc/generator/template/aliki/js/theme-toggle.js create mode 100644 lib/rdoc/generator/template/aliki/page.rhtml create mode 100644 lib/rdoc/generator/template/aliki/servlet_not_found.rhtml create mode 100644 lib/rdoc/generator/template/aliki/servlet_root.rhtml diff --git a/lib/rdoc/generator.rb b/lib/rdoc/generator.rb index a769cf8ac0..e8a14d4a66 100644 --- a/lib/rdoc/generator.rb +++ b/lib/rdoc/generator.rb @@ -43,6 +43,7 @@ module RDoc::Generator autoload :Markup, "#{__dir__}/generator/markup" + autoload :Aliki, "#{__dir__}/generator/aliki" autoload :Darkfish, "#{__dir__}/generator/darkfish" autoload :JsonIndex, "#{__dir__}/generator/json_index" autoload :RI, "#{__dir__}/generator/ri" diff --git a/lib/rdoc/generator/aliki.rb b/lib/rdoc/generator/aliki.rb new file mode 100644 index 0000000000..300d3e5f42 --- /dev/null +++ b/lib/rdoc/generator/aliki.rb @@ -0,0 +1,78 @@ +# frozen_string_literal: true + +## +# Aliki RDoc HTML Generator - A modern documentation theme +# +# Based on Darkfish by Michael Granger (ged@FaerieMUD.org) +# +# == Description +# +# Aliki brings modern design patterns to RDoc documentation with: +# +# * Three-column responsive layout (navigation, content, table of contents) +# * Dark mode support with theme toggle and localStorage persistence +# * Auto-generated right sidebar TOC with scroll spy (Intersection Observer) +# * Mobile-optimized search modal with keyboard shortcuts +# * Enhanced syntax highlighting for light and dark themes +# * Responsive design with mobile navigation +# * Zero additional JavaScript dependencies +# * Modern CSS Grid and Flexbox layout +# +# == Usage +# +# rdoc --format=aliki --op=doc/ +# +# == Author +# +# Based on Darkfish by Michael Granger +# Modernized as Aliki theme by Stan Lo +# + +class RDoc::Generator::Aliki < RDoc::Generator::Darkfish + + RDoc::RDoc.add_generator self + + ## + # Version of the Aliki generator + + VERSION = '1' + + ## + # Description of this generator + + DESCRIPTION = 'Modern HTML generator based on Darkfish' + + ## + # Initialize the Aliki generator with the aliki template directory + + def initialize(store, options) + super + aliki_template_dir = File.expand_path(File.join(__dir__, 'template', 'aliki')) + @template_dir = Pathname.new(aliki_template_dir) + end + + ## + # Copy only the static assets required by the Aliki theme. Unlike Darkfish we + # don't ship embedded fonts or image sprites, so limit the asset list to keep + # generated documentation lightweight. + + def write_style_sheet + debug_msg "Copying Aliki static files" + options = { verbose: $DEBUG_RDOC, noop: @dry_run } + + install_rdoc_static_file @template_dir + 'css/rdoc.css', "./css/rdoc.css", options + + unless @options.template_stylesheets.empty? + FileUtils.cp @options.template_stylesheets, '.', **options + end + + Dir[(@template_dir + 'js/**/*').to_s].each do |path| + next if File.directory?(path) + next if File.basename(path).start_with?('.') + + dst = Pathname.new(path).relative_path_from(@template_dir) + + install_rdoc_static_file @template_dir + path, dst, options + end + end +end diff --git a/lib/rdoc/generator/template/aliki/.document b/lib/rdoc/generator/template/aliki/.document new file mode 100644 index 0000000000..e69de29bb2 diff --git a/lib/rdoc/generator/template/aliki/_aside_toc.rhtml b/lib/rdoc/generator/template/aliki/_aside_toc.rhtml new file mode 100644 index 0000000000..3cb2584f3a --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_aside_toc.rhtml @@ -0,0 +1,8 @@ + diff --git a/lib/rdoc/generator/template/aliki/_footer.rhtml b/lib/rdoc/generator/template/aliki/_footer.rhtml new file mode 100644 index 0000000000..c8da9b005f --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_footer.rhtml @@ -0,0 +1,25 @@ + diff --git a/lib/rdoc/generator/template/aliki/_head.rhtml b/lib/rdoc/generator/template/aliki/_head.rhtml new file mode 100644 index 0000000000..f700726342 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_head.rhtml @@ -0,0 +1,48 @@ + + + +<%= h @title %> + +<%- if defined?(klass) -%> + "> + + <%- if klass.comment.empty? -%> + "> + <%- else -%> + "> + <%- end -%> +<%- elsif defined?(file) -%> + + "> +<%- elsif @title -%> + + + <%- if @options.main_page and + main_page = @files.find { |f| f.full_name == @options.main_page } then %> + "> + <%- else -%> + + <%- end -%> +<%- end -%> + +<%- if canonical_url = @options.canonical_root -%> +<% canonical_url = current.canonical_url if defined?(current) %> + +<%- end -%> + + + + + + + + + + + +<%- @options.template_stylesheets.each do |stylesheet| -%> + +<%- end -%> diff --git a/lib/rdoc/generator/template/aliki/_header.rhtml b/lib/rdoc/generator/template/aliki/_header.rhtml new file mode 100644 index 0000000000..bf158b0839 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_header.rhtml @@ -0,0 +1,55 @@ +
+ + <%= h @options.title %> + + + + + + + + + + +
+ + + diff --git a/lib/rdoc/generator/template/aliki/_sidebar_ancestors.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_ancestors.rhtml new file mode 100644 index 0000000000..6808b2bf87 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_sidebar_ancestors.rhtml @@ -0,0 +1,6 @@ +<%- if klass.type == 'class' && (ancestors = klass.super_classes).any? -%> + +<%- end -%> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_classes.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_classes.rhtml new file mode 100644 index 0000000000..d33ecd43f7 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_sidebar_classes.rhtml @@ -0,0 +1,5 @@ + diff --git a/lib/rdoc/generator/template/aliki/_sidebar_extends.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_extends.rhtml new file mode 100644 index 0000000000..067bd62edd --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_sidebar_extends.rhtml @@ -0,0 +1,15 @@ +<%- unless klass.extends.empty? then %> + +<%- end -%> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_includes.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_includes.rhtml new file mode 100644 index 0000000000..04846f84fb --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_sidebar_includes.rhtml @@ -0,0 +1,15 @@ +<%- unless klass.includes.empty? then %> + +<%- end -%> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_installed.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_installed.rhtml new file mode 100644 index 0000000000..faed7e0a94 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_sidebar_installed.rhtml @@ -0,0 +1,15 @@ + diff --git a/lib/rdoc/generator/template/aliki/_sidebar_methods.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_methods.rhtml new file mode 100644 index 0000000000..d09216a0f6 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_sidebar_methods.rhtml @@ -0,0 +1,21 @@ +<% if (class_methods = klass.class_method_list.sort).any? %> +
+

Class Methods

+ +
+<% end %> + +<% if (instance_methods = klass.instance_methods.sort).any? %> +
+

Instance Methods

+ +
+<% end %> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_pages.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_pages.rhtml new file mode 100644 index 0000000000..6a67db397b --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_sidebar_pages.rhtml @@ -0,0 +1,32 @@ +<%- simple_files = @files.select { |f| f.text? } %> +<%- if defined?(current) && current.respond_to?(:page_name) -%> + <%- dir = current.full_name[%r{\A[^/]+(?=/)}] || current.page_name -%> +<%- end -%> +<%- unless simple_files.empty? then -%> + +<%- end -%> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_search.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_search.rhtml new file mode 100644 index 0000000000..afc7f7b88d --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_sidebar_search.rhtml @@ -0,0 +1,14 @@ + diff --git a/lib/rdoc/generator/template/aliki/_sidebar_sections.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_sections.rhtml new file mode 100644 index 0000000000..6dcd2ae81f --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_sidebar_sections.rhtml @@ -0,0 +1,11 @@ +<%- unless klass.sections.length == 1 then %> + +<%- end -%> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_toggle.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_toggle.rhtml new file mode 100644 index 0000000000..ed2cbe31a0 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_sidebar_toggle.rhtml @@ -0,0 +1,3 @@ + diff --git a/lib/rdoc/generator/template/aliki/class.rhtml b/lib/rdoc/generator/template/aliki/class.rhtml new file mode 100644 index 0000000000..b563e48c34 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/class.rhtml @@ -0,0 +1,219 @@ + +<%= render '_header.rhtml' %> +<%= render '_sidebar_toggle.rhtml' %> + + + +
+ <%# If nesting level is 1, breadcrumb list is not needed %> + <% if breadcrumb.size > 1 %> + + <% end %> + +

+ <%= klass.type %> <%= klass.full_name %> +

+ +
+ <%= klass.description %> +
+ + <%- klass.each_section do |section, constants, attributes| -%> + +<%- end -%> +
+ +<%= render '_aside_toc.rhtml' %> + +<%= render '_footer.rhtml' %> diff --git a/lib/rdoc/generator/template/aliki/css/rdoc.css b/lib/rdoc/generator/template/aliki/css/rdoc.css new file mode 100644 index 0000000000..bb70dca45e --- /dev/null +++ b/lib/rdoc/generator/template/aliki/css/rdoc.css @@ -0,0 +1,1574 @@ +/* + * Aliki Theme Stylesheet + * Modern RDoc theme by Stan Lo + * + * Features: + * - Three-column responsive layout (navigation, content, table of contents) + * - Dark mode support with localStorage persistence + * - Auto-generated right sidebar TOC with scroll spy + * - Mobile-optimized search modal + * - Enhanced syntax highlighting for both light and dark themes + * - Zero JavaScript dependencies + * + * Table of Contents: + * 1. Design System - CSS Variables (Light & Dark Themes) + * 2. Global Styles & Layout + * 3. Typography + * 4. Links + * 5. Code & Pre-formatted Text + * 6. Header (Top Navbar with Theme Toggle) + * 7. Footer + * 8. Navigation (Left Sidebar) + * 9. Main Content + * 10. Right Sidebar (Auto-generated TOC) + * 11. Search Modal (Mobile) + */ + +/* 1. Design System - CSS Variables and Tokens */ + +/* Light Theme (Default) */ +:root { + /* Color Palette - Primary */ + --color-primary-50: #fef2f2; + --color-primary-100: #fee2e2; + --color-primary-200: #fecaca; + --color-primary-300: #fca5a5; + --color-primary-400: #f87171; + --color-primary-500: #ef4444; + --color-primary-600: #dc2626; + --color-primary-700: #b91c1c; + --color-primary-800: #991b1b; + --color-primary-900: #7f1d1d; + + /* Color Palette - Neutral (Grays) */ + --color-neutral-50: #f8f9fa; + --color-neutral-100: #f0f2f5; + --color-neutral-200: #e5e5e5; + --color-neutral-300: #d4d4d4; + --color-neutral-400: #a3a3a3; + --color-neutral-500: #737373; + --color-neutral-600: #525252; + --color-neutral-700: #404040; + --color-neutral-800: #262626; + --color-neutral-900: #171717; + + /* Color Palette - Blue (for links) */ + --color-blue-400: #60a5fa; + --color-blue-500: #3b82f6; + --color-blue-600: #2563eb; + --color-blue-700: #1d4ed8; + + /* Color Palette - Green (for success states) */ + --color-green-400: #4ade80; + --color-green-500: #22c55e; + --color-green-600: #16a34a; + + /* Semantic Colors - Light Theme */ + --color-text-primary: var(--color-neutral-900); + --color-text-secondary: var(--color-neutral-600); + --color-text-tertiary: var(--color-neutral-500); + --color-text-inverse: var(--color-neutral-50); + + --color-background-primary: #ffffff; + --color-background-secondary: var(--color-neutral-50); + --color-background-tertiary: var(--color-neutral-100); + --color-background-elevated: #ffffff; + + --color-border-default: var(--color-neutral-300); + --color-border-subtle: var(--color-neutral-200); + --color-border-emphasis: var(--color-neutral-400); + + --color-link-default: #42405F; + --color-link-hover: var(--color-primary-600); + --color-link-visited: #5a5875; + + --color-accent-primary: var(--color-primary-600); + --color-accent-hover: var(--color-primary-700); + --color-accent-subtle: var(--color-primary-50); + + --color-code-bg: #f6f8fa; + --color-code-border: var(--color-neutral-300); + --color-code-text: var(--color-neutral-800); + + --color-nav-bg: #ffffff; + --color-nav-border: var(--color-neutral-200); + --color-nav-text: var(--color-neutral-700); + --color-nav-hover-bg: var(--color-neutral-50); + + --color-search-bg: var(--color-neutral-50); + --color-search-border: var(--color-neutral-300); + --color-search-focus-border: var(--color-primary-500); + + --color-emphasis-bg: var(--color-primary-50); + --color-emphasis-text: var(--color-primary-700); + + /* Typography Scale */ + --font-size-xs: 0.75rem; /* 12px */ + --font-size-sm: 0.875rem; /* 14px */ + --font-size-base: 1rem; /* 16px */ + --font-size-lg: 1.125rem; /* 18px */ + --font-size-xl: 1.25rem; /* 20px */ + --font-size-2xl: 1.5rem; /* 24px */ + --font-size-3xl: 1.875rem; /* 30px */ + --font-size-4xl: 2.25rem; /* 36px */ + --font-size-5xl: 3rem; /* 48px */ + + /* Font Families */ + --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; + --font-family-heading: var(--font-family-base); + --font-family-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace; + + /* Font Weights */ + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + /* Line Heights */ + --line-height-tight: 1.25; + --line-height-snug: 1.375; + --line-height-normal: 1.5; + --line-height-relaxed: 1.625; + --line-height-loose: 2; + + /* Spacing Scale */ + --space-0: 0; + --space-1: 0.25rem; /* 4px */ + --space-2: 0.5rem; /* 8px */ + --space-3: 0.75rem; /* 12px */ + --space-4: 1rem; /* 16px */ + --space-5: 1.25rem; /* 20px */ + --space-6: 1.5rem; /* 24px */ + --space-8: 2rem; /* 32px */ + --space-10: 2.5rem; /* 40px */ + --space-12: 3rem; /* 48px */ + --space-16: 4rem; /* 64px */ + --space-20: 5rem; /* 80px */ + + /* Border Radius */ + --radius-sm: 0.25rem; /* 4px */ + --radius-md: 0.375rem; /* 6px */ + --radius-lg: 0.5rem; /* 8px */ + --radius-xl: 0.75rem; /* 12px */ + --radius-full: 9999px; + + /* Shadows */ + --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + + /* Layout Dimensions */ + --layout-sidebar-width: 280px; + --layout-toc-width: 240px; + --layout-content-max-width: 800px; + --layout-header-height: 64px; + --layout-search-width: 400px; + + /* Transitions */ + --transition-fast: 150ms ease-in-out; + --transition-base: 200ms ease-in-out; + --transition-slow: 300ms ease-in-out; + + /* Z-Index Scale */ + --z-base: 0; + --z-dropdown: 100; + --z-sticky: 200; + --z-fixed: 300; + --z-modal: 400; + --z-popover: 500; + --z-tooltip: 600; + + /* Legacy Compatibility (maps to new tokens) */ + --sidebar-width: var(--layout-sidebar-width); + --highlight-color: var(--color-accent-primary); + --secondary-highlight-color: var(--color-accent-hover); + --text-color: var(--color-text-primary); + --background-color: var(--color-background-primary); + --code-block-background-color: var(--color-code-bg); + --link-color: var(--color-link-default); + --link-hover-color: var(--color-link-hover); + --border-color: var(--color-border-default); + --source-code-toggle-color: var(--color-accent-hover); + --scrollbar-thumb-hover-background: var(--color-neutral-600); + --table-header-background-color: var(--color-neutral-100); + --table-td-background-color: var(--color-neutral-50); + --font-primary: var(--font-family-base); + --font-heading: var(--font-family-heading); + --font-code: var(--font-family-mono); +} + +/* Dark Theme */ +[data-theme="dark"] { + /* Semantic Colors - Dark Theme */ + --color-text-primary: #e5e7eb; + --color-text-secondary: #9ca3af; + --color-text-tertiary: #6b7280; + --color-text-inverse: var(--color-neutral-900); + + --color-background-primary: #0f172a; + --color-background-secondary: #1e293b; + --color-background-tertiary: #334155; + --color-background-elevated: #1e293b; + + --color-border-default: #334155; + --color-border-subtle: #1e293b; + --color-border-emphasis: #475569; + + --color-link-default: #c7d2fe; + --color-link-hover: var(--color-primary-400); + --color-link-visited: #ddd6fe; + + --color-accent-primary: var(--color-primary-500); + --color-accent-hover: var(--color-primary-400); + --color-accent-subtle: rgba(239, 68, 68, 0.1); + + --color-code-bg: #1e293b; + --color-code-border: #334155; + --color-code-text: #e5e7eb; + + --color-nav-bg: #0f172a; + --color-nav-border: #334155; + --color-nav-text: #d1d5db; + --color-nav-hover-bg: #1e293b; + + --color-search-bg: #1e293b; + --color-search-border: #475569; + --color-search-focus-border: var(--color-primary-400); + + --color-emphasis-bg: rgba(239, 68, 68, 0.15); + --color-emphasis-text: var(--color-primary-300); + + /* Dark theme shadows (slightly more subtle) */ + --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); + --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4); + + /* Legacy Compatibility - Dark Theme */ + --highlight-color: var(--color-accent-primary); + --secondary-highlight-color: var(--color-accent-hover); + --text-color: var(--color-text-primary); + --background-color: var(--color-background-primary); + --code-block-background-color: var(--color-code-bg); + --link-color: var(--color-link-default); + --link-hover-color: var(--color-link-hover); + --border-color: var(--color-border-default); + --source-code-toggle-color: var(--color-accent-hover); + --scrollbar-thumb-hover-background: var(--color-neutral-400); + --table-header-background-color: var(--color-background-tertiary); + --table-td-background-color: var(--color-background-secondary); +} + +/* 2. Global Styles & Layout */ +body { + background: var(--background-color); + font-family: var(--font-primary); + font-weight: 400; + color: var(--text-color); + line-height: var(--line-height-relaxed); + margin: 0; + + /* Grid layout with header, sidebar, main, and footer */ + display: grid; + grid-template-columns: var(--layout-sidebar-width) 1fr; + grid-template-rows: var(--layout-header-height) 1fr auto; + grid-template-areas: + "header header" + "nav main" + "nav footer"; + min-height: 100vh; +} + +/* Three-column layout when TOC is present */ +body.has-toc { + grid-template-columns: var(--layout-sidebar-width) 1fr var(--layout-toc-width); + grid-template-areas: + "header header header" + "nav main toc" + "nav footer toc"; + grid-template-rows: var(--layout-header-height) 1fr auto; + min-height: 100vh; +} + +/* Mobile: stack everything vertically */ +@media (max-width: 1023px) { + body, + body.has-toc { + display: flex; + flex-direction: column; + grid-template-columns: none; + grid-template-rows: none; + grid-template-areas: none; + } +} + +/* 3. Typography */ +h1 span, +h2 span, +h3 span, +h4 span, +h5 span, +h6 span { + position: relative; + + display: none; + padding-left: 1em; + line-height: 0; + vertical-align: baseline; + font-size: 10px; +} + +h1 span { top: -1.3em; } +h2 span { top: -1.2em; } +h3 span { top: -1.0em; } +h4 span { top: -0.8em; } +h5 span { top: -0.5em; } +h6 span { top: -0.5em; } + +h1:hover span, +h2:hover span, +h3:hover span, +h4:hover span, +h5:hover span, +h6:hover span { + display: inline; +} + +h1:target, +h2:target, +h3:target, +h4:target, +h5:target, +h6:target { + margin-left: -10px; + border-left: 10px solid var(--border-color); + scroll-margin-top: 1rem; +} + +main .anchor-link:target { + scroll-margin-top: 1rem; +} + +/* 4. Links */ +a { + color: var(--link-color); + transition: color 0.3s ease; + text-decoration: underline; + text-underline-offset: 0.2em; /* Make sure it doesn't overlap with underscores in a method name. */ +} + +a:hover { + color: var(--link-hover-color); +} + +a code:hover { + color: var(--link-hover-color); +} + +/* 5. Code and Pre */ +/* Code blocks */ +pre { + font-family: var(--font-code); + background-color: var(--color-code-bg); + border: 1px solid var(--color-code-border); + border-radius: var(--radius-md); + padding: var(--space-4); + overflow-x: auto; + font-size: var(--font-size-sm); + line-height: var(--line-height-normal); + margin: var(--space-4) 0; +} + +pre code { + background: none; + border: none; + padding: 0; + font-size: inherit; +} + +/* Inline code */ +code { + font-family: var(--font-code); + background-color: var(--color-code-bg); + border: 1px solid var(--color-border-subtle); + padding: 0.125rem 0.375rem; + border-radius: var(--radius-sm); + font-size: 0.9em; +} + +/* Tables */ +table { + margin: 0; + border-spacing: 0; + border-collapse: collapse; +} + +table tr th, table tr td { + padding: 0.2em 0.4em; + border: 1px solid var(--border-color); +} + +table tr th { + background-color: var(--table-header-background-color); +} + +table tr:nth-child(even) td { + background-color: var(--table-td-background-color); +} + +/* 6. Header (Top Navbar) */ +header.top-navbar { + grid-area: header; + position: sticky; + top: 0; + z-index: var(--z-fixed); + background: var(--color-background-primary); + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 var(--space-6); + gap: var(--space-8); + height: var(--layout-header-height); + box-shadow: var(--shadow-sm); +} + +header.top-navbar .navbar-brand { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + text-decoration: none; + white-space: nowrap; +} + +header.top-navbar .navbar-brand:hover { + color: var(--color-accent-primary); +} + +header.top-navbar .navbar-search { + position: relative; + flex: 0 1 auto; + width: var(--layout-search-width); +} + +header.top-navbar .navbar-search form { + margin: 0; + padding: 0; +} + +header.top-navbar #search-field { + width: 100%; + padding: var(--space-2) var(--space-4); + border: 1px solid var(--color-border-default); + border-radius: var(--radius-md); + font-size: var(--font-size-sm); + background: var(--color-background-primary); + color: var(--color-text-primary); + transition: border-color var(--transition-fast); +} + +header.top-navbar #search-field:focus { + outline: none; + border-color: var(--color-accent-primary); + box-shadow: 0 0 0 3px var(--color-accent-subtle); +} + +header.top-navbar #search-field::placeholder { + color: var(--color-text-tertiary); +} + +/* Search results dropdown in navbar */ +header.top-navbar #search-results { + position: absolute; + top: calc(100% + var(--space-2)); + left: 0; + width: var(--layout-search-width); + max-height: 60vh; + background: var(--color-background-elevated); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + overflow-y: auto; + z-index: var(--z-popover); + margin: 0; + padding: 0; +} + +header.top-navbar #search-results.initially-hidden { + display: none; +} + +header.top-navbar #search-results[aria-expanded="false"] { + display: none; +} + +/* Mobile search icon button (hidden on desktop) */ +.navbar-search-mobile { + display: none; +} + +/* Theme toggle button */ +.theme-toggle { + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-2); + margin-left: auto; + background: transparent; + border: 1px solid var(--color-border-default); + border-radius: var(--radius-md); + color: var(--color-text-primary); + cursor: pointer; + transition: all var(--transition-fast); + font-size: var(--font-size-lg); + line-height: 1; + width: 2.5rem; + height: 2.5rem; +} + +.theme-toggle:hover { + background: var(--color-background-secondary); + border-color: var(--color-accent-primary); + color: var(--color-accent-primary); +} + +.theme-toggle:focus { + outline: none; + border-color: var(--color-accent-primary); + box-shadow: 0 0 0 3px var(--color-accent-subtle); +} + +.theme-toggle-icon { + display: inline-block; + transition: transform var(--transition-base); +} + +.theme-toggle:hover .theme-toggle-icon { + transform: rotate(20deg); +} + +/* Mobile navbar */ +@media (max-width: 1023px) { + header.top-navbar { + display: flex; + align-items: center; + padding: 0 var(--space-4); + gap: var(--space-4); + } + + /* Hide desktop search bar on mobile */ + header.top-navbar .navbar-search-desktop { + display: none; + } + + /* Show mobile search icon */ + .navbar-search-mobile { + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + background: transparent; + border: none; + font-size: 1.25rem; + color: var(--color-text-primary); + cursor: pointer; + transition: color var(--transition-fast); + } + + .navbar-search-mobile:hover { + color: var(--color-accent-primary); + } + + /* Brand needs left margin for hamburger button */ + header.top-navbar .navbar-brand { + margin-left: 2.5rem; + flex: 1; + font-size: var(--font-size-lg); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +/* 7. Footer */ +footer.site-footer { + grid-area: footer; + background: var(--color-background-secondary); + border-top: 1px solid var(--border-color); + padding: var(--space-12) var(--space-6); + margin-top: var(--space-20); +} + +footer.site-footer .footer-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--space-8); +} + +footer.site-footer h3 { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin: 0 0 var(--space-4) 0; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +footer.site-footer ul { + list-style: none; + margin: 0; + padding: 0; +} + +footer.site-footer li { + margin-bottom: var(--space-2); +} + +footer.site-footer a { + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--font-size-sm); + transition: color var(--transition-fast); +} + +footer.site-footer a:hover { + color: var(--color-link-hover); +} + +footer.site-footer .footer-bottom { + margin-top: var(--space-8); + padding-top: var(--space-6); + border-top: 1px solid var(--border-color); + text-align: center; + font-size: var(--font-size-xs); + color: var(--color-text-tertiary); +} + +/* 8. Navigation (Left Sidebar) */ +nav { + grid-area: nav; + font-family: var(--font-heading); + font-size: var(--font-size-sm); + border-right: 1px solid var(--border-color); + background: var(--color-nav-bg); + color: var(--color-nav-text); + overflow-y: auto; + overflow-x: hidden; + display: flex; + flex-direction: column; + position: sticky; + top: var(--layout-header-height); + height: calc(100vh - var(--layout-header-height)); + align-self: start; +} + +/* Mobile navigation */ +@media (max-width: 1023px) { + nav { + position: fixed; + top: var(--layout-header-height); + bottom: 0; + left: 0; + width: var(--sidebar-width); + z-index: calc(var(--z-fixed) - 10); /* Below header */ + box-shadow: var(--shadow-lg); + /* Don't set height - let top/bottom define it */ + } + + nav[hidden] { + display: none; + } + + /* Backdrop for mobile nav */ + body::before { + content: ''; + position: fixed; + top: var(--layout-header-height); + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: calc(var(--z-fixed) - 20); + opacity: 0; + pointer-events: none; + transition: opacity var(--transition-normal); + } + + /* Show backdrop when nav is open */ + body.nav-open::before { + opacity: 1; + pointer-events: auto; + } +} + +/* Desktop: hide nav when [hidden] attribute is set */ +@media (min-width: 1024px) { + nav[hidden] { + display: none; + } +} + +nav footer { + padding: 1em; + border-top: 1px solid var(--border-color); +} + +nav footer a { + color: var(--secondary-highlight-color); +} + +nav .nav-section { + margin-top: 1em; + padding: 0 1em; +} + +nav h2, nav h3 { + margin: 0 0 0.5em; + padding: 0.5em 0; + color: var(--highlight-color); + border-bottom: 1px solid var(--border-color); +} + +nav h2 { + font-size: 1.2em; +} + +nav h3 { + font-size: 1em; +} + +ol.breadcrumb { + display: flex; + + padding: 0; + margin: 0 0 1em; +} + +ol.breadcrumb li { + display: block; + list-style: none; + font-size: 125%; +} + +nav ul, +nav dl, +nav p { + padding: 0; + list-style: none; + margin: 0.5em 0; +} + +nav ul li { + margin-bottom: 0.3em; +} + +nav ul ul { + padding-left: 1em; +} + +nav ul ul ul { + padding-left: 1em; +} + +nav ul ul ul ul { + padding-left: 1em; +} + +nav a { + color: var(--link-color); + text-decoration: none; +} + +nav a:hover { + color: var(--link-hover-color); + text-decoration: underline; +} + +#navigation-toggle { + display: none; /* Hidden by default, shown on mobile */ +} + +/* Mobile toggle button */ +@media (max-width: 1023px) { + #navigation-toggle { + display: flex; + align-items: center; + justify-content: center; + position: fixed; + top: calc(var(--layout-header-height) / 2); + transform: translateY(-50%); + left: 1rem; + z-index: var(--z-fixed); + font-size: 1.5rem; + background: transparent; + border: none; + color: var(--color-text-primary); + cursor: pointer; + transition: color var(--transition-fast); + line-height: 1; + } + + #navigation-toggle:hover { + color: var(--color-accent-primary); + } +} + +nav ul li details { + position: relative; + padding-right: 1.5em; /* Add space for the marker on the right */ +} + +nav ul li details > summary { + list-style: none; /* Remove the default marker */ + position: relative; /* So that the open/close triangle can position itself absolutely inside */ +} + +nav ul li details > summary::-webkit-details-marker { + display: none; /* Removes the default marker, in Safari 18. */ +} + +nav ul li details > summary::after { + content: 'β–Ά'; /* Unicode right-pointing triangle */ + position: absolute; + font-size: 0.8em; + bottom: 0.1em; + margin-left: 0.3em; + transition: transform 0.2s ease; +} + +nav ul li details[open] > summary::after { + transform: rotate(90deg); /* Rotate the triangle when open */ +} + +/* 9. Main Content (Center Column) */ +main { + grid-area: main; + width: 100%; + max-width: var(--layout-content-max-width); + margin: 0 auto; + padding: var(--space-12) var(--space-8); + font-size: var(--font-size-base); + line-height: var(--line-height-relaxed); + color: var(--color-text-primary); + box-sizing: border-box; +} + +/* Desktop: hide hamburger */ +@media (min-width: 1024px) { + #navigation-toggle { + display: none; + } +} + +/* Mobile: full width with padding */ +@media (max-width: 1023px) { + main { + padding: var(--space-6) var(--space-4); + padding-top: var(--space-8); + width: 100%; + } + + footer.site-footer { + padding: var(--space-8) var(--space-4); + } + + footer.site-footer .footer-content { + grid-template-columns: 1fr; + gap: var(--space-6); + } +} + +main h1[class] { + margin-top: 0; + margin-bottom: 1em; + font-size: 2.5em; + color: var(--highlight-color); +} + +main h1, +main h2, +main h3, +main h4, +main h5, +main h6 { + font-family: var(--font-heading); + color: var(--highlight-color); +} + +/* Heading size hierarchy */ +main h1 { + font-size: var(--font-size-3xl); /* 2rem / 32px */ + font-weight: var(--font-weight-bold); + margin-bottom: var(--space-4); + line-height: var(--line-height-tight); +} + +main h2 { + font-size: var(--font-size-2xl); /* 1.5rem / 24px */ + font-weight: var(--font-weight-semibold); + margin-top: var(--space-8); + margin-bottom: var(--space-4); + line-height: var(--line-height-tight); +} + +main h3 { + font-size: var(--font-size-xl); /* 1.25rem / 20px */ + font-weight: var(--font-weight-semibold); + margin-top: var(--space-6); + margin-bottom: var(--space-3); + line-height: var(--line-height-tight); +} + +main h4 { + font-size: var(--font-size-lg); /* 1.125rem / 18px */ + font-weight: var(--font-weight-medium); + margin-top: var(--space-4); + margin-bottom: var(--space-2); +} + +main h5, main h6 { + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + margin-top: var(--space-3); + margin-bottom: var(--space-2); +} + +/* Search */ +#search-section { + padding: 1em; + background-color: var(--background-color); + border-bottom: 1px solid var(--border-color); +} + +#search-field-wrapper { + position: relative; + display: flex; + align-items: center; +} + +#search-field { + width: 100%; + padding: 0.5em 1em 0.5em 2.5em; + border: 1px solid var(--border-color); + border-radius: 20px; + font-size: 14px; + outline: none; + transition: border-color 0.3s ease; + color: var(--text-color); +} + +#search-field:focus { + border-color: var(--highlight-color); +} + +#search-field::placeholder { + color: var(--text-color); +} + +#search-field-wrapper::before { + content: "\1F50D"; + position: absolute; + left: 0.75em; + top: 50%; + transform: translateY(-50%); + font-size: 14px; + color: var(--text-color); + opacity: 0.6; +} + +/* Search Results */ +#search-results { + font-family: var(--font-primary); + font-weight: 300; +} + +#search-results .search-match { + font-family: var(--font-heading); + font-weight: normal; +} + +#search-results .search-selected { + background: var(--code-block-background-color); + border-bottom: 1px solid transparent; +} + +#search-results li { + list-style: none; + border-bottom: 1px solid var(--border-color); + margin-bottom: 0.5em; +} + +#search-results li:last-child { + border-bottom: none; + margin-bottom: 0; +} + +#search-results li p { + padding: 0; + margin: 0.5em; +} + +#search-results .search-namespace { + font-weight: bold; +} + +#search-results li em { + background-color: rgba(224, 108, 117, 0.1); + font-style: normal; +} + +#search-results pre { + margin: 0.5em; + font-family: var(--font-code); +} + +/* Syntax Highlighting - Gruvbox Light Scheme */ + +.ruby-constant { color: #AF3A03; } /* Dark Orange */ +.ruby-keyword { color: #9D0006; } /* Dark Red */ +.ruby-ivar { color: #B57614; } /* Brown */ +.ruby-operator { color: #427B58; } /* Dark Teal */ +.ruby-identifier { color: #076678; } /* Deep Teal */ +.ruby-node { color: #8F3F71; } /* Plum */ +.ruby-comment { color: #928374; font-style: italic; } /* Gray */ +.ruby-regexp { color: #8F3F71; } /* Plum */ +.ruby-value { color: #AF3A03; } /* Dark Orange */ +.ruby-string { color: #79740E; } /* Olive */ + +/* Syntax Highlighting - Dark Theme */ +[data-theme="dark"] .ruby-constant { color: #fe8019; } /* Bright Orange */ +[data-theme="dark"] .ruby-keyword { color: #fb4934; } /* Bright Red */ +[data-theme="dark"] .ruby-ivar { color: #fabd2f; } /* Bright Yellow */ +[data-theme="dark"] .ruby-operator { color: #8ec07c; } /* Bright Teal */ +[data-theme="dark"] .ruby-identifier { color: #83a598; } /* Bright Blue */ +[data-theme="dark"] .ruby-node { color: #d3869b; } /* Bright Purple */ +[data-theme="dark"] .ruby-comment { color: #928374; font-style: italic; } /* Gray */ +[data-theme="dark"] .ruby-regexp { color: #d3869b; } /* Bright Purple */ +[data-theme="dark"] .ruby-value { color: #fe8019; } /* Bright Orange */ +[data-theme="dark"] .ruby-string { color: #b8bb26; } /* Bright Green */ + +/* Emphasis */ +em { + text-decoration-color: rgba(52, 48, 64, 0.25); + text-decoration-line: underline; + text-decoration-style: dotted; +} + +strong, +em { + color: var(--highlight-color); + background-color: rgba(255, 111, 97, 0.1); /* Light red background for emphasis */ +} + +/* Paragraphs */ +main p { + line-height: var(--line-height-relaxed); + font-weight: 400; + margin-bottom: var(--space-4); +} + +/* Preformatted Text */ +main pre { + margin: 1.2em 0.5em; + padding: 1em; + font-size: 0.8em; +} + +/* Horizontal Rules */ +main hr { + margin: 1.5em 1em; + border: 2px solid var(--border-color); +} + +/* Blockquotes */ +main blockquote { + margin: 0 2em 1.2em 1.2em; + padding-left: 0.5em; + border-left: 2px solid var(--border-color); +} + +/* Lists */ +main li > p { + margin: 0.5em; +} + +/* Definition Lists */ +main dl { + margin: 1em 0.5em; +} + +main dt { + line-height: 1.5; /* matches `main p` */ + font-weight: bold; +} + +main dl.note-list dt { + margin-right: 1em; + float: left; +} + +main dl.note-list dt:has(+ dt) { + margin-right: 0.25em; +} + +main dl.note-list dt:has(+ dt)::after { + content: ', '; + font-weight: normal; +} + +main dd { + margin: 0 0 1em 1em; +} + +main dd p:first-child { + margin-top: 0; +} + +/* Headers within Main */ +main header h2 { + margin-top: 2em; + border-width: 0; + border-top: 4px solid var(--border-color); + font-size: 130%; +} + +main header h3 { + margin: 2em 0 1.5em; + border-width: 0; + border-top: 3px solid var(--border-color); + font-size: 120%; +} + +/* Utility Classes */ +.hide { display: none !important; } +.initially-hidden { display: none; } + +/* Screen reader only */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +/* 10. Right Sidebar - Table of Contents */ +aside.table-of-contents { + grid-area: toc; + position: fixed; + right: 0; + top: var(--layout-header-height); + width: var(--layout-toc-width); + height: calc(100vh - var(--layout-header-height)); + overflow: visible; + padding: var(--space-6) var(--space-4); + border-left: 1px solid var(--border-color); + font-size: var(--font-size-sm); + z-index: var(--z-sticky); +} + +/* Hide TOC on mobile/tablet */ +@media (max-width: 1279px) { + aside.table-of-contents { + display: none; + } + + body.has-toc { + grid-template-columns: var(--layout-sidebar-width) 1fr; + grid-template-areas: + "header header" + "nav main" + "footer footer"; + } +} + +/* Tablet adjustments (between mobile and desktop) */ +@media (min-width: 768px) and (max-width: 1023px) { + nav { + width: 240px; + } + + header.top-navbar { + padding: 0 var(--space-6); + } + + main { + padding: var(--space-8) var(--space-6); + max-width: 100%; + } +} + +.table-of-contents h3 { + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + margin: 0 0 var(--space-4) 0; + color: var(--color-text-primary); +} + +.table-of-contents ul { + margin: 0; + padding: 0; + list-style: none; +} + +.table-of-contents ul ul { + margin-top: var(--space-2); + margin-left: var(--space-4); + border-left: 1px solid var(--border-color); + padding-left: var(--space-3); +} + +.table-of-contents li { + margin-bottom: var(--space-2); +} + +.table-of-contents a { + display: block; + padding: var(--space-1) 0; + color: var(--color-text-secondary); + text-decoration: none; + transition: color var(--transition-fast); + line-height: var(--line-height-snug); +} + +.table-of-contents a:hover { + color: var(--color-link-hover); +} + +.table-of-contents a.active { + color: var(--color-accent-primary); + font-weight: var(--font-weight-medium); +} + +/* Method Details */ +main .method-source-code { + visibility: hidden; + max-height: 0; + overflow: auto; + transition-duration: 200ms; + transition-delay: 0ms; + transition-property: all; + transition-timing-function: ease-in-out; +} + +main .method-source-code pre { + border-color: var(--source-code-toggle-color); +} + +main .method-source-code.active-menu { + visibility: visible; + max-height: 100vh; +} + +main .method-description .method-calls-super { + color: var(--text-color); + font-weight: bold; +} + +main .method-detail { + margin-bottom: 2.5em; +} + +main .method-detail:target { + margin-left: -10px; + border-left: 10px solid var(--border-color); +} + +main .method-header { + display: inline-block; +} + +main .method-heading { + position: relative; + font-family: var(--font-code); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-semibold); + margin-bottom: var(--space-3); +} + +main .method-heading .method-name { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); +} + +main .method-heading .method-args { + color: var(--color-text-secondary); + font-weight: var(--font-weight-normal); +} + +main .method-heading::after { + content: 'ΒΆ'; + position: absolute; + visibility: hidden; + color: var(--highlight-color); + font-size: 0.5em; +} + +main .method-heading:hover::after { + visibility: visible; +} + +main .method-controls { + line-height: 20px; + float: right; + color: var(--source-code-toggle-color); + cursor: pointer; +} + +main .method-description, +main .aliases { + margin-top: 0.75em; + color: var(--text-color); +} + +main .aliases { + padding-top: 4px; + font-style: italic; + cursor: default; +} + +main .aliases a { + color: var(--secondary-highlight-color); +} + +main .mixin-from { + font-size: 80%; + font-style: italic; + margin-bottom: 0.75em; +} + +main .method-description ul { + margin-left: 1.5em; +} + +main #attribute-method-details .method-detail:hover { + background-color: transparent; + cursor: default; +} + +main .attribute-access-type { + text-transform: uppercase; +} + +/* Small screen adjustments */ +@media (max-width: 480px) { + nav { + width: 85%; + max-width: 320px; + } + + main { + margin: 0; + padding: var(--space-4); + max-width: 100%; + } + + table { + display: block; + overflow-x: auto; + white-space: nowrap; + } + + main .method-controls { + margin-top: 10px; + float: none; + } +} + +/* 11. Search Modal (Mobile) */ +.search-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: var(--z-modal); + display: none; +} + +.search-modal:not([hidden]) { + display: flex; + align-items: flex-start; + justify-content: center; + padding: var(--space-16) var(--space-4); +} + +/* Reduce padding on very small screens */ +@media (max-width: 420px) { + .search-modal:not([hidden]) { + padding: var(--space-4) var(--space-3); + } + + .search-modal-content { + border-radius: var(--radius-md); + } + + .search-modal-header { + padding: var(--space-3); + } + + .search-modal-body { + padding: var(--space-3); + } + + .search-modal-form input { + font-size: var(--font-size-base); + min-width: 0; /* Allow input to shrink */ + } + + .search-modal-form { + gap: var(--space-2); + } + + .search-modal-close { + padding: var(--space-1) var(--space-3); + font-size: 0.75rem; + } +} + +.search-modal-backdrop { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 1; +} + +.search-modal-content { + position: relative; + z-index: 2; + background: var(--color-background-primary); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-xl); + width: 100%; + max-width: 600px; + max-height: 80vh; + display: flex; + flex-direction: column; +} + +.search-modal-header { + padding: var(--space-6); + border-bottom: 1px solid var(--color-border-default); +} + +.search-modal-form { + display: flex; + align-items: center; + gap: var(--space-3); +} + +.search-modal-icon { + font-size: 1.5rem; + color: var(--color-text-secondary); + flex-shrink: 0; +} + +.search-modal-form input { + flex: 1; + border: none; + outline: none; + background: transparent; + font-size: var(--font-size-lg); + color: var(--color-text-primary); + padding: 0; +} + +.search-modal-form input::placeholder { + color: var(--color-text-tertiary); +} + +.search-modal-close { + padding: var(--space-2) var(--space-4); + background: var(--color-background-secondary); + border: 1px solid var(--color-border-default); + border-radius: var(--radius-md); + font-size: var(--font-size-sm); + color: var(--color-text-secondary); + cursor: pointer; + transition: all var(--transition-fast); + flex-shrink: 0; +} + +.search-modal-close:hover { + background: var(--color-background-tertiary); + border-color: var(--color-border-default); +} + +.search-modal-body { + padding: var(--space-6); + overflow-y: auto; + flex: 1; +} + +.search-modal-empty { + text-align: center; + color: var(--color-text-tertiary); + padding: var(--space-12) 0; +} + +.search-modal-results { + list-style: none; + margin: 0; + padding: 0; +} + +.search-modal-results.initially-hidden { + display: block !important; /* Override initially-hidden */ +} + +.search-modal-results li { + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-md); + cursor: pointer; + transition: background var(--transition-fast); + margin-bottom: var(--space-2); +} + +.search-modal-results li:hover { + background: var(--color-background-secondary); +} + +.search-modal-results .search-match { + margin: 0; + font-size: var(--font-size-base); +} + +.search-modal-results .search-match a { + color: var(--color-link-default); + text-decoration: none; +} + +.search-modal-results .search-match a:hover { + color: var(--color-link-hover); +} + +.search-modal-results .search-namespace { + margin: var(--space-1) 0 0 0; + font-size: var(--font-size-sm); + color: var(--color-text-secondary); +} + +.search-modal-results .search-snippet { + margin: var(--space-1) 0 0 0; + font-size: var(--font-size-sm); + color: var(--color-text-tertiary); +} + +/* Hide modal on desktop */ +@media (min-width: 1024px) { + .search-modal { + display: none !important; + } +} diff --git a/lib/rdoc/generator/template/aliki/index.rhtml b/lib/rdoc/generator/template/aliki/index.rhtml new file mode 100644 index 0000000000..c42aa41f82 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/index.rhtml @@ -0,0 +1,20 @@ + +<%= render '_header.rhtml' %> +<%= render '_sidebar_toggle.rhtml' %> + + + +
+<%- if @main_page %> + <%= @main_page.description %> +<%- else -%> +

This is the API documentation for <%= h @title %>. +<%- end -%> +

+ +<%= render '_aside_toc.rhtml' %> + +<%= render '_footer.rhtml' %> diff --git a/lib/rdoc/generator/template/aliki/js/aliki.js b/lib/rdoc/generator/template/aliki/js/aliki.js new file mode 100644 index 0000000000..c14c5a9849 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/js/aliki.js @@ -0,0 +1,374 @@ +/** + * Aliki Theme - Interactive Documentation Features + * + * Modern RDoc theme by Stan Lo + * Based on Darkfish by Michael Granger + * + * Features: + * - Method source code toggling + * - Desktop and mobile search with autocomplete + * - Responsive navigation with hamburger menu + * - Auto-generated table of contents with scroll spy + * - Keyboard shortcuts + */ + +/* ===== Method Source Code Toggling ===== */ + +function showSource( e ) { + var target = e.target; + while (!target.classList.contains('method-detail')) { + target = target.parentNode; + } + if (typeof target !== "undefined" && target !== null) { + target = target.querySelector('.method-source-code'); + } + if (typeof target !== "undefined" && target !== null) { + target.classList.toggle('active-menu') + } +}; + +function hookSourceViews() { + document.querySelectorAll('.method-source-toggle').forEach(function (codeObject) { + codeObject.addEventListener('click', showSource); + }); +} + +/* ===== Search Functionality ===== */ + +function createSearchInstance(input, result) { + if (!input || !result) return null; + + result.classList.remove("initially-hidden"); + + var search = new Search(search_data, input, result); + + search.renderItem = function(result) { + var li = document.createElement('li'); + var html = ''; + + // TODO add relative path to