80 lines
2.8 KiB
HTML
80 lines
2.8 KiB
HTML
<div class="layout-wide-content">
|
|
<div class="layout-content">
|
|
<h2>@title(inline)</h2>
|
|
|
|
<style>
|
|
div.micro-typography {
|
|
display: grid;
|
|
margin-top: 10vh;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-column-gap: 5vh;
|
|
}
|
|
div.micro-typography .example {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 2vh;
|
|
font-family: 'EB Garamond';
|
|
}
|
|
div.micro-typography .caption {
|
|
font-size: .45em;
|
|
margin: .5em 0 5vh;
|
|
padding: .4em;
|
|
line-height: 2em;
|
|
border-top: .1em solid currentColor;
|
|
white-space: nowrap;
|
|
}
|
|
div.micro-typography .caption::first-letter {
|
|
font-size: 2em;
|
|
vertical-align: top;
|
|
}
|
|
div.micro-typography .narrow {
|
|
grid-column: 1 / span 1;
|
|
}
|
|
div.micro-typography .normal {
|
|
grid-column: 2 / span 1;
|
|
}
|
|
div.micro-typography .wide {
|
|
grid-column: 3 / span 1;
|
|
}
|
|
div.micro-typography .example1 {
|
|
grid-row: 1;
|
|
}
|
|
div.micro-typography .example2 {
|
|
grid-row: 3;
|
|
}
|
|
div.micro-typography .good {
|
|
color: #006600;
|
|
background: #ddffcc;
|
|
}
|
|
div.micro-typography .default {
|
|
color: #806000;
|
|
background: #fff2cc;
|
|
}
|
|
div.micro-typography .ugly {
|
|
color: #660000;
|
|
background: #ffddcc;
|
|
}
|
|
</style>
|
|
<div class="micro-typography">
|
|
<p class="example example1"><img src="svg/chapter-01/schriftschnitte-slanted.svg" style="height: 10vh" /></p>
|
|
<p class="caption ugly">☹ @example1a(inline)</p>
|
|
|
|
<p class="example example1"><img src="svg/chapter-01/schriftschnitte-roman.svg" style="height: 10vh" /></p>
|
|
<p class="caption good">☺ @example1b(inline)</p>
|
|
|
|
<p class="example example1"><img src="svg/chapter-01/schriftschnitte-italic.svg" style="height: 10vh" /></p>
|
|
<p class="caption good">☺ @example1c(inline)</p>
|
|
|
|
<p class="example example2"><img src="svg/chapter-01/schriftgrade-vergroessert.svg" style="height: 12vh" /></p>
|
|
<p class="caption ugly">☹ @example2a(inline)</p>
|
|
|
|
<p class="example example2"><img src="svg/chapter-01/schriftgrade-korrekt.svg" style="height: 12vh" /></p>
|
|
<p class="caption good">☺ @example2b(inline)</p>
|
|
|
|
<p class="example example2"><img src="svg/chapter-01/schriftgrade-verkleinert.svg" style="height: 12vh" /></p>
|
|
<p class="caption ugly">☹ @example2c(inline)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|