2f0f807331
- Add complete dark mode system with theme context and toggle - Implement dark mode toggle component in navigation menu - Add client-side routing with SSR-safe signal handling - Fix language selector styling for better dark mode compatibility - Add documentation system with mdBook integration - Improve navigation menu with proper external/internal link handling - Add comprehensive project documentation and configuration - Enhance theme system with localStorage persistence - Fix arena panic issues during server-side rendering - Add proper TypeScript configuration and build optimizations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
232 lines
5.6 KiB
Markdown
232 lines
5.6 KiB
Markdown
# Logo Template for Markdown Documentation
|
|
|
|
This template provides examples for adding RUSTELO logos to your markdown documentation files.
|
|
|
|
## Header Logo (Recommended)
|
|
|
|
```markdown
|
|
<div align="center">
|
|
<img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="300" />
|
|
|
|
# Your Page Title
|
|
</div>
|
|
```
|
|
|
|
## Alternative Header Sizes
|
|
|
|
### Large Header (400px)
|
|
```markdown
|
|
<div align="center">
|
|
<img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="400" />
|
|
|
|
# Your Page Title
|
|
</div>
|
|
```
|
|
|
|
### Medium Header (250px)
|
|
```markdown
|
|
<div align="center">
|
|
<img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="250" />
|
|
|
|
# Your Page Title
|
|
</div>
|
|
```
|
|
|
|
### Small Header (200px)
|
|
```markdown
|
|
<div align="center">
|
|
<img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="200" />
|
|
|
|
# Your Page Title
|
|
</div>
|
|
```
|
|
|
|
## Inline Logo Usage
|
|
|
|
### Small Inline Logo
|
|
```markdown
|
|
 **RUSTELO** - Your content here
|
|
```
|
|
|
|
### Medium Inline Logo
|
|
```markdown
|
|
<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="24" height="24" style="vertical-align: middle;" /> **RUSTELO** - Your content here
|
|
```
|
|
|
|
## Logo Variations by Context
|
|
|
|
### For Light Backgrounds
|
|
```markdown
|
|
<!-- Use standard logos -->
|
|
<img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="300" />
|
|
<img src="logos/rustelo_dev-logo-v.svg" alt="RUSTELO" width="200" />
|
|
<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="100" />
|
|
```
|
|
|
|
### For Dark Backgrounds
|
|
```markdown
|
|
<!-- Use dark theme logos -->
|
|
<img src="logos/rustelo_dev-logo-b-h.svg" alt="RUSTELO" width="300" />
|
|
<img src="logos/rustelo_dev-logo-b-v.svg" alt="RUSTELO" width="200" />
|
|
<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="100" />
|
|
```
|
|
|
|
## mdBook Specific (Documentation)
|
|
|
|
### For mdBook Pages
|
|
```markdown
|
|
<div align="center">
|
|
<img src="../logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="400" />
|
|
</div>
|
|
|
|
# Welcome to Rustelo
|
|
```
|
|
|
|
### For mdBook Sections
|
|
```markdown
|
|
<div align="center">
|
|
<img src="../logos/rustelo_dev-logo-v.svg" alt="RUSTELO" width="200" />
|
|
</div>
|
|
|
|
## Section Title
|
|
```
|
|
|
|
## README.md Specific
|
|
|
|
### Main README Header
|
|
```markdown
|
|
<div align="center">
|
|
<img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="300" />
|
|
|
|
# Rustelo - Modular Rust Web Application Template
|
|
</div>
|
|
```
|
|
|
|
### Feature Section
|
|
```markdown
|
|
## Features
|
|
|
|
<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="32" height="32" style="vertical-align: middle;" /> **Feature Name** - Description of the feature
|
|
```
|
|
|
|
## GitHub Specific
|
|
|
|
### Issues Template
|
|
```markdown
|
|
<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="24" height="24" /> **Issue Title**
|
|
```
|
|
|
|
### Pull Request Template
|
|
```markdown
|
|
<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="24" height="24" /> **Pull Request Title**
|
|
```
|
|
|
|
## Responsive Logo (HTML)
|
|
|
|
### Responsive with CSS
|
|
```html
|
|
<div align="center">
|
|
<img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" style="max-width: 100%; height: auto; width: 300px;" />
|
|
|
|
<h1>Your Page Title</h1>
|
|
</div>
|
|
```
|
|
|
|
### Mobile-Friendly
|
|
```html
|
|
<div align="center">
|
|
<picture>
|
|
<source media="(max-width: 768px)" srcset="logos/rustelo_dev-logo-v.svg">
|
|
<img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" style="max-width: 100%; height: auto; width: 300px;" />
|
|
</picture>
|
|
|
|
<h1>Your Page Title</h1>
|
|
</div>
|
|
```
|
|
|
|
## Badge-Style Usage
|
|
|
|
### With Shields.io Style
|
|
```markdown
|
|
[](https://rustelo.dev)
|
|
```
|
|
|
|
## Copy-Paste Templates
|
|
|
|
### Basic Header Template
|
|
```markdown
|
|
<div align="center">
|
|
<img src="logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="300" />
|
|
|
|
# [PAGE_TITLE]
|
|
</div>
|
|
|
|
[PAGE_DESCRIPTION]
|
|
```
|
|
|
|
### Documentation Page Template
|
|
```markdown
|
|
<div align="center">
|
|
<img src="../logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="400" />
|
|
</div>
|
|
|
|
# [PAGE_TITLE]
|
|
|
|
[PAGE_CONTENT]
|
|
```
|
|
|
|
### Feature Page Template
|
|
```markdown
|
|
# [FEATURE_NAME]
|
|
|
|
<img src="logos/rustelo-imag.svg" alt="RUSTELO" width="32" height="32" style="vertical-align: middle;" /> This feature is part of the **RUSTELO** framework.
|
|
|
|
[FEATURE_DESCRIPTION]
|
|
```
|
|
|
|
## Usage Guidelines
|
|
|
|
### DO
|
|
- ✅ Use `alt="RUSTELO"` for accessibility
|
|
- ✅ Specify width for consistent sizing
|
|
- ✅ Use appropriate logo variant for theme
|
|
- ✅ Center align for headers
|
|
- ✅ Use relative paths when possible
|
|
|
|
### DON'T
|
|
- ❌ Stretch or distort logo proportions
|
|
- ❌ Use extremely small sizes (< 100px for headers)
|
|
- ❌ Mix light and dark logo variants
|
|
- ❌ Use logos without alt text
|
|
- ❌ Hardcode absolute URLs unless necessary
|
|
|
|
## Path References
|
|
|
|
### Local Development
|
|
```
|
|
logos/rustelo_dev-logo-h.svg # From root directory
|
|
../logos/rustelo_dev-logo-h.svg # From subdirectory
|
|
```
|
|
|
|
### GitHub Raw URLs
|
|
```
|
|
logos/rustelo_dev-logo-h.svg
|
|
```
|
|
|
|
### CDN URLs (if using CDN)
|
|
```
|
|
https://cdn.rustelo.dev/logos/rustelo_dev-logo-h.svg
|
|
```
|
|
|
|
## Logo Selection Guide
|
|
|
|
| Context | Logo File | Size | Notes |
|
|
|---------|-----------|------|-------|
|
|
| README header | `rustelo_dev-logo-h.svg` | 300px | Primary branding |
|
|
| Documentation header | `rustelo_dev-logo-h.svg` | 400px | Large, readable |
|
|
| Section headers | `rustelo_dev-logo-v.svg` | 200px | Vertical space |
|
|
| Inline mentions | `rustelo-imag.svg` | 24-32px | Icon only |
|
|
| Dark themes | `rustelo_dev-logo-b-h.svg` | 300px | Dark variant |
|
|
| Favicons | `rustelo-imag.svg` | 32px | Icon only |
|
|
|
|
Remember to always use the name "RUSTELO" in uppercase when referencing the project name in text. |