Add paper stack effect

_posts/2020-05-03-top-ten-latex-packages.md

@@ -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>

assets/main.scss

@@ -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;