Skip to content

Instantly share code, notes, and snippets.

@cormacrelf

cormacrelf/test-csl-display-attributes.html

Forked from njbart/test-csl-display-attributes.html
Last active October 25, 2019 01:31
Show Gist options
  • Save cormacrelf/9ca29bd720d7043d64d5cd5fab5d3e03 to your computer and use it in GitHub Desktop.
Save cormacrelf/9ca29bd720d7043d64d5cd5fab5d3e03 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test-csl-display-attributes.html
<html><head>
<style>
.csl-bib-body {
line-height: 1.35;
display: grid;
/* left column as wide as it needs (but may shrink at small sizes);
right column fills the rest of the space. */
grid-template-columns: max-content 1fr;
}
.csl-block {
/* spans two columns, so it looks like a regular div */
grid-column: 1/span 2;
background: lightpink;
}
.csl-left-margin {
background: aliceblue;
padding-right: 1em;
}
.csl-right-inline {
background: lightgoldenrodyellow;
}
.csl-indent {
margin-left: 2em;
grid-column: 1/span 2;
background: lightsalmon;
}
</style>
</head><body>
<div class="csl-bib-body">
<div class="csl-block">
block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block
</div>
<div class="csl-left-margin">left-margin</div>
<div class="csl-right-inline">
right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline
</div>
<div class="csl-left-margin">longer left-margin</div>
<div class="csl-right-inline">
right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline
</div>
<div class="csl-indent">
indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent
</div>
<div class="csl-block">
right-inline alone
(rendered as block)</div>
<div class="csl-block">
left-margin alone
</div>
<div class="csl-block">
Aristotle
</div>
<div class="csl-left-margin">
1984
</div>
<div class="csl-right-inline">
<i>The Complete Works of Aristotle: The Revised Oxford Translation.</i> Jonathan Barnes, ed. Bollingen Series, 2. Princeton, NJ: Princeton Univ. Press.
</div>
<div class="csl-left-margin">
1999
</div>
<div class="csl-right-inline">
right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline right-inline
</div>
<div class="csl-indent">
indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent indent
</div>
<div class="csl-block">
right-inline alone
</div>
<div class="csl-block">
left-margin alone
</div>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment