Add paper stack effect

parent aa4d9167
Pipeline #142158972 passed with stage
in 4 minutes and 50 seconds
......@@ -59,17 +59,17 @@ Simply add `\balance` in the first column of the last page, and you're done! Som
<div class="container figure">
<div class="row">
<div class="col-md-4">
<div><img src="/assets/nothing.png" alt="Without balance" class="img-rounded" style="border: 1px solid gray;"/></div>
<div class="papers"><img src="/assets/nothing.png" alt="Without balance" class="img-rounded" style="border: 1px solid gray;"/></div>
<div class="caption">No column balancing.</div>
</div>
<div class="col-md-4">
<div><img src="/assets/balance.png" alt="With flushend" class="img-rounded" style="border: 1px solid gray;" /></div>
<div class="papers"><img src="/assets/balance.png" alt="With flushend" class="img-rounded" style="border: 1px solid gray;" /></div>
<div class="caption">With <code>balance</code>.</div>
</div>
<div class="col-md-4">
<div><img src="/assets/flushend.png" alt="With flushend" class="img-rounded" style="border: 1px solid gray;" /></div>
<div class="papers"><img src="/assets/flushend.png" alt="With flushend" class="img-rounded" style="border: 1px solid gray;" /></div>
<div class="caption">With <code>flushend</code>.</div>
</div>
</div>
......@@ -164,11 +164,11 @@ Text typeset in LaTeX already looks great, but can be made even nicer with `micr
<div class="container figure">
<div class="row justify-content-md-center">
<div class="col-md-4">
<div><img src="/assets/withoutmicrotype-0.png" alt="Without microtype" class="img-rounded" style="border: 1px solid gray;"/></div>
<div class="papers"><img src="/assets/withoutmicrotype-0.png" alt="Without microtype" class="img-rounded" style="border: 1px solid gray;"/></div>
<div class="caption">Without <code>microtype</code>.</div>
</div>
<div class="col-md-4">
<div><img src="/assets/withmicrotype-0.png" alt="With microtype" class="img-rounded" style="border: 1px solid gray;" /></div>
<div class="papers"><img src="/assets/withmicrotype-0.png" alt="With microtype" class="img-rounded" style="border: 1px solid gray;" /></div>
<div class="caption">With <code>microtype</code>.</div>
</div>
</div>
......@@ -200,19 +200,19 @@ See [Publication ready figures]({% post_url 2019-09-29-publication_ready_figures
<div class="container figure">
<div class="row justify-content-md-center">
<div class="col-md-3">
<div><img src="/assets/withoutsavetrees.png" alt="Without microtype" class="img-rounded" style="border: 1px solid gray;"/></div>
<div class="papers"><img src="/assets/withoutsavetrees.png" alt="Without microtype" class="img-rounded" style="border: 1px solid gray;"/></div>
<div class="caption">Without <code>savetrees</code>.</div>
</div>
<div class="col-md-3">
<div><img src="/assets/subtlesavetrees.png" alt="With microtype" class="img-rounded" style="border: 1px solid gray;" /></div>
<div class="papers"><img src="/assets/subtlesavetrees.png" alt="With microtype" class="img-rounded" style="border: 1px solid gray;" /></div>
<div class="caption">With subtle <code>savetrees</code>.</div>
</div>
<div class="col-md-3">
<div><img src="/assets/moderatesavetrees.png" alt="Without microtype" class="img-rounded" style="border: 1px solid gray;"/></div>
<div class="papers"><img src="/assets/moderatesavetrees.png" alt="Without microtype" class="img-rounded" style="border: 1px solid gray;"/></div>
<div class="caption">With moderate <code>savetrees</code>.</div>
</div>
<div class="col-md-3">
<div><img src="/assets/extremesavetrees.png" alt="With microtype" class="img-rounded" style="border: 1px solid gray;" /></div>
<div class="papers"><img src="/assets/extremesavetrees.png" alt="With microtype" class="img-rounded" style="border: 1px solid gray;" /></div>
<div class="caption">With extreme <code>savetrees</code>.</div>
</div>
</div>
......
......@@ -20,6 +20,41 @@
shape-outside: circle();
}
.papers, .papers:before, .papers:after
{
background-color: #fff;
border: 1px solid #ccc;
}
.papers
{
position: relative;
}
.papers:before, .papers:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(2.5deg);
-o-transform: rotate(2.5deg);
transform: rotateZ(2.5deg);
z-index: -1;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
.papers:after
{
-webkit-transform: rotateZ(-2.5deg);
-o-transform: rotate(-2.5deg);
transform: rotateZ(-2.5deg);
}
h1.post-title, h1, h2, h3 {
font-family: 'Crimson Text', eb garamond,serif;
font-weight: 600;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment