Skip to content
Snippets Groups Projects
Unverified Commit 7a895553 authored by Martin Isaksson's avatar Martin Isaksson
Browse files

Add paper stack effect

parent aa4d9167
No related branches found
No related tags found
No related merge requests found
Pipeline #142158972 passed
......@@ -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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment