diff options
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/frame-font-preview.html | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/examples/frame-font-preview.html b/examples/frame-font-preview.html new file mode 100644 index 0000000..fb148ab --- /dev/null +++ b/examples/frame-font-preview.html @@ -0,0 +1,43 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>Design Language Preview</title> + <link rel="stylesheet" href="../css/starsector-dark.frame-font.css" /> + <style> + body { + margin: 0; + padding: 2rem; + } + .stack { + display: grid; + gap: 0.75rem; + max-width: 960px; + } + .swarm-frame, + .swarm-surface, + .swarm-surface-elevated, + .swarm-frame-header { + padding: 0.75rem 0.9rem; + } + .label { + opacity: 0.9; + font-size: 0.95rem; + } + .mono { + margin-top: 0.5rem; + } + </style> + </head> + <body> + <div class="stack"> + <div class="swarm-frame-header">Frame Header</div> + <div class="swarm-frame"> + <div class="label">Frame Surface</div> + <div class="mono swarm-font-mono">SHA: deadbeefcafefade</div> + </div> + <div class="swarm-surface-elevated">Elevated Surface</div> + </div> + </body> +</html> |