Decker Slide Layout

General structure

HTML


<section class="slide level1 present">
    <div class="decker">
    <div class="alignment">
        <h1>Licht</h1>
        <div class="layout">
        <div class="area">
            <div class="block">
            <h2>Strahlung und so</h2>
            <p>Something or other</p>
            </div>
        </div>
        <div class="area">
            <div class="block">
            <p>No header here</p>
            <p>Something or other</p>
            </div>
            <div class="block">
            <h2>Sichtbares Licht</h2>
            <p>Something or other</p>
            </div>
        </div>
        </div>
    </div>
    </div>
</section>
      

Exploded

The CSS for this only adds padding the divs to help visualize the structure.

Licht

Strahlung und so

Something or other

No header here

Something or other

Sichtbares Licht

Something or other

Layouts

Different CSS only layout strategies are possible on this structure.

Row based columns

This is the current Flexbox based layout one gets with the layout="columns" attribute.

div.columns div.layout {
  display: flex;
}

div.columns div.layout div.area#i1 {
  flex-grow: 1;
}

div.columns div.layout div.area#i2 {
  flex-grow: 2;
}

Licht

Strahlung und so

Something or other

No header here

Something or other

Sichtbares Licht

Something or other

This a code block with one very long line. It is certainly longer than anything else on this page.

Floating columns

This is the floating layout that Mario uses via MarioCols.hs.

div.floating div.layout div.area#i1 {
  float: left;div.floating div.layout div.area#a1 {
  float: left;
  /* width: calc(60% - 2 * var(--struct-padding) - 2 * var(--struct-border-width)); */
  width: 60%;
}

div.floating div.layout div.area#a2 {
  display: inline-block;
  /* width: calc(40% - 2 * var(--struct-padding) - 2 * var(--struct-border-width)); */
  width: 40%;
}

Licht

Strahlung und so

Something or other

No header here

Something or other

Sichtbares Licht

Something or other

Future World

This example uses Grid layout.

div.grid div.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: stretch;
}

div.grid div.layout div.area#a1 {
  grid-column: 1;
  grid-row: 2;
  /* width: calc(100% - 2 * var(--struct-padding) - 2 * var(--struct-border-width)); */
  width: 100%;
}

div.grid div.layout div.area#a2 {
  grid-column: 2;
  grid-row: 1;
  /* width: calc(100% - 2 * var(--struct-padding) - 2 * var(--struct-border-width)); */
  width: 100%;
}

Licht

Strahlung und so

Something or other

No header here

Something or other

Sichtbares Licht

Something or other

Licht ist ziemlich schnell

Something or other

Box bars

The blue bar on left of box b2 is implemented with a negative left inset and a corresponding negative margin on the right. There may be better ways to do this, as the calculation of the padding is quite fiddly.

div.block#b2 {
  position: relative;
  left: var(--bar-inset);
  border-left: var(--bar-width) solid blue;
  padding-left: calc(
    var(--struct-border-width) + var(--struct-padding) - var(--bar-inset) - var(--bar-width)
  );
  margin-right: var(--bar-inset);
}

Learned a new CSS trick today

* {
  box-sizing: border-box;
}

Changes this:

div.floating div.layout div.area#i2 {
  display: inline-block;
  width: calc(40% - 2 * var(--struct-padding) - 2 * var(--struct-border-width));
}

Into this:

div.floating div.layout div.area#i2 {
  display: inline-block;
  width: 40%;
}