107 lines
4.3 KiB
Markdown
107 lines
4.3 KiB
Markdown
# Design Specification: Sample 3 (Companion Layout)
|
|
|
|
**Status:** Ready for Handoff
|
|
**Target Page:** `companion.html`
|
|
**Layout Type:** 50/50 Split Screen (Reactive Desktop, Stacked Mobile)
|
|
**Theme Vibe:** Hyper-minimalist terminal utility, clean information hierarchy, zero animation noise.
|
|
|
|
---
|
|
|
|
## 1. Design Philosophy & Guidelines
|
|
|
|
This sample modifies the primary design spec by enforcing a strict **"interaction suppression"** policy. Dynamic decorations (such as border color transitions or card expansion effects) are completely disallowed. Contrast and active states are communicated solely through instantaneous typography color changes.
|
|
|
|
The key feature is a persistent digital companion on the right half of the screen. The companion must feel like a quiet terminal process rather than an active distraction.
|
|
|
|
---
|
|
|
|
## 2. Layout Geometry & Grid
|
|
|
|
The layout divides the viewport down the middle on desktop screens.
|
|
|
|
### Desktop Layout (Width > 768px)
|
|
- **Top Header:** Sticky `56px` navigation bar containing breadcrumbs/catalog links.
|
|
- **Split Container:** Spans 100% viewport width and 100% viewport height minus header (`height: calc(100vh - 56px)`).
|
|
- **Columns:**
|
|
- **Left Pane (50%):** Scrollable container. Houses a single-column list of project cards.
|
|
- **Right Pane (50%):** Fixed/non-scrollable container. Houses the centered ASCII companion terminal widget.
|
|
|
|
### Mobile Layout (Width <= 768px)
|
|
- The layout collapses into a single vertical stack.
|
|
- The ASCII companion pane moves to the top (fixed height: `300px`).
|
|
- The content pane follows below, scrollable within the main document window.
|
|
|
|
---
|
|
|
|
## 3. Color Palette & Typography
|
|
|
|
### Base Colors
|
|
- **Canvas Background:** `#0d0f12` (Deep charcoal slate)
|
|
- **Surface Background:** `#121417` (Slightly lighter dark surface)
|
|
- **Static Borders:** `#2b303b` (1px solid, low contrast)
|
|
- **Primary Text:** `#e0e6f0` (Off-white prose)
|
|
- **Muted Text:** `#8a95a5` (Timestamp / status information)
|
|
- **Active Accent:** `#00f0ff` (High-contrast Cyan)
|
|
|
|
### Typography
|
|
- **UI & ASCII Content:** Monospace (`JetBrains Mono` or `IBM Plex Mono`).
|
|
- **Prose Content:** Sans-serif (`Inter` or `Geist Sans`) for high readability.
|
|
|
|
---
|
|
|
|
## 4. Content Cards (Left Column)
|
|
|
|
Each card is a clean, structural text panel.
|
|
|
|
### Structure
|
|
- 1px static border (`#2b303b`) with `4px` border-radius.
|
|
- No background color (inherits Canvas background) or a solid `#121417` surface background.
|
|
- Elements:
|
|
1. **Header (`h3`):** Monospaced, bold, `#e0e6f0`.
|
|
2. **Description (`p`):** Sans-serif, `#8a95a5`, capped at `65ch` length.
|
|
|
|
### Interactions (Ultra-Minimal)
|
|
- **No Border Shifts:** Borders must remain `#2b303b` at all times.
|
|
- **No Translation:** Hovering must not scale, shift, or offset the card.
|
|
- **Instant Typography Snap:** Hovering or focusing the card snaps the text color of the Header (`h3`) from `#e0e6f0` to Cyan (`#00f0ff`) instantly.
|
|
- **CSS Rule:** Use `transition: none;` on all hover effects.
|
|
|
|
---
|
|
|
|
## 5. ASCII Companion (Right Column)
|
|
|
|
The companion is rendered as block-level ASCII text inside a simulated terminal panel.
|
|
|
|
### Layout Widget
|
|
- Sits centered in the right pane.
|
|
- Styled to resemble a terminal output terminal: card box with a tab bar indicating the daemon name `sys-daemon`.
|
|
|
|
### Animation & States
|
|
The companion has two interactive states:
|
|
|
|
#### State 1: IDLE
|
|
- **Mascot Art:**
|
|
```text
|
|
/\___/\
|
|
( o o ) sys-daemon
|
|
( =^= ) STATUS: IDLE
|
|
\__*__/ LOG: awaiting input█
|
|
```
|
|
- **Animation:** The terminal block cursor (`█`) blinks continuously at 1Hz (`opacity: 0` to `1` instantly). The rest of the mascot is static.
|
|
|
|
#### State 2: READING (Triggered on Card Hover)
|
|
- **Mascot Art:**
|
|
```text
|
|
/\___/\
|
|
( - - ) sys-daemon
|
|
( =o= ) STATUS: READING
|
|
\__*__/ LOG: reading module_
|
|
```
|
|
- **Reaction Log:** Underneath the mascot, a mini status output log updates to display the title of the card currently hovered. For example:
|
|
`[sys-daemon] target: /dev/mesh-mesh-topology-builder`
|
|
|
|
### Behavior Scripting Rules
|
|
- Attach `mouseenter` and `mouseleave` event listeners to the cards in the left pane.
|
|
- On hover, swap the inner HTML of the ASCII container to the `READING` frame and append the card's target name to the log output.
|
|
- Revert back to the `IDLE` frame immediately when the cursor leaves the card.
|