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%;
}