kantarci/KantSites
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 81 Wiki Activity

Let a single column sit in a section and give buttons an alignment

Browse Source 
A column may now live directly in a section, not only in a row - the way
to centre or narrow a button or a short text without a one-column row.
The align design token applies to buttons; because a button is
inline-flex, auto margins never centred it, so site.css turns an aligned
button into a fit-content block per device. The Drews seed uses the
token for its centred buttons.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
kantarciandClaude Fable 5.1 committed 2026-09-15 14:49:37 +02:00
1 parent 533e181590
commit 232e6fe6dc
6 files changed
+41 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/assets/design-tokens.json
+2 -1
View File
@@ -10,7 +10,8 @@
"iconcard",
"stat",
"quote",
"cta"
"cta",
"button"
],
"values": {
"left": [
public/assets/editor-model.js
+6 -2
View File
@@ -55,8 +55,12 @@ export const isContainer = block => ['section', 'row', 'column', 'gallery', 'log
/** Containers that take one kind of child and nothing else. */
export const ALLOW = { row: ['column'], gallery: ['image'], logos: ['image'], accordion: ['accordionitem'], tabs: ['tabitem'] };
/** Blocks that exist only inside one of these parents. */
export const REQUIRE = { column: ['row'], accordionitem: ['accordion'], tabitem: ['tabs'] };
/**
* Blocks that exist only inside one of these parents. A column belongs to a row - and, as a
* single one, directly to a section: that is how a button or a short text gets centred and
* narrowed without a one-column row around it. Umut asked for exactly that.
*/
export const REQUIRE = { column: ['row', 'section'], accordionitem: ['accordion'], tabitem: ['tabs'] };
/**
* A row is not refused by any particular parent - a tab panel or an accordion entry may well
* hold one - but it is not a thing a document starts with. At the top level a page begins with
public/assets/site.css
+7
View File
@@ -96,6 +96,13 @@ p{hyphens:auto}
/* Forms. Server rendered, no JavaScript; every message sits at its field. */
.block-form{display:grid;gap:20px;max-width:640px}
.block-form>.cms-button{justify-self:start}
/* Ausrichtung eines Buttons (Design-Token „align"): ein inline-flex-Element zentriert sich nicht
über margin:auto, darum hier als Block mit eigener Breite - in Spalten, Zeilen und Rastern. */
.kant .cms-button.d-desktop-align-left{justify-self:start;margin-inline:0}
.kant .cms-button.d-desktop-align-center{display:flex;width:fit-content;margin-inline:auto;justify-self:center}
.kant .cms-button.d-desktop-align-right{display:flex;width:fit-content;margin-inline:auto 0;justify-self:end}
@media(max-width:1024px){.kant .cms-button.d-tablet-align-left{display:inline-flex;width:auto;justify-self:start;margin-inline:0}.kant .cms-button.d-tablet-align-center{display:flex;width:fit-content;margin-inline:auto;justify-self:center}.kant .cms-button.d-tablet-align-right{display:flex;width:fit-content;margin-inline:auto 0;justify-self:end}}
@media(max-width:650px){.kant .cms-button.d-mobile-align-left{display:inline-flex;width:auto;justify-self:start;margin-inline:0}.kant .cms-button.d-mobile-align-center{display:flex;width:fit-content;margin-inline:auto;justify-self:center}.kant .cms-button.d-mobile-align-right{display:flex;width:fit-content;margin-inline:auto 0;justify-self:end}}
.form-field{display:grid;gap:7px}
.form-field label{font-weight:600;font-size:14px}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:12px 13px;border:1px solid var(--form-border,currentColor);border-radius:8px;background:var(--form-bg,#fff);color:inherit;font:inherit;min-height:46px}