Detached layout
The shell floats on the page ground with a gap around it. Everything is the same shape, just lifted off the background — some buyers want the lighter feel, some find it restless.
Cash at bank
$284,310.55
+4.1%
across 3 accounts
Income · YTD
$629,050.00
+18.2%
vs 532,100 last year
Expenses · YTD
$607,000.00
+9.6%
vs 524,236 last year
Net profit · YTD
$22,050.00
3.5% margin
before tax
How to use it
Every layout is a template in src/templates/layouts/. A page chooses one on its first line and changes nothing else:
{% extends "layouts/detached.njk" %}
The page content below is identical to the dashboard's. Nothing in it knows which shell it is sitting in, which is the point — you can change the shell for the whole product by changing one line in each page, or by pointing base.njk somewhere else.