` would replace this rule outright, and would wrap on narrow
screens, which this doesn't.
- COMPLIANCE: every value here is raw. `10px` and `15px` aren't on the modular
scale (`--s-1` and `--s0` are the neighbours), `1px` ignores `--border-thin`,
and `#000` isn't in the palette at all — the app's black is `--color-black`
(`#101827`). Four hardcoded values in six declarations.
- COMPLIANCE: no custom properties, so nothing can be varied per widget.
- The card already carries `data-status="<%= widget.cache_status %>"`, and
nothing styles it. That attribute is exactly the `[data-…]` selector hook the
README recommends, so a stale or errored widget could be shown as such
without adding a class — currently cache status is invisible to the user.
- The container element has both `id="dashboard-widgets"` and
`class="dashboard-widgets"`. Per the README's ID guidance the class is the
one to style against; the id is presumably a JS handle, though the controller
should use a Stimulus target instead.
@example
```
```
@states
None in CSS. `data-status` is present in the markup but unstyled — see above.
@variants
No variants at this time.
*/
/* should use the Grid component instead */
.dashboard-widgets {
display: flex;
gap: 10px;
}
.dashboard-widget {
border: 1px solid #000;
padding: 15px;
}
/*
Account Nav
@description
Link colors for the top account nav and the horizontal inset of the account
nav list.
@note
- COMPLIANCE: ID selectors for what is nav styling. Page-level layout is the one
place the README permits IDs, and a top nav arguably qualifies — but
`a.active` and the muted-link handling are component concerns that belong with
tabs.
@example
```
- <%= link_to "Clusters", account_path(@account) %>
```
@states
.active - on a link in the top account nav; recolors it to `--link-color`.
Note the live `#account-nav` list takes its active styling from
`components/tabs.css` instead, which puts `.active` on the `
`.
@variants
No variants.
*/
ul#account-nav {
padding: 0 var(--s4) 0 calc(var(--s4) - var(--s-4));
}
@media screen and (min-width: 425px) {
#account-nav > li:first-child a {
padding-left: var(--s-5);
}
}
/*
Cluster Operations
@description
Two rules serving a single page: the auto-refreshing operations view at
`app/views/pods/operations.html.erb`. Each section on that page gets a thin
vertical bar pinned to its right edge, which shrinks top-to-bottom as the
10-second refresh interval elapses. The `cluster-operations` Stimulus
controller sets the bar's height on a 200ms tick.
@note
- ANTIPATTERN — DO NOT REPEAT THIS FOR SUBSEQUENT LAYOUTS. This file exists as
a record of what not to do. Three separate rules are broken:
1. CSS is doing layout that a layout element should do.
`.cluster-operations-section` exists only to supply `position: relative`
as a containing block for the absolutely-positioned bar. That is a
layout concern, and should be applied as a class utility or a style on an id element.
2. The class names are DOM query hooks, not styles.
`cluster_operations_controller.js:133` does
`section.querySelector(".cluster-operations-progress-bar")` to find the
element it animates. This should be a Stimulus target, not a CSS class.
A CSS class is a styling contract; using it as a JS
selector negates the reason we chose Stimulus with its target-based approach to have minute control over elements and built-in lifecycle callbacks for change events.
3. Single-use styling belongs on an ID, not in a CSS class.
Before adding a file like this, check whether something already covers it —
`components/meter.css` is the app's existing progress indicator, though it is
horizontal and would need a vertical mode.
@example
```
```
@states
None. The bar's height is set inline by the controller, not by a state class.
@variants
No variants at this time, and none should be added — see the note above.
*/
/* Section wrapper — needed for the absolutely-positioned refresh bar */
.cluster-operations-section {
position: relative;
}
/* 2px vertical bar pinned to the right edge, shrinks top-to-bottom over 10 s */
.cluster-operations-progress-bar {
position: absolute;
top: 0;
right: 0;
width: var(--border-thin);
height: 100%;
background: var(--color-grey-light);
transition: height 0.18s linear;
pointer-events: none;
}
/*
Diagnose Layout
@description
The two-pane diagnose screen: a fixed-width scrolling sidebar listing query
fingerprints, with pill-style tab groups for filtering, beside an explorer pane
with a sticky header.
@note
- Caller: `app/views/diagnose/frame.html.erb`, which mounts the `diagnose` and
`fill-height` controllers on the sidebar.
- COMPLIANCE: this file uses BEM (`__element`, `--modifier`) and is the only
place in the app that does. It was generated with Claude Code before styleguide
documentation was put in place. Treat this file as an ANTI-PATTERN. The layout
and UI of app/views/diagnose/frame.html.erb needs to be re-designed.
@example
```
```
@states
.diagnose-sidebar__item--selected - the fingerprint currently open in the
explorer; adds a left accent border
.active - on a tab ``; fills the pill
@variants
No variants.
*/
.diagnose-layout {
align-items: flex-start;
}
.diagnose-sidebar {
width: 320px;
overflow-y: auto;
}
.diagnose-sidebar__item {
padding: var(--s-1) var(--s0);
border-bottom: var(--border-thin) solid var(--color-lightish);
}
.diagnose-sidebar__item--selected {
border-left: 3px solid var(--color-info);
}
.diagnose-sidebar__item-title {
justify-content: space-between;
gap: var(--s-1);
margin-bottom: var(--s-3);
min-width: 0;
}
.diagnose-sidebar__fingerprint {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.diagnose-sidebar__meta {
font-size: 0.8em;
}
.diagnose-sidebar__tabs {
list-style: none;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-evenly;
flex: 1;
}
.diagnose-sidebar__tabs-group {
display: flex;
align-items: center;
gap: var(--s-1);
margin-bottom: var(--s-1);
}
.diagnose-sidebar__tabs-label {
font-size: 0.7em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-grey);
white-space: nowrap;
flex-shrink: 0;
}
.diagnose-sidebar__tabs > li {
flex-shrink: 0;
text-align: center;
}
.diagnose-sidebar__tabs > li > a {
display: block;
padding: var(--s-2);
border-radius: 999px;
font-size: 0.85em;
font-weight: 500;
color: var(--color-darkish);
text-decoration: none;
transition: background 120ms ease, color 120ms ease;
}
.diagnose-sidebar__tabs > li > a:hover,
.diagnose-sidebar__tabs > li > a:focus {
color: var(--color-dark);
background: var(--color-lightish);
}
.diagnose-sidebar__tabs > li.active > a {
background: var(--color-lightish);
color: var(--color-dark);
}
.diagnose-explorer {
border-left: var(--border-thin) solid var(--color-lightish);
}
.diagnose-explorer__header {
padding: var(--s0) var(--s1);
border-bottom: var(--border-thin) solid var(--color-lightish);
background: var(--background-color);
z-index: 1;
}
.diagnose-explorer__fingerprint {
display: block;
font-size: 1.1em;
font-weight: 600;
margin-bottom: var(--s-3);
}
.diagnose-explorer__raw-fingerprint {
display: block;
font-size: 0.8em;
word-break: break-all;
margin-bottom: var(--s-2);
}
.diagnose-explorer__body {
gap: var(--s1);
overflow: hidden;
}
.diagnose-explorer__col {
min-width: 0;
}
.diagnose-explorer__divider {
width: var(--border-thin);
background: var(--color-lightish);
}
.diagnose-explorer__empty {
padding: 10em var(--s2);
text-align: center;
}
.diagnose-explorer__empty i {
margin-bottom: var(--s1);
display: block;
}
.diagnose-explorer__empty-title {
font-weight: 600;
}
@keyframes diagnose-shimmer {
from {
opacity: 1;
}
to {
opacity: 0.4;
}
}
.diagnose-skeleton__block {
background: var(--color-lightish);
border-radius: var(--border-radius);
animation: diagnose-shimmer 900ms ease-in-out infinite alternate;
}
/*
Logs Layout
@description
The scroll container, sticky header and floating footer for the cluster log
viewer: a fixed-height pane that scrolls internally, with the column headers
pinned to the top and controls floating over the bottom-right corner.
@reference
- Behavior: `app/javascript/controllers/logs_controller.js`
- Markup: `app/views/clusters/logs.html.erb`
@note
- One caller: `app/views/clusters/logs.html.erb`.
- This layout is half of a pair with the `logs` Stimulus controller, which does
all of the state changing. `data-controller="logs"` sits on a wrapper above
`#logs-wrapper`; the wrapper itself is the controller's `logsWrapper` target.
The controller opens a Nespr websocket, renders each request as a table row,
indexes rows in a crossfilter to surface slow requests, and pauses the socket
after five minutes idle.
- The one class in this file the controller touches is `.position\:fixed-full`.
`expand()` adds it — along with `.border-radius\:0` — and `compress()` removes
both; Escape also collapses. Note that both of those are utilities
(`utilities.css:693` and `:736`), and what this file contributes is the
page-specific extra on top: releasing the `80vh` cap so the expanded pane can
fill the viewport. Change the utility and the expanded view changes with it.
- Everything else the controller toggles is a utility class, not a rule from
here: `display:none` to swap the normal and slow tables, `visibility:hidden`
on the idle label, `color:bright` / `color:muted` on the slow-requests button.
That is the README's preferred pattern — the controller toggles classes rather
than writing inline styles — so don't be surprised that most of this page's
visual states aren't in this file.
- Row cells are cloned from a `` and filled by `renderRow`, which finds
them with `querySelector(".rowTemplate-timestamp")` and friends. Those classes
are JS query hooks with no styling anywhere, which the README asks us to avoid
in favour of targets. Don't add styles to them; if the row needs styling, style
the cells.
- Response-code colors are generated in the controller as `color:success`,
`color:warning`, `color:error` and `color:muted` utility strings
(`statusIndicator`), so that palette decision lives in JS, not here.
- CAUTION: `#logs-table` and `#logs-header` each appear TWICE in the view — once
for the live table and once for the slow-requests table. Duplicate IDs are
invalid HTML, and the only reason the transparent-background remap reaches both
tables is that CSS applies an ID selector to every matching element even though
`getElementById` would return only the first. The controller sidesteps the
problem by distinguishing them as `table` and `slowTable` targets. If these
selectors are ever converted to classes, the class has to go on both.
- `#logs-header` at (1,0,0) outranks the `bg:transparent` utility the view puts on
the same element, so that class is inert and the `#101827db` below is what
renders.
- The sticky header's `top: calc(-1 * var(--s0))` cancels the padding of the
wrapping box so the header sits flush; it is coupled to that box's `--s0`
padding and will drift if the wrapper changes.
- COMPLIANCE: `background-color: #101827db` is a hex literal with alpha. The
opaque form is the `--color-black` token; there is no alpha variant, which is
the same gap that forced hardcoded rgba in `components/pulsing_dot.css`.
`color-mix()` would let this reference the token.
- COMPLIANCE: `80vh` twice as both min and max height is a raw value pinning the
pane to viewport height. `#logs-wrapper.position\:fixed-full` then unsets it —
that class is a utility being used as a state hook, toggled for a full-screen
log view.
- IDs throughout, which the README allows for page layout. This is one of the
clearer cases: five unique regions of one page, none reusable.
@example
```
```
@states
.position:fixed-full - on the wrapper; releases the height cap and fixes the
pane to the viewport for a full-screen view
@variants
No variants.
*/
#logs-table {
--table-background-color: transparent;
--table-header-background-color: transparent;
}
#logs-wrapper {
min-height: 80vh;
max-height: 80vh;
overflow: scroll;
position: relative;
}
#logs-header {
background-color: #101827db;
position: sticky;
top: calc(-1 * var(--s0));
}
#logs-wrapper.position\:fixed-full {
max-height: unset;
position: fixed;
}
#logs-footer {
position: fixed;
bottom: var(--s5);
right: var(--s5);
}
/*
Queries Layout
@description
The split-pane layout for a cluster's query logs: a fixed-height row holding a scrolling
table on the left and a scrolling inspector on the right, so each side keeps its
own context instead of the whole page scrolling as one document.
@reference
- Markup: `app/views/queries/frame.html.erb`
- Height measurement: `app/javascript/controllers/query_log_controller.js`
@note
- ANTI-PATTERN: this should be expressed with `every_layout` primitives and
utilities rather than three bespoke ID rules. A Sidebar or Grid handles the
split, and the two panes need little more than an overflow utility. The
remaining genuinely custom part is the height calculation.
- Improvement, partly done already: the height comes from
`calc(100dvh - var(--top-offset, 220px))`, and the `220px` is only a pre-JS
fallback. `query_log_controller.js:52` measures the header's real distance from
the top of the viewport and writes `--top-offset`, so the pane sizes itself
correctly once the controller connects. The inline comment below saying
"improvement would be to do this programmatically" is stale — that work landed.
- The same `--top-offset` technique is implemented twice:
`query_log_controller.js` and `fill_height_controller.js` both measure and set
it. `fill-height` is the general-purpose one, so the reusable Stimulus component
the old note asked for already exists — the queries controller could delegate to
it instead of repeating the measurement.
- No state classes: nothing toggles a class on these panes. The only thing that
changes at runtime is the `--top-offset` value, written as an inline custom
property by the controller.
- `min-width: 0` on both panes is load-bearing, not decoration. Flex items default
to `min-width: auto`, which refuses to shrink below their content — without this
a wide table would push the inspector off screen instead of scrolling inside its
own pane.
- COMPLIANCE: three ID selectors. Page-level layout is where the README permits
IDs, and this is one page, so it passes — but see the anti-pattern note: with
primitives doing the split, two of the three rules would not need to exist.
@example
```
```
@states
None.
@variants
No variants.
*/
#query-log-layout {
/* 220px is about the height of the header element. Improvement would be to do this programmatically */
height: calc(100dvh - var(--top-offset, 220px));
overflow: hidden;
}
#query-log-table {
min-width: 0;
overflow-y: auto;
}
#query-log-inspector {
min-width: 0;
overflow-y: auto;
}
/*
Searchscape Layout
@description
A layout for a searchscape layout, which was the first major feature
added to Sprout besides custom vault provisioning that explored the OODA loop
mechanics of managing a search query, its judgements and scoring, and how to
store results, queries, templates, and other search-related data around
relevancy tuning. Much of the design was inspired by (and an active
improvement cycle on) [Quepid](https://quepidapp.com/).
@note
- This is a full-viewport app shell: the page is exactly the height of the
window, doesn't scroll as a document, and the content region scrolls
internally with its scrollbar hidden.
- One caller: `app/views/layouts/searchscapes.html.erb`. This is a whole-page
layout rather than a component, which is exactly what `layouts/` is for — of
the files in that directory, this is the least ambiguous fit.
- The three rules are a chain: `#searchscape-body` caps height at `100vh` and
hides overflow, `#searchscape-main` claims the remaining space with `flex: 1`,
and `#searchscape-content` scrolls inside it. Removing any one of them breaks
the other two.
- `::-webkit-scrollbar { display: none }` hides the scrollbar in WebKit and
Chromium only; Firefox still shows one, so the layout is intentionally
scrollbar-less on some browsers and not others. `scrollbar-width: none` is the
standard property that would cover Firefox.
@example
```
…
```
@states
None.
@variants
No variants.
*/
#searchscape-body {
display: flex;
flex-direction: column;
height: 100dvh;
overflow: hidden;
}
#searchscape-main {
flex: 1;
display: flex;
flex-direction: column;
}
#searchscape-content {
flex: 1;
overflow: scroll;
}
#searchscape-content::-webkit-scrollbar {
display: none;
}
/*
Sessions Layout
@description
Styles for the layout presented for logging in as an unauthenticated user.
It's a two-column layout: a full-bleed cover photo beside the login
form, and an animated brand-green gradient panel that slowly drifts and shifts
brightness behind it. When the :product-announcement feature is enabled, the
left side is replaced with a full-bleed announcement banner with screenshots
and product feature copy.
@note
- This is the only ERB stylesheet in the tree, and the reason is one line:
`asset_path` resolves the cover photo to its fingerprinted, digest-stamped URL.
That is the correct way to reference an image from CSS here — compare
`components/credit_card.css`, which hardcodes `url(/png/…)` and gets no
fingerprint, so renaming its sprite would break silently. If any other
stylesheet needs an asset URL, this is the pattern to copy. Potential
improvement: pass the image path to the html.erb view and use `asset_path` there
instead of hardcoding it here in the CSS.
- Callers: `app/views/layouts/authentication.html.erb` uses all three classes;
`password_resets/new.html.erb` and `edit.html.erb` reuse `#login-image-cover`
on its own. This is why the IDs are used rather than classes, because it's _one_
layout presented to the user, not multiple. The IDs represent firm
sections of the login/signup pages.
- `.auth-wrapper` has no base rule at all — it exists purely as a hook for the
768px media query below. Worth knowing before you go looking for its styles.
- COMPLIANCE: `flex-grow: 1 !important` is fighting the Sidebar primitive, which
is the same specificity war `components/staff_box.css` has with Box. Sidebar
exposes `--flex-grow` as a custom property (`every_layout/Sidebar.css:35,52`)
and already remaps it in one of its own rules, so remapping the variable is
very likely available here instead — check which child the rule targets before
switching.
- PERFORMANCE: the keyframes animate `filter` (brightness and saturate) as well
as `background-position`. Filters aren't compositor-friendly, so this repaints
a full-viewport element continuously for as long as the login page is open.
Animating only `background-position` would keep the drift and drop the cost.
@example
```
```
@states
None.
@variants
No variants.
*/
#login-image-cover {
background-image: url(/assets/jpg/mathias-reding-unsplash-97e8a5d48a7bb0c42ca3b510022a0300f0d6f64d240f7056192362c697b61b84.jpg);
background-size: cover;
overflow: hidden;
}
.background-gradient-pulse {
position: relative;
background: linear-gradient(45deg, var(--color-primary) 0%, var(--color-brand-secondary) 90%);
background-size: 200% 200%;
overflow: hidden;
height: 100%;
width: 100%;
}
@keyframes gradient-aurora {
0% {
background-position: 0% 50%;
filter: brightness(100%) saturate(100%);
}
25% {
background-position: 50% 0%;
filter: brightness(110%) saturate(120%);
}
50% {
background-position: 100% 50%;
filter: brightness(120%) saturate(140%);
}
75% {
background-position: 50% 100%;
filter: brightness(110%) saturate(120%);
}
100% {
background-position: 0% 50%;
filter: brightness(100%) saturate(100%);
}
}
/* Motion is opt-in, not opt-out: the drift only runs for visitors who haven't
asked their OS for reduced motion. Anyone who has — and any browser without the
query — gets the static gradient, which is the intended fallback rather than a
degraded one. */
@media (prefers-reduced-motion: no-preference) {
.background-gradient-pulse {
animation: gradient-aurora 12s ease alternate infinite;
}
}
@media screen and (max-width: 768px) {
.sidebar>.auth-wrapper {
flex-grow: 1 !important;
}
}
/*
Box
@reference
- https://every-layout.dev/layouts/box/
@description
An individual unit of content with padding, radius, shadow, and background -
each of these items is customizable via custom properties. Everything in the
app is, at its core, a collection of these Box components, or a grid or layout
intended to arrange them. It is a padded container that like information sits in,
with even padding on all sides. This is the most-used primitive in the app, and the
thing to reach for before writing any new "card with content inside" rule.
@note
- Available as both the custom element `` and the class `.box-l`. The
element form is preferred in new markup; the class exists for cases where the
tag can't be changed, like a `` that needs to be styled as a box but is
generated by another method or library.
- Box has two configuration surfaces, and it matters which one you reach for.
`app/javascript/elo/Box.js` defines the `
` element and takes `padding`,
`borderWidth` and `invert` attributes, injecting a per-instance rule keyed on
`data-i`; the custom properties below are the CSS-side surface, and are what
other stylesheets should remap. Attributes are for one-off instances in markup,
custom properties for components built on top of Box.
- The custom properties are the extension points, and other components
configure Box by remapping them rather than overriding its declarations —
`components/card.css`, `components/alerts.css` and `components/staff_box.css`
all set `--box-shadow`, and that is the pattern to copy.
- The transparent `outline` plus negative `outline-offset` reserves a border-width
ring without affecting layout, so a component can add a visible border later
without the box resizing.
- COMPLIANCE: `._border-radius\:0m` has a typo in its value — almost certainly
meant to be `:0`. Worse, its selector is
`box-l._border-radius\:0m .box-l._border-radius\:0m`, a *descendant* combinator,
so it only matches a `.box-l` nested inside a `box-l` that both carry the class.
It has never applied to a single element on its own. `._box-shadow\:none`
directly above it is correct in both respects and shows the intended form.
- COMPLIANCE: variants are interleaved — `.box-tab` is a base rule sitting after
both variants, and there is no Variants marker.
- `.box-tab` is a label that overhangs the top edge of a box. It is used to
demarcate the box's content from sibling boxes, like the
[price-card](app/views/prices/_price_card.html.erb) and
[staff-box](app/assets/stylesheets/components/staff_box.css). Keeping
the .box-tab here because it is re-used in different contexts with different
box backgrounds and is considered a base concern/add-on to the Box.
@example
```
Title
Content
```
@states
None.
@variants
._box-shadow:none - removes the shadow
._border-radius:0 - squares the corners
*/
box-l,
.box-l {
--background: var(--background-color);
--box-shadow: 0 var(--s-3) var(--s0) 0 rgb(0 0 0 / 16%);
--box-radius: var(--border-radius);
display: block;
padding: var(--s0);
outline: var(--border-thin) solid transparent;
outline-offset: calc(var(--border-thin) * -1);
box-shadow: var(--box-shadow);
border-radius: var(--box-radius);
background: var(--background);
}
box-l._box-shadow\:none,
.box-l._box-shadow\:none {
--box-shadow: none;
}
box-l._border-radius\:0, .box-l._border-radius\:0 {
--box-radius: 0;
}
.box-tab {
position: absolute;
top: -10px;
left: 0;
background: var(--color-info);
color: var(--color-light);
padding: 0 var(--s-2);
width: 100%;
text-align: center;
border-color: var(--color-info);
border: var(--border-thin) solid var(--color-info);
border-radius: var(--border-radius) var(--border-radius) 0 0;
font-size: small;
}
/*
Center
@description
A component that creates a horizontally centered column
@reference
- https://every-layout.dev/layouts/center/
@example
```
```
@variants
No present variants
*/
center-l {
display: block;
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
max-width: var(--measure);
}
/*
Cluster
@description
The cluster is a top-level layout class that spatially groups a small amounth of elements in a consistent way no matter if they are stacked vertically or horizontally. It's kind of like treating the children elements as inline-like elements with specific spacing rules.
@reference
- https://every-layout.dev/layouts/cluster/
@note
Apologies in advance for any namespace confusion. Calling it a cluster wasn't intended to mix folks up when it comes to _search clusters_. The important part of using this word is that clustering information in the UI means that these elements are _related_ to one another and should be logically grouped. Thus..."cluster".
@example
```
```
@variants
The Cluster has many utility classes, because it can be used in many different compositions. Indeed, it is one of the most used layouts besides the stack.
._justify:left - left-aligns the items like text
._justify:center - centers items within the container of the cluster
._justify:flex-end - right-alignment
._justify:space-between - pushed the children elements to take up all available space and distribute themselves evenly. Nice for headers and navs.
._space:0 - Leaves no gap between elements. Seldom used.
._space:s1 - A bit larger spacing. See settings.css for all of our spacing variables.
# etc
._align:baseline - bottom aligns elements
._align:center - horizontally aligns the elements
._wrap:nowrap - keeps child elements in one line, never forming a "word" break
*/
.cluster {
--cluster-display: flex;
--cluster-flex-wrap: wrap;
--cluster-justify-content: flex-start;
--cluster-align-items: flex-start;
--cluster-space: var(--s1);
}
.cluster > * {
display: var(--cluster-display);
flex-wrap: var(--cluster-flex-wrap);
justify-content: var(--cluster-justify-content);
align-items: var(--cluster-align-items);
margin: calc(var(--cluster-space) / 2 * -1);
}
.cluster > * > * {
margin: calc(var(--cluster-space) / 2);
}
.cluster._justify\:flex-end {
--cluster-justify-content: flex-end;
}
.cluster._justify\:left {
--cluster-justify-content: left;
}
.cluster._justify\:space-between {
--cluster-justify-content: space-between;
}
.cluster._justify\:center {
--cluster-justify-content: center;
}
.cluster._space\:s-4 {
--cluster-space: var(--s-4);
}
.cluster._space\:s-3 {
--cluster-space: var(--s-3);
}
.cluster._space\:s-2 {
--cluster-space: var(--s-2);
}
.cluster._space\:s-1 {
--cluster-space: var(--s-1);
}
.cluster._space\:0 {
--cluster-space: 0;
}
.cluster._align\:baseline {
--cluster-align-items: baseline;
}
.cluster._align\:center {
--cluster-align-items: center;
}
.cluster._wrap\:nowrap {
--cluster-flex-wrap: nowrap;
}
/*
Cover
@reference
- https://every-layout.dev/layouts/cover/
- Element form: `app/javascript/elo/Cover.js`
@description
A vertical container with a minimum height that pushes one designated child to
the visual center, with the rest stacked above and below it. Used for empty
states, hero panels, and any "fill this space and center the message" case.
@note
- Split across two files, and unlike the other Every Layout primitives BOTH forms
are in real use here. `` is mounted in 6 places and the `.cover` class
in 8 files, so neither half can be treated as the fallback for the other. Read
`elo/Cover.js` alongside this file.
- The element form is configured by attribute: `centered` (a selector for the
centered child, default `h1`), `space` (margin between and around children,
default `var(--s1)`), `minHeight` (default `100vh`), and `noPad` (whether
`space` is also applied as container padding). Views write them lowercase —
`` — which is correct: HTML
lowercases attribute names at parse time and `getAttribute` lowercases its
argument, so the camelCase in Cover.js's docblock still matches.
- The two halves disagree on how the centered child is identified, and it matters
when switching between them. This file centers anything carrying the `.centered`
class; the element form centers whatever matches its `centered` *selector*, `h1`
by default. So `` works, and
`` works, but neither markup works under the other
form.
- COMPLIANCE: the child spacing is a raw `margin-block: 1rem` with no custom
property behind it, so the class form's spacing can't be configured at all —
while the element form exposes `space` for exactly that. `1rem` is also
precisely `--s0`, so this is a token value written out by hand. A
`--cover-space` var defaulting to `var(--s1)` would close both gaps and match
the JS default.
- COMPLIANCE: `--cover-min-block-size: 100vh` is a raw value, and `100vh` is the
unit that measures the viewport without mobile browser chrome. `layouts/searchscape.css`
has already moved to `100dvh` for this reason; this file has not.
@example
Class form, with the centered child marked by class:
```
```
Element form, pointing the centered selector at a different element:
```
No Judgements
```
@states
None.
@variants
._padding:0 - removes the container padding
._height:100pct - makes the minimum height fill the parent rather than the
viewport
._min-block-size:fit-content - shrinks the minimum height to the content
Two of these are misnamed, and the worst-named is the most used.
`._height\:100pct` remaps `--cover-min-block-size`, not `height`, so the name
points at the wrong property. It has 5 callers, so
renaming it means touching those views.
*/
.cover {
--cover-padding: var(--s1);
--cover-min-block-size: 100vh;
--cover-centered-margin: auto;
display: flex;
flex-direction: column;
min-block-size: var(--cover-min-block-size);
padding: var(--cover-padding);
}
.cover > * {
margin-block: 1rem;
}
.cover > *:first-child:not(.centered) {
margin-block-start: 0;
}
.cover > *:last-child:not(.centered) {
margin-block-end: 0;
}
.cover > *.centered {
margin-block: var(--cover-centered-margin);
}
/* Variants */
.cover._padding\:0 {
--cover-padding: 0;
}
.cover._min-block-size\:fit-content {
--cover-min-block-size: fit-content;
}
.cover._height\:100pct {
--cover-min-block-size: 100%;
}
/*
Frame
@reference
- https://every-layout.dev/layouts/frame/
@description
Crops its content to a fixed aspect ratio. The child is absolutely positioned to
fill the frame, and images and video are `object-fit: cover`, so media is cropped
rather than distorted.
@note
- Split across two files. `app/javascript/elo/Frame.js` defines the ``
custom element and is where the ratio actually comes from: it takes a
`ratio="6:9"` attribute, splits it, and injects a per-instance
`padding-bottom: calc(w / h * 100%)` rule keyed on `data-i`. Read both files
to understand how it works.
- The `calc(6 / 9 * 100%)` here is the no-JS fallback, mirroring Frame.js's
default ratio so the pre-JS and post-JS crops agree. It is not a hardcoded
limitation — pass `ratio` on the element to change it. It is still two places
to change if that default moves.
- No view uses `` yet; `elo/Frame.js` is the only reference to it in the
app. The component is available but unexercised.
@example
```
<%= image_tag "screenshot.png" %>
```
At a different ratio:
```
<%= image_tag "screenshot.png" %>
```
@states
None.
@variants
No variants.
*/
frame-l {
display: block;
position: relative;
padding-bottom: calc(6 / 9 * 100%);
}
frame-l > * {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
frame-l > img,
frame-l > video {
height: 100%;
width: 100%;
object-fit: cover;
}
/*
Grid
@reference
- https://every-layout.dev/layouts/grid/
@description
A responsive grid that needs no breakpoints: columns are created and dropped
automatically based on how many will fit at a minimum width, so the content
decides the column count rather than a media query.
@note
- This component is split across two files, and this one is the smaller half.
`app/javascript/elo/Grid.js` defines the `` custom element and holds
the real column logic: on connect it stamps `data-i="Grid-{min}{space}"` on the
instance and injects a `