AmiBlue.css 🕹️

AmiBlue.css is a lightweight, retro-themed CSS library that recreates the iconic aesthetic of the Amiga Workbench 1.3 ("Old Blue"). Designed for fans of 16-bit computing and vintage UI, it provides a set of classes to build "windows," "icons," and "workbenches" directly in the browser.

🔗 Live Demo: AmiBlue Demo

📸 Screenshot

---

🚀 Quick Start

1. Download amiblue.css and include it in your project:

<link rel="stylesheet" href="amiblue.css">

2. Structure your HTML using the ami- prefix:

<div class="ami-window">
    <div class="ami-header">
        <span>Workbench</span>
        <div class="ami-btn-close"></div>
    </div>
    <div class="ami-content">
        <p>Welcome to AmiBlue.css</p>
        <button class="ami-button">OK</button>
    </div>
</div>

---

🎨 Design Principles

• High Contrast: Strict adherence to the classic Blue (#0055aa), White (#ffffff), and Orange (#ff8800) palette.
• Hard Shadows: No gradients, no blurs. All depth is achieved through 1px and 2px solid offsets.
• Pixel-Perfect: Uses image-rendering: pixelated to maintain sharp edges on low-res assets.
• Typography: Optimized for monospaced fonts (Courier New or Topaz-8).

---

🛠️ Components

Class	Description
.ami-top-bar	The system-wide info bar at the top of the screen.
.ami-window	The main container with a white border and black hard shadow.
.ami-header	The inverted title bar for windows.
.ami-button	Retro-styled interactive buttons with "click-down" state.
.ami-icon-box	A pixel-art style container for desktop icons.

---

📂 Repository Structure

• /css: Contains the core amiblue.css file.
• /examples: Sample .html files showing a full desktop reconstruction.
• /assets: Recommended fonts (Topaz-8) and cursor images.

---

🔗 Connect with me

• Website: dv.com.tr
• GitHub: @makalin
• LinkedIn: In/makalin
• X: @makalin

License

MIT License. Feel free to use this for your retro projects!