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

  • Select an option

    Learn more about clone URLs
  • Save cormacrelf/9ca29bd720d7043d64d5cd5fab5d3e03 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cormacrelf/9ca29bd720d7043d64d5cd5fab5d3e03 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cormacrelf revised this gist Oct 25, 2019. 1 changed file with 24 additions and 5 deletions.
    29 changes: 24 additions & 5 deletions test-csl-display-attributes.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,29 @@
    <html><head>
    <style>
    .csl-bib-body { line-height: 1.35; display: grid;}
    .csl-block { 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;}
    .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">
  2. cormacrelf revised this gist Dec 13, 2018. 1 changed file with 0 additions and 5 deletions.
    5 changes: 0 additions & 5 deletions test-csl-display-attributes.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,13 @@
    <html><head>
    <style>
    .csl-bib-body { line-height: 1.35; display: grid;}
    .csl-entry { display: contents;}
    .csl-block { 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-entry">
    <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>
    @@ -30,9 +28,7 @@
    <div class="csl-block">
    left-margin alone
    </div>
    </div>

    <div class="csl-entry">
    <div class="csl-block">
    Aristotle
    </div>
    @@ -57,7 +53,6 @@
    <div class="csl-block">
    left-margin alone
    </div>
    </div>

    </div>

  3. cormacrelf revised this gist Dec 13, 2018. 1 changed file with 63 additions and 69 deletions.
    132 changes: 63 additions & 69 deletions test-csl-display-attributes.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,71 +1,65 @@
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    .csl-bib-body { line-height: 1.35; }
    .csl-entry { clear: left; }
    .csl-block { }
    .csl-left-margin { clear: left; float: left; width: 100px; }
    .csl-right-inline { margin-left: 100px; }
    .csl-indent { margin-left: 3em; }
    </style>
    </head>
    <body>
    <div class="csl-bib-body">
    <div class="csl-entry">
    <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">
    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-right-inline">
    right-inline alone
    </div>
    <div class="csl-left-margin">
    left-margin alone
    </div>
    </div>
    <html><head>
    <style>
    .csl-bib-body { line-height: 1.35; display: grid;}
    .csl-entry { display: contents;}
    .csl-block { 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-entry">
    <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>

    <div class="csl-entry">
    <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-right-inline">
    right-inline alone
    </div>
    <div class="csl-left-margin">
    left-margin alone
    </div>
    </div>
    <div class="csl-entry">
    <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>

    </div>
    </body>
    </html>
    </div>


    </body></html>
  4. nickbart1980 created this gist Apr 9, 2016.
    71 changes: 71 additions & 0 deletions test-csl-display-attributes.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    .csl-bib-body { line-height: 1.35; }
    .csl-entry { clear: left; }
    .csl-block { }
    .csl-left-margin { clear: left; float: left; width: 100px; }
    .csl-right-inline { margin-left: 100px; }
    .csl-indent { margin-left: 3em; }
    </style>
    </head>
    <body>
    <div class="csl-bib-body">
    <div class="csl-entry">
    <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">
    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-right-inline">
    right-inline alone
    </div>
    <div class="csl-left-margin">
    left-margin alone
    </div>
    </div>

    <div class="csl-entry">
    <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-right-inline">
    right-inline alone
    </div>
    <div class="csl-left-margin">
    left-margin alone
    </div>
    </div>

    </div>
    </body>
    </html>