Das Ziel: Links ein einführender Text, ggf. mit call-to-action-Button, rechts ein Cover-Image. Das Ganze soll in jeder Darstellung ansprechend aussehen. Bei kleinen Bildschirmdiagonalen soll das Bild unter den Text wandern:

Überschrift

prägnanter Text

Optionaler Call-To-Action Buttom

Dieses soll mit modernen Instrumenten resourcensparend implementiert werden.

Das HTML ist – wie gewohnt – sehr übersichtlich

<header>
  <article>
    <h1>Überschrift</h1>
    <p>prägnanter Text</p>
    <sl-button> Optionaler Call-To-Action Buttom</sl-button>
  </article>
  <!-- Coverbild --->
  <img src="/images/herobild.png" alt="Ein Herobild">
</header>

Es wird deklaratives CSS genutzt, es sind kaum Klassen notwendig. Aus der Perspektive des HTML wird ein ein Header mit einem eingebetteten Absatz und einem Bild dargestellt.

Die Umsetzung in Bridgetown ist entsprechend:

--- (_layout/home.md)
layout: default
---

<article>
 <%= yield  %>
 <%= render Image.new file: resource.data.intro_image %>
<article</>

Im default-Layout werden die Navigation und der Footer definiert. Das wird zuerst aufgerufen. Das Bild wird im Frontmatter der index.md (s.u.) definiert und wird von Bridgetown als Variable recource.data bereitgestellt. Das Bild wird auf der Layout-Ebene über die Image-Komponente eingefügt.
Theoretisch könnte auch der Text im Frontmatter stehen. Das ist jedoch umständlich. Wenn die Textbausteine als Markdown eingefügt werden, erreicht man eine hervorragende Lesbarkeit und maximale Flexibilität.

--- (_pages/index.md)
title:  Showcase Thema TWO
layout: home
description: |-
  Dies ist ein Beispiel für ein responsives zweispaltiges Web-Layout 
intro_image: illustrations/pointing.svg
---

# TWO - Auf zwei Spalten zum Erfolg

TWO enthält typische Elemente eines Webauftritts

Die Frontmatter-Variable description wird vom SEO ausgewertet und als Meta-Tag in die HTML-Seite eingebaut.

CSS

Nun zur Darstellung im Browser.

Das Hero wird als Grid implementiert.

header { 
  display: grid;
	grid-template-areas: "hero";
  align-items: center; }

header > * { grid-area: hero; }

header img { 
 object-fit: cover;
 justify-self: end; }

 header article {
   max-width: 35%;
   min-width: 30ch;
 }

Der header-HTML-Token ist ein benanntes Grid-Element. Alle Tochter-Elemente von header gehen dort hinein und werden untereinander dargestellt. Faktisch wird hier der article-HTML-Token eingefügt und dessen Inhalte dann normal formatiert.

Bilder erfahren eine Sonderbehandlung: Sie werden am Ende angeordnet und per CSS rechtsbündig dargestellt.

Der Absatz wird ganz normal im Grid-Element dargestellt. Mit der Einstellung width: 35% nimmt er nur den linken Teil des verfügbaren Platzes ein.

In der mobilen Ansicht wandert das Bild hinter den Text.
Das wird zwei CSS-Einstellungen im article erreicht:

header article {
  z-index: 1;
	/* semitransparenter Hintergrund            */
	background-color: rgba(249, 251, 253, 0.8);
  }

Das Bild wird auf der Z-Ebene ‘0’ dargestellt, der Text liegt immer drüber.

Referenz:

• moderncss.dev