Page study / Mr. Edutainment
Mr. Edutainment — neutral composition
A brand directory built around large editorial tiles, service introductions and supporting quotes.
View source site ↗Working layout preview
Default Artist typography, spacing and components. Gray blocks mark image areas; copy is abbreviated for layout review. This is a structural interpretation, not a replica or replacement of the source site. Gaps are labeled below and inside the preview.
The iframe has a real viewport: responsive rules and sticky behavior run inside it. Wider presets can be panned horizontally in the preview area.
Section-by-section coverage
Covered = existing component composition. Partial = layout exists, but some behavior does not. Gap = useful missing capability. Art direction = site-specific treatment. A simplified preview does not count as full coverage.
| Section | Artist structure | Coverage | Decision |
|---|---|---|---|
| Learning and growth, made enjoyable | Group → Container → Content.Is-Solo | Covered | Keep the simple introduction. Logo drawing and brand lettering are assets, not new layout primitives. |
| Our products and community | Stack → Card.Is-Padded.Exhibit.Is-Immersive.Is-Bottom-Left + Inset → Quote.Is-Small.Is-Profile | Partial | Four stacked full-width Exhibits with real has-inset artwork cutaways and profile quotations. Exact inner-corner sculpting is site art direction; the reusable cutaway and measured quote dimensions are implemented. |
| Studies and daily notes | Grid.Grid-2 → Card → Content.Text-Center | Partial | Editorial links fit Cards. The studies/contact modal needs a Dialog pattern with focus handling; show normal links until that exists. |
Recipe & implementation
Recipe: _data/artist_compositions.yml, entry mredutainment. Section renderer: _includes/artist/composition-section.html. Layouts use artist.css; preview-only placeholder and annotation styling is in code-compositions.css.