Thoughts on coding, life, and everything in between.
+{{ post.metadata.description }}
+ {% endif %} + + {% if post.metadata.tags %} + + {% endif %} +{{ get_recent_posts(limit=1000, folder='posts')|length }} posts and counting
+{{ post.metadata.description }}
+ {% endif %} + + {% if post.metadata.tags %} + + {% endif %} +{{ photos|list|length }} photos
+ + {# Show sibling galleries #} + {% set sibling_folders = get_sibling_content_folders(currentPath) %} + {% if sibling_folders %} + + {% endif %} +{{ metadata.description if metadata else "Designer & Developer" }}
+By {{ metadata.author }}
+ +{% for tag in metadata.tags %} + {{ tag }} +{% endfor %} +``` + +## Template Helpers + +Foldsite provides powerful helper functions accessible in all templates: + +### Content Discovery + +```jinja +{# Get folder contents #} +{% for file in get_folder_contents(currentPath) %} + {{ file.name }} +{% endfor %} + +{# Get sibling files #} +{% for sibling in get_sibling_content_files(currentPath) %} + {{ sibling[0] }} +{% endfor %} + +{# Get sibling folders #} +{% for folder in get_sibling_content_folders(currentPath) %} + {{ folder[0] }} +{% endfor %} +``` + +### Blog Functions + +```jinja +{# Recent blog posts #} +{% for post in get_recent_posts(limit=5, folder='blog') %} +{{ post.metadata.description }}
+ {% endif %} +{{ item }}
+{% endfor %} + +{% for key, value in metadata.items() %} +{{ key }}: {{ value }}
+{% endfor %} + +{# Loop variables #} +{% for item in items %} + {{ loop.index }} {# 1-indexed #} + {{ loop.index0 }} {# 0-indexed #} + {{ loop.first }} {# True on first iteration #} + {{ loop.last }} {# True on last iteration #} +{% endfor %} +``` + +### Filters and Functions + +```jinja +{% for file in get_folder_contents()|sort(attribute='date') %} + ... +{% endfor %} + +{% for post in get_recent_posts(limit=5)|reverse %} + ... +{% endfor %} +``` + +## Best Practices + +### 1. Start Simple, Add Complexity as Needed + +Begin with basic templates: + +``` +templates/ +├── base.html +├── __file.md.html +└── __folder.md.html +``` + +Add specific overrides only when you need different styling or layout. + +### 2. Keep base.html Minimal + +Your base template should handle: +- HTML document structure +- CSS loading +- Site-wide navigation +- Footer + +Leave content-specific layouts to page templates. + +### 3. Use Template Helpers + +Don't manually read files or iterate directories. Use helpers: + +```jinja +✓ Good: +{% for post in get_recent_posts(limit=5) %} + +✗ Bad: +{# Trying to manually list files - won't work #} +``` + +### 4. Leverage the Cascade + +Put general templates at the root, specific ones in subdirectories: + +``` +templates/ +├── __file.md.html # Default for all markdown +└── blog/ + └── __file.md.html # Special layout for blog +``` + +### 5. Test with Debug Mode + +Enable debug mode in `config.toml` to see template discovery: + +```toml +[server] +debug = true +``` + +This shows which templates Foldsite considered and why it chose the one it did. + +## Common Patterns + +### Pattern: Site Navigation + +In `base.html`: + +```html + +``` + +### Pattern: Sidebar with Recent Posts + +```html + +``` + +### Pattern: Tag Cloud + +```html +{{ get_text_document_preview(file.path) }}...
+{{ post_meta.metadata.description }}
+Published: {{ post_meta.metadata.date }}
+ + Read more → +{{ meta.metadata.excerpt }}
+ {% endif %} + Read full post +{{ post.metadata.description }}
+ {% endif %} + {% if post.metadata.tags %} + + {% endif %} +{{ album.image_count }} photos
+ + {% endfor %} +{{ post.metadata.description }}
+ {% endif %} + + {% if post.metadata.tags %} + + {% endif %} +{{ file.date_created }}
+ {% if file.metadata and file.metadata.description %} +{{ file.metadata.description }}
+ {% endif %} +{{ photos|length }} photos
+ +{{ photo.metadata.exif.DateTimeOriginal }}
+ {% if photo.metadata.exif.Model %} +{{ photo.metadata.exif.Model }}
+ {% endif %} + {% endif %} +{{ posts|pprint }}+ +{# Show current variables #} +
+currentPath: {{ currentPath }} +metadata: {{ metadata|pprint }} ++``` + +## Next Steps + +- **[Template Recipes](../recipes/)** - See these helpers in complete working examples +- **[Template System Overview](index.md)** - Understand how templates work +- **[Template Discovery](template-discovery.md)** - Learn how Foldsite finds templates + +With these helpers, you can build sophisticated, dynamic sites while keeping your content as simple files and folders! diff --git a/docs/content/theme-gallery.md b/docs/content/theme-gallery.md new file mode 100644 index 0000000..a15e525 --- /dev/null +++ b/docs/content/theme-gallery.md @@ -0,0 +1,314 @@ +--- +version: "1.0" +date: "2025-01-15" +author: "DWS Foldsite Team" +title: "Theme Gallery" +description: "Download and use community-created Foldsite themes" +summary: "Browse ready-to-use themes for Foldsite. Download complete template and style packages to jumpstart your site." +quick_tips: + - "Themes are complete template + style packages you can drop into your project" + - "All themes are free and open source" + - "Customize themes to make them your own" +--- + +# Theme Gallery + +Ready-to-use themes for Foldsite. Download, customize, and launch your site quickly. + +## What is a Theme? + +A Foldsite theme is a complete package of: +- **Templates** (`templates/` directory) +- **Styles** (`styles/` directory) +- **Example content** (optional) +- **Configuration** (optional) + +Simply download and drop into your Foldsite project. + +## Official Themes + +### Default Theme + +**Included in:** Foldsite repository (`example_site/`) +**Type:** Blog + Gallery +**Best for:** Personal sites, blogs with photos + +**Features:** +- Responsive sidebar navigation +- Blog post support with metadata +- Photo gallery views +- Breadcrumb navigation +- Clean, minimal design + +**Install:** +```bash +# Copy from example_site +cp -r example_site/template my-site/templates +cp -r example_site/style my-site/styles +``` + +**Preview:** See [Tanishq Dubey's site](https://tanishq.page) + +--- + +### Documentation Theme + +**Included in:** Foldsite repository (`docs/`) +**Type:** Documentation +**Best for:** Project docs, technical writing, knowledge bases + +**Features:** +- Hierarchical navigation +- Sibling page links +- Code syntax highlighting +- Breadcrumb trails +- Clean, readable typography + +**Install:** +```bash +# Copy from docs +cp -r docs/templates my-site/templates +cp -r docs/styles my-site/styles +``` + +**Preview:** This documentation site! + +--- + +## Community Themes + +*Community-contributed themes will appear here as they're created and submitted.* + +### How to Submit a Theme + +Created a theme you want to share? + +**Requirements:** +- Complete templates and styles +- README with installation instructions +- Screenshot or demo site +- MIT or similar permissive license +- No external dependencies (except common CDNs) + +**Submission process:** +1. Create GitHub repository with your theme +2. Open issue on Foldsite repo with "Theme Submission" label +3. Include: + - Theme name and description + - Screenshot or demo URL + - Repository link + - What makes it unique +4. We'll review and add to gallery + +**Theme structure:** +``` +my-theme/ +├── README.md +├── LICENSE +├── templates/ +│ ├── base.html +│ ├── __file.md.html +│ └── ... +├── styles/ +│ ├── base.css +│ └── ... +├── screenshots/ +│ └── preview.png +└── example-content/ (optional) + └── ... +``` + +--- + +## Using a Theme + +### Installation + +1. **Download theme** (clone or download ZIP) +2. **Copy to your project:** + ```bash + cp -r theme-name/templates my-site/templates + cp -r theme-name/styles my-site/styles + ``` +3. **Configure paths** in `config.toml`: + ```toml + [paths] + templates_dir = "/path/to/my-site/templates" + styles_dir = "/path/to/my-site/styles" + ``` +4. **Test:** + ```bash + python main.py --config config.toml + ``` + +### Customization + +Themes are starting points. Make them your own! + +**Easy customizations:** +- Change colors in CSS +- Modify fonts +- Adjust spacing and sizing +- Replace logo/branding +- Update footer text + +**Advanced customizations:** +- Modify templates +- Add new template variants +- Change layout structure +- Add custom helper functions +- Integrate JavaScript libraries + +**Best practice:** Keep original theme in git so you can track your changes. + +--- + +## Theme Development + +Want to create your own theme? + +### Theme Checklist + +A complete theme should include: + +**Required Templates:** +- [ ] `base.html` - Main page wrapper +- [ ] `__file.md.html` - Markdown file display +- [ ] `__folder.md.html` - Folder index for documents +- [ ] `__error.html` - Error pages + +**Optional but Recommended:** +- [ ] `index.html` - Custom homepage +- [ ] `__folder.image.html` - Photo galleries +- [ ] `__file.document.html` - Document-specific layout + +**Styles:** +- [ ] `base.css` - Base styles, always loaded +- [ ] `__file.md.css` - Markdown file styles +- [ ] `__folder.image.css` - Gallery styles +- [ ] Responsive design (mobile-friendly) + +**Documentation:** +- [ ] README with installation instructions +- [ ] Screenshot or demo +- [ ] List of features +- [ ] Customization guide +- [ ] License (MIT recommended) + +### Design Guidelines + +**For consistency and usability:** + +1. **Mobile-first** - Design for small screens first +2. **Accessible** - Follow WCAG guidelines +3. **Fast** - Minimize CSS, optimize images +4. **Semantic HTML** - Use proper elements +5. **Print-friendly** - Consider print stylesheets + +**Typography:** +- Readable font sizes (16px+ for body) +- Good line height (1.5+) +- Proper contrast ratios +- System fonts or fast-loading web fonts + +**Colors:** +- Consistent color palette +- Sufficient contrast +- Dark mode consideration (optional) + +**Layout:** +- Clear visual hierarchy +- Consistent spacing +- Responsive breakpoints +- Touch-friendly (44px+ tap targets) + +### Testing Your Theme + +Before sharing, test with: + +- **Various content types** - Markdown, images, mixed +- **Different structures** - Flat vs. deep hierarchies +- **Edge cases** - Long titles, no metadata, many tags +- **Devices** - Mobile, tablet, desktop +- **Browsers** - Chrome, Firefox, Safari + +### Inspiration + +Look at themes from other static site generators: + +- Jekyll themes +- Hugo themes +- 11ty themes +- Gatsby themes + +Adapt patterns (don't copy code) to Foldsite's template system. + +--- + +## Coming Soon + +**Future theme additions:** + +- **Minimal Blog** - Ultra-simple, typography-focused +- **Photo Portfolio** - Full-screen galleries, minimal UI +- **Magazine** - Multi-column, content-rich +- **Landing Page** - Single-page, marketing-focused +- **Academic** - Papers, publications, research-focused + +Want to help create these? See [Develop Foldsite](develop/). + +--- + +## Theme Showcase + +*Once community themes are available, this section will showcase screenshots and live demos.* + +--- + +## Frequently Asked Questions + +**Q: Are themes free?** +A: Yes! All themes in the official gallery are free and open source. + +**Q: Can I sell themes I create?** +A: The themes themselves must be open source if listed here, but you could offer customization services commercially. + +**Q: Do themes work with all Foldsite versions?** +A: Themes should specify compatible versions. Most work across versions unless core template system changes. + +**Q: Can I request a specific theme?** +A: Open an issue with "Theme Request" label. No guarantees, but community might help! + +**Q: How do I update a theme?** +A: If you've customized it, manually merge changes. Otherwise, re-download and replace. + +**Q: Can I mix themes?** +A: Yes! Take templates from different themes. Just ensure styles don't conflict. + +--- + +## Contributing + +Help grow the theme ecosystem: + +- **Create themes** - Share your designs +- **Improve docs** - Help others use themes +- **Test themes** - Report issues +- **Showcase sites** - Inspire others + +See [Develop Foldsite](develop/) for contribution guidelines. + +--- + +## Support + +Need help with themes? + +- **[Support](support.md)** - Get help +- **[Templates Guide](templates/)** - Learn the system +- **[Recipes](recipes/)** - See examples +- **GitHub Issues** - Report theme bugs + +--- + +*This gallery is just getting started. As the Foldsite community grows, expect many more themes! Consider contributing the first one!* diff --git a/docs/styles/__file.document.css b/docs/styles/__file.document.css new file mode 100644 index 0000000..7985739 --- /dev/null +++ b/docs/styles/__file.document.css @@ -0,0 +1,266 @@ +/* Document Layout - For documentation/blog post pages */ +/* Based on reference_post.html design */ + +:root { + /* Document-specific spacing */ + --document-margin-x: 120px; + --document-max-width: 1200px; +} + +/* Main content wrapper for document pages */ +.document-layout { + /* max-width: var(--document-max-width); */ + margin: 0 auto; + padding: var(--spacing-exp-7) var(--document-margin-x); + box-sizing: border-box; +} + +.document { + display: flex; + flex-direction: row; + height: 100vh; +} + +.document-header-holder { + display: flex; + height: 70vh; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + /* text-align: end; */ +} + +/* Document header with metadata */ +.document-header { + margin-bottom: var(--spacing-exp-6); + max-width: 15%; +} + +.document-metadata { + font-family: var(--fontFamily-mono); + font-size: var(--fontSize-small); + color: var(--swatch-4); + margin-bottom: var(--spacing-2); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.document-title { + font-size: 3.8rem; + font-weight: 420; + line-height: 1; + margin: var(--spacing-2) 0; + letter-spacing: -0.02em; +} + +.document-subtitle { + font-size: 1.6rem; + font-weight: 500; + color: var(--swatch-2); + line-height: var(--lineHeight-default); + margin-top: var(--spacing-1); +} + +/* Document content area */ + +.document-quick-tips { + font-size: 1rem; + font-weight: 500; + color: var(--swatch-2); + line-height: var(--lineHeight-default); + margin-top: var(--spacing-1); +} + +.document-content-wrapper { + flex-grow: 2; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + flex-wrap: nowrap; + overflow-y: auto; + margin-left: 1vw; + margin-right: 1vw; +} + +.document-content { + font-size: var(--fontSize-default); + line-height: var(--lineHeight-default); + width: fit-content; + padding-bottom: var(--spacing-exp-7); +} + +.document-content > * + * { + margin-top: 1em; +} + +.document-content h1 { + font-size: 3.8rem; + width: fit-content; +} + +/* Section headers within document */ +.document-content h2 { + margin-top: var(--spacing-exp-6); + margin-bottom: var(--spacing-2); + font-size: 2.4rem; +} + +.document-content h3 { + margin-top: var(--spacing-exp-5); + margin-bottom: var(--spacing-1); + font-size: 1.8rem; +} + +.document-content h4 { + margin-top: var(--spacing-2); + margin-bottom: var(--spacing-1); + font-size: 1.3rem; +} + +/* Enhanced code blocks for documentation */ +.document-content pre { + margin: var(--spacing-2) 0; + background: var(--background-3); + border-radius: var(--border-radius-small); + overflow-x: auto; + max-width: 120ch; +} + +.document-content pre code { + font-family: var(--fontFamily-mono); + font-size: 0.95rem; + line-height: 1.6; +} + +/* Document-specific column layouts */ +.document-content .column-set { + margin: var(--spacing-exp-5) 0; +} + +/* Two-column code examples */ +.code-comparison { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-2); + margin: var(--spacing-2) 0; +} + +/* Callout boxes for notes/warnings */ +.callout { + padding: var(--spacing-2); + margin: var(--spacing-2) 0; + border-left: 3px solid var(--swatch-5); + background: var(--background-3); +} + +.callout.note { + border-left-color: var(--swatch-3); +} + +.callout.warning { + border-left-color: var(--swatch-1); + background: rgba(255, 200, 0, 0.1); +} + +/* Table of contents navigation */ +.document-toc { + position: sticky; + top: var(--spacing-2); + font-size: var(--fontSize-secondary); + padding: var(--spacing-2); + background: var(--background-3); + border-radius: var(--border-radius-small); +} + +.document-toc ul { + list-style: none; + padding-left: 0; +} + +.document-toc li { + margin: var(--spacing-half) 0; +} + +.document-toc a { + color: var(--swatch-2); + text-decoration: none; +} + +.document-toc a:hover { + color: var(--swatch-1); + text-decoration: underline; +} + +/* Footer navigation (prev/next) */ +.document-footer { + max-width: 15%; +} + +.document-footer-holder { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + height: 40vh; +} + +.document-nav-link { + display: flex; + flex-direction: column; + text-decoration: none; + color: var(--swatch-2); +} + +.document-nav-link:hover { + color: var(--swatch-1); +} + +.document-nav-label { + font-size: var(--fontSize-small); + font-family: var(--fontFamily-mono); + color: var(--swatch-4); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: var(--spacing-half); +} + +.document-nav-label-selected { + font-size: var(--fontSize-small); + font-family: var(--fontFamily-mono); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: var(--spacing-half); + color:rgb(236, 113, 42); +} + +.document-nav-title { + font-size: var(--fontSize-header); + font-weight: 500; +} + +/* Responsive adjustments */ +@media (max-width: 1024px) { + :root { + --document-margin-x: 60px; + } +} + +@media (max-width: 768px) { + :root { + --document-margin-x: var(--spacing-2); + } + + .document-title { + font-size: 2.5rem; + } + + .code-comparison { + grid-template-columns: 1fr; + } + + .document-footer { + flex-direction: column; + gap: var(--spacing-2); + } +} diff --git a/docs/styles/__file.md.css b/docs/styles/__file.md.css deleted file mode 100644 index ba72ea5..0000000 --- a/docs/styles/__file.md.css +++ /dev/null @@ -1,23 +0,0 @@ -article { - max-width: 800px; - margin: 0 auto; -} - -article h1, -article h2, -article h3, -article h4, -article h5, -article h6 { - margin-top: 1.5rem; -} - -article p { - margin: 1rem 0; -} - -article code { - background: var(--code-background-color); - padding: 0.2rem 0.4rem; - border-radius: 3px; -} \ No newline at end of file diff --git a/docs/styles/__folder.document.css b/docs/styles/__folder.document.css new file mode 100644 index 0000000..7985739 --- /dev/null +++ b/docs/styles/__folder.document.css @@ -0,0 +1,266 @@ +/* Document Layout - For documentation/blog post pages */ +/* Based on reference_post.html design */ + +:root { + /* Document-specific spacing */ + --document-margin-x: 120px; + --document-max-width: 1200px; +} + +/* Main content wrapper for document pages */ +.document-layout { + /* max-width: var(--document-max-width); */ + margin: 0 auto; + padding: var(--spacing-exp-7) var(--document-margin-x); + box-sizing: border-box; +} + +.document { + display: flex; + flex-direction: row; + height: 100vh; +} + +.document-header-holder { + display: flex; + height: 70vh; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + /* text-align: end; */ +} + +/* Document header with metadata */ +.document-header { + margin-bottom: var(--spacing-exp-6); + max-width: 15%; +} + +.document-metadata { + font-family: var(--fontFamily-mono); + font-size: var(--fontSize-small); + color: var(--swatch-4); + margin-bottom: var(--spacing-2); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.document-title { + font-size: 3.8rem; + font-weight: 420; + line-height: 1; + margin: var(--spacing-2) 0; + letter-spacing: -0.02em; +} + +.document-subtitle { + font-size: 1.6rem; + font-weight: 500; + color: var(--swatch-2); + line-height: var(--lineHeight-default); + margin-top: var(--spacing-1); +} + +/* Document content area */ + +.document-quick-tips { + font-size: 1rem; + font-weight: 500; + color: var(--swatch-2); + line-height: var(--lineHeight-default); + margin-top: var(--spacing-1); +} + +.document-content-wrapper { + flex-grow: 2; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + flex-wrap: nowrap; + overflow-y: auto; + margin-left: 1vw; + margin-right: 1vw; +} + +.document-content { + font-size: var(--fontSize-default); + line-height: var(--lineHeight-default); + width: fit-content; + padding-bottom: var(--spacing-exp-7); +} + +.document-content > * + * { + margin-top: 1em; +} + +.document-content h1 { + font-size: 3.8rem; + width: fit-content; +} + +/* Section headers within document */ +.document-content h2 { + margin-top: var(--spacing-exp-6); + margin-bottom: var(--spacing-2); + font-size: 2.4rem; +} + +.document-content h3 { + margin-top: var(--spacing-exp-5); + margin-bottom: var(--spacing-1); + font-size: 1.8rem; +} + +.document-content h4 { + margin-top: var(--spacing-2); + margin-bottom: var(--spacing-1); + font-size: 1.3rem; +} + +/* Enhanced code blocks for documentation */ +.document-content pre { + margin: var(--spacing-2) 0; + background: var(--background-3); + border-radius: var(--border-radius-small); + overflow-x: auto; + max-width: 120ch; +} + +.document-content pre code { + font-family: var(--fontFamily-mono); + font-size: 0.95rem; + line-height: 1.6; +} + +/* Document-specific column layouts */ +.document-content .column-set { + margin: var(--spacing-exp-5) 0; +} + +/* Two-column code examples */ +.code-comparison { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-2); + margin: var(--spacing-2) 0; +} + +/* Callout boxes for notes/warnings */ +.callout { + padding: var(--spacing-2); + margin: var(--spacing-2) 0; + border-left: 3px solid var(--swatch-5); + background: var(--background-3); +} + +.callout.note { + border-left-color: var(--swatch-3); +} + +.callout.warning { + border-left-color: var(--swatch-1); + background: rgba(255, 200, 0, 0.1); +} + +/* Table of contents navigation */ +.document-toc { + position: sticky; + top: var(--spacing-2); + font-size: var(--fontSize-secondary); + padding: var(--spacing-2); + background: var(--background-3); + border-radius: var(--border-radius-small); +} + +.document-toc ul { + list-style: none; + padding-left: 0; +} + +.document-toc li { + margin: var(--spacing-half) 0; +} + +.document-toc a { + color: var(--swatch-2); + text-decoration: none; +} + +.document-toc a:hover { + color: var(--swatch-1); + text-decoration: underline; +} + +/* Footer navigation (prev/next) */ +.document-footer { + max-width: 15%; +} + +.document-footer-holder { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + height: 40vh; +} + +.document-nav-link { + display: flex; + flex-direction: column; + text-decoration: none; + color: var(--swatch-2); +} + +.document-nav-link:hover { + color: var(--swatch-1); +} + +.document-nav-label { + font-size: var(--fontSize-small); + font-family: var(--fontFamily-mono); + color: var(--swatch-4); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: var(--spacing-half); +} + +.document-nav-label-selected { + font-size: var(--fontSize-small); + font-family: var(--fontFamily-mono); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: var(--spacing-half); + color:rgb(236, 113, 42); +} + +.document-nav-title { + font-size: var(--fontSize-header); + font-weight: 500; +} + +/* Responsive adjustments */ +@media (max-width: 1024px) { + :root { + --document-margin-x: 60px; + } +} + +@media (max-width: 768px) { + :root { + --document-margin-x: var(--spacing-2); + } + + .document-title { + font-size: 2.5rem; + } + + .code-comparison { + grid-template-columns: 1fr; + } + + .document-footer { + flex-direction: column; + gap: var(--spacing-2); + } +} diff --git a/docs/styles/base.css b/docs/styles/base.css index 91189e8..d9c3e98 100644 --- a/docs/styles/base.css +++ b/docs/styles/base.css @@ -1,280 +1,263 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ +/* Foldsite Documentation Base Styles */ +/* Design system extracted from reference designs */ -html, -body, -div, -span, -applet, -object, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; +:root { + /* Typography Scale */ + --fontSize-default: 14.5px; + --fontSize-small: 12px; + --fontSize-secondary: 13.5px; + --fontSize-header: 17px; + --fontSize-large: 22px; + --lineHeight-default: 1.65; + + /* Color Swatches - Primary opacity-based system */ + --swatch-1: rgba(0, 0, 0, 0.85); + --swatch-2: rgba(0, 0, 0, 0.75); + --swatch-3: rgba(0, 0, 0, 0.6); + --swatch-4: rgba(0, 0, 0, 0.4); + --swatch-5: rgba(0, 0, 0, 0.25); + --swatch-6: rgba(0, 0, 0, 0.15); + + /* Base Colors */ + --color-default: rgba(0, 0, 0, 0.75); + --color-default-secondary: rgba(0, 0, 0, 0.4); + --background-1: #FAF9F6; + --background-2: #ffffff; + --background-3: #fcfcfc; + --background-force-dark: #111111; + + /* Spacing System - Consistent scale */ + --spacing-1: 15px; + --spacing-half: calc(15px * 0.5); + --spacing-2: calc(15px * 2); + --spacing-3: calc(15px * 3); + --spacing-4: calc(15px * 4); + + /* Exponential spacing for larger gaps */ + --spacing-exp-1: 5px; + --spacing-exp-half: calc(5px * 0.5); + --spacing-exp-2: calc(5px * 2); + --spacing-exp-3: calc(5px * 3); + --spacing-exp-4: calc(5px * 5); + --spacing-exp-5: calc(5px * 8); + --spacing-exp-6: calc(5px * 13); + --spacing-exp-7: calc(5px * 21); + --spacing-exp-8: calc(5px * 34); + + /* Typography */ + --fontFamily-default: 'Lekton', monospace; + --fontFamily-mono: "Lekton", monospace; + --fontFamily-display: 'Lekton', monospace; + --fontFamily-serif: 'Lekton', monospace; + + /* UI Elements */ + --border-radius-small: 5px; + --opacity-downstate-default: 0.7; + --ui-border: rgba(0, 0, 0, 0.14); } -/* HTML5 display-role reset for older browsers */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { - display: block; +/* Reset */ +*, *::before, *::after { + box-sizing: border-box; +} + +.doto-500 { + font-family: "Doto", sans-serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; + font-variation-settings: + "ROND" 0; +} + +.lekton-regular { + font-family: "Lekton", monospace; + font-weight: 400; + font-style: normal; +} + +.lekton-bold { + font-family: "Lekton", monospace; + font-weight: 700; + font-style: normal; +} + +.lekton-regular-italic { + font-family: "Lekton", monospace; + font-weight: 400; + font-style: italic; +} + +html { + overflow-anchor: none; + text-size-adjust: 100%; } body { + margin: 0; + padding: 0; + font-family: var(--fontFamily-default); + font-size: var(--fontSize-default); + line-height: var(--lineHeight-default); + color: var(--color-default); + background-color: var(--background-1); + text-rendering: optimizelegibility; + -webkit-font-smoothing: antialiased; + height: 100vh; + overflow: hidden; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + margin: 0; + font-weight: 500; + line-height: 1.2; + color: var(--swatch-1); + font-family: var(--fontFamily-display); +} + +h1 { + font-size: 3.8rem; + letter-spacing: -0.02em; + font-weight: 420; line-height: 1; } -ol, -ul { - list-style: none; +h2 { + font-size: 2.4rem; + letter-spacing: -0.01em; } -blockquote, -q { - quotes: none; +h3 { + font-size: 1.8rem; } -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ''; - content: none; +h4 { + font-size: 1.3rem; } -table { - border-collapse: collapse; - border-spacing: 0; -} - - - -@property --font-color { - syntax: "