Rustelo/docs/logo-template.md

# 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](logos/rustelo-imag.svg) **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
[![RUSTELO](https://img.shields.io/badge/RUSTELO-Framework-red?logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJMMTMuMDkgOC4yNkwyMCA5TDEzLjA5IDE1Ljc0TDEyIDIyTDEwLjkxIDE1Ljc0TDQgOUwxMC45MSA4LjI2TDEyIDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K)](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.