114 lines
3.7 KiB
HTML
114 lines
3.7 KiB
HTML
<div class="layout-wide-content">
|
|
<div class="layout-content">
|
|
<h2>@title(inline)</h2>
|
|
|
|
<style>
|
|
div.macro-typography {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
grid-column-gap: 5vh;
|
|
grid-row-gap: 0;
|
|
}
|
|
@media (orientation: portrait) {
|
|
div.macro-typography {
|
|
}
|
|
div.macro-typography::after {
|
|
content: 'This demo does not work in narrow viewports. Please use a landscape format!';
|
|
position: absolute;
|
|
background: rgba(0,0,0,.8);
|
|
color: white;
|
|
padding: 30vw;
|
|
opacity: 1;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
div.macro-typography .example {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 2vh;
|
|
font-family: 'EB Garamond';
|
|
}
|
|
div.macro-typography .caption {
|
|
font-size: .45em;
|
|
margin: .5em 0 2em;
|
|
padding: .4em;
|
|
line-height: 2em;
|
|
border-top: .1em solid currentColor;
|
|
white-space: nowrap;
|
|
}
|
|
div.macro-typography .caption::first-letter {
|
|
font-size: 2em;
|
|
vertical-align: top;
|
|
}
|
|
div.macro-typography .narrow {
|
|
grid-column: 1 / span 1;
|
|
}
|
|
div.macro-typography .normal {
|
|
grid-column: 2 / span 2;
|
|
}
|
|
div.macro-typography .wide {
|
|
grid-column: 4 / span 4;
|
|
}
|
|
div.macro-typography .tight {
|
|
grid-row: 1;
|
|
max-height: 5.9em;
|
|
line-height: 1.15em;
|
|
}
|
|
div.macro-typography .medium {
|
|
grid-row: 3;
|
|
max-height: 5.9em;
|
|
line-height: 1.4em;
|
|
}
|
|
div.macro-typography .loose {
|
|
grid-row: 5;
|
|
max-height: 7em;
|
|
line-height: 1.7em;
|
|
}
|
|
div.macro-typography .good {
|
|
color: #006600;
|
|
background: #ddffcc;
|
|
}
|
|
div.macro-typography .bad {
|
|
color: #806000;
|
|
background: #fff2cc;
|
|
}
|
|
div.macro-typography .ugly {
|
|
color: #660000;
|
|
background: #ffddcc;
|
|
}
|
|
</style>
|
|
<div class="macro-typography">
|
|
<p class="example narrow tight">@example-text(inline)</p>
|
|
<p class="caption narrow good">☺ <span>@narrow-tight(inline)</span></p>
|
|
|
|
<p class="example normal tight">@example-text(inline)</p>
|
|
<p class="caption normal bad">☹ <span>@normal-tight(inline)</span></p>
|
|
|
|
<p class="example wide tight">@example-text(inline)</p>
|
|
<p class="caption wide ugly">☹ <span>@wide-tight(inline)</span></p>
|
|
|
|
<p class="example narrow medium">@example-text(inline)</p>
|
|
<p class="caption narrow bad">☹ <span>@narrow-medium(inline)</span></p>
|
|
|
|
<p class="example normal medium">@example-text(inline)</p>
|
|
<p class="caption normal good">☺ <span>@normal-medium(inline)</span></p>
|
|
|
|
<p class="example wide medium">@example-text(inline)</p>
|
|
<p class="caption wide bad">☹ <span>@wide-medium(inline)</span></p>
|
|
|
|
<p class="example narrow loose">@example-text(inline)</p>
|
|
<p class="caption narrow ugly">☹ <span>@narrow-loose(inline)</span></p>
|
|
|
|
<p class="example normal loose">@example-text(inline)</p>
|
|
<p class="caption normal bad">☹ <span>@normal-loose(inline)</span></p>
|
|
|
|
<p class="example wide loose">@example-text(inline)</p>
|
|
<p class="caption wide good">☺ <span>@wide-loose(inline)</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|