Release 1.21.2

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Fix the mobile menu writing white on white and the hero losing its gutter
2026-09-16 21:30:23 +02:00 · 2026-09-16 21:30:19 +02:00 · 2026-09-16 15:56:25 +02:00 · 2026-09-16 15:56:21 +02:00
6 changed files with 95 additions and 25 deletions
@@ -1 +1 @@
-1.21.0
+1.21.2
@@ -1,5 +1,17 @@
 # Projektstatus

+## Startseite nach der Installation: eine Baustellenseite statt einer Anleitung (16.09.2026)
+
+**Anlass:** Umut: „Kannst du bitte für die Erstseite bzw. nach der Installation eine schöne Erstseite erstellen – Under Construction oder so, ohne Details mit ‚melde dich an‘ usw. Am besten auch noch Logo von KantSites: ‚Hier entsteht eine neue Webpräsenz mit KantSites‘.“
+
+**Was los war.** `DemoContent::starterPage()` lieferte zwei Abschnitte mit Arbeitsanweisungen an die Betreiberin oder den Betreiber: „Melde dich an, öffne sie im Editor …“ und „Die nächsten Schritte“ mit Design, Menüs und Einstellungen. Das stand auf der einzigen Seite, die bis zum ersten Bearbeiten **öffentlich** erreichbar ist – gelesen hat es also der Besucher, nicht der Betreiber. Für den stehen dieselben Schritte längst auf dem letzten Installerbildschirm (`templates/install/done.html.twig`) und in der Verwaltung.
+
+**Neu.** Eine Baustellenseite, die genau das sagt und sonst nichts: das KantSites-Zeichen (`public/assets/kantsites-logo.svg`, dieselbe Form wie das Favicon), die Kleinzeile „In Arbeit“ in der Akzentfarbe, als einzige H1 der Name der Website, darunter „Hier entsteht eine neue Webpräsenz.“, ein kurzer Trennstrich und die Zeile „Erstellt mit KantSites“. Der Abschnitt ist ein Flex-Container mit `min-height: 70vh` und einem Verlauf von `@paper` nach `@mint`, stellt den Inhalt also mittig auf den Bildschirm; die Farben sind Palettenverweise und folgen jedem Designwechsel. Alles sind gewöhnliche Bausteine mit gewöhnlichen Stilwerten – im Editor also vollständig änder- und löschbar. Die Seitenbeschreibung ist jetzt ein echter Satz statt „NOCH AUSZUFÜLLEN“, damit eine frisch installierte Website in Suchergebnissen nicht mit einem Platzhalter steht.
+
+**Unverändert:** Kopf- und Fußbereich, die beiden Rechtsseiten als Gerüst mit markierten Pflichtangaben, Menüs.
+
+**Geprüft:** `tests/InstallFlowTest.php` (Installation über die sechs Bildschirme, danach liefert `/` die neue Seite), `php vendor/bin/phpunit` 579 von 579. Im Browser angesehen: eine frisch migrierte Datenbank mit dem Inhalt einer Neuinstallation, Desktop und 375 px.
+
 ## Fassung 1.21.0: Bildecken gehören dem Designbereich (16.09.2026)

 **Anlass:** Umut zum Hero-Bild von DEEG: „Das sollte abgerundet sein, aber wurde von irgendwo gemacht, und die Ecken sehen komisch aus. Es gibt auch im Editor gar nicht Bildecken abrunden, oder?“
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128"><rect width="128" height="128" rx="32" fill="#182d2b"/><path d="M36 28h16v42l26-28h22L68 76l34 28H78L52 82v22H36z" fill="#e5f0b6"/></svg>
@@ -438,9 +438,14 @@ body.consent-open{padding-bottom:320px}
 .kant .width-full>.section-inner{width:100%;max-width:none;margin-inline:0}
@media (max-width:767px){.kant .width-wide>.section-inner{width:calc(100% - 36px)}}

-/* A section that is a flex container centres its content box; the inner container must then be
-   allowed to grow, or a full height section would show a strip in the middle. */
-.block-section>.section-inner{flex:1 1 auto}
+/* Ein Abschnitt, der ein Flex-Kasten ist, reiht seinen Inhaltskasten als Flex-Element ein.
+   Wachsen darf der dabei nicht: die Laufrichtung ist voreingestellt die Zeile, und dort frisst
+   das Wachsen die Randluft des Containers. Auf dem Telefon stand der Text eines Hero-Abschnitts
+   damit hart an der Kante, waehrend Kopf und alle uebrigen Abschnitte ihre 18 px hatten - am
+   Schreibtisch fiel es nicht auf, weil dort die Hoechstbreite des Designs vorher bremst.
+   Die Hoehe braucht das Wachsen nicht: quer zur Laufrichtung dehnt sich ein Flex-Element
+   ohnehin ueber die volle Hoehe, und steht "Ausrichtung: Mitte", ist die Mitte gewollt. */
+.block-section>.section-inner{flex:0 1 auto}

 /* Menu kinds. Horizontal is the default; vertical stacks; burger is a details element, so it
   opens without a script - a menu that needs one would not open on a page that runs none. */
@@ -472,9 +477,13 @@ body.consent-open{padding-bottom:320px}
   weder faerben noch abschalten. Linie und Schatten kommen dann aus Rahmen und Wirkung. */
 .site-header.is-sticky.has-own-surface{background:transparent;box-shadow:none}
 .site-header .menu-burger[open]>summary{border-radius:8px}
+/* Die Flaeche malt ihren eigenen Untergrund, also setzt sie auch ihre eigene Schriftfarbe.
+   Ohne das erbte sie die Farbe des Kopfbereichs: bei einem Kopf, der ueber einem dunklen Bild
+   schwebt und deshalb weiss schreibt, stand das aufgeklappte Menue weiss auf weiss. */
 .site-header .menu-burger-body{position:absolute;left:0;right:0;top:100%;z-index:30;
  padding:15px max(16px,calc((100% - var(--k-container,1180px)) / 2 + 16px)) 25px;
-  background:var(--paper);box-shadow:0 15px 25px color-mix(in srgb,var(--ink) 12%,transparent)}
+  background:var(--paper);color:var(--ink);
+  box-shadow:0 15px 25px color-mix(in srgb,var(--ink) 12%,transparent)}
 .site-header .menu-burger-body .menu-list{gap:0}
 .site-header .menu-burger-body .menu-list a{padding:12px 10px;font-size:16px}
 /* Visibility never overwrites the block's grid/flex/display settings. */
@@ -122,34 +122,75 @@ final class DemoContent
        ];
    }

-    /**
-     * The header and footer a fresh installation starts with. They are ordinary block documents:
-     * everything in them can be changed, moved or removed in the editor. No main heading, because
-     * every page brings its own.
-     *
-     * @return array<string, array{name: string, document: array}>
-     */
    /**
     * The start page of a fresh installation - not demo content.
     *
-     * Short on purpose. Somebody who has just installed should find a page they can edit, not a
-     * brochure about the CMS they have to delete first. Exactly one H1, as every page requires.
+     * A website that is already reachable but not yet written needs a page that says exactly that:
+     * the name of the site, the notice that something is being built here, and nothing else. No
+     * instructions for the owner - those stand on the last screen of the installer and in the
+     * admin area, not on a page every visitor sees. Exactly one H1, as every page requires.
     */
    public static function starterPage(string $siteName): array
    {
        return [
-            'schemaVersion' => 16,
+            'schemaVersion' => 24,
            'title' => $siteName,
-            'description' => 'NOCH AUSZUFÜLLEN: ein Satz darüber, was es hier gibt. Er erscheint in Suchergebnissen.',
+            'description' => 'Hier entsteht eine neue Webpräsenz. Diese Seite wird gerade eingerichtet.',
            'blocks' => [
-                self::section('start-hero', [
-                    self::heading('start-heading', $siteName, 1),
-                    self::text('start-intro', 'Diese Seite ist der Anfang. Melde dich an, öffne sie im Editor und ersetze diesen Text durch deinen eigenen.'),
-                ], 'mint'),
-                self::section('start-body', [
-                    self::heading('start-next-heading', 'Die nächsten Schritte', 2),
-                    self::text('start-next', "Impressum und Datenschutzerklärung sind bereits angelegt und müssen noch ausgefüllt werden – die Pflichtangaben sind darin markiert.\n\nUnter „Design“ legst du Farben, Schriften und die Breite fest, unter „Menüs“ die Navigation, unter „Einstellungen“ den Namen und die Angaben zum Unternehmen."),
-                ], 'paper', 'narrow'),
+                [
+                    'id' => 'start-hero',
+                    'type' => 'section',
+                    'layout' => ['tone' => 'mint', 'width' => 'narrow'],
+                    'style' => [
+                        // Eine Seite ohne Inhalt: der Abschnitt füllt den Bildschirm und stellt das
+                        // Wenige, das dasteht, in die Mitte, statt es oben in eine Ecke zu setzen.
+                        'desktop' => [
+                            'display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'center',
+                            'minHeight' => '70vh', 'textAlign' => 'center',
+                            'padding' => ['top' => '96px', 'bottom' => '96px'],
+                            'gradientFrom' => '@paper', 'gradientTo' => '@mint', 'gradientAngle' => 165,
+                        ],
+                        'mobile' => ['minHeight' => 'auto', 'padding' => ['top' => '64px', 'bottom' => '64px']],
+                    ],
+                    'children' => [
+                        [
+                            'id' => 'start-logo',
+                            'type' => 'image',
+                            'props' => ['src' => '/assets/kantsites-logo.svg', 'alt' => 'KantSites', 'decorative' => false, 'width' => 128, 'height' => 128],
+                            'style' => ['desktop' => ['maxWidth' => '86px', 'margin' => ['left' => 'auto', 'right' => 'auto', 'bottom' => '30px']]],
+                        ],
+                        [
+                            'id' => 'start-label',
+                            'type' => 'text',
+                            'props' => ['text' => 'In Arbeit'],
+                            'style' => ['desktop' => [
+                                'fontSize' => '13px', 'fontWeight' => '700', 'letterSpacing' => '2px',
+                                'textTransform' => 'uppercase', 'color' => '@accent', 'margin' => ['bottom' => '16px'],
+                            ]],
+                        ],
+                        self::heading('start-heading', $siteName, 1),
+                        [
+                            'id' => 'start-intro',
+                            'type' => 'text',
+                            'props' => ['text' => 'Hier entsteht eine neue Webpräsenz.'],
+                            'style' => ['desktop' => [
+                                'fontSize' => '21px', 'maxWidth' => '38ch',
+                                'margin' => ['left' => 'auto', 'right' => 'auto', 'bottom' => '0px'],
+                            ]],
+                        ],
+                        [
+                            'id' => 'start-rule',
+                            'type' => 'divider',
+                            'style' => ['desktop' => ['width' => '72px', 'margin' => ['top' => '40px', 'right' => 'auto', 'bottom' => '22px', 'left' => 'auto']]],
+                        ],
+                        [
+                            'id' => 'start-note',
+                            'type' => 'text',
+                            'props' => ['text' => 'Erstellt mit KantSites'],
+                            'style' => ['desktop' => ['fontSize' => '14px', 'letterSpacing' => '0.4px', 'margin' => ['bottom' => '0px']]],
+                        ],
+                    ],
+                ],
            ],
        ];
    }
@@ -164,6 +205,13 @@ final class DemoContent
        return $areas;
    }

+    /**
+     * The header and footer a fresh installation starts with. They are ordinary block documents:
+     * everything in them can be changed, moved or removed in the editor. No main heading, because
+     * every page brings its own.
+     *
+     * @return array<string, array{name: string, document: array}>
+     */
    public static function areas(): array
    {
        $row = static fn (string $id, array $children): array => [
@@ -98,7 +98,7 @@ final class InstallFlowTest extends TestCase
        $home = $this->request('/');
        self::assertSame(200, $home->getStatusCode());
        self::assertStringContainsString('Beispiel GmbH', $home->getContent());
-        self::assertStringContainsString('Diese Seite ist der Anfang.', $home->getContent());
+        self::assertStringContainsString('Hier entsteht eine neue Webpräsenz.', $home->getContent());
        // The public page is still a public page: no script, and the header carries the name.
        self::assertStringContainsString("script-src 'none'", (string) $home->headers->get('Content-Security-Policy'));
        self::assertSame(200, $this->request('/impressum')->getStatusCode());
Author	SHA1	Message	Date
kantarciandClaude Opus 5	c91f996524	Release 1.21.2 CMS quality / php (8.2) (push) Canceled after 0s Details CMS quality / php (8.4) (push) Canceled after 0s Details CMS quality / browser (push) Canceled after 0s Details CMS quality / mysql (push) Canceled after 0s Details Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-16 21:30:23 +02:00
kantarciandClaude Opus 5	0ed4c83e41	Fix the mobile menu writing white on white and the hero losing its gutter Umut on Elektro Bernhard: "Menü im Mobil Dropdown textfarben sind weiß also weiß auf weiß und Hero banner texte sind ohne abstand rechts links im mobil". Both are core faults, not content - every site with a floating header and a flex section had them. The opened burger panel paints its own white surface but took its text colour from the header. A header that hovers over a dark photo writes white, so the menu was white on white until the page was scrolled and the header turned light. The design area has settings for the burger button - text, surface, border, corners, size - but none for the panel, so there was no way to fix this from the editor. The panel now sets its own colour alongside its own background. The gutter was lost to "flex:1 1 auto" on .section-inner, added in `67b8575` so a full height section could grow. Growing works along the main axis, and that defaults to the row: the inner box grew sideways and pushed the container gutter out. On the desktop the theme's maximum width stopped it before anyone noticed; on a phone there is none, and the text sat hard against the edge while the header and every other section kept their 18px. It is "flex:0 1 auto" now. The height never needed it - across the main axis a flex item stretches anyway, and where "align-items: center" is set, the middle is what was asked for. Measured at 375px: hero content was x 0 / 375 wide, now x 18 / 339, the same as the header. At 1440px nothing changes (x 93 / 1240). Checked against the full screen hero template as well - edge to edge, 100dvh, content centred - which renders as before. 579 PHP tests / 4798 assertions on 8.4 and 8.2, 35 JavaScript model tests. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-16 21:30:19 +02:00
kantarciandClaude Opus 5	9e0365f841	Release 1.21.1 CMS quality / php (8.2) (push) Canceled after 0s Details CMS quality / php (8.4) (push) Canceled after 0s Details CMS quality / browser (push) Canceled after 0s Details CMS quality / mysql (push) Canceled after 0s Details Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-16 15:56:25 +02:00
kantarciandClaude Opus 5	ff2b57db58	Make the start page of a new installation a construction page Umut: "Kannst du bitte fuer die Erstseite bzw. nach der Installation eine schoene Erstseite erstellen. Under Construction oder so ohne Details mit melde dich an usw. Am besten auch noch Logo von KantSites." starterPage() shipped two sections of instructions for the owner: "Melde dich an, oeffne sie im Editor ..." and "Die naechsten Schritte" with design, menus and settings. That stood on the only page a fresh installation serves publicly, so the visitor read it, not the owner - who gets the same steps on the last installer screen and in the admin area anyway. It is now the page such a site actually needs: the KantSites mark, the label "In Arbeit" in the accent colour, the site name as the single H1, "Hier entsteht eine neue Webpraesenz.", a short rule and the line "Erstellt mit KantSites". The section is a flex container with min-height 70vh and a gradient from @paper to @mint, so the little that is there sits in the middle of the screen; the colours are palette references and follow a design change. Everything is an ordinary block with ordinary style values and can be changed or removed in the editor. The page description is a real sentence now instead of "NOCH AUSZUFUELLEN", so a freshly installed site does not carry a placeholder into search results. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-16 15:56:21 +02:00
@@ -1 +1 @@
 .21.0
 .21.2
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128"><rect width="128" height="128" rx="32" fill="#182d2b"/><path d="M36 28h16v42l26-28h22L68 76l34 28H78L52 82v22H36z" fill="#e5f0b6"/></svg>`